fix(button): replace destructive for destructive-primary (#809)

kronostechnologies · Apr 12, 2024 · edc6093 · edc6093
1 parent e3f3399
commit edc6093
Show file tree

Hide file tree

Showing 13 changed files with 75 additions and 75 deletions.
diff --git a/packages/react/src/components/buttons/abstract-button.tsx b/packages/react/src/components/buttons/abstract-button.tsx
@@ -90,7 +90,7 @@ export type ButtonType =
     | 'primary'
     | 'secondary'
     | 'tertiary'
-    | 'destructive'
+    | 'destructive-primary'
     | 'destructive-secondary'
     | 'destructive-tertiary';
 
@@ -125,7 +125,7 @@ const getButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemePr
             background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
             border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
             color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
-            ${buttonType === 'destructive' && css`
+            ${buttonType === 'destructive-primary' && css`
                 &,
                 ${focusable !== false && '&:focus,'}
                 &:hover {

diff --git a/packages/react/src/components/buttons/button.test.tsx b/packages/react/src/components/buttons/button.test.tsx
@@ -88,23 +88,23 @@ describe('Button', () => {
 
     test('has destructive styles', () => {
         const tree = renderWithProviders(
-            <Button onClick={doNothing} buttonType="destructive" label="Destructive Button" />,
+            <Button onClick={doNothing} buttonType="destructive-primary" label="Destructive Button" />,
         );
 
         expect(tree).toMatchSnapshot();
     });
 
     test('has destructive styles (inverted)', () => {
         const tree = renderWithProviders(
-            <Button onClick={doNothing} buttonType="destructive" label="Destructive Button" inverted />,
+            <Button onClick={doNothing} buttonType="destructive-primary" label="Destructive Button" inverted />,
         );
 
         expect(tree).toMatchSnapshot();
     });
 
     test('has destructive-secondary styles', () => {
         const tree = renderWithProviders(
-            <Button onClick={doNothing} buttonType="destructive" label="Destructive Button" />,
+            <Button onClick={doNothing} buttonType="destructive-primary" label="Destructive Button" />,
         );
 
         expect(tree).toMatchSnapshot();

diff --git a/packages/react/src/components/modal/modal-dialog.test.tsx b/packages/react/src/components/modal/modal-dialog.test.tsx
@@ -123,7 +123,7 @@ describe('Modal-Dialog', () => {
     test.each([
         ['information', 'alertFilled', 'primary', false],
         ['action', 'home', 'primary', true],
-        ['alert', 'alertFilled', 'destructive', true],
+        ['alert', 'alertFilled', 'destructive-primary', true],
     ])(
         'should respect %s dialogType with proper titleIcon and buttons',
         (modalType, expectedIcon, expectedButtonType, hasCancelButton) => {

diff --git a/packages/react/src/components/modal/modal-dialog.tsx b/packages/react/src/components/modal/modal-dialog.tsx
@@ -158,7 +158,7 @@ export const ModalDialog: VoidFunctionComponent<ModalDialogProps> = ({
     }
 
     function getFooter(): ReactElement {
-        const confirmButtonType = dialogType === 'alert' ? 'destructive' : 'primary';
+        const confirmButtonType = dialogType === 'alert' ? 'destructive-primary' : 'primary';
 
         return (
             <ButtonContainer isMobile={isMobile} $hasTitleIcon={hasTitleIcon}>

diff --git a/packages/react/src/components/sectional-banner/sectional-banner.test.tsx b/packages/react/src/components/sectional-banner/sectional-banner.test.tsx
@@ -74,7 +74,7 @@ describe('SectionalBanner', () => {
             const buttonWrapper = getByTestId(wrapper, `${device}-button`);
             const button = getByTestId(buttonWrapper, 'button');
 
-            expect(button.prop('buttonType')).toBe('destructive');
+            expect(button.prop('buttonType')).toBe('destructive-primary');
         });
 
         it(`should call callback when dismiss button is clicked (${device})`, () => {

diff --git a/packages/react/src/components/sectional-banner/sectional-banner.tsx b/packages/react/src/components/sectional-banner/sectional-banner.tsx
@@ -161,7 +161,7 @@ const ActionButton: VoidFunctionComponent<ActionButtonProps> = ({
     onClick,
 }) => (
     <StyledActionButton
-        buttonType={isAlertType ? 'destructive' : 'primary'}
+        buttonType={isAlertType ? 'destructive-primary' : 'primary'}
         data-testid="button"
         label={label}
         type="button"

diff --git a/packages/react/src/themes/tokens/component/button-tokens.ts b/packages/react/src/themes/tokens/component/button-tokens.ts
@@ -74,30 +74,30 @@ export type ButtonTokens =
     | 'button-tertiary-inverted-disabled-background-color'
     | 'button-tertiary-inverted-disabled-border-color'
     | 'button-tertiary-inverted-disabled-text-color'
-    | 'button-destructive-background-color'
-    | 'button-destructive-border-color'
-    | 'button-destructive-text-color'
-    | 'button-destructive-hover-background-color'
-    | 'button-destructive-hover-border-color'
-    | 'button-destructive-hover-text-color'
-    | 'button-destructive-disabled-background-color'
-    | 'button-destructive-disabled-border-color'
-    | 'button-destructive-disabled-text-color'
-    | 'button-destructive-focus-background-color'
-    | 'button-destructive-focus-border-color'
-    | 'button-destructive-focus-text-color'
-    | 'button-destructive-inverted-background-color'
-    | 'button-destructive-inverted-border-color'
-    | 'button-destructive-inverted-text-color'
-    | 'button-destructive-inverted-hover-background-color'
-    | 'button-destructive-inverted-hover-border-color'
-    | 'button-destructive-inverted-hover-text-color'
-    | 'button-destructive-inverted-focus-background-color'
-    | 'button-destructive-inverted-focus-border-color'
-    | 'button-destructive-inverted-focus-text-color'
-    | 'button-destructive-inverted-disabled-background-color'
-    | 'button-destructive-inverted-disabled-border-color'
-    | 'button-destructive-inverted-disabled-text-color'
+    | 'button-destructive-primary-background-color'
+    | 'button-destructive-primary-border-color'
+    | 'button-destructive-primary-text-color'
+    | 'button-destructive-primary-hover-background-color'
+    | 'button-destructive-primary-hover-border-color'
+    | 'button-destructive-primary-hover-text-color'
+    | 'button-destructive-primary-disabled-background-color'
+    | 'button-destructive-primary-disabled-border-color'
+    | 'button-destructive-primary-disabled-text-color'
+    | 'button-destructive-primary-focus-background-color'
+    | 'button-destructive-primary-focus-border-color'
+    | 'button-destructive-primary-focus-text-color'
+    | 'button-destructive-primary-inverted-background-color'
+    | 'button-destructive-primary-inverted-border-color'
+    | 'button-destructive-primary-inverted-text-color'
+    | 'button-destructive-primary-inverted-hover-background-color'
+    | 'button-destructive-primary-inverted-hover-border-color'
+    | 'button-destructive-primary-inverted-hover-text-color'
+    | 'button-destructive-primary-inverted-focus-background-color'
+    | 'button-destructive-primary-inverted-focus-border-color'
+    | 'button-destructive-primary-inverted-focus-text-color'
+    | 'button-destructive-primary-inverted-disabled-background-color'
+    | 'button-destructive-primary-inverted-disabled-border-color'
+    | 'button-destructive-primary-inverted-disabled-text-color'
     | 'button-destructive-secondary-background-color'
     | 'button-destructive-secondary-border-color'
     | 'button-destructive-secondary-text-color'
@@ -265,38 +265,38 @@ export const defaultButtonTokens: ButtonTokenMap = {
     'button-tertiary-inverted-disabled-text-color': 'color-brand-50',
 
     // Destructive
-    'button-destructive-background-color': 'color-alert-50',
-    'button-destructive-border-color': 'color-alert-50',
-    'button-destructive-text-color': 'color-white',
+    'button-destructive-primary-background-color': 'color-alert-50',
+    'button-destructive-primary-border-color': 'color-alert-50',
+    'button-destructive-primary-text-color': 'color-white',
     // Destructive hover
-    'button-destructive-hover-background-color': 'color-alert-70',
-    'button-destructive-hover-border-color': 'color-alert-70',
-    'button-destructive-hover-text-color': 'color-white',
+    'button-destructive-primary-hover-background-color': 'color-alert-70',
+    'button-destructive-primary-hover-border-color': 'color-alert-70',
+    'button-destructive-primary-hover-text-color': 'color-white',
     // Destructive focus
-    'button-destructive-focus-background-color': 'color-alert-50',
-    'button-destructive-focus-border-color': 'color-alert-20',
-    'button-destructive-focus-text-color': 'color-white',
+    'button-destructive-primary-focus-background-color': 'color-alert-50',
+    'button-destructive-primary-focus-border-color': 'color-alert-20',
+    'button-destructive-primary-focus-text-color': 'color-white',
     // Destructive disabled
-    'button-destructive-disabled-background-color': 'color-alert-20',
-    'button-destructive-disabled-border-color': 'color-alert-20',
-    'button-destructive-disabled-text-color': 'color-white',
+    'button-destructive-primary-disabled-background-color': 'color-alert-20',
+    'button-destructive-primary-disabled-border-color': 'color-alert-20',
+    'button-destructive-primary-disabled-text-color': 'color-white',
 
     // Destructive inverted
-    'button-destructive-inverted-background-color': 'color-white',
-    'button-destructive-inverted-border-color': 'color-white',
-    'button-destructive-inverted-text-color': 'color-alert-50',
+    'button-destructive-primary-inverted-background-color': 'color-white',
+    'button-destructive-primary-inverted-border-color': 'color-white',
+    'button-destructive-primary-inverted-text-color': 'color-alert-50',
     // Destructive inverted hover
-    'button-destructive-inverted-hover-background-color': 'color-white',
-    'button-destructive-inverted-hover-border-color': 'color-white',
-    'button-destructive-inverted-hover-text-color': 'color-alert-70',
+    'button-destructive-primary-inverted-hover-background-color': 'color-white',
+    'button-destructive-primary-inverted-hover-border-color': 'color-white',
+    'button-destructive-primary-inverted-hover-text-color': 'color-alert-70',
     // Destructive inverted focus
-    'button-destructive-inverted-focus-background-color': 'color-white',
-    'button-destructive-inverted-focus-border-color': 'color-white',
-    'button-destructive-inverted-focus-text-color': 'color-alert-20',
+    'button-destructive-primary-inverted-focus-background-color': 'color-white',
+    'button-destructive-primary-inverted-focus-border-color': 'color-white',
+    'button-destructive-primary-inverted-focus-text-color': 'color-alert-20',
     // Destructive inverted disabled
-    'button-destructive-inverted-disabled-background-color': 'color-white',
-    'button-destructive-inverted-disabled-border-color': 'color-white',
-    'button-destructive-inverted-disabled-text-color': 'color-alert-20',
+    'button-destructive-primary-inverted-disabled-background-color': 'color-white',
+    'button-destructive-primary-inverted-disabled-border-color': 'color-white',
+    'button-destructive-primary-inverted-disabled-text-color': 'color-alert-20',
 
     // Secondary destructive
     'button-destructive-secondary-background-color': 'color-white',

diff --git a/packages/storybook/stories/1-getting-started.stories.tsx b/packages/storybook/stories/1-getting-started.stories.tsx
@@ -148,28 +148,28 @@ export const Theming: Story = {
                             <Button label="Primary" buttonType="primary" />
                             <Button label="Secondary" buttonType="secondary" />
                             <Button label="Tertiary" buttonType="tertiary" />
-                            <Button label="Destructive" buttonType="destructive" />
+                            <Button label="Destructive Primary" buttonType="destructive-primary" />
                             <Button label="Destructive Secondary" buttonType="destructive-secondary" />
                         </div>
                         <div style={{ padding: '1rem' }}>
                             <Button label="Primary" buttonType="primary" disabled />
                             <Button label="Secondary" buttonType="secondary" disabled />
                             <Button label="Tertiary" buttonType="tertiary" disabled />
-                            <Button label="Destructive" buttonType="destructive" disabled />
+                            <Button label="Destructive Primary" buttonType="destructive-primary" disabled />
                             <Button label="Destructive Secondary" buttonType="destructive-secondary" disabled />
                         </div>
                         <div style={{ backgroundColor: '#012639', padding: '1rem' }}>
                             <Button label="Primary" buttonType="primary" inverted />
                             <Button label="Secondary" buttonType="secondary" inverted />
                             <Button label="Tertiary" buttonType="tertiary" inverted />
-                            <Button label="Destructive" buttonType="destructive" inverted />
+                            <Button label="Destructive Primary" buttonType="destructive-primary" inverted />
                             <Button label="Destructive Secondary" buttonType="destructive-secondary" inverted />
                         </div>
                         <div style={{ backgroundColor: '#012639', padding: '1rem' }}>
                             <Button label="Primary" buttonType="primary" inverted disabled />
                             <Button label="Secondary" buttonType="secondary" inverted disabled />
                             <Button label="Tertiary" buttonType="tertiary" inverted disabled />
-                            <Button label="Destructive" buttonType="destructive" inverted disabled />
+                            <Button label="Destructive Primary" buttonType="destructive-primary" inverted disabled />
                             <Button
                                 label="Destructive Secondary"
                                 buttonType="destructive-secondary"

diff --git a/packages/storybook/stories/buttons.stories.tsx b/packages/storybook/stories/buttons.stories.tsx
@@ -22,7 +22,7 @@ export const Buttons: Story = () => (
         <Button label="Primary" buttonType="primary" />
         <Button label="Secondary" buttonType="secondary" />
         <Button label="Tertiary" buttonType="tertiary" />
-        <Button label="Destructive" buttonType="destructive" />
+        <Button label="Destructive-Primary" buttonType="destructive-primary" />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" />
         <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" />
     </>
@@ -33,7 +33,7 @@ export const Disabled: Story = () => (
         <Button label="Primary" buttonType="primary" disabled />
         <Button label="Secondary" buttonType="secondary" disabled />
         <Button label="Tertiary" buttonType="tertiary" disabled />
-        <Button label="Destructive" buttonType="destructive" disabled />
+        <Button label="Destructive-Primary" buttonType="destructive-primary" disabled />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" disabled />
         <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" disabled />
     </>
@@ -44,7 +44,7 @@ export const Inverted: Story = () => (
         <Button label="Primary" buttonType="primary" inverted />
         <Button label="Secondary" buttonType="secondary" inverted />
         <Button label="Tertiary" buttonType="tertiary" inverted />
-        <Button label="Destructive" buttonType="destructive" inverted />
+        <Button label="Destructive-Primary" buttonType="destructive-primary" inverted />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" inverted />
         <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" inverted />
     </InvertedBackground>
@@ -54,7 +54,7 @@ export const InvertedDisabled: Story = () => (
         <Button label="Primary" buttonType="primary" inverted disabled />
         <Button label="Secondary" buttonType="secondary" inverted disabled />
         <Button label="Tertiary" buttonType="tertiary" inverted disabled />
-        <Button label="Destructive" buttonType="destructive" inverted disabled />
+        <Button label="Destructive-Primary" buttonType="destructive-primary" inverted disabled />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" inverted disabled />
         <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" inverted disabled />
     </InvertedBackground>
@@ -86,9 +86,9 @@ export const WithIcons: Story = () => (
             Tertiary
             <ChevronDownIcon />
         </Button>
-        <Button buttonType="destructive">
+        <Button buttonType="destructive-primary">
             <PlusIcon />
-            Destructive
+            Destructive Primary
             <ChevronDownIcon />
         </Button>
         <Button buttonType="destructive-secondary">
@@ -109,7 +109,7 @@ export const Small: Story = () => (
         <Button label="Primary" buttonType="primary" size="small" />
         <Button label="Secondary" buttonType="secondary" size="small" />
         <Button label="Tertiary" buttonType="tertiary" size="small" />
-        <Button label="Destructive" buttonType="destructive" size="small" />
+        <Button label="Destructive-Primary" buttonType="destructive-primary" 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
@@ -13,15 +13,15 @@ export const IconButtons: Story = () => (
         <IconButton label="home" buttonType="primary" iconName="home" />
         <IconButton label="mail" buttonType="secondary" iconName="mail" />
         <IconButton label="map" buttonType="tertiary" iconName="mapPin" />
-        <IconButton label="Delete" buttonType="destructive" iconName="x" />
+        <IconButton label="Delete" buttonType="destructive-primary" 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-primary" iconName="x" inverted />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" inverted />
         <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" inverted />
     </InvertedBackground>
@@ -32,7 +32,7 @@ export const Disabled: Story = () => (
         <IconButton label="home" buttonType="primary" iconName="home" disabled />
         <IconButton label="mail" buttonType="secondary" iconName="mail" disabled />
         <IconButton label="map" buttonType="tertiary" iconName="mapPin" disabled />
-        <IconButton label="Delete" buttonType="destructive" iconName="x" disabled />
+        <IconButton label="Delete" buttonType="destructive-primary" iconName="x" disabled />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" disabled />
         <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" disabled />
     </>
@@ -53,7 +53,7 @@ export const Small: Story = () => (
         <IconButton label="home" buttonType="primary" iconName="home" size="small" />
         <IconButton label="mail" buttonType="secondary" iconName="mail" size="small" />
         <IconButton label="map" buttonType="tertiary" iconName="mapPin" size="small" />
-        <IconButton label="Delete" buttonType="destructive" iconName="x" size="small" />
+        <IconButton label="Delete" buttonType="destructive-primary" iconName="x" size="small" />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" size="small" />
         <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" size="small" />
     </>

diff --git a/packages/storybook/stories/menu-button.stories.tsx b/packages/storybook/stories/menu-button.stories.tsx
@@ -131,7 +131,7 @@ export const Normal: Story = () => (
         <MenuButton options={options} buttonType="primary" inverted>Button</MenuButton>
         <MenuButton options={options} buttonType="secondary">Button</MenuButton>
         <MenuButton options={options} buttonType="tertiary">Button</MenuButton>
-        <MenuButton options={options} buttonType="destructive">Button</MenuButton>
+        <MenuButton options={options} buttonType="destructive-primary">Button</MenuButton>
     </>
 );
 

diff --git a/packages/storybook/stories/modal-dialog.stories.tsx b/packages/storybook/stories/modal-dialog.stories.tsx
@@ -312,7 +312,7 @@ export const AlertDialog: Story = {
         const { isModalOpen, closeModal, openModal } = useModal();
         return (
             <>
-                <Button label="Open Modal" buttonType="destructive" onClick={openModal} />
+                <Button label="Open Modal" buttonType="destructive-primary" onClick={openModal} />
                 <ModalDialog
                     appElement="#storybook-root"
                     ariaDescribedby="story-description"