From 8c9095d8b7592d8969d49b077c86c31ea898fddf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Sat, 7 Sep 2024 20:34:17 +0200 Subject: [PATCH] BREAKING CHANGE(web-react): Remove action colors from Pill #DS-1446 --- .../web-react/src/components/Pill/README.md | 14 ++++------ .../components/Pill/__tests__/Pill.test.tsx | 28 +++++++++---------- .../Pill/__tests__/usePillStyleProps.test.ts | 2 +- .../src/components/Pill/demo/PillColors.tsx | 5 ++-- .../components/Pill/stories/Pill.stories.tsx | 4 +-- packages/web-react/src/types/pill.ts | 4 +-- 6 files changed, 25 insertions(+), 32 deletions(-) diff --git a/packages/web-react/src/components/Pill/README.md b/packages/web-react/src/components/Pill/README.md index 0400c135c9..45c93524c2 100644 --- 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 - 3 - 3 - 3 - 3 333 - 333 + 333 3 3 3 @@ -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 index 9de31181fd..7c1f61cbcf 100644 --- a/packages/web-react/src/components/Pill/__tests__/Pill.test.tsx +++ b/packages/web-react/src/components/Pill/__tests__/Pill.test.tsx @@ -1,8 +1,8 @@ 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'; @@ -10,8 +10,6 @@ import Pill from '../Pill'; describe('Pill', () => { classNamePrefixProviderTest(Pill, 'Pill'); - actionColorPropsTest(Pill, 'Pill--'); - emotionColorPropsTest(Pill, 'Pill--'); stylePropsTest(Pill); @@ -19,23 +17,23 @@ describe('Pill', () => { restPropsTest(Pill, 'span'); it('should have default classname', () => { - const dom = render(); + render(); - 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(3); + render(3); - 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(333); + it.each([['selected'], ['neutral'], ['danger'], ['informative'], ['success'], ['warning']])( + 'should render color %s', + (color) => { + render(333); - 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 index c3384dd192..b390b6bd6c 100644 --- 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 index fc2e54aaa1..1d1eb14e7a 100644 --- 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 index 18667154ac..d9d66dd5bf 100644 --- 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 = { }, 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 index 59b9e2919a..eb7665c1f6 100644 --- 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 = ActionColorsDictionaryType | EmotionColorsDictionaryType | 'selected' | 'unselected' | C; +export type PillColor = EmotionColorsDictionaryType | 'selected' | 'neutral' | C; export interface AriaPillElementTypeProps { /**