fix(tag): line up clear all

PhillipsAuctionHouse · Nov 5, 2024 · 662963a · 662963a
1 parent 0b19c71
commit 662963a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 26 deletions.
diff --git 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) => (
-          <Tags
+          <Tag
             key={item.label}
             id={item.id}
             label={item.label}
             onRemove={(tag) => {
               setTagsList(tagsList.filter((item) => item.label !== tag));
             }}
-          ></Tags>
+          ></Tag>
         ))}
       </TagsList>
     </div>

diff --git 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(
       <TagsList {...reqProps} onClear={vi.fn()}>
         {tagsListExample.map((item) => (
-          <Tags key={item.label} id={item.id} label={item.label} onRemove={vi.fn()}></Tags>
+          <Tag key={item.label} id={item.id} label={item.label} onRemove={vi.fn()}></Tag>
         ))}
       </TagsList>,
     );
@@ -90,7 +90,7 @@ describe('Tags', () => {
       render(
         <TagsList {...reqProps} onClear={() => setMockState([])}>
           {mockState.map((item) => (
-            <Tags key={item.label} id={item.id} label={item.label} onRemove={vi.fn()}></Tags>
+            <Tag key={item.label} id={item.id} label={item.label} onRemove={vi.fn()}></Tag>
           ))}
         </TagsList>,
       );
@@ -103,14 +103,14 @@ describe('Tags', () => {
       render(
         <TagsList {...reqProps} onClear={vi.fn()}>
           {mockState.map((item) => (
-            <Tags
+            <Tag
               key={item.label}
               id={item.id}
               label={item.label}
               onRemove={(tag) => {
                 setMockState(mockState.filter((item) => item.label !== tag));
               }}
-            ></Tags>
+            ></Tag>
           ))}
         </TagsList>,
       );
@@ -131,7 +131,7 @@ describe('Tags', () => {
       render(
         <TagsList {...reqProps} onClear={() => setMockState([])}>
           {mockState.map((item) => (
-            <Tags key={item.label} id={item.id} label={item.label} onRemove={vi.fn()}></Tags>
+            <Tag key={item.label} id={item.id} label={item.label} onRemove={vi.fn()}></Tag>
           ))}
         </TagsList>,
       );
@@ -146,14 +146,14 @@ describe('Tags', () => {
       render(
         <TagsList {...reqProps} onClear={vi.fn()}>
           {mockState.map((item) => (
-            <Tags
+            <Tag
               key={item.label}
               id={item.id}
               label={item.label}
               onRemove={(tag) => {
                 setMockState(mockState.filter((item) => item.label !== tag));
               }}
-            ></Tags>
+            ></Tag>
           ))}
         </TagsList>,
       );

diff --git 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 (
     <div className={classnames(`${px}-tag`, `${px}-button`, className)} aria-label="Close Tag">
       <div className={`${px}-tag__label`}>{label}</div>
@@ -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
@@ -1,6 +1,7 @@
 @use '#scss/allPartials' as *;
 
 .#{$px}-tags-list {
+  align-items: center;
   display: flex;
   flex-flow: row wrap;
   gap: $spacing-sm;