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 {
/**