feat: adding the ability to disable modals for TagSet component

packages/ibm-products/src/components/TagSet/TagSet.stories.jsx

@@ -140,6 +140,11 @@ export default {
     containerWidth: {
       control: { type: 'range', min: 20, max: 800, step: 10 },
     },
+    disableOverflowPopup: {
+      control: { type: 'boolean' },
+      description:
+        'Disable the overflow tags popup component, default to false.',
+    },
     allTagsModalTargetCustomDomNode: {
       control: { type: 'boolean' },
       description: 'Optional DOM node: Modal target defaults to document.body',
@@ -167,6 +172,7 @@ const Template = (argsIn) => {
     <div style={{ width: containerWidth }} ref={ref}>
       <TagSet
         {...args}
+        disableOverflowPopup={args.disableOverflowPopup}
         allTagsModalTarget={
           allTagsModalTargetCustomDomNode ? ref.current : undefined
         }

packages/ibm-products/src/components/TagSet/TagSet.test.js

@@ -181,7 +181,6 @@ describe(TagSet.displayName, () => {
     const visibleTags = 5;
     window.innerWidth = tagWidth * (visibleTags + 1) + 1; // + 1 for overflow
 
-    // const { container } =
     render(<TagSet {...overflowAndModalStrings} tags={tags} />);
 
     const overflow = screen.getByText(`+${tags.length - visibleTags}`);
@@ -197,6 +196,29 @@ describe(TagSet.displayName, () => {
     expect(modal).not.toHaveClass('is-visible');
   });
 
+  it('Tag overflow can be disabled, and clicking on the overflow does not show TagSetModal or overflow popup', async () => {
+    const visibleTags = 5;
+    window.innerWidth = tagWidth * (visibleTags + 1) + 1; // + 1 for overflow
+
+    const { queryByText } = render(
+      <TagSet
+        {...overflowAndModalStrings}
+        disableOverflowPopup={true}
+        tags={tags}
+      />
+    );
+
+    // Ensure the number of visible elements are rendered on the screen
+    expect(queryByText(`+${tags.length - visibleTags}`)).toBeInTheDocument();
+
+    // Ensure the overflow popup is not rendered onto the screen
+    expect(queryByText('View all tags')).toBeNull();
+
+    // Ensure the modal is not rendered onto the screen
+    const modal = screen.queryByRole('presentation');
+    expect(modal).not.toBeInTheDocument();
+  });
+
   it('it requires strings for overflow and modal when more than ten tags supplied.', async () =>
     expectMultipleError(
       [

packages/ibm-products/src/components/TagSet/TagSet.tsx

@@ -98,6 +98,10 @@ interface TagSetProps extends PropsWithChildren {
    * Default will measure the available space of the TagSet container itself.
    */
   containingElementRef?: React.RefObject<HTMLElement>;
+  /**
+   * Disable the overflow tags popup component, default to false.
+   */
+  disableOverflowPopup?: boolean;
   /**
    * maximum visible tags
    */
@@ -161,6 +165,7 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
       allTagsModalSearchLabel,
       allTagsModalSearchPlaceholderText,
       showAllTagsLabel,
+      disableOverflowPopup = false,
       tags,
       containingElementRef,
       measurementOffset = defaults.measurementOffset,
@@ -268,6 +273,7 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
           key="displayed-tag-overflow"
           ref={overflowTag}
           popoverOpen={popoverOpen}
+          disablePopOver={disableOverflowPopup}
           setPopoverOpen={setPopoverOpen}
         />
       );
@@ -280,6 +286,7 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
       overflowClassName,
       overflowType,
       showAllTagsLabel,
+      disableOverflowPopup,
       tags,
       onOverflowTagChange,
       popoverOpen,
@@ -399,15 +406,17 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
             {displayedTags}
           </div>
         </div>
-        <TagSetModal
-          allTags={tags}
-          open={showAllModalOpen}
-          title={allTagsModalTitle}
-          onClose={handleModalClose}
-          searchLabel={allTagsModalSearchLabel}
-          searchPlaceholder={allTagsModalSearchPlaceholderText}
-          portalTarget={allTagsModalTarget}
-        />
+        {!disableOverflowPopup && (
+          <TagSetModal
+            allTags={tags}
+            open={showAllModalOpen}
+            title={allTagsModalTitle}
+            onClose={handleModalClose}
+            searchLabel={allTagsModalSearchLabel}
+            searchPlaceholder={allTagsModalSearchPlaceholderText}
+            portalTarget={allTagsModalTarget}
+          />
+        )}
       </div>
     );
   }
@@ -475,6 +484,10 @@ TagSet.propTypes = {
    */
   /**@ts-ignore */
   containingElementRef: PropTypes.object,
+  /**
+   * Disable the overflow tags popup component, default to false.
+   */
+  disableOverflowPopup: PropTypes.bool,
   /**
    * maximum visible tags
    */

packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx

@@ -51,6 +51,10 @@ interface TagSetOverflowProps {
    * className
    */
   className?: string;
+  /**
+   * Disable the popover component from being rendered. Defaults to false.
+   */
+  disablePopOver?: boolean;
   /**
    * function to execute on clicking show all
    */
@@ -87,6 +91,7 @@ export const TagSetOverflow = React.forwardRef(
       // The component props, in alphabetical order (for consistency).
 
       allTagsModalSearchThreshold = defaults.allTagsModalSearchThreshold,
+      disablePopOver = false,
       className,
       onShowAllClick,
       overflowAlign = 'bottom',
@@ -123,6 +128,24 @@ export const TagSetOverflow = React.forwardRef(
       }
     };
 
+    if (disablePopOver) {
+      return (
+        <span
+          {
+            // Pass through any other property values as HTML attributes.
+            ...rest
+          }
+          aria-hidden={overflowTags.length === 0}
+          className={cx(`${blockClass}`, {
+            [`${blockClass}--hidden`]: overflowTags.length === 0,
+          })}
+          ref={ref || localRef}
+        >
+          <Tag>+{overflowTags.length}</Tag>
+        </span>
+      );
+    }
+
     return (
       <span
         {
@@ -213,6 +236,10 @@ TagSetOverflow.propTypes = {
    * className
    */
   className: PropTypes.string,
+  /**
+   * Disable the popover component from being rendered. Defaults to false.
+   */
+  disablePopOver: PropTypes.bool,
   /**
    * function to execute on clicking show all
    */