BREAKING CHANGE(web-react): Remove inverted variant from Button and B…

…uttonLink #DS-1445
lmc-eu · Aug 28, 2024 · f4cae98 · f4cae98
1 parent 832f536
commit f4cae98
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 56 deletions.
diff --git a/packages/web-react/src/components/Button/README.md b/packages/web-react/src/components/Button/README.md
@@ -12,7 +12,6 @@ import { Button } from '@lmc-eu/spirit-web-react';
   <Button color="primary">Click me</Button>
   <Button color="secondary">Click me</Button>
   <Button color="tertiary">Click me</Button>
-  <Button color="inverted">Click me</Button>
   <Button color="success">Click me</Button>
   <Button color="informative">Click me</Button>
   <Button color="warning">Click me</Button>
@@ -33,20 +32,20 @@ import { RouterLink } from 'react-router-dom';
 
 ### API
 
-| Name          | Type                                                                                      | Default   | Required | Description                                                                |
-| ------------- | ----------------------------------------------------------------------------------------- | --------- | -------- | -------------------------------------------------------------------------- |
-| `children`    | `ReactNode`                                                                               | `null`    | ✕        | Content of the Button                                                      |
-| `color`       | [Action Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕        | Color variant                                                              |
-| `elementType` | `ElementType`                                                                             | `button`  | ✕        | Type of element                                                            |
-| `isBlock`     | `bool`                                                                                    | `false`   | ✕        | Span the element to the full width of its parent                           |
-| `isDisabled`  | `bool`                                                                                    | `false`   | ✕        | If true, Button is disabled                                                |
-| `isLoading`   | `bool`                                                                                    | `false`   | ✕        | If true, Button is in a loading state, disabled and the Spinner is visible |
-| `isSquare`    | `bool`                                                                                    | `false`   | ✕        | If true, Button is square, usually only with an Icon                       |
-| `name`        | `string`                                                                                  | —         | ✕        | For use a button as a form data reference                                  |
-| `onClick`     | `string`                                                                                  | `null`    | ✕        | JS function to call on click                                               |
-| `ref`         | `ForwardedRef<HTMLButtonElement>`                                                         | —         | ✕        | Button element reference                                                   |
-| `size`        | [Size dictionary][dictionary-size]                                                        | `medium`  | ✕        | Size variant                                                               |
-| `type`        | `string`                                                                                  | `button`  | ✕        | Type of the Button                                                         |
+| Name          | Type                                                                                             | Default   | Required | Description                                                                |
+| ------------- | ------------------------------------------------------------------------------------------------ | --------- | -------- | -------------------------------------------------------------------------- |
+| `children`    | `ReactNode`                                                                                      | `null`    | ✕        | Content of the Button                                                      |
+| `color`       | [Action Button Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕        | Color variant                                                              |
+| `elementType` | `ElementType`                                                                                    | `button`  | ✕        | Type of element                                                            |
+| `isBlock`     | `bool`                                                                                           | `false`   | ✕        | Span the element to the full width of its parent                           |
+| `isDisabled`  | `bool`                                                                                           | `false`   | ✕        | If true, Button is disabled                                                |
+| `isLoading`   | `bool`                                                                                           | `false`   | ✕        | If true, Button is in a loading state, disabled and the Spinner is visible |
+| `isSquare`    | `bool`                                                                                           | `false`   | ✕        | If true, Button is square, usually only with an Icon                       |
+| `name`        | `string`                                                                                         | —         | ✕        | For use a button as a form data reference                                  |
+| `onClick`     | `string`                                                                                         | `null`    | ✕        | JS function to call on click                                               |
+| `ref`         | `ForwardedRef<HTMLButtonElement>`                                                                | —         | ✕        | Button element reference                                                   |
+| `size`        | [Size dictionary][dictionary-size]                                                               | `medium`  | ✕        | Size variant                                                               |
+| `type`        | `string`                                                                                         | `button`  | ✕        | Type of the Button                                                         |
 
 For more information see [Button][button] component. Button also contain all the appropriate
 attributes according to the type of element. The default element type for Button is `<button>`.

diff --git a/packages/web-react/src/components/Button/__tests__/useButtonStyleProps.test.ts b/packages/web-react/src/components/Button/__tests__/useButtonStyleProps.test.ts
@@ -9,7 +9,6 @@ describe('useButtonStyleProps', () => {
     ['secondary', 'medium', false, false, false, false, 'Button Button--secondary Button--medium'],
     ['tertiary', 'medium', false, false, false, false, 'Button Button--tertiary Button--medium'],
     ['danger', 'medium', false, false, false, false, 'Button Button--danger Button--medium'],
-    ['inverted', 'medium', false, false, false, false, 'Button Button--inverted Button--medium'],
     ['primary', 'medium', true, false, false, false, 'Button Button--primary Button--medium Button--block'],
     ['primary', 'medium', false, true, false, false, 'Button Button--primary Button--medium Button--disabled'],
     [

diff --git a/packages/web-react/src/components/Button/demo/ButtonDemoFactory.tsx b/packages/web-react/src/components/Button/demo/ButtonDemoFactory.tsx
@@ -1,34 +1,32 @@
 import React from 'react';
 import DocsSection from '../../../../docs/DocsSections';
-import { ActionColors, EmotionColors, Sizes } from '../../../constants';
+import { ActionButtonColors, EmotionColors, Sizes } from '../../../constants';
 import { ButtonBaseProps } from '../../../types';
 import { Icon } from '../../Icon';
 import { Button } from '../Button';
 
 const ButtonDemoFactory = ({ ...props }: ButtonBaseProps) => {
   const sizes = Object.values(Sizes);
-  const actionColors = Object.values(ActionColors);
+  const actionButtonColors = Object.values(ActionButtonColors);
   const emotionColors = Object.values(EmotionColors);
-  const colors = [...actionColors, ...emotionColors];
+  const colors = [...actionButtonColors, ...emotionColors];
 
   return (
     <>
       {sizes.map((size) => (
         <DocsSection key={size} title={`Size ${size}`}>
           {colors.map((color) => (
-            <div key={color} className={`${color === 'inverted' ? 'docs-Box ' : ''}`}>
-              <div>
-                <Button size={size} color={color} elementType="a" {...props}>
-                  {`Button ${color}`}
-                </Button>{' '}
-                <Button size={size} color={color} {...props}>
-                  <Icon name="hamburger" marginRight="space-400" />
-                  Menu
-                </Button>{' '}
-                <Button size={size} color={color} isSquare {...props}>
-                  <Icon name="hamburger" />
-                </Button>
-              </div>
+            <div key={color}>
+              <Button size={size} color={color} elementType="a" {...props}>
+                {`Button ${color}`}
+              </Button>{' '}
+              <Button size={size} color={color} {...props}>
+                <Icon name="hamburger" marginRight="space-400" />
+                Menu
+              </Button>{' '}
+              <Button size={size} color={color} isSquare {...props}>
+                <Icon name="hamburger" />
+              </Button>
             </div>
           ))}
         </DocsSection>

diff --git a/packages/web-react/src/components/ButtonLink/README.md b/packages/web-react/src/components/ButtonLink/README.md
@@ -10,7 +10,6 @@ import { ButtonLink } from '@lmc-eu/spirit-web-react';
   <ButtonLink color="primary">Click me</ButtonLink>
   <ButtonLink color="secondary">Click me</ButtonLink>
   <ButtonLink color="tertiary">Click me</ButtonLink>
-  <ButtonLink color="inverted">Click me</ButtonLink>
   <ButtonLink color="success">Click me</ButtonLink>
   <ButtonLink color="informative">Click me</ButtonLink>
   <ButtonLink color="warning">Click me</ButtonLink>

diff --git a/packages/web-react/src/components/ButtonLink/__tests__/useButtonLinkStyleProps.test.ts b/packages/web-react/src/components/ButtonLink/__tests__/useButtonLinkStyleProps.test.ts
@@ -9,7 +9,6 @@ describe('useButtonStyleProps', () => {
     ['secondary', 'medium', false, false, false, false, 'Button Button--secondary Button--medium'],
     ['tertiary', 'medium', false, false, false, false, 'Button Button--tertiary Button--medium'],
     ['danger', 'medium', false, false, false, false, 'Button Button--danger Button--medium'],
-    ['inverted', 'medium', false, false, false, false, 'Button Button--inverted Button--medium'],
     ['primary', 'medium', true, false, false, false, 'Button Button--primary Button--medium Button--block'],
     ['primary', 'medium', false, true, false, false, 'Button Button--primary Button--medium Button--disabled'],
     [

diff --git a/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDemoFactory.tsx b/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDemoFactory.tsx
@@ -1,34 +1,32 @@
 import React from 'react';
 import DocsSection from '../../../../docs/DocsSections';
-import { ActionColors, EmotionColors, Sizes } from '../../../constants';
+import { ActionButtonColors, EmotionColors, Sizes } from '../../../constants';
 import { ButtonBaseProps } from '../../../types';
 import { Icon } from '../../Icon';
 import { ButtonLink } from '../ButtonLink';
 
 const ButtonLinkDemoFactory = ({ ...props }: ButtonBaseProps) => {
   const sizes = Object.values(Sizes);
-  const actionColors = Object.values(ActionColors);
+  const actionButtonColors = Object.values(ActionButtonColors);
   const emotionColors = Object.values(EmotionColors);
-  const colors = [...actionColors, ...emotionColors];
+  const colors = [...actionButtonColors, ...emotionColors];
 
   return (
     <>
       {sizes.map((size) => (
         <DocsSection key={size} title={`Size ${size}`}>
           {colors.map((color) => (
-            <div key={color} className={`${color === 'inverted' ? 'docs-Box ' : ''}`}>
-              <div>
-                <ButtonLink size={size} color={color} elementType="a" {...props}>
-                  {`Button ${color}`}
-                </ButtonLink>{' '}
-                <ButtonLink size={size} color={color} {...props}>
-                  <Icon name="link" marginRight="space-400" />
-                  Menu
-                </ButtonLink>{' '}
-                <ButtonLink size={size} color={color} isSquare {...props}>
-                  <Icon name="link" />
-                </ButtonLink>
-              </div>
+            <div key={color}>
+              <ButtonLink size={size} color={color} elementType="a" {...props}>
+                {`Button ${color}`}
+              </ButtonLink>{' '}
+              <ButtonLink size={size} color={color} {...props}>
+                <Icon name="link" marginRight="space-400" />
+                Menu
+              </ButtonLink>{' '}
+              <ButtonLink size={size} color={color} isSquare {...props}>
+                <Icon name="link" />
+              </ButtonLink>
             </div>
           ))}
         </DocsSection>

diff --git a/packages/web-react/src/components/ButtonLink/stories/ButtonLink.stories.tsx b/packages/web-react/src/components/ButtonLink/stories/ButtonLink.stories.tsx
@@ -1,7 +1,7 @@
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { ActionColors, EmotionColors, Sizes } from '../../../constants';
+import { ActionButtonColors, EmotionColors, Sizes } from '../../../constants';
 import { Icon } from '../../Icon';
 import ReadMe from '../README.md';
 import { ButtonLink } from '..';
@@ -34,9 +34,9 @@ const meta: Meta<typeof ButtonLink> = {
     },
     color: {
       control: 'select',
-      options: [...Object.values(ActionColors), ...Object.values(EmotionColors)],
+      options: [...Object.values(ActionButtonColors), ...Object.values(EmotionColors)],
       table: {
-        defaultValue: { summary: ActionColors.PRIMARY },
+        defaultValue: { summary: ActionButtonColors.PRIMARY },
       },
     },
     isBlock: {
@@ -58,7 +58,7 @@ const meta: Meta<typeof ButtonLink> = {
   },
   args: {
     children: 'Click me',
-    color: ActionColors.PRIMARY,
+    color: ActionButtonColors.PRIMARY,
     isBlock: false,
     isDisabled: false,
     isLoading: false,

diff --git a/packages/web-react/src/constants/dictionaries.ts b/packages/web-react/src/constants/dictionaries.ts
@@ -29,6 +29,12 @@ export const ActionColors = {
   INVERTED: 'inverted',
 } as const;
 
+export const ActionButtonColors = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+} as const;
+
 export const ActionLinkColors = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',

diff --git a/packages/web-react/src/types/button.ts b/packages/web-react/src/types/button.ts
@@ -1,6 +1,6 @@
 import { ElementType } from 'react';
 import {
-  ActionColorsDictionaryType,
+  ActionButtonColorsDictionaryType,
   AriaLabelingProps,
   ChildrenProps,
   ClickEvents,
@@ -10,7 +10,7 @@ import {
   StyleProps,
 } from './shared';
 
-export type ButtonColor<C> = ActionColorsDictionaryType | EmotionColorsDictionaryType | C;
+export type ButtonColor<C> = ActionButtonColorsDictionaryType | EmotionColorsDictionaryType | C;
 export type ButtonSize<S> = SizesDictionaryType | S;
 export type ButtonType = 'button' | 'submit' | 'reset';
 

diff --git a/packages/web-react/src/types/shared/dictionaries.ts b/packages/web-react/src/types/shared/dictionaries.ts
@@ -1,5 +1,6 @@
 import {
   ActionColors,
+  ActionButtonColors,
   ActionLinkColors,
   AlignmentX,
   AlignmentXExtended,
@@ -34,6 +35,11 @@ export type AlignmentYExtendedDictionaryType<T = undefined> =
 export type ActionColorsDictionaryKeys = keyof typeof ActionColors;
 export type ActionColorsDictionaryType<C = undefined> = (typeof ActionColors)[ActionColorsDictionaryKeys] | C;
 
+export type ActionButtonColorsDictionaryKeys = keyof typeof ActionButtonColors;
+export type ActionButtonColorsDictionaryType<C = undefined> =
+  | (typeof ActionButtonColors)[ActionButtonColorsDictionaryKeys]
+  | C;
+
 export type ActionLinkColorsDictionaryKeys = keyof typeof ActionLinkColors;
 export type ActionLinkColorsDictionaryType<C = undefined> =
   | (typeof ActionLinkColors)[ActionLinkColorsDictionaryKeys]