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