diff --git a/src/components/Tags/Tags.stories.tsx b/src/components/Tags/Tags.stories.tsx
index 10c55e3e..5cffe75c 100644
--- a/src/components/Tags/Tags.stories.tsx
+++ b/src/components/Tags/Tags.stories.tsx
@@ -1,7 +1,7 @@
import type { Meta } from '@storybook/react';
import { useState } from 'react';
-import TagsList, { Tags, TagsListProps } from './Tags';
+import TagsList, { Tag, TagsListProps } from './Tags';
const meta = {
title: 'Components/Tags',
@@ -68,14 +68,14 @@ export const Playground = ({ playgroundWidth, ...args }: StoryProps) => {
}}
>
{tagsList.map((item) => (
- {
setTagsList(tagsList.filter((item) => item.label !== tag));
}}
- >
+ >
))}
diff --git a/src/components/Tags/Tags.test.tsx b/src/components/Tags/Tags.test.tsx
index 3c1a74fd..0ae551c2 100644
--- a/src/components/Tags/Tags.test.tsx
+++ b/src/components/Tags/Tags.test.tsx
@@ -2,9 +2,9 @@ import { useState } from 'react';
import { render, screen, renderHook } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { runCommonTests } from '../../utils/testUtils';
-import TagsList, { Tags, TagsProps } from './Tags';
+import TagsList, { Tag, TagProps } from './Tags';
-const useMockState = (tagsList: TagsProps[]) => {
+const useMockState = (tagsList: TagProps[]) => {
const [mockState, setMockState] = useState(tagsList);
return {
mockState,
@@ -71,7 +71,7 @@ describe('Tags', () => {
render(
{tagsListExample.map((item) => (
-
+
))}
,
);
@@ -90,7 +90,7 @@ describe('Tags', () => {
render(
setMockState([])}>
{mockState.map((item) => (
-
+
))}
,
);
@@ -103,14 +103,14 @@ describe('Tags', () => {
render(
{mockState.map((item) => (
- {
setMockState(mockState.filter((item) => item.label !== tag));
}}
- >
+ >
))}
,
);
@@ -131,7 +131,7 @@ describe('Tags', () => {
render(
setMockState([])}>
{mockState.map((item) => (
-
+
))}
,
);
@@ -146,14 +146,14 @@ describe('Tags', () => {
render(
{mockState.map((item) => (
- {
setMockState(mockState.filter((item) => item.label !== tag));
}}
- >
+ >
))}
,
);
diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx
index a9093321..21adca1a 100644
--- a/src/components/Tags/Tags.tsx
+++ b/src/components/Tags/Tags.tsx
@@ -24,10 +24,6 @@ export interface TagsListProps {
* Child element pass in to display as item content.
*/
children?: React.ReactNode;
- /**
- * Individual Tag class
- */
- tagClassName?: string;
/**
* `onRemove` callback provides the tag that is to be removed as a string
*/
@@ -38,7 +34,7 @@ export interface TagsListProps {
clearAllLabel?: string;
}
-export interface TagsProps {
+export interface TagProps {
/**
* Unique id for component testing
*/
@@ -57,7 +53,7 @@ export interface TagsProps {
label: string;
}
-export const Tags = ({ id, className, onRemove, label }: TagsProps) => {
+export const Tag = ({ id, className, onRemove, label }: TagProps) => {
return (
{label}
@@ -70,14 +66,16 @@ export const Tags = ({ id, className, onRemove, label }: TagsProps) => {
);
};
-const TagsList = ({
- className,
- children,
- tagClassName,
- clearAllLabel = 'Clear All',
- onClear,
- ...props
-}: TagsListProps) => {
+/**
+ * ## Overview
+ *
+ * Overview of Tags component
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=11648-3225&node-type=canvas&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-tags--overview)
+ */
+const TagsList = ({ className, children, clearAllLabel = 'Clear All', onClear, ...props }: TagsListProps) => {
const type = 'tags-list';
const { className: baseClassName, ...commonProps } = getCommonProps(props, 'TagsList');
const { id } = props;
diff --git a/src/components/Tags/_tags.scss b/src/components/Tags/_tags.scss
index 87121e48..d5673d73 100644
--- a/src/components/Tags/_tags.scss
+++ b/src/components/Tags/_tags.scss
@@ -1,6 +1,7 @@
@use '#scss/allPartials' as *;
.#{$px}-tags-list {
+ align-items: center;
display: flex;
flex-flow: row wrap;
gap: $spacing-sm;