From c713e1e101efa92567769529ba3f6d0723965abc Mon Sep 17 00:00:00 2001
From: Johan Sosa <sosa.johan@gmail.com>
Date: Tue, 24 Sep 2024 21:57:00 +0200
Subject: [PATCH] feat(Button): Added `truncated` feature to Buttons

---
 .../src/form/Button/Button.constants.js       |  3 ++
 packages/components/src/form/Button/Button.js |  2 +
 .../src/form/Button/Button.styles.js          | 13 ++++++
 packages/components/src/tokens.compiled.js    | 41 +++++++++++++++----
 4 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/form/Button/Button.constants.js b/packages/components/src/form/Button/Button.constants.js
index 7a00e9130..97e58e67a 100644
--- 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
index d842a3968..221859dc1 100644
--- 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
index 0e292b8b6..3b0b3a36a 100644
--- 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
index 8988d6ada..759838e77 100644
--- 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",