Added Button Shortcut Style Enhancements + Additional Storybook Tests (#8947)

Resolves Issue #4871 (or enhances)

**Additions**
- **Customized Styling for Button Shortcuts:** Previously, button
shortcuts/separator styling was standardized. We added customized
styling for optional button shortcuts based on button accents and
variants.
- **Enhanced Storybook Catalogs:** We modified ShortcutCatalog in
Button.stories.tsx to display button shortcuts across styles and various
inputs.

![Screenshot 2024-12-07 at 9 16
35 PM](https://github.com/user-attachments/assets/f56ec269-d5d4-45d7-b490-e5632371f9b2)
![Screenshot 2024-12-07 at 9 16
30 PM](https://github.com/user-attachments/assets/04c3b7a9-a0bb-49fc-ae30-6e488f9658dd)
![Screenshot 2024-12-07 at 9 16
22 PM](https://github.com/user-attachments/assets/a22847c2-f5da-4a10-9a0d-f07389e1751e)

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-ui/src/input/button/components/Button.tsx

@@ -360,17 +360,43 @@ const StyledSoonPill = styled(Pill)`
   margin-left: auto;
 `;
 
-const StyledShortcutLabel = styled.div`
+const StyledSeparator = styled.div<{
-  color: ${({ theme }) => theme.font.color.light};
+  buttonSize: ButtonSize;
-  font-weight: ${({ theme }) => theme.font.weight.medium};
+  accent: ButtonAccent;
+}>`
+  background: ${({ theme, accent }) => {
+    switch (accent) {
+      case 'blue':
+        return theme.color.blue30;
+      case 'danger':
+        return theme.border.color.danger;
+      default:
+        return theme.font.color.light;
+    }
+  }};
+  height: ${({ theme, buttonSize }) =>
+    theme.spacing(buttonSize === 'small' ? 2 : 4)};
+  margin: 0;
+  width: 1px;
 `;
 
-const StyledSeparator = styled.div<{ buttonSize: ButtonSize }>`
+const StyledShortcutLabel = styled.div<{
-  background: ${({ theme }) => theme.border.color.light};
+  variant: ButtonVariant;
-  height: ${({ theme, buttonSize }) =>
+  accent: ButtonAccent;
-    theme.spacing(buttonSize === 'small' ? 3 : 4)};
+}>`
-  margin: 0 ${({ theme }) => theme.spacing(1)};
+  color: ${({ theme, variant, accent }) => {
-  width: 1px;
+    switch (accent) {
+      case 'blue':
+        return theme.color.blue30;
+      case 'danger':
+        return variant === 'primary'
+          ? theme.border.color.danger
+          : theme.color.red40;
+      default:
+        return theme.font.color.light;
+    }
+  }};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
 export const Button = ({
@@ -419,8 +445,10 @@ export const Button = ({
       {title}
       {shortcut && (
         <>
-          <StyledSeparator buttonSize={size} />
+          <StyledSeparator buttonSize={size} accent={accent} />
-          <StyledShortcutLabel>{shortcut}</StyledShortcutLabel>
+          <StyledShortcutLabel variant={variant} accent={accent}>
+            {shortcut}
+          </StyledShortcutLabel>
         </>
       )}
       {soon && <StyledSoonPill label="Soon" />}

packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx

@@ -44,7 +44,7 @@ export const Default: Story = {
 };
 
 export const Catalog: CatalogStory<Story, typeof Button> = {
-  args: { title: 'Filter', Icon: IconSearch },
+  args: { title: 'Filter', Icon: IconSearch, shortcut: '' },
   argTypes: {
     size: { control: false },
     variant: { control: false },
@@ -55,7 +55,6 @@ export const Catalog: CatalogStory<Story, typeof Button> = {
     soon: { control: false },
     position: { control: false },
     className: { control: false },
-    shortcut: { control: false },
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@@ -277,7 +276,6 @@ export const ShortcutCatalog: CatalogStory<Story, typeof Button> = {
     fullWidth: { control: false },
     soon: { control: false },
     position: { control: false },
-    shortcut: { control: false },
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@@ -288,6 +286,20 @@ export const ShortcutCatalog: CatalogStory<Story, typeof Button> = {
           values: ['small', 'medium'] satisfies ButtonSize[],
           props: (size: ButtonSize) => ({ size }),
         },
+        {
+          name: 'accents',
+          values: ['default', 'blue', 'danger'] satisfies ButtonAccent[],
+          props: (accent: ButtonAccent) => ({ accent }),
+        },
+        {
+          name: 'variants',
+          values: [
+            'primary',
+            'secondary',
+            'tertiary',
+          ] satisfies ButtonVariant[],
+          props: (variant: ButtonVariant) => ({ variant }),
+        },
       ],
     },
   },