feat(Button): add Selected logic and styles

Ref: #issue/BubblesDS-5
leemonade · Oct 25, 2023 · 54cba0d · 54cba0d
1 parent 3243b8a
commit 54cba0d
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 56 deletions.
diff --git a/merged_tokens.json b/merged_tokens.json
@@ -1145,7 +1145,7 @@
               "value": {
                 "fontFamily": "{core.font.family.main}",
                 "fontWeight": "{core.font.weight.regular}",
-                "lineHeight": "{core.font.lineHeight.300}px",
+                "lineHeight": "{core.font.lineHeight.200}",
                 "fontSize": "{core.font.size.75}px"
               },
               "type": "typography"
@@ -1154,7 +1154,7 @@
               "value": {
                 "fontFamily": "{core.font.family.main}",
                 "fontWeight": "{core.font.weight.medium}",
-                "lineHeight": "{core.font.lineHeight.300}px",
+                "lineHeight": "{core.font.lineHeight.200}",
                 "fontSize": "{core.font.size.75}px"
               },
               "type": "typography"
@@ -1163,7 +1163,7 @@
               "value": {
                 "fontFamily": "{core.font.family.main}",
                 "fontWeight": "{core.font.weight.semiBold}",
-                "lineHeight": "{core.font.lineHeight.300}px",
+                "lineHeight": "{core.font.lineHeight.200}",
                 "fontSize": "{core.font.size.75}px"
               },
               "type": "typography"
@@ -1502,6 +1502,12 @@
               "value": "{core.color.info.100}",
               "type": "color"
             }
+          },
+          "tertiary": {
+            "default": {
+              "value": "{core.color.tertiary.100}",
+              "type": "color"
+            }
           }
         }
       },
@@ -1702,6 +1708,12 @@
               "value": "{core.color.info.100}",
               "type": "color"
             }
+          },
+          "tertiary": {
+            "default": {
+              "value": "{core.color.tertiary.100}",
+              "type": "color"
+            }
           }
         }
       },
@@ -2076,6 +2088,10 @@
               "value": "{global.background.color.primary.default}",
               "type": "color"
             },
+            "selected": {
+              "value": "{global.background.color.primary.muted}",
+              "type": "color"
+            },
             "pressed": {
               "value": "{global.background.color.primary.emphasis}",
               "type": "color"
@@ -2113,7 +2129,7 @@
               "type": "color"
             },
             "pressed": {
-              "value": "{global.background.color.primary.muted}",
+              "value": "{global.background.color.primary.emphasis}",
               "type": "color"
             }
           },
@@ -2894,13 +2910,13 @@
       },
       "spacing": {
         "padding": {
-          "md": {
-            "value": "{global.spacing.padding.1xsm}",
-            "type": "spacing"
-          },
           "sm": {
             "value": "{global.spacing.padding.2xsm}",
             "type": "spacing"
+          },
+          "md": {
+            "value": "{global.spacing.padding.1xsm}",
+            "type": "spacing"
           }
         }
       },
@@ -3325,6 +3341,14 @@
       },
       "content": {
         "color": {
+          "text": {
+            "value": "{global.content.color.text.default}",
+            "type": "color"
+          },
+          "selected": {
+            "value": "{global.content.color.tertiary.default}",
+            "type": "color"
+          },
           "default": {
             "value": "{global.content.color.transparent}",
             "type": "color"
@@ -3336,10 +3360,6 @@
           "hover": {
             "value": "{global.content.color.text.muted}",
             "type": "color"
-          },
-          "selected": {
-            "value": "{global.content.color.primary.default}",
-            "type": "color"
           }
         }
       },
@@ -3378,11 +3398,11 @@
             "type": "color"
           },
           "hover": {
-            "value": "{global.border.color.primary.muted}",
+            "value": "{global.border.color.tertiary.default}",
             "type": "color"
           },
           "selected": {
-            "value": "{global.border.color.primary.default}",
+            "value": "{global.border.color.tertiary.default}",
             "type": "color"
           }
         }
@@ -3402,6 +3422,27 @@
             "type": "spacing"
           }
         }
