BREAKING CHANGE(web-react): Remove action colors from Pill #DS-1446

lmc-eu · Sep 17, 2024 · b9c6912 · b9c6912
1 parent 7818952
commit b9c6912
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 32 deletions.
diff --git a/packages/web-react/src/components/Pill/README.md b/packages/web-react/src/components/Pill/README.md
@@ -7,12 +7,8 @@ import { Pill } from '@lmc-eu/spirit-web-react';
 ```
 
 ```jsx
-  <Pill color="primary">3</Pill>
-  <Pill color="secondary">3</Pill>
-  <Pill color="tertiary">3</Pill>
-  <Pill color="inverted">3</Pill>
   <Pill color="selected">333</Pill>
-  <Pill color="unselected">333</Pill>
+  <Pill color="neutral">333</Pill>
   <Pill color="success">3</Pill>
   <Pill color="informative">3</Pill>
   <Pill color="warning">3</Pill>
@@ -21,10 +17,10 @@ import { Pill } from '@lmc-eu/spirit-web-react';
 
 ## API
 
-| Name       | Type                                                                                                                        | Default    | Required | Description            |
-| ---------- | --------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | ---------------------- |
-| `children` | `ReactNode`                                                                                                                 | —          | ✓        | Content of the Pill    |
-| `color`    | [[Action Color dictionary][dictionary-color] \| [Emotion Color dictionary][dictionary-color] \| `selected` \| `unselected`] | `selected` | ✕        | Color of the component |
+| Name       | Type                                                                      | Default    | Required | Description            |
+| ---------- | ------------------------------------------------------------------------- | ---------- | -------- | ---------------------- |
+| `children` | `ReactNode`                                                               | —          | ✓        | Content of the Pill    |
+| `color`    | [[Emotion Color dictionary][dictionary-color] \| `selected` \| `neutral`] | `selected` | ✕        | Color of the component |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]

diff --git a/packages/web-react/src/components/Pill/__tests__/Pill.test.tsx b/packages/web-react/src/components/Pill/__tests__/Pill.test.tsx
@@ -1,41 +1,39 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
-import { actionColorPropsTest, emotionColorPropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
+import { emotionColorPropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import Pill from '../Pill';
 
 describe('Pill', () => {
   classNamePrefixProviderTest(Pill, 'Pill');
 
-  actionColorPropsTest(Pill, 'Pill--');
-
   emotionColorPropsTest(Pill, 'Pill--');
 
   stylePropsTest(Pill);
 
   restPropsTest(Pill, 'span');
 
   it('should have default classname', () => {
-    const dom = render(<Pill />);
+    render(<Pill data-testid="pill" />);
 
-    const element = dom.container.querySelector('span') as HTMLElement;
-    expect(element).toHaveClass('Pill--selected');
+    expect(screen.getByTestId('pill')).toHaveClass('Pill--selected');
   });
 
   it('should render text children', () => {
-    const dom = render(<Pill>3</Pill>);
+    render(<Pill>3</Pill>);
 
-    const element = dom.container.querySelector('span') as HTMLElement;
-    expect(element.textContent).toBe('3');
+    expect(screen.getByText(3)).toBeInTheDocument();
   });
 
-  it.each([['selected'], ['unselected']])('should render color %s', (color) => {
-    const dom = render(<Pill color={color}>333</Pill>);
+  it.each([['selected'], ['neutral'], ['danger'], ['informative'], ['success'], ['warning']])(
+    'should render color %s',
+    (color) => {
+      render(<Pill color={color}>333</Pill>);
 
-    const element = dom.container.querySelector('span') as HTMLElement;
-    expect(element).toHaveClass(`Pill--${color}`);
-  });
+      expect(screen.getByText(333)).toHaveClass(`Pill--${color}`);
+    },
+  );
 });
diff --git a/packages/web-react/src/components/Pill/__tests__/usePillStyleProps.test.ts b/packages/web-react/src/components/Pill/__tests__/usePillStyleProps.test.ts
@@ -10,7 +10,7 @@ describe('usePillStyleProps', () => {
     expect(result.current.classProps).toBe('Pill');
   });
 
-  it.each([['selected'], ['danger'], ['informative'], ['success'], ['warning']])(
+  it.each([['selected'], ['neutral'], ['danger'], ['informative'], ['success'], ['warning']])(
     'should return color class %s',
     (color) => {
       const props = { color } as SpiritPillProps;

diff --git a/packages/web-react/src/components/Pill/demo/PillColors.tsx b/packages/web-react/src/components/Pill/demo/PillColors.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { ActionColors, EmotionColors } from '../../../constants';
+import { EmotionColors } from '../../../constants';
 import Pill from '../Pill';
 
 const PillColors = () => {
-  const actionColors = Object.values(ActionColors);
   const emotionColors = Object.values(EmotionColors);
-  const colors = [...actionColors, 'selected', 'unselected', ...emotionColors];
+  const colors = ['selected', 'neutral', ...emotionColors];
 
   return (
     <>

diff --git a/packages/web-react/src/components/Pill/stories/Pill.stories.tsx b/packages/web-react/src/components/Pill/stories/Pill.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 } from '../../../constants';
+import { EmotionColors } from '../../../constants';
 import ReadMe from '../README.md';
 import { Pill } from '..';
 
@@ -19,7 +19,7 @@ const meta: Meta<typeof Pill> = {
     },
     color: {
       control: 'select',
-      options: [...Object.values(ActionColors), ...Object.values(EmotionColors), 'selected', 'unselected'],
+      options: [...Object.values(EmotionColors), 'selected', 'neutral'],
       table: {
         defaultValue: { summary: 'selected' },
       },

diff --git a/packages/web-react/src/types/pill.ts b/packages/web-react/src/types/pill.ts
@@ -1,7 +1,7 @@
 import { ElementType, JSXElementConstructor } from 'react';
-import { ActionColorsDictionaryType, ChildrenProps, EmotionColorsDictionaryType, TransferProps } from './shared';
+import { ChildrenProps, EmotionColorsDictionaryType, TransferProps } from './shared';
 
-export type PillColor<C> = ActionColorsDictionaryType | EmotionColorsDictionaryType | 'selected' | 'unselected' | C;
+export type PillColor<C> = EmotionColorsDictionaryType | 'selected' | 'neutral' | C;
 
 export interface AriaPillElementTypeProps<T extends ElementType = 'span'> {
   /**