BREAKING CHANGE(web-react): Remove theme and tag props and `defau…

…lt` color from `Tag` #DS-648 ## Migration Guide Instead of the `default` color, use `neutral` in the `Tag` component. Instead of the `theme` prop, use `isSubtle` in the `Tag` component. Instead of `tag` prop use `elementType` in `Tag` component. - `<Tag color="default" …>` → `<Tag color="neutral" …>` - `<Tag theme="light" …>` → `<Tag isSubtle …>` - `<Tag theme="dark" …>` → `<Tag …>` (default) - `<Tag tag="div" …>` → `<Tag elementType="div" …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · ab5606a · ab5606a
1 parent bf62242
commit ab5606a
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 90 deletions.
diff --git a/packages/web-react/src/components/Tag/README.md b/packages/web-react/src/components/Tag/README.md
@@ -14,19 +14,16 @@ import { Tag } from '@lmc-eu/spirit-web-react';
 
 ## Available props
 
-| Prop name     | Type                                                                            | Default   | Required | Description                                                                                                      |
-| ------------- | ------------------------------------------------------------------------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
-| `children`    | `ReactNode`                                                                     | -         | ✔        | Content of the Tag                                                                                               |
-| `color`       | [Emotion Color dictionary][dictionary-color], `neutral`, `default` (deprecated) | `neutral` | ✕        | Color of the component; [**DEPRECATED**][deprecated] The value `default` will be replaced by the value `neutral` |
-| `elementType` | `React.Element`                                                                 | `span`    | ✕        | HTML tag                                                                                                         |
-| `isSubtle`    | `boolean`                                                                       | `false`   | ✕        | If is Subtle color variant used                                                                                  |
-| `ref`         | `ForwardedRef<HTMLSpanElement>`                                                 | -         | ✕        | Tag element reference                                                                                            |
-| `size`        | [Size Extended dictionary][dictionary-size]                                     | `medium`  | ✕        | Size of the Tag                                                                                                  |
-| `tag`         | `React.Element`                                                                 | `span`    | ✕        | [**DEPRECATED**][deprecated] in favor of `elementType`; HTML tag                                                 |
-| `theme`       | `light`, `dark`                                                                 | `null`    | ✕        | [**DEPRECATED**][deprecated] in favor of `isSubtle`; Theme of the component                                      |
+| Prop name     | Type                                                    | Default   | Required | Description                     |
+| ------------- | ------------------------------------------------------- | --------- | -------- | ------------------------------- |
+| `children`    | `ReactNode`                                             | -         | ✔        | Content of the Tag              |
+| `color`       | [Emotion Color dictionary][dictionary-color], `neutral` | `neutral` | ✕        | Color of the component          |
+| `elementType` | `React.Element`                                         | `span`    | ✕        | HTML tag                        |
+| `isSubtle`    | `boolean`                                               | `false`   | ✕        | If is Subtle color variant used |
+| `ref`         | `ForwardedRef<HTMLSpanElement>`                         | -         | ✕        | Tag element reference           |
+| `size`        | [Size Extended dictionary][dictionary-size]             | `medium`  | ✕        | Size of the Tag                 |
 
 For detailed information see [Tag](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Tag/README.md) component
 
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations
 [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
 [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size
diff --git a/packages/web-react/src/components/Tag/Tag.tsx b/packages/web-react/src/components/Tag/Tag.tsx
@@ -1,6 +1,6 @@
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import classNames from 'classnames';
-import { useDeprecationMessage, useStyleProps } from '../../hooks';
+import { useStyleProps } from '../../hooks';
 import { SpiritTagProps, StyleProps } from '../../types';
 import { useTagStyleProps } from './useTagStyleProps';
 
@@ -17,39 +17,10 @@ const _Tag = <T extends ElementType = 'span', C = void, S = void>(
   props: SpiritTagProps<T, C, S>,
   ref: ForwardedRef<HTMLSpanElement>,
 ): JSX.Element => {
-  const {
-    elementType,
-    /** @deprecated Will be removed in the next major version. */
-    tag,
-    children,
-    ...restProps
-  } = props;
+  const { elementType: ElementTag = 'span', children, ...restProps } = props;
   const { classProps, props: modifiedProps } = useTagStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps as StyleProps);
 
-  const ElementTag = tag || elementType || 'span';
-
-  useDeprecationMessage({
-    method: 'property',
-    trigger: !!tag,
-    componentName: 'Tag',
-    propertyProps: {
-      deprecatedName: 'tag',
-      newName: 'elementType',
-    },
-  });
-
-  useDeprecationMessage({
-    method: 'property',
-    trigger: props?.color === 'default',
-    componentName: 'Tag',
-    propertyProps: {
-      deprecatedValue: 'default',
-      newValue: 'neutral',
-      propertyName: 'color',
-    },
-  });
-
   return (
     <ElementTag {...otherProps} {...styleProps} className={classNames(classProps, styleProps.className)} ref={ref}>
       {children}

diff --git a/packages/web-react/src/components/Tag/__tests__/Tag.test.tsx b/packages/web-react/src/components/Tag/__tests__/Tag.test.tsx
@@ -32,10 +32,10 @@ describe('Tag', () => {
     expect(element.textContent).toBe('Tag');
   });
 
-  it.each([['neutral'], ['default']])('should render color %s', (color) => {
-    const dom = render(<Tag color={color}>333</Tag>);
+  it('should render neutral color', () => {
+    const dom = render(<Tag color="neutral">333</Tag>);
 
     const element = dom.container.querySelector('span') as HTMLElement;
-    expect(element).toHaveClass(`Tag--${color}`);
+    expect(element).toHaveClass('Tag--neutral');
   });
 });
diff --git a/packages/web-react/src/components/Tag/__tests__/useTagStyleProps.test.ts b/packages/web-react/src/components/Tag/__tests__/useTagStyleProps.test.ts
@@ -10,7 +10,7 @@ describe('useTagStyleProps', () => {
     expect(result.current.classProps).toBe('Tag');
   });
 
-  it.each([['neutral'], ['default'], ['success'], ['informative'], ['warning'], ['danger']])(
+  it.each([['neutral'], ['success'], ['informative'], ['warning'], ['danger']])(
     'should return color class %s',
     (color) => {
       const props = { color } as SpiritTagProps;
@@ -30,15 +30,4 @@ describe('useTagStyleProps', () => {
 
     expect(result.current.classProps).toBe('Tag Tag--success Tag--small Tag--subtle');
   });
-
-  it('should return large danger light', () => {
-    const props = {
-      color: 'danger',
-      size: 'large',
-      theme: 'light',
-    } as SpiritTagProps;
-    const { result } = renderHook(() => useTagStyleProps(props));
-
-    expect(result.current.classProps).toBe('Tag Tag--danger Tag--large Tag--light');
-  });
 });
diff --git a/packages/web-react/src/components/Tag/stories/argTypes.ts b/packages/web-react/src/components/Tag/stories/argTypes.ts
@@ -4,7 +4,7 @@ export default {
   color: {
     control: {
       type: 'select',
-      options: [...Object.values(EmotionColors), 'default', 'neutral'],
+      options: [...Object.values(EmotionColors), 'neutral'],
     },
     defaultValue: 'neutral',
   },
@@ -15,13 +15,6 @@ export default {
     },
     defaultValue: Sizes.MEDIUM,
   },
-  theme: {
-    control: {
-      type: 'select',
-      options: ['dark', 'light', undefined],
-    },
-    defaultValue: undefined,
-  },
   isSubtle: {
     control: {
       type: 'boolean',

diff --git a/packages/web-react/src/components/Tag/useTagStyleProps.ts b/packages/web-react/src/components/Tag/useTagStyleProps.ts
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { ElementType } from 'react';
-import { useClassNamePrefix, useDeprecationMessage } from '../../hooks';
+import { useClassNamePrefix } from '../../hooks';
 import { SpiritTagProps } from '../../types';
 
 export interface TagStyles {
@@ -13,30 +13,16 @@ export interface TagStyles {
 export function useTagStyleProps<T extends ElementType = 'span', C = void, S = void>(
   props: SpiritTagProps<T, C, S>,
 ): TagStyles {
-  const { color, isSubtle, size, theme, ...modifiedProps } = props;
+  const { color, isSubtle, size, ...modifiedProps } = props;
 
   const TagClass = useClassNamePrefix('Tag');
   const TagColorClass = `${TagClass}--${color}`;
   const TagSizeClass = `${TagClass}--${size}`;
   const TagSubtleClass = `${TagClass}--subtle`;
-  /** @deprecated Will be removed in the next major version. */
-  const TagThemeClass = `${TagClass}--${theme}`;
   const classProps = classNames(TagClass, {
     [TagColorClass]: color,
     [TagSizeClass]: size,
     [TagSubtleClass]: isSubtle,
-    /** @deprecated Will be removed in the next major version. */
-    [TagThemeClass]: !isSubtle && theme,
-  });
-
-  useDeprecationMessage({
-    method: 'property',
-    trigger: !!theme,
-    componentName: 'Tag',
-    propertyProps: {
-      deprecatedName: 'theme',
-      newName: 'isSubtle',
-    },
   });
 
   return {

diff --git a/packages/web-react/src/types/tag.ts b/packages/web-react/src/types/tag.ts
@@ -8,14 +8,10 @@ import {
   TransferProps,
 } from './shared';
 
-/* @deprecated: 'default' value will be removed in the next major version. */
-export type TagColor<C> = EmotionColorsDictionaryType | 'default' | 'neutral' | C;
+export type TagColor<C> = EmotionColorsDictionaryType | 'neutral' | C;
 
 export type TagSize<S> = SizesDictionaryType | S;
 
-/** @deprecated Will be removed in the next major version. */
-export type TagTheme = 'light' | 'dark';
-
 export interface TagProps<E extends ElementType = 'span', C = void, S = void>
   extends ChildrenProps,
     StyleProps,
@@ -24,10 +20,6 @@ export interface TagProps<E extends ElementType = 'span', C = void, S = void>
   elementType?: E;
   isSubtle?: boolean;
   size?: TagSize<S>;
-  /** @deprecated Will be removed in the next major version. */
-  tag?: E;
-  /** @deprecated Will be removed in the next major version. */
-  theme?: TagTheme;
 }
 
 export type SpiritTagProps<T extends ElementType = 'span', C = void, S = void> = TagProps<T, C, S> &