BREAKING CHANGE: Remove action colors from Pill and switch it to v3 design tokens #DS-1446

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]

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}`);
+    },
+  );
 });

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;

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 (
     <>

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' },
       },

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

packages/web-twig/src/Resources/components/Pill/README.md

@@ -29,10 +29,10 @@ Without lexer:
 
 ## API
 
-| Name          | Type                                                                                                                        | Default    | Required | Description        |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | ------------------ |
-| `color`       | [[Action Color dictionary][dictionary-color] \| [Emotion Color dictionary][dictionary-color] \| `selected` \| `unselected`] | `selected` | ✕        | Color variant      |
-| `elementType` | `string`                                                                                                                    | `span`     | ✕        | HTML tag to render |
+| Name          | Type                                                                      | Default    | Required | Description        |
+| ------------- | ------------------------------------------------------------------------- | ---------- | -------- | ------------------ |
+| `color`       | [[Emotion Color dictionary][dictionary-color] \| `selected` \| `neutral`] | `selected` | ✕        | Color variant      |
+| `elementType` | `string`                                                                  | `span`     | ✕        | HTML tag to render |
 
 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]

packages/web-twig/src/Resources/components/Pill/stories/PillColors.twig

@@ -1,5 +1,5 @@
 {% set colors = [
-    'primary', 'secondary', 'tertiary', 'inverted', 'selected', 'unselected', 'success', 'informative', 'warning', 'danger'
+    'selected', 'neutral', 'success', 'informative', 'warning', 'danger'
 ] %}
 
 {% for color in colors %}

packages/web/src/scss/components/Pill/README.md

@@ -3,12 +3,8 @@
 Variants:
 
 ```html
-<span class="Pill Pill--primary">3</span>
-<span class="Pill Pill--secondary">3</span>
-<span class="Pill Pill--tertiary">3</span>
-<span class="Pill Pill--inverted">3</span>
 <span class="Pill Pill--selected">333</span>
-<span class="Pill Pill--unselected">333</span>
+<span class="Pill Pill--neutral">333</span>
 <span class="Pill Pill--success">3</span>
 <span class="Pill Pill--informative">3</span>
 <span class="Pill Pill--warning">3</span>
@@ -18,5 +14,5 @@ Variants:
 Longer content:
 
 ```html
-<span class="Pill Pill--primary">333</span>
+<span class="Pill Pill--selected">333</span>
 ```

packages/web/src/scss/components/Pill/_Pill.scss

@@ -1,4 +1,5 @@
 @use 'theme';
+@use '../../settings/globals';
 @use '../../tools/dictionaries';
 @use '../../tools/typography';
 
@@ -10,13 +11,18 @@
     height: 1rem;
     padding: theme.$padding-y theme.$padding-x;
     text-align: center;
+    color: var(--#{globals.$prefix}pill-color);
     border-radius: theme.$border-radius;
+    background-color: var(--#{globals.$prefix}pill-background-color);
 }
 
 @include dictionaries.generate-colors(
-    'Pill',
-    theme.$color-dictionary,
-    theme.$color-dictionary-config,
-    null,
-    theme.$color-dictionary-overrides
+    $class-name: 'Pill',
+    $dictionary-values: theme.$color-dictionary,
+    $config: theme.$color-dictionary-config
+);
+@include dictionaries.generate-colors(
+    $class-name: 'Pill',
+    $dictionary-values: theme.$color-selected-dictionary,
+    $config: theme.$color-selected-dictionary-config
 );

packages/web/src/scss/components/Pill/_theme.scss

@@ -1,27 +1,28 @@
 @use 'sass:list';
 @use 'sass:map';
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../settings/dictionaries';
 
-$typography: tokens.$body-xsmall-text-bold;
-$padding-x: tokens.$space-300;
-$padding-y: tokens.$space-0;
-$border-radius: tokens.$radius-300;
+$typography: global-tokens.$body-xsmall-bold;
+$padding-x: global-tokens.$space-300;
+$padding-y: global-tokens.$space-0;
+$border-radius: global-tokens.$radius-400;
 
-$_pill-colors: selected, unselected;
-
-$color-dictionary: list.join(list.join(dictionaries.$emotion-colors, dictionaries.$action-colors), $_pill-colors);
+$color-dictionary: (
+    emotion: dictionaries.$emotion-colors,
+    neutral: neutral,
+);
 
 $color-dictionary-config: (
-    color: tokens.$text-primary-inverted-default,
-    background-color: 'default',
+    color: 'content-subtle',
+    background-color: 'background-basic',
 );
 
-$color-dictionary-overrides: (
-    tertiary: (
-        color: tokens.$text-primary-default,
-    ),
-    inverted: (
-        color: tokens.$text-primary-default,
-    ),
+$color-selected-dictionary: (
+    selected: selected,
+);
+
+$color-selected-dictionary-config: (
+    color: 'content-subtle',
+    background-color: 'default',
 );

packages/web/src/scss/components/Pill/index.html

@@ -6,12 +6,8 @@ <h2 class="docs-Heading">Colors</h2>
 
   <div class="docs-Stack docs-Stack--start">
 
-    <span class="Pill Pill--primary">3</span>
-    <span class="Pill Pill--secondary">3</span>
-    <span class="Pill Pill--tertiary">3</span>
-    <span class="Pill Pill--inverted">3</span>
     <span class="Pill Pill--selected">3</span>
-    <span class="Pill Pill--unselected">3</span>
+    <span class="Pill Pill--neutral">3</span>
     <span class="Pill Pill--success">3</span>
     <span class="Pill Pill--informative">3</span>
     <span class="Pill Pill--warning">3</span>

packages/web/src/scss/components/index.scss

@@ -19,8 +19,7 @@
 @forward 'Modal';
 @forward 'Pagination';
 @forward 'PartnerLogo';
-
-// @forward 'Pill';
+@forward 'Pill';
 @forward 'ProductLogo';
 @forward 'Radio';
 @forward 'ScrollView';

tests/e2e/demo-components-compare.spec.ts

@@ -15,7 +15,6 @@ const IGNORED_TESTS: string[] = [
   'Icon',
   'Item',
   'Link',
-  'Pill',
   'Spinner',
   'Stack',
   'Text',