feat(button): add variant (#791)

* feat(button): add variant * feat(button): fix lint * feat(button): fix lint * feat(button): fix lint * feat(button): add hover style
kronostechnologies · Apr 2, 2024 · d95d90a · d95d90a
1 parent 258ae91
commit d95d90a
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 5 deletions.
diff --git a/packages/react/src/components/buttons/abstract-button.tsx b/packages/react/src/components/buttons/abstract-button.tsx
@@ -86,7 +86,13 @@ export const AbstractButton = forwardRef<HTMLButtonElement, PropsWithChildren<Ab
 
 AbstractButton.displayName = 'AbstractButton';
 
-export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary';
+export type ButtonType =
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'destructive'
+    | 'destructive-secondary'
+    | 'destructive-tertiary';
 
 export interface ButtonTypeStyles {
     buttonType: ButtonType;

diff --git a/packages/react/src/components/buttons/button.test.tsx.snap b/packages/react/src/components/buttons/button.test.tsx.snap
@@ -286,8 +286,8 @@ exports[`Button has destructive-secondary styles (inverted) 1`] = `
 
 .c1:disabled {
   background-color: transparent;
-  border-color: #7B1A15;
-  color: #7B1A15;
+  border-color: #F99D99;
+  color: #F99D99;
 }
 
 <button

diff --git a/packages/react/src/themes/tokens/component/button-tokens.ts b/packages/react/src/themes/tokens/component/button-tokens.ts
@@ -122,6 +122,30 @@ export type ButtonTokens =
     | 'button-destructive-secondary-inverted-disabled-background-color'
     | 'button-destructive-secondary-inverted-disabled-border-color'
     | 'button-destructive-secondary-inverted-disabled-text-color'
+    | 'button-destructive-tertiary-background-color'
+    | 'button-destructive-tertiary-border-color'
+    | 'button-destructive-tertiary-text-color'
+    | 'button-destructive-tertiary-hover-background-color'
+    | 'button-destructive-tertiary-hover-border-color'
+    | 'button-destructive-tertiary-hover-text-color'
+    | 'button-destructive-tertiary-disabled-background-color'
+    | 'button-destructive-tertiary-disabled-border-color'
+    | 'button-destructive-tertiary-disabled-text-color'
+    | 'button-destructive-tertiary-focus-background-color'
+    | 'button-destructive-tertiary-focus-border-color'
+    | 'button-destructive-tertiary-focus-text-color'
+    | 'button-destructive-tertiary-inverted-background-color'
+    | 'button-destructive-tertiary-inverted-border-color'
+    | 'button-destructive-tertiary-inverted-text-color'
+    | 'button-destructive-tertiary-inverted-hover-background-color'
+    | 'button-destructive-tertiary-inverted-hover-border-color'
+    | 'button-destructive-tertiary-inverted-hover-text-color'
+    | 'button-destructive-tertiary-inverted-focus-background-color'
+    | 'button-destructive-tertiary-inverted-focus-border-color'
+    | 'button-destructive-tertiary-inverted-focus-text-color'
+    | 'button-destructive-tertiary-inverted-disabled-background-color'
+    | 'button-destructive-tertiary-inverted-disabled-border-color'
+    | 'button-destructive-tertiary-inverted-disabled-text-color'
     | 'button-search-background-color'
     | 'button-search-border-color'
     | 'button-search-text-color'
@@ -305,8 +329,42 @@ export const defaultButtonTokens: ButtonTokenMap = {
     'button-destructive-secondary-inverted-focus-text-color': 'color-alert-20',
     // Secondary destructive inverted disabled
     'button-destructive-secondary-inverted-disabled-background-color': 'transparent-100',
-    'button-destructive-secondary-inverted-disabled-border-color': 'color-alert-70',
-    'button-destructive-secondary-inverted-disabled-text-color': 'color-alert-70',
+    'button-destructive-secondary-inverted-disabled-border-color': 'color-alert-20',
+    'button-destructive-secondary-inverted-disabled-text-color': 'color-alert-20',
+
+    // Tertiary destructive
+    'button-destructive-tertiary-background-color': 'transparent-100',
+    'button-destructive-tertiary-border-color': 'transparent-100',
+    'button-destructive-tertiary-text-color': 'color-alert-50',
+    // Tertiary destructive hover
+    'button-destructive-tertiary-hover-background-color': 'color-alert-05',
+    'button-destructive-tertiary-hover-border-color': 'transparent-100',
+    'button-destructive-tertiary-hover-text-color': 'color-alert-70',
+    // Tertiary destructive focus
+    'button-destructive-tertiary-focus-background-color': 'transparent-100',
+    'button-destructive-tertiary-focus-border-color': 'transparent-100',
+    'button-destructive-tertiary-focus-text-color': 'color-alert-50',
+    // Tertiary destructive disabled
+    'button-destructive-tertiary-disabled-background-color': 'transparent-100',
+    'button-destructive-tertiary-disabled-border-color': 'transparent-100',
+    'button-destructive-tertiary-disabled-text-color': 'color-alert-20',
+
+    // Tertiairy destructive inverted
+    'button-destructive-tertiary-inverted-background-color': 'transparent-100',
+    'button-destructive-tertiary-inverted-border-color': 'transparent-100',
+    'button-destructive-tertiary-inverted-text-color': 'color-alert-50',
+    // Tertiairy destructive inverted hover
+    'button-destructive-tertiary-inverted-hover-background-color': 'color-alert-05',
+    'button-destructive-tertiary-inverted-hover-border-color': 'transparent-100',
+    'button-destructive-tertiary-inverted-hover-text-color': 'color-alert-70',
+    // Tertiairy destructive inverted focus
+    'button-destructive-tertiary-inverted-focus-background-color': 'transparent-100',
+    'button-destructive-tertiary-inverted-focus-border-color': 'transparent-100',
+    'button-destructive-tertiary-inverted-focus-text-color': 'color-alert-20',
+    // Tertiairy destructive inverted disabled
+    'button-destructive-tertiary-inverted-disabled-background-color': 'transparent-100',
+    'button-destructive-tertiary-inverted-disabled-border-color': 'transparent-100',
+    'button-destructive-tertiary-inverted-disabled-text-color': 'color-alert-20',
 
     // Search button
     'button-search-background-color': 'color-white',

diff --git a/packages/storybook/stories/buttons.stories.tsx b/packages/storybook/stories/buttons.stories.tsx
@@ -24,6 +24,7 @@ export const Buttons: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" />
         <Button label="Destructive" buttonType="destructive" />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" />
     </>
 );
 
@@ -34,6 +35,7 @@ export const Disabled: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" disabled />
         <Button label="Destructive" buttonType="destructive" disabled />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" disabled />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" disabled />
     </>
 );
 
@@ -44,6 +46,7 @@ export const Inverted: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" inverted />
         <Button label="Destructive" buttonType="destructive" inverted />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" inverted />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" inverted />
     </InvertedBackground>
 );
 export const InvertedDisabled: Story = () => (
@@ -53,6 +56,7 @@ export const InvertedDisabled: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" inverted disabled />
         <Button label="Destructive" buttonType="destructive" inverted disabled />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" inverted disabled />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" inverted disabled />
     </InvertedBackground>
 );
 
@@ -92,6 +96,11 @@ export const WithIcons: Story = () => (
             Destructive Secondary
             <ChevronDownIcon />
         </Button>
+        <Button buttonType="destructive-tertiary">
+            <PlusIcon />
+            Destructive Tertiary
+            <ChevronDownIcon />
+        </Button>
     </>
 );
 
@@ -102,5 +111,6 @@ export const Small: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" size="small" />
         <Button label="Destructive" buttonType="destructive" size="small" />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" size="small" />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" size="small" />
     </>
 );
diff --git a/packages/storybook/stories/icon-button.stories.tsx b/packages/storybook/stories/icon-button.stories.tsx
@@ -15,13 +15,15 @@ export const IconButtons: Story = () => (
         <IconButton label="map" buttonType="tertiary" iconName="mapPin" />
         <IconButton label="Delete" buttonType="destructive" iconName="x" />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" />
+        <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" />
     </>
 );
 
 export const Inverted: Story = () => (
     <InvertedBackground>
         <IconButton label="Delete" buttonType="destructive" iconName="x" inverted />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" inverted />
+        <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" inverted />
     </InvertedBackground>
 );
 
@@ -32,6 +34,7 @@ export const Disabled: Story = () => (
         <IconButton label="map" buttonType="tertiary" iconName="mapPin" disabled />
         <IconButton label="Delete" buttonType="destructive" iconName="x" disabled />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" disabled />
+        <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" disabled />
     </>
 );
 
@@ -52,5 +55,6 @@ export const Small: Story = () => (
         <IconButton label="map" buttonType="tertiary" iconName="mapPin" size="small" />
         <IconButton label="Delete" buttonType="destructive" iconName="x" size="small" />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" size="small" />
+        <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" size="small" />
     </>
 );