feat(Tag)!: remove deprecated props and update API

src/components/Tag/Tag.module.css

@@ -41,8 +41,6 @@
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
-
- font: var(--eds-theme-typography-tag);
 }
 
 /**
@@ -72,12 +70,6 @@
  --tag-outline-color: var(--eds-theme-color-border-utility-warning-default);
 }
 
-:where(.tag--yield) {
- --tag-primary-color: var(--eds-theme-color-text-grade-revise);
- --tag-secondary-color: var(--eds-theme-color-background-grade-revise-subtle);
- --tag-outline-color: var(--eds-theme-color-border-grade-revise-default);
-}
-
 :where(.tag--brand) {
  --tag-primary-color: var(--eds-theme-color-text-brand-default);
  --tag-secondary-color: var(--eds-theme-color-background-brand-primary-default);

src/components/Tag/Tag.stories.tsx

@@ -1,11 +1,8 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 import { Tag, VARIANTS } from './Tag';
-import Icon from '../Icon';
 import styles from './Tag.stories.module.css';
 
-const supportedVariants = VARIANTS.filter((variant) => variant !== 'yield');
-
 export default {
  title: 'Components/Tag',
  component: Tag,
@@ -37,7 +34,7 @@ export const Default: Story = {};
 export const Variants: Story = {
  render: (args) => (
  <div className={styles.tagList}>
- {supportedVariants.map((variant) => {
+ {VARIANTS.map((variant) => {
  return (
  <Tag
  data-testid="test"
@@ -58,7 +55,7 @@ export const Variants: Story = {
 export const OutlineVariants: Story = {
  render: (args) => (
  <div className={styles.tagList}>
- {supportedVariants.map((variant) => {
+ {VARIANTS.map((variant) => {
  return (
  <Tag
  key={variant}
@@ -79,11 +76,11 @@ export const OutlineVariants: Story = {
 export const WithIcon: Story = {
  ...Default,
  args: {
- icon: <Icon name="favorite" purpose="decorative" />,
+ icon: 'favorite',
  },
  render: (args) => (
  <div className={styles.tagList}>
- {supportedVariants.map((variant) => {
+ {VARIANTS.map((variant) => {
  return (
  <Tag
  key={variant}
@@ -105,11 +102,11 @@ export const WithLongTextAndIcon: Story = {
  ...Default,
  args: {
  text: 'This tag has a really long text message',
- icon: <Icon name="star" purpose="decorative" />,
+ icon: 'star',
  },
  render: (args) => (
  <div className={styles.tagList}>
- {supportedVariants.map((variant) => {
+ {VARIANTS.map((variant) => {
  return <Tag key={variant} {...args} hasOutline variant={variant} />;
  })}
  </div>

src/components/Tag/Tag.tsx

@@ -1,15 +1,16 @@
 import clsx from 'clsx';
 import React from 'react';
+import type { IconName } from '../Icon';
+import Icon from '../Icon';
 import Text from '../Text';
+
 import styles from './Tag.module.css';
 
 export const VARIANTS = [
  'neutral',
  'error',
  'success',
  'warning',
- /** @deprecated */
- 'yield',
  'brand',
 ] as const;
 
