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

- remove deprecated value "yield" from variant list We had both "warning" and "yield" as possible values for this component's variants, which was confusing. Going forward, we will start with just "warning", and remove this option from the component list. If using "yield", please consider using "warning" instead, or some other treatment. - change "icon" prop to be of type `IconName` to be consistent with all other components This syncs up the headless Icon handling across all components, meaning that the names and possible values are determined by the mapped icons, and not any possible ReactNode instance. For consumers, replace any usages of `<Icon />` with the string provided to this cmoponent. Any other nodes used will have to be removed. - tidy up usage of `<Text />` and typography handling simplify the handling of type in this component by moving to use `preset` instead of the more `<font>` like weight and size props, which will also be removed. - update tests, snapshots, and usages.
chanzuckerberg · Feb 28, 2024 · dbfbaa3 · dbfbaa3
1 parent 9ce8625
commit dbfbaa3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 60 deletions.
diff --git a/src/components/Tag/Tag.module.css b/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);

diff --git a/src/components/Tag/Tag.stories.tsx b/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>

diff --git a/src/components/Tag/Tag.tsx b/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>
   );

diff --git a/src/components/Tag/__snapshots__/Tag.test.ts.snap b/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"