Callback function to remove the tag

fortanix · Nov 20, 2024 · 987523d · 987523d
1 parent cedd699
commit 987523d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 7 deletions.
diff --git a/src/components/forms/fields/InputField/InputField.stories.tsx b/src/components/forms/fields/InputField/InputField.stories.tsx
@@ -34,9 +34,7 @@ export default {
   render: (args) => <InputField {...args}/>,
 } satisfies Meta<InputArgs>;
 
-
-export const Standard: Story = {
-};
+export const Standard: Story = {};
 
 export const InvalidInput: Story = {
   args: {
@@ -53,7 +51,7 @@ export const InvalidInput: Story = {
     await delay(100);
     await userEvent.keyboard('{Enter}');
     await fireEvent.submit(input.closest('form')!);
-  },  
+  },
 };
 
 export const InputWithTags: Story = {
@@ -74,6 +72,9 @@ export const InputWithTags: Story = {
         setInputText('');
       }
     };
+    const onRemove = (index: number) => {
+      setTags(tags.filter((_, idx) => idx !== index));
+    };
 
     return (
       <InputField
@@ -82,6 +83,7 @@ export const InputWithTags: Story = {
         onKeyUp={onKeyUp}
         onChange={onChange}
         placeholder=""
+        tagRemoveCallback={onRemove}
       />
     );
   }

diff --git a/src/components/forms/fields/InputField/InputField.tsx b/src/components/forms/fields/InputField/InputField.tsx
@@ -29,6 +29,9 @@ export type InputFieldProps = ComponentProps<'input'> & {
 
   /** Tags to be displayed inside the input field */
   tags?: undefined | string[],
+
+  /** Callback to remove a specific Tag, passed down to Tag component. */
+  tagRemoveCallback?: (index: number) => void,
 };
 /**
  * Input field.
@@ -40,6 +43,7 @@ export const InputField = (props: InputFieldProps) => {
     labelProps = {},
     wrapperProps = {},
     tags = [],
+    tagRemoveCallback,
     ...inputProps
   } = props;
 
@@ -72,7 +76,7 @@ export const InputField = (props: InputFieldProps) => {
       }
       <div className={cl['bk-input-field__tags-and-input']}>
         {tags && (
-          tags.map((tag, idx) => <Tag key={idx} content={tag}/>)
+          tags.map((tag, idx) => <Tag key={idx} content={tag} onRemove={() => tagRemoveCallback?.(idx)}/>)
         )}
         <Input
           {...injectedInputProps}

diff --git a/src/components/text/Tag/Tag.module.scss b/src/components/text/Tag/Tag.module.scss
@@ -14,7 +14,11 @@
     display: flex;
     align-items: center;
     font-size: bk.$font-size-xs;
-    padding: bk.$size-2 0 bk.$size-3 bk.$spacing-2;
+    padding: bk.$size-2 bk.$spacing-2 bk.$size-3;
+
+    &.bk-tag--with-close-button {
+      padding-right: 0;
+    }
 
     .bk-tag__icon {
       --icon-size: 7px;

diff --git a/src/components/text/Tag/Tag.stories.tsx b/src/components/text/Tag/Tag.stories.tsx
@@ -30,3 +30,9 @@ export default {
 export const TagStory: Story = {
   name: 'Tag',
 };
+
+export const TagWithCloseButton: Story = {
+  args: {
+    onRemove: () => console.log('clicked on close button'),
+  },
+};
diff --git a/src/components/text/Tag/Tag.tsx b/src/components/text/Tag/Tag.tsx
@@ -18,6 +18,9 @@ export type TagProps = ComponentProps<'div'> & {
 
   /** Some content to be displayed inside the tag. */
   content: React.ReactNode,
+
+  /** Callback to remove the tag. If set, display a close icon, otherwise it is hidden. */
+  onRemove?: () => void,
 };
 
 /**
@@ -27,6 +30,7 @@ export const Tag = (props: TagProps) => {
   const {
     unstyled = false,
     content = null,
+    onRemove,
     ...propsRest
   } = props;
 
@@ -36,11 +40,14 @@ export const Tag = (props: TagProps) => {
       className={cx(
         'bk',
         { [cl['bk-tag']]: !unstyled },
+        { [cl['bk-tag--with-close-button']]: !!onRemove },
         propsRest.className,
       )}
     >
       {content}
-      <Icon icon="cross" className={cl['bk-tag__icon']} />
+      {onRemove && (
+        <Icon icon="cross" className={cl['bk-tag__icon']} onClick={onRemove}/>
+      )}
     </div>
   );
 };