feat: added tags with overflow handler

[riddhybansal]

Closes #19249
Closes #19021

Added tags with overflow handling to PageHeaderTabBar component

Changelog

New

• Added tag overflow handling to PageHeaderTabBar component
• Implemented overflow detection and management using useOverflowItems hook
• Added popover for displaying hidden tags when overflow occurs

Changed

• Updated PageHeaderTabBar to display tags next to TabList
• Modified styles to prevent tags from overlapping tabs on screen resize

Testing / Reviewing

• Verify that tags render correctly alongside tabs in the PageHeaderTabBar
• Check that tags overflow properly when screen width is reduced
• Confirm that clicking the "+X" overflow tag opens a popover showing hidden tags
• Verify that the popover closes when clicking outside or when the window is resized
• Check that tags maintain consistent sizing and appearance when in overflow mode
• Test with different quantities and sizes of tags to ensure consistent behavior

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• Updated documentation and storybook examples
• Wrote passing tests that cover this change
• Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	1eb8a2c
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6838ce37fdf0610008d8fae8
😎 Deploy Preview	https://deploy-preview-19427--v11-carbon-web-components.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 project configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	1eb8a2c
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6838ce3714b9ff00084c1a53
😎 Deploy Preview	https://deploy-preview-19427--v11-carbon-react.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 project configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 89.06250% with 7 lines in your changes missing coverage. Please review.

Project coverage is 84.51%. Comparing base (ec63f1d) to head (1eb8a2c).
Report is 10 commits behind head on main.

Files with missing lines	Patch %	Lines
...ges/react/src/components/PageHeader/PageHeader.tsx	89.06%	7 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #19427      +/-   ##
==========================================
+ Coverage   84.48%   84.51%   +0.02%     
==========================================
  Files         373      373              
  Lines       14645    14708      +63     
  Branches     4790     4836      +46     
==========================================
+ Hits        12373    12430      +57     
- Misses       2125     2130       +5     
- Partials      147      148       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kingtraceyj]

looking good! just a few changes.

1. Update left padding for tags
To maintain type alignment tabs need to hang a bit to the left of the grid $spacing-05

2. Focus stuck
When using the keyboard, the ficus gets stuck on monitoring. Could just be me but wanted to double check!

3. Update tag size for storybook
Not a bug, but we would like people to use medium tag size, so could the default size be medium in storybook?

Question:
Just wanted to double check on collapse button. we decided to keep an open slot for teams to insert a button if needed and just wanted to make sure that was there. From Anna:

For the page actions collapsible behavior, I'm thinking we currently support just buttons for now as it's the most common and any requests for more support we can handle later. If teams need to use other components, they won't be blocked as it's also currently an open slot.

[tay1orjones]

This is looking pretty good! I made a few notes below. Also useOverflowItems needs tests, and there's a few annotations where certain lines of PageHeader aren't covered by tests either.

[tay1orjones]

Some longer-form docs would be good as well to explain tags and how they're handled being inserted between tablist and tabpanels. This could be in PageHeader.mdx

[annawen1]

2. Focus stuck When using the keyboard, the ficus gets stuck on monitoring. Could just be me but wanted to double check!

I'm seeing this issue too ^^

Question: Just wanted to double check on collapse button. we decided to keep an open slot for teams to insert a button if needed and just wanted to make sure that was there. From Anna:

For the page actions collapsible behavior, I'm thinking we currently support just buttons for now as it's the most common and any requests for more support we can handle later. If teams need to use other components, they won't be blocked as it's also currently an open slot.

@kingtraceyj I think the collapse button slot will be added later when we work on the general collapsing functionality

[annawen1]

The Tabs section needs to have the margin-inline-start: -$spacing-05; so it can hang like so

[kingtraceyj]

it looks like the focus state on the last tag is cut off for some reason:

i was also looking through some page header bugs from the old version, and this one popped up about adding a border so that when the header scrolls, it does not blend in to the background. Let's add a $border-subtle as the bottom border. i'm working with @annawen1 on the border color layer for the breadcrumb bar and they should be the same—either -00 or -01