feat(tag): updates tags to use DismissibleTag

carbon-design-system · Sep 24, 2024 · 340cfc8 · 340cfc8
1 parent fa31ebb
commit 340cfc8
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 46 deletions.
diff --git a/packages/ibm-products/src/components/AddSelect/AddSelectFilter.js b/packages/ibm-products/src/components/AddSelect/AddSelectFilter.js
@@ -6,7 +6,14 @@
 //
 
 import React, { useState } from 'react';
-import { Button, ButtonSet, Dropdown, Search, Tag, Layer } from '@carbon/react';
+import {
+  Button,
+  ButtonSet,
+  Dropdown,
+  Search,
+  DismissibleTag,
+  Layer,
+} from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Filter } from '@carbon/react/icons';
@@ -148,15 +155,13 @@ export let AddSelectFilter = ({
       {hasFiltersApplied && (
         <div className={`${blockClass}-applied`}>
           {Object.keys(appliedFilters).map((filterType) => (
-            <Tag
+            <DismissibleTag
               key={filterType}
+              text={`${filterType}: ${appliedFilters[filterType]}`}
               type="gray"
               size="sm"
               onClose={() => removeTag(filterType)}
-              filter
-            >
-              {`${filterType}: ${appliedFilters[filterType]}`}
-            </Tag>
+            />
           ))}
           <Button kind="ghost" size="sm" onClick={clearFilters}>
             {clearFiltersText}

diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx b/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx
@@ -27,6 +27,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { isRequiredIf } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
+import { DismissibleTag } from '@carbon/react';
 
 export interface TagOverflowItem {
   className?: string;
@@ -271,19 +272,28 @@ export let TagOverflow = forwardRef(
             if (tagComponent) {
               return getCustomComponent(item, tagComponent);
             } else {
-              const { id, label, tagType, onClose, ...other } = item;
+              const { id, label, tagType, onClose, filter, ...other } = item;
               // If there is no template prop, then render items as Tags
               return (
                 <div ref={(node) => itemRefHandler(id, node)} key={id}>
                   <Tooltip align={overflowAlign} label={label}>
-                    <Tag
-                      {...other}
-                      className={`${blockClass}__item--tag`}
-                      type={tagType}
-                      onClose={() => handleTagOnClose(onClose, index)}
-                    >
-                      {label}
-                    </Tag>
+                    {filter ? (
+                      <DismissibleTag
+                        {...other}
+                        className={`${blockClass}__item--tag`}
+                        type={tagType}
+                        onClose={() => handleTagOnClose(onClose, index)}
+                        text={label}
+                      />
+                    ) : (
+                      <Tag
+                        {...other}
+                        className={`${blockClass}__item--tag`}
+                        type={tagType}
+                      >
+                        {label}
+                      </Tag>
+                    )}
                   </Tooltip>
                 </div>
               );

diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflowModal.tsx b/packages/ibm-products/src/components/TagOverflow/TagOverflowModal.tsx
@@ -15,6 +15,7 @@ import {
   ModalBody,
   Search,
   Tag,
+  DismissibleTag,
 } from '@carbon/react';
 
 import { pkg } from '../../settings';
@@ -38,6 +39,7 @@ interface TagOverflowModalProps {
   allTags?: AllTags;
   className?: string;
   onClose?: () => void;
+  onTagClose: () => void;
   open?: boolean;
   overflowType?: 'default' | 'tag';
   portalTarget?: ReactNode;
@@ -53,6 +55,7 @@ export const TagOverflowModal = ({
   className,
   title,
   onClose,
+  onTagClose,
   open,
   overflowType,
   portalTarget: portalTargetIn,
@@ -107,10 +110,14 @@ export const TagOverflowModal = ({
       <ModalBody className={`${blockClass}__body`} hasForm>
         {getFilteredItems().map(({ label, id, filter }) => {
           const isFilterable = overflowType === 'tag' ? filter : false;
-          return (
-            <Tag key={id} filter={isFilterable}>
-              {label}
-            </Tag>
+          return isFilterable ? (
+            <DismissibleTag
+              key={id}
+              text={label}
+              onClose={() => onTagClose({ label, id })}
+            />
+          ) : (
+            <Tag key={id}>{label}</Tag>
           );
         })}
       </ModalBody>
@@ -128,6 +135,7 @@ TagOverflowModal.propTypes = {
   ),
   className: PropTypes.string,
   onClose: PropTypes.func,
+  onTagClose: PropTypes.func.isRequired,
   open: PropTypes.bool,
   overflowType: PropTypes.oneOf(['default', 'tag']),
   portalTarget: PropTypes.node,

diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflowPopover.tsx b/packages/ibm-products/src/components/TagOverflow/TagOverflowPopover.tsx
@@ -8,7 +8,13 @@
 import React, { useRef, forwardRef, Ref } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Link, Tag, Popover, PopoverContent } from '@carbon/react';
+import {
+  Link,
+  Tag,
+  Popover,
+  PopoverContent,
+  DismissibleTag,
+} from '@carbon/react';
 import { useClickOutside } from '../../global/js/hooks';
 import { pkg } from '../../settings';
 import { TagOverflowItem } from './TagOverflow';
@@ -115,6 +121,24 @@ export const TagOverflowPopover = forwardRef(
                       const isFilterable =
                         overflowType === 'tag' ? filter : false;
 
+                      let tag;
+                      if (isFilterable) {
+                        tag = (
+                          <DismissibleTag
+                            {...other}
+                            onClose={() => onClose?.()}
+                            type={typeValue}
+                            text={label}
+                          />
+                        );
+                      } else {
+                        tag = (
+                          <Tag {...other} type={typeValue}>
+                            {label}
+                          </Tag>
+                        );
+                      }
+
                       return (
                         <li
                           className={cx(`${blockClass}__tag-item`, {
@@ -125,18 +149,7 @@ export const TagOverflowPopover = forwardRef(
                           })}
                           key={id}
                         >
-                          {overflowType === 'tag' ? (
-                            <Tag
-                              {...other}
-                              onClose={() => onClose?.()}
-                              type={typeValue}
-                              filter={isFilterable}
-                            >
-                              {label}
-                            </Tag>
-                          ) : (
-                            label
-                          )}
+                          {overflowType === 'tag' ? tag : label}
                         </li>
                       );
                     }

diff --git a/packages/ibm-products/src/components/TagSet/TagSet.tsx b/packages/ibm-products/src/components/TagSet/TagSet.tsx
@@ -24,6 +24,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { isRequiredIf } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
+import { DismissibleTag } from '@carbon/react';
 
 const componentName = 'TagSet';
 const blockClass = `${pkg.prefix}--tag-set`;
@@ -193,7 +194,7 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
       // create sizing tags
       setHiddenSizingTags(
         tags && tags.length > 0
-          ? tags.map(({ label, id, ...other }, index) => {
+          ? tags.map(({ label, id, filter, ...other }, index) => {
               return (
                 <div
                   key={index}
@@ -204,12 +205,20 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
                     }
                   }}
                 >
-                  <Tag
-                    {...other} // ensure id is not duplicated
-                    data-original-id={id}
-                  >
-                    {label}
-                  </Tag>
+                  {filter ? (
+                    <DismissibleTag
+                      {...other}
+                      data-original-id={id}
+                      text={label}
+                    />
+                  ) : (
+                    <Tag
+                      {...other} // ensure id is not duplicated
+                      data-original-id={id}
+                    >
+                      {label}
+                    </Tag>
+                  )}
                 </div>
               );
             })
@@ -233,16 +242,24 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
       // create visible and overflow tags
       let newDisplayedTags =
         tags && tags.length > 0
-          ? tags.map(({ label, onClose, ...other }, index) => {
+          ? tags.map(({ label, onClose, filter, ...other }, index) => {
               if (index == tags.length - 1 && other.size) {
                 size = other.size;
               }
+
+              if (filter) {
+                return (
+                  <DismissibleTag
+                    {...other}
+                    key={`displayed-tag-${index}`}
+                    onClose={() => handleTagOnClose(onClose, index)}
+                    text={label}
+                  />
+                );
+              }
+
               return (
-                <Tag
-                  {...other}
-                  key={`displayed-tag-${index}`}
-                  onClose={() => handleTagOnClose(onClose, index)}
-                >
+                <Tag {...other} key={`displayed-tag-${index}`}>
                   {label}
                 </Tag>
               );

diff --git a/packages/ibm-products/src/components/TagSet/TagSetModal.tsx b/packages/ibm-products/src/components/TagSet/TagSetModal.tsx
@@ -119,7 +119,7 @@ export const TagSetModal = ({
       </ModalHeader>
       <ModalBody className={`${blockClass}__body`} hasForm>
         {filteredModalTags.map(({ label, ...other }, index) => (
-          <Tag {...other} filter={false} key={`all-tags-${index}`}>
+          <Tag {...other} key={`all-tags-${index}`}>
             {label}
           </Tag>
         ))}