feat(tagset): support for size on overflow tag (#6065)

* feat(tagset): support for size on overflow tag * fix: remove border to match our design * fix: remove border to match design * chore: add size control in story
carbon-design-system · Sep 20, 2024 · ba29c09 · ba29c09
1 parent 2ac73de
commit ba29c09
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 17 deletions.
diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -3207,6 +3207,8 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
   inset-inline-end: 0;
+  margin-block: 6px;
+  margin-inline-end: 1rem;
 }
 
 .c4p--create-tearsheet-narrow .cds--modal-header__heading,
@@ -3982,6 +3984,10 @@ p.c4p--about-modal__copyright-text:first-child {
   padding: 0;
 }
 
+.c4p--datagrid .cds--noLabel svg.cds--btn__icon {
+  margin-inline-start: 0;
+}
+
 .c4p--datagrid .cds--action-list .cds--btn__icon {
   margin-top: 0;
 }
@@ -4213,6 +4219,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 .c4p--datagrid__sortableColumn .cds--table-sort.c4p--datagrid--table-sort {
   width: calc(100% + 2rem);
+  align-items: inherit;
   margin: 0 calc(-1 * 1rem);
 }
 
@@ -8875,6 +8882,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__popover-trigger {
   font-family: inherit;
+  border: none !important;
 }
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link.cds--link:visited {
   display: inline-block;

diff --git a/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss b/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss
@@ -124,6 +124,8 @@ $block-class-modal: #{$_block-class}-modal;
   }
 
   .#{$block-class-overflow}__popover-trigger {
+    /* stylelint-disable-next-line declaration-no-important */
+    border: none !important;
     font-family: inherit;
   }
 

diff --git a/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx b/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx
@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 
 import { TYPES as tagTypes } from '../TagSet/constants';
 import { pkg } from '../../settings';
@@ -140,6 +140,15 @@ export default {
     containerWidth: {
       control: { type: 'range', min: 20, max: 800, step: 10 },
     },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'md', 'lg'],
+      type: 'string',
+      description:
+        'This prop is only for storybook representation, and does not belong to `tagset` component, the size can be passed to each tag{} in tags[], the overflow tag takes the size of last tag{} in tags[]',
+    },
     allTagsModalTargetCustomDomNode: {
       control: { type: 'boolean' },
       description: 'Optional DOM node: Modal target defaults to document.body',
@@ -159,9 +168,13 @@ export default {
 };
 
 const Template = (argsIn) => {
-  const { containerWidth, allTagsModalTargetCustomDomNode, ...args } = {
+  const { containerWidth, allTagsModalTargetCustomDomNode, size, ...args } = {
     ...argsIn,
   };
+  if (args.tags) {
+    args.tags = args.tags.map((tag) => ({ ...tag, size }));
+  }
+
   const ref = useRef();
   return (
     <div style={{ width: containerWidth }} ref={ref}>
@@ -204,13 +217,20 @@ HundredsOfTags.args = {
 };
 
 const TemplateWithClose = (argsIn) => {
-  const { containerWidth, allTagsModalTargetCustomDomNode, tags, ...args } = {
+  const {
+    containerWidth,
+    allTagsModalTargetCustomDomNode,
+    size,
+    tags,
+    ...args
+  } = {
     ...argsIn,
   };
   const [liveTags, setLiveTags] = useState(
     tags.map((tag) => ({
       ...tag,
       filter: true,
+      size: size,
       onClose: () => handleTagClose(tag.label),
     }))
   );
@@ -220,6 +240,14 @@ const TemplateWithClose = (argsIn) => {
   };
 
   const ref = useRef();
+  useEffect(() => {
+    setLiveTags((prevTags) =>
+      prevTags.map((tag) => ({
+        ...tag,
+        size: size,
+      }))
+    );
+  }, [size]);
   return (
     <div style={{ width: containerWidth }} ref={ref}>
       <TagSet

diff --git a/packages/ibm-products/src/components/TagSet/TagSet.tsx b/packages/ibm-products/src/components/TagSet/TagSet.tsx
@@ -229,18 +229,24 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
     );
 
     useEffect(() => {
+      let size = 'md';
       // create visible and overflow tags
       let newDisplayedTags =
         tags && tags.length > 0
-          ? tags.map(({ label, onClose, ...other }, index) => (
-              <Tag
-                {...other}
-                key={`displayed-tag-${index}`}
-                onClose={() => handleTagOnClose(onClose, index)}
-              >
-                {label}
-              </Tag>
-            ))
+          ? tags.map(({ label, onClose, ...other }, index) => {
+              if (index == tags.length - 1 && other.size) {
+                size = other.size;
+              }
+              return (
+                <Tag
+                  {...other}
+                  key={`displayed-tag-${index}`}
+                  onClose={() => handleTagOnClose(onClose, index)}
+                >
+                  {label}
+                </Tag>
+              );
+            })
           : [];
 
       // separate out tags for the overflow
@@ -266,6 +272,7 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
           overflowAlign={overflowAlign}
           overflowType={overflowType}
           showAllTagsLabel={showAllTagsLabel}
+          size={size}
           key="displayed-tag-overflow"
           ref={overflowTag}
           popoverOpen={popoverOpen}

diff --git a/packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx b/packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx
@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 /**@ts-ignore */
-import { Link, Tag, Popover, PopoverContent } from '@carbon/react';
+import { Link, Popover, PopoverContent, OperationalTag } from '@carbon/react';
 import { useClickOutside } from '../../global/js/hooks';
 import { pkg } from '../../settings';
 
@@ -83,6 +83,10 @@ interface TagSetOverflowProps {
    * label for the overflow show all tags link
    */
   showAllTagsLabel?: string;
+  /**
+   * Size of the overflow tag
+   */
+  size?: string;
 }
 
 export const TagSetOverflow = React.forwardRef(
@@ -100,6 +104,7 @@ export const TagSetOverflow = React.forwardRef(
       showAllTagsLabel,
       popoverOpen,
       setPopoverOpen,
+      size,
       // Collect any other property values passed in.
       ...rest
     }: PropsWithChildren<TagSetOverflowProps>,
@@ -149,12 +154,12 @@ export const TagSetOverflow = React.forwardRef(
           open={popoverOpen}
           autoAlign={overflowAutoAlign}
         >
-          <Tag
+          <OperationalTag
             onClick={() => setPopoverOpen?.(!popoverOpen)}
             className={cx(`${blockClass}__popover-trigger`)}
-          >
-            {`+${overflowTags.length}`}
-          </Tag>
+            size={size}
+            text={`+${overflowTags.length}`}
+          />
           <PopoverContent>
             <div ref={overflowTagContent} className={`${blockClass}__content`}>
               <ul className={`${blockClass}__tag-list`}>
@@ -265,4 +270,8 @@ TagSetOverflow.propTypes = {
    * label for the overflow show all tags link
    */
   showAllTagsLabel: PropTypes.string,
+  /**
+   * Size of the overflow tag
+   */
+  size: PropTypes.string,
 };