feat(Button): Added truncated feature to Buttons

leemonade · Sep 24, 2024 · c713e1e · c713e1e
1 parent b906b08
commit c713e1e
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/packages/components/src/form/Button/Button.constants.js b/packages/components/src/form/Button/Button.constants.js
@@ -18,6 +18,7 @@ export const BUTTON_DEFAULT_PROPS = {
   textAlign: BUTTON_TEXT_ALIGN[0],
   useAria: true,
   isSelected: false,
+  truncated: false,
 };
 
 export const BUTTON_PROP_TYPES = {
@@ -49,4 +50,6 @@ export const BUTTON_PROP_TYPES = {
   ariaLabel: PropTypes.string,
   /** Controls if Button is selected */
   isSelected: PropTypes.bool,
+  /** Controls if Button is truncated */
+  truncated: PropTypes.bool,
 };
diff --git a/packages/components/src/form/Button/Button.js b/packages/components/src/form/Button/Button.js
@@ -35,6 +35,7 @@ const Button = forwardRef(
       compact, // UNUSED
       gradient, // UNUSED
       radius, // UNUSED
+      truncated,
       ...props
     },
     ref,
@@ -62,6 +63,7 @@ const Button = forwardRef(
         isSelected,
         onlyIcon: !children,
         iconSize: props.iconSize,
+        truncated,
       },
       { name: 'Button' },
     );

diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js
@@ -211,6 +211,7 @@ export const ButtonStyles = createStyles(
       isSelected,
       onlyIcon,
       iconSize,
+      truncated,
     },
   ) => {
     const currentVariant = getVariant(variant, theme, color);
@@ -242,6 +243,17 @@ export const ButtonStyles = createStyles(
       };
     }
 
+    let truncateProps = {};
+    if (truncated) {
+      truncateProps = {
+        display: 'inline-block',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        width: '100%',
+      };
+    }
+
     return {
       root: {
         border: `${buttonTheme.border.width} solid`,
@@ -285,6 +297,7 @@ export const ButtonStyles = createStyles(
       label: {
         ...buttonTheme.content.typo,
         fontSize: variant === 'linkInline' ? 'inherit' : null,
+        ...truncateProps,
       },
     };
   },

diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
@@ -1544,7 +1544,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff26",
+          "color": "#ffffff",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1625,8 +1625,17 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff26",
-            "type": "color"
+            "value": "#ffffff",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.15",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#F1FFBD",
@@ -5286,12 +5295,30 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4d535866",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "hover": {
-            "value": "#4d5358b3",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.7",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#4D5358",