chore: [F36-889] full height button group divider

contentful · Aug 15, 2023 · 137c6cf · 137c6cf
1 parent 903facb
commit 137c6cf
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 66 deletions.
diff --git a/.changeset/grumpy-bags-complain.md b/.changeset/grumpy-bags-complain.md
@@ -0,0 +1,5 @@
+---
+'@contentful/f36-button': minor
+---
+
+chore: [F36-889] full height button group divider
diff --git a/packages/components/button/src/ButtonGroup/ButtonGroup.styles.ts b/packages/components/button/src/ButtonGroup/ButtonGroup.styles.ts
@@ -1,61 +1,42 @@
 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
-import type { GetStyleArguments } from './types';
-import type { CSSObject } from '@emotion/serialize';
 
-const getGroupContentStyle = ({ withDivider }: GetStyleArguments) => {
-  const dividerStyle = getDividerStyle(withDivider);
+export default function getButtonGroupStyles() {
+  const divider = css({
+    marginLeft: '-1px',
+    zIndex: tokens.zIndexDefault + 1,
+    width: '1px',
+    opacity: '20%',
+    backgroundColor: tokens.colorWhite,
+  });
 
   return {
-    borderRadius: '0 !important',
-    marginRight: '-1px',
-    zIndex: tokens.zIndexDefault,
-    '&:first-child': {
-      borderBottomLeftRadius: `${tokens.borderRadiusMedium} !important`,
-      borderTopLeftRadius: `${tokens.borderRadiusMedium} !important`,
-    },
-    '&:last-child': {
-      borderBottomRightRadius: `${tokens.borderRadiusMedium} !important`,
-      borderTopRightRadius: `${tokens.borderRadiusMedium} !important`,
-      marginRight: 0,
-    },
-    '&:focus': {
-      zIndex: tokens.zIndexDefault + 1,
-    },
-    ...dividerStyle,
-  };
-};
-
-const getDividerStyle = (withDivider: boolean): CSSObject => {
-  if (!withDivider) return {};
-  return {
-    position: 'relative',
-    '&:before': {
-      content: '""',
-      width: '1px',
-      opacity: '20%',
-      backgroundColor: tokens.colorWhite,
-      height: '60%',
-      left: '0',
-      position: 'absolute',
-    },
-    '&:first-child, &:focus': {
-      '&:before': {
-        display: 'none',
+    divider,
+    buttonGroup: css({
+      display: 'inline-flex',
+      position: 'relative',
+      '&:hover, &:has(:focus-visible)': {
+        [`> .${divider}`]: {
+          opacity: '0',
+        },
       },
-    },
-    '&:hover, &:hover + &': {
-      '&:before': {
-        display: 'none',
+    }),
+    groupContent: css({
+      borderRadius: '0 !important',
+      marginRight: '-1px',
+      zIndex: tokens.zIndexDefault,
+      '&:first-child': {
+        borderBottomLeftRadius: `${tokens.borderRadiusMedium} !important`,
+        borderTopLeftRadius: `${tokens.borderRadiusMedium} !important`,
       },
-    },
+      '&:last-child': {
+        borderBottomRightRadius: `${tokens.borderRadiusMedium} !important`,
+        borderTopRightRadius: `${tokens.borderRadiusMedium} !important`,
+        marginRight: 0,
+      },
+      '&:focus': {
+        zIndex: tokens.zIndexDefault + 1,
+      },
+    }),
   };
-};
-
-export default ({ withDivider }: GetStyleArguments) => ({
-  buttonGroup: css({
-    display: 'inline-flex',
-    position: 'relative',
-  }),
-  groupContent: css(getGroupContentStyle({ withDivider })),
-});
+}
diff --git a/packages/components/button/src/ButtonGroup/ButtonGroup.tsx b/packages/components/button/src/ButtonGroup/ButtonGroup.tsx
@@ -16,7 +16,7 @@ function _ButtonGroup(
     className,
     spacing,
   } = props;
-  const styles = getStyles({ withDivider });
+  const styles = getStyles();
 
   if (variant === 'spaced') {
     return (
@@ -39,17 +39,24 @@ function _ButtonGroup(
       ref={ref}
       className={cx(styles.buttonGroup, className)}
     >
-      {React.Children.map(children, (child, key) => {
+      {React.Children.map(children, (child, index) => {
         if (!child) {
           return null;
         }
-        return React.cloneElement(child as React.ReactElement, {
-          key,
-          className: cx(
-            styles.groupContent,
-            (child as React.ReactElement).props.className,
-          ),
-        });
+        return (
+          <>
+            {withDivider && index !== 0 ? (
+              <div className={styles.divider} />
+            ) : null}
+            {React.cloneElement(child as React.ReactElement, {
+              key: index,
+              className: cx(
+                styles.groupContent,
+                (child as React.ReactElement).props.className,
+              ),
+            })}
+          </>
+        );
       })}
     </Box>
   );

diff --git a/packages/components/button/src/ButtonGroup/types.ts b/packages/components/button/src/ButtonGroup/types.ts
@@ -53,7 +53,3 @@ export type ButtonGroupProps =
   | SpacedButtonGroupProps
   | MergedButtonGroupProps
   | CollapsedButtonGroupProps;
-
-export type GetStyleArguments = {
-  withDivider: boolean;
-};