@@ -19,8 +20,6 @@ type Props = {
  /**
  * The color variant of the tag. It will update the content colors, background color, and border (when `hasOutline` is set to `true`).
  *
- * **NOTE**: `yield` variant is deprecated and will be removed in a future release.
- *
  * **Default is `"neutral"`**.
  */
  variant?: Variant;
@@ -29,9 +28,9 @@ type Props = {
  */
  className?: string;
  /**
- * The tag icon
+ * Icon name from the defined set of EDS icons
  */
- icon?: React.ReactNode;
+ icon?: IconName;
  /**
  * The text contents of the tag, nested inside the component, in addition to the icon.
  */
@@ -55,7 +54,6 @@ export const Tag = ({
  icon,
  text,
  hasOutline = false,
- ...other
 }: Props) => {
  const componentClassName = clsx(
  styles['tag'],
@@ -64,17 +62,9 @@ export const Tag = ({
  className,
  );
 
- // TODO: Text component is receiving the tag styles directly, instead of using a wrapper. De-couple
- // and remove deprecated usages
  return (
- <Text
- as="span"
- className={componentClassName}
- size="sm"
- weight="bold"
- {...other}
- >
- {icon}
+ <Text as="span" className={componentClassName} preset="tag">
+ {icon && <Icon name={icon} purpose="decorative" />}
  {text && <span className={styles['tag__body']}>{text}</span>}
  </Text>
  );

src/components/Tag/__snapshots__/Tag.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`<Tag /> Default story renders snapshot 1`] = `
 <span
- class="text text--sm text--bold-weight tag tag--neutral"
+ class="text text--tag tag tag--neutral"
 >
  <span
  class="tag__body"
@@ -17,7 +17,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
  class="tagList"
 >
  <span
- class="text text--sm text--bold-weight tag tag--neutral tag--outline"
+ class="text text--tag tag tag--neutral tag--outline"
  >
  <span
  class="tag__body"
@@ -26,7 +26,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--error tag--outline"
+ class="text text--tag tag tag--error tag--outline"
  >
  <span
  class="tag__body"
@@ -35,7 +35,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--success tag--outline"
+ class="text text--tag tag tag--success tag--outline"
  >
  <span
  class="tag__body"
@@ -44,7 +44,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--warning tag--outline"
+ class="text text--tag tag tag--warning tag--outline"
  >
  <span
  class="tag__body"
@@ -53,7 +53,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--brand tag--outline"
+ class="text text--tag tag tag--brand tag--outline"
  >
  <span
  class="tag__body"
@@ -69,8 +69,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
  class="tagList"
 >
  <span
- class="text text--sm text--bold-weight tag tag--neutral"
- data-testid="test"
+ class="text text--tag tag tag--neutral"
  >
  <span
  class="tag__body"
@@ -79,8 +78,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--error"
- data-testid="test"
+ class="text text--tag tag tag--error"
  >
  <span
  class="tag__body"
@@ -89,8 +87,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--success"
- data-testid="test"
+ class="text text--tag tag tag--success"
  >
  <span
  class="tag__body"
@@ -99,8 +96,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--warning"
- data-testid="test"
+ class="text text--tag tag tag--warning"
  >
  <span
  class="tag__body"
@@ -109,8 +105,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--brand"
- data-testid="test"
+ class="text text--tag tag tag--brand"
  >
  <span
  class="tag__body"
@@ -126,7 +121,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
  class="tagList"
 >
  <span
- class="text text--sm text--bold-weight tag tag--neutral tag--outline"
+ class="text text--tag tag tag--neutral tag--outline"
  >
  <svg
  aria-hidden="true"
@@ -146,7 +141,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--error tag--outline"
+ class="text text--tag tag tag--error tag--outline"
  >
  <svg
  aria-hidden="true"
@@ -166,7 +161,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--success tag--outline"
+ class="text text--tag tag tag--success tag--outline"
  >
  <svg
  aria-hidden="true"
@@ -186,7 +181,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--warning tag--outline"
+ class="text text--tag tag tag--warning tag--outline"
  >
  <svg
  aria-hidden="true"
@@ -206,7 +201,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--brand tag--outline"
+ class="text text--tag tag tag--brand tag--outline"
  >
  <svg
  aria-hidden="true"
@@ -233,7 +228,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
  class="tagList"
 >
  <span
- class="text text--sm text--bold-weight tag tag--neutral tag--outline"
+ class="text text--tag tag tag--neutral tag--outline"
  >
  <svg
  aria-hidden="true"
@@ -253,7 +248,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--error tag--outline"
+ class="text text--tag tag tag--error tag--outline"
  >
  <svg
  aria-hidden="true"
@@ -273,7 +268,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--success tag--outline"
+ class="text text--tag tag tag--success tag--outline"
  >
  <svg
  aria-hidden="true"
@@ -293,7 +288,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--warning tag--outline"
+ class="text text--tag tag tag--warning tag--outline"
  >
  <svg
  aria-hidden="true"
@@ -313,7 +308,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
  </span>
  </span>
  <span
- class="text text--sm text--bold-weight tag tag--brand tag--outline"
+ class="text text--tag tag tag--brand tag--outline"
  >
  <svg
  aria-hidden="true"