feat: adding the ability to disable modals for TagSet component

[jeesonjohnson]

Closes #5726

Added the ability to disable the overflow modal for additional tags. This gives consumers the customisability to use their component to manage and view tags.

What did you change?

packages/ibm-products/src/components/TagSet/TagSet.stories.jsx
packages/ibm-products/src/components/TagSet/TagSet.test.js
packages/ibm-products/src/components/TagSet/TagSet.tsx
packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx

How did you test and verify your work?

Added additional unit tests

Visual testing:

Screen.Recording.2024-07-29.at.14.18.06.mov

[github-actions]

DCO Assistant Lite bot All contributors have signed the DCO.

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	cb89c21
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/6707bac550187d00096e1ccb
😎 Deploy Preview	https://deploy-preview-5753--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jeesonjohnson]

I have read the DCO document and I hereby sign the DCO.

[jeesonjohnson]

recheck

[vladbalanescu]

LGTM

[matthewgallo]

Hey @jeesonjohnson, someone will review this PR after the team has triaged the related issue (#5726). Thanks for your patience! 😄

[jeesonjohnson]

Sounds good, thanks for the update @matthewgallo!

[davidmenendez]

@jeesonjohnson can you please resolve the merge conflicts? thanks!

[jeesonjohnson]

Hey @davidmenendez, gone ahead and resolved the merge conflicts.

[devadula-nandan]

Hey @jeesonjohnson,

After these changes, I am wondering how you could set the onClick on the overflow tag to show your custom modal.

You still need to access the dom directly, get the overflow tag, and attach an onClick event listener. which isn't a good approach in a react-handled application. also, it could be a mess targeting a tagset if there are multiple of them on the page.

instead of introducing disablePopOver we could introduce something like onOverflowClick like below

<TagSet tags={tags} onOverflowClick={customOverflowHandler} />

and in TagSetOverflow.jsx

...
  const handleOverflowClick = () => {
    if (onOverflowClick) {
      onOverflowClick(overflowTags);  // Invoke the custom handler
    } else {
     setPopoverOpen?.(!popoverOpen) // Opens default popover
    }
  };
...
   <Tag onClick={handleOverflowClick} className={cx(`${blockClass}__popover-trigger`)} >
...

Now if onOverflowClick is not passed, we can see the default behavior, and if passed, will invoke the custom handler.
which would give better control to the user.

cc: @davidmenendez any second thoughts/suggestions on this?

[jeesonjohnson]

Hey @davidmenendez!
Thanks for the suggestion, I think that makes a lot of sense, and I have updated the PR accordingly. It should strike a balance between flexibility and solving the issue.

Here is a quick video of the above feature working as expected:

main2.mov

[devadula-nandan]

@jeesonjohnson can you fix the spell checks?

[jeesonjohnson]

@davidmenendez Done! :)

[davidmenendez]

thanks for all your hard work! just a few things i noticed

[netlify]

✅ Deploy Preview for ibm-products-web-components canceled.

Name	Link
🔨 Latest commit	cb89c21
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/6707bac552d7a60008f5ec5c

[jeesonjohnson]

Thanks for @davidmenendez . I have gone ahead and addressed all the comments. Mind having another look please?

[davidmenendez]

LGTM

[devadula-nandan]

LGTM