Merge 841ae35 into da0f48b

primer · Sep 20, 2024 · ac2083a · ac2083a
2 parents da0f48b + 841ae35
commit ac2083a
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 47 deletions.
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.module.css b/packages/react/src/ButtonGroup/ButtonGroup.module.css
@@ -0,0 +1,58 @@
+.ButtonGroup {
+  display: inline-flex;
+  vertical-align: middle;
+  isolation: isolate;
+
+  & > *:not([data-loading-wrapper]) {
+    margin-inline-end: -1px;
+    position: relative;
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--borderRadius-medium);
+      border-bottom-left-radius: var(--borderRadius-medium);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--borderRadius-medium);
+      border-bottom-right-radius: var(--borderRadius-medium);
+    }
+
+    &:focus,
+    &:active,
+    &:hover {
+      z-index: 1;
+    }
+  }
+
+  /* if child is loading button */
+  [data-loading-wrapper] {
+    &:first-child {
+      button,
+      a {
+        border-top-left-radius: var(--borderRadius-medium);
+        border-bottom-left-radius: var(--borderRadius-medium);
+      }
+    }
+
+    &:last-child {
+      button,
+      a {
+        border-top-right-radius: var(--borderRadius-medium);
+        border-bottom-right-radius: var(--borderRadius-medium);
+      }
+    }
+  }
+
+  [data-loading-wrapper] > * {
+    margin-inline-end: -1px;
+    position: relative;
+    border-radius: 0;
+
+    &:focus,
+    &:active,
+    &:hover {
+      z-index: 1;
+    }
+  }
+}
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -1,68 +1,93 @@
 import styled from 'styled-components'
+import React from 'react'
 import {get} from '../constants'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
+import classes from './ButtonGroup.module.css'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {clsx} from 'clsx'
+import {useFeatureFlag} from '../FeatureFlags'
 
-const ButtonGroup = styled.div`
-  display: inline-flex;
-  vertical-align: middle;
-  isolation: isolate;
+const StyledButtonGroup = toggleStyledComponent(
+  'primer_react_css_modules_team',
+  styled.div`
+    display: inline-flex;
+    vertical-align: middle;
+    isolation: isolate;
 
-  && > *:not([data-loading-wrapper]) {
-    margin-inline-end: -1px;
-    position: relative;
-    border-radius: 0;
+    && > *:not([data-loading-wrapper]) {
+      margin-inline-end: -1px;
+      position: relative;
+      border-radius: 0;
 
-    :first-child {
-      border-top-left-radius: ${get('radii.2')};
-      border-bottom-left-radius: ${get('radii.2')};
-    }
-
-    :last-child {
-      border-top-right-radius: ${get('radii.2')};
-      border-bottom-right-radius: ${get('radii.2')};
-    }
-
-    :focus,
-    :active,
-    :hover {
-      z-index: 1;
-    }
-  }
-
-  // if child is loading button
-  [data-loading-wrapper] {
-    :first-child {
-      button,
-      a {
+      :first-child {
         border-top-left-radius: ${get('radii.2')};
         border-bottom-left-radius: ${get('radii.2')};
       }
-    }
 
-    :last-child {
-      button,
-      a {
+      :last-child {
         border-top-right-radius: ${get('radii.2')};
         border-bottom-right-radius: ${get('radii.2')};
       }
+
+      :focus,
+      :active,
+      :hover {
+        z-index: 1;
+      }
     }
-  }
 
-  [data-loading-wrapper] > * {
-    margin-inline-end: -1px;
-    position: relative;
-    border-radius: 0;
+    // if child is loading button
+    [data-loading-wrapper] {
+      :first-child {
+        button,
+        a {
+          border-top-left-radius: ${get('radii.2')};
+          border-bottom-left-radius: ${get('radii.2')};
+        }
+      }
 
-    :focus,
-    :active,
-    :hover {
-      z-index: 1;
+      :last-child {
+        button,
+        a {
+          border-top-right-radius: ${get('radii.2')};
+          border-bottom-right-radius: ${get('radii.2')};
+        }
+      }
+    }
+
+    [data-loading-wrapper] > * {
+      margin-inline-end: -1px;
+      position: relative;
+      border-radius: 0;
+
+      :focus,
+      :active,
+      :hover {
+        z-index: 1;
+      }
     }
-  }
 
-  ${sx};
-`
+    ${sx};
+  `,
+)
 
-export type ButtonGroupProps = ComponentProps<typeof ButtonGroup>
+export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup>
+const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function ButtonGroup(
+  {children, className, ...rest},
+  forwardRef,
+) {
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  return (
+    <StyledButtonGroup
+      ref={forwardRef}
+      className={clsx(className, {
+        [classes.ButtonGroup]: enabled,
+      })}
+      {...rest}
+    >
+      {children}
+    </StyledButtonGroup>
+  )
+})
 export default ButtonGroup