+      },
+      "shadow": {
+        "hover": {
+          "value": {
+            "x": "0",
+            "y": "0",
+            "blur": "2",
+            "spread": "0",
+            "color": "rgba({core.color.tertiary.100}, 0.80)",
+            "type": "dropShadow"
+          },
+          "type": "boxShadow"
+        }
+      },
+      "label": {
+        "content": {
+          "typo": {
+            "value": "{global.content.typo.body.sm}",
+            "type": "typography"
+          }
+        }
       }
     },
     "checkbox": {
@@ -4356,10 +4397,6 @@
       },
       "border": {
         "color": {
-          "default": {
-            "value": "{global.border.color.transparent}",
-            "type": "color"
-          },
           "hover": {
             "value": "{global.border.color.line.subtle}",
             "type": "color"
@@ -4368,10 +4405,14 @@
             "value": "{global.border.color.primary.default}",
             "type": "color"
           },
-          "down-copy": {
+          "content": {
             "value": "{global.border.color.line.subtle}",
             "type": "color"
           },
+          "default": {
+            "value": "{global.border.color.transparent}",
+            "type": "color"
+          },
           "down": {
             "value": "{global.border.color.primary.default}",
             "type": "color"
@@ -4404,6 +4445,10 @@
             "value": "{global.background.color.primary.subtle}",
             "type": "color"
           },
+          "selected": {
+            "value": "{global.background.color.transparent}",
+            "type": "color"
+          },
           "down": {
             "value": "{global.background.color.transparent}",
             "type": "color"
@@ -6387,6 +6432,10 @@
           }
         },
         "gap": {
+          "sm": {
+            "value": "{global.spacing.gap.sm}",
+            "type": "spacing"
+          },
           "md": {
             "value": "{global.spacing.gap.md}",
             "type": "spacing"

diff --git a/packages/components/src/form/ActionButton/ActionButton.styles.js b/packages/components/src/form/ActionButton/ActionButton.styles.js
@@ -1,5 +1,6 @@
+/* eslint-disable import/prefer-default-export */
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getFocusDefaultBorder } from './../../theme.mixins';
+import { pxToRem, getFocusDefaultBorder } from '../../theme.mixins';
 
 // These are really the styles when it is hovered, but they are applied when `active` prop is `true`
 const getActiveStyles = (theme, color) => {
@@ -12,12 +13,10 @@ const getActiveStyles = (theme, color) => {
   };
   return activeStyles[color];
 };
-const getSizes = (size, padding) => {
-  return {
-    height: 'unset',
-    padding: padding[size],
-  };
-};
+const getSizes = (size, padding) => ({
+  height: 'unset',
+  padding: padding[size],
+});
 
 const getVariant = (color, theme) => {
   const buttonActionTheme = theme.other.buttonAction;
@@ -46,7 +45,6 @@ export const ActionButtonStyles = createStyles(
   (theme, { size, color, iconOnly, radius, active }) => {
     const actionButtonTheme = theme.other.buttonAction;
     const iconSize = size === 'md' ? 'lg' : 'md';
-    console.log(theme);
 
     const isActive = active ? getActiveStyles(actionButtonTheme, color) : {};
 

diff --git a/packages/components/src/form/Button/Button.constants.js b/packages/components/src/form/Button/Button.constants.js
@@ -17,6 +17,7 @@ export const BUTTON_DEFAULT_PROPS = {
   disabled: false,
   textAlign: BUTTON_TEXT_ALIGN[0],
   useAria: true,
+  isSelected: false,
 };
 
 export const BUTTON_PROP_TYPES = {
@@ -46,4 +47,6 @@ export const BUTTON_PROP_TYPES = {
   useAria: PropTypes.bool,
   /** Aria label for button */
   ariaLabel: PropTypes.string,
+  /** Controls if Button is selected */
+  isSelected: PropTypes.bool,
 };
diff --git a/packages/components/src/form/Button/Button.js b/packages/components/src/form/Button/Button.js
@@ -31,6 +31,7 @@ const Button = forwardRef(
       useAria,
       ariaLabel,
       textAlign,
+      isSelected,
       compact, // UNUSED
       gradient, // UNUSED
       radius, // UNUSED
@@ -58,6 +59,7 @@ const Button = forwardRef(
         styles,
         hasLeftIcon,
         hasRightIcon,
+        isSelected,
       },
       { name: 'Button' }
     );

diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js
@@ -11,6 +11,15 @@ const getSizes = (size, theme) => {
   };
 };
 
+const getIsSelected = (isSelected, theme) => {
+  if (!isSelected) return;
+  const buttonStyles = theme.other.button;
+  return {
+    backgroundColor: buttonStyles.background.color.primary.selected,
+    borderRadius: `${buttonStyles.border.radius.md} ${buttonStyles.border.radius.md} 0 0 !important`,
+  };
+};
+
 const getPaddingIfIcon = (hasLeftIcon, hasRightIcon, theme) => {
   if (!hasLeftIcon && !hasRightIcon) return;
   const buttonPadding = theme.other.button.spacing.padding;
@@ -144,7 +153,18 @@ const getVariant = (variant, theme, color) => {
 export const ButtonStyles = createStyles(
   (
     theme,
-    { size, color, variant, fullWidth, styles, textAlign, disabled, hasLeftIcon, hasRightIcon }
+    {
+      size,
+      color,
+      variant,
+      fullWidth,
+      styles,
+      textAlign,
+      disabled,
+      hasLeftIcon,
+      hasRightIcon,
+      isSelected,
+    }
   ) => {
     const currentVariant = getVariant(variant, theme, color);
     const buttonTheme = theme.other.button;
@@ -182,6 +202,7 @@ export const ButtonStyles = createStyles(
         ...getVariant(variant, theme, color),
         ...styles,
         ...getPaddingIfIcon(hasLeftIcon, hasRightIcon, theme),
+        ...getIsSelected(isSelected, theme),
         '&[data-loading]': {
           // borderColor: 'transparent',
           svg: {