- {supportedVariants.map((variant) => {
+ {VARIANTS.map((variant) => {
return (
- {supportedVariants.map((variant) => {
+ {VARIANTS.map((variant) => {
return (
,
+ icon: 'star',
},
render: (args) => (
- {supportedVariants.map((variant) => {
+ {VARIANTS.map((variant) => {
return ;
})}
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 7edee16da..17b5fae01 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -1,6 +1,9 @@
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 = [
@@ -8,8 +11,6 @@ export const VARIANTS = [
'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 (
-
- {icon}
+
+ {icon && }
{text && {text}}
);
diff --git a/src/components/Tag/__snapshots__/Tag.test.ts.snap b/src/components/Tag/__snapshots__/Tag.test.ts.snap
index cd8010d5d..cd16ca3c6 100644
--- a/src/components/Tag/__snapshots__/Tag.test.ts.snap
+++ b/src/components/Tag/__snapshots__/Tag.test.ts.snap
@@ -2,7 +2,7 @@
exports[` Default story renders snapshot 1`] = `
OutlineVariants story renders snapshot 1`] = `
class="tagList"
>
OutlineVariants story renders snapshot 1`] = `
OutlineVariants story renders snapshot 1`] = `
OutlineVariants story renders snapshot 1`] = `
OutlineVariants story renders snapshot 1`] = `
Variants story renders snapshot 1`] = `
class="tagList"
>
Variants story renders snapshot 1`] = `
Variants story renders snapshot 1`] = `
Variants story renders snapshot 1`] = `
Variants story renders snapshot 1`] = `
WithIcon story renders snapshot 1`] = `
class="tagList"
>
WithIcon story renders snapshot 1`] = `
WithIcon story renders snapshot 1`] = `
WithIcon story renders snapshot 1`] = `
WithIcon story renders snapshot 1`] = `
WithLongTextAndIcon story renders snapshot 1`] = `
class="tagList"
>
WithLongTextAndIcon story renders snapshot 1`] = `
WithLongTextAndIcon story renders snapshot 1`] = `
WithLongTextAndIcon story renders snapshot 1`] = `
WithLongTextAndIcon story renders snapshot 1`] = `