fix(TabList): recalculate overflow on resize by Subhom1 · Pull Request #22719 · carbon-design-system/carbon

Subhom1 · 2026-07-19T12:00:32Z

Fixes stale TabList overflow controls when the tab list is rendered inside a container that changes size without triggering a window resize, such as an animated HeaderPanel.

TabList now observes its own dimensions and recalculates its scrollability and overflow-navigation state whenever its width changes.

Changelog

New

None.

Changed

Updated TabList to observe its own dimensions with ResizeObserver.
Recalculated overflow navigation when the tab list’s container expands or
contracts.
Recalculated scrollability when tab children change.
Added regression coverage for a tab list expanding from zero width.

Removed

None.

Testing / Reviewing

Use the repository Node version:
```
nvm use
```

Run the focused Tabs tests:

yarn jest packages/react/src/components/Tabs/__tests__/Tabs-test.js --runInBand

Verify that the regression test:
- Initially gives the tab list a clientWidth of 0.
- Confirms that overflow is detected.
- Expands the tab list beyond its content width without resizing the window.
- Triggers the element resize observer.
- Confirms the stale right overflow button becomes hidden without requiring
  a click.

Run the remaining focused checks:

yarn workspace @carbon/react exec tsc \
  --project tsconfig.declarations.json \
  --noEmit

yarn eslint packages/react/src/components/Tabs/Tabs.tsx

yarn prettier --check \
  packages/react/src/components/Tabs/Tabs.tsx \
  packages/react/src/components/Tabs/__tests__/Tabs-test.js

Test Screenshots

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 · 2026-07-19T12:00:38Z

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

Name	Link
🔨 Latest commit	`feb0542`
🔍 Latest deploy log	https://app.netlify.com/projects/v3-carbon-web-components/deploys/6a636e283b4b2a0008beb81d
😎 Deploy Preview	https://deploy-preview-22719--v3-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-07-19T12:00:38Z

✅ Deploy Preview for v2-carbon-react ready!

Name	Link
🔨 Latest commit	`feb0542`
🔍 Latest deploy log	https://app.netlify.com/projects/v2-carbon-react/deploys/6a636e2866f1d6000882a74d
😎 Deploy Preview	https://deploy-preview-22719--v2-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-07-19T12:03:37Z

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

Name	Link
🔨 Latest commit	`7f41e95`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a5cbc6450a8e80008986c2d
😎 Deploy Preview	https://deploy-preview-22719--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-07-19T12:03:46Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`7f41e95`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6a5cbc641f6d7800086ca59d
😎 Deploy Preview	https://deploy-preview-22719--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-07-19T12:04:50Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`7f41e95`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6a5cbc6401e38e0008ab48e0
😎 Deploy Preview	https://deploy-preview-22719--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-07-19T12:06:12Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`feb0542`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6a636e28289f7400087e39f7
😎 Deploy Preview	https://deploy-preview-22719--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-07-19T12:06:25Z

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

Name	Link
🔨 Latest commit	`feb0542`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a636e28935a640008889736
😎 Deploy Preview	https://deploy-preview-22719--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-07-19T12:08:33Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`feb0542`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6a636e288ec0ba0008afa785
😎 Deploy Preview	https://deploy-preview-22719--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

codecov · 2026-07-19T12:09:48Z

Codecov Report

❌ Patch coverage is 92.59259% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 89.56%. Comparing base (6cbb521) to head (feb0542).
⚠️ Report is 17 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/react/src/components/Tabs/Tabs.tsx	92.59%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #22719      +/-   ##
==========================================
+ Coverage   89.53%   89.56%   +0.02%     
==========================================
  Files         581      581              
  Lines       53198    53205       +7     
  Branches     7264     7235      -29     
==========================================
+ Hits        47632    47651      +19     
+ Misses       5427     5416      -11     
+ Partials      139      138       -1

Flag	Coverage Δ
main-packages	`87.57% <92.59%> (+0.09%)`	⬆️
web-components	`90.21% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 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.

devadula-nandan

i could notice a regression, the buttons still show even if there is nothing to scroll

Screen.Recording.2026-07-20.at.2.44.50.PM.mov

Subhom1 · 2026-07-21T01:17:43Z

i could notice a regression, the buttons still show even if there is nothing to scroll

Screen.Recording.2026-07-20.at.2.44.50.PM.mov

Hi @devadula-nandan I pushed an update with the changes.

devadula-nandan · 2026-07-24T10:04:01Z

for anyone testing this pr. i hope this would be helpful.

Screen.Recording.2026-07-24.at.3.21.43.PM.mov

@Subhom1 these changes improves the responsiveness of tabs overall. and adapts them to container's dynamic size

i notice just 1 issue. initially the second button shows even if the scroll area ends. but once it settles it works as expected.
can you look at this initial glitch?

Screen.Recording.2026-07-24.at.3.30.12.PM.mov

Subhom1 · 2026-07-24T13:53:04Z

for anyone testing this pr. i hope this would be helpful.

Screen.Recording.2026-07-24.at.3.21.43.PM.mov
@Subhom1 these changes improves the responsiveness of tabs overall. and adapts them to

i notice just 1 issue. initially the second button shows even if the scroll area ends. but once it settles it works as expected. can you look at this initial glitch?

Screen.Recording.2026-07-24.at.3.30.12.PM.mov

I pushed a new update with the changes.

heloiselui

LGTM!

devadula-nandan

LGTM

Subhom1 requested a review from a team as a code owner July 19, 2026 12:00

Subhom1 requested review from devadula-nandan and heloiselui July 19, 2026 12:00

Subhom1 changed the title ~~fix(deps): update dependency downshift to v9.3.2 (#22063)~~ fix(TabList): recalculate overflow on resize Jul 19, 2026

fix(TabList): recalculate overflow on resize

ff9f401

Subhom1 force-pushed the fix-tab-list-overflow-opt-out-11783 branch from 7f41e95 to ff9f401 Compare July 19, 2026 12:02

Subhom1 deployed to @carbon/react storybook preview July 19, 2026 12:15 — with GitHub Actions View deployment

devadula-nandan requested changes Jul 20, 2026

View reviewed changes

Merge branch 'main' into fix-tab-list-overflow-opt-out-11783

0b2badf

Subhom1 deployed to @carbon/react storybook preview July 20, 2026 23:32 — with GitHub Actions View deployment

fix(TabList): improve overflow handling with container reference

db5e636

Subhom1 requested a review from devadula-nandan July 21, 2026 01:17

Subhom1 deployed to @carbon/react storybook preview July 21, 2026 01:21 — with GitHub Actions View deployment

Merge branch 'main' into fix-tab-list-overflow-opt-out-11783

d31749b

Subhom1 deployed to @carbon/react storybook preview July 22, 2026 07:37 — with GitHub Actions View deployment

Merge branch 'main' into fix-tab-list-overflow-opt-out-11783

a8ffb2e

Subhom1 deployed to @carbon/react storybook preview July 22, 2026 22:29 — with GitHub Actions View deployment

Merge branch 'main' into fix-tab-list-overflow-opt-out-11783

45f30fa

Subhom1 deployed to @carbon/react storybook preview July 24, 2026 12:17 — with GitHub Actions View deployment

Subhom1 added 2 commits July 24, 2026 14:49

Merge branch 'main' into fix-tab-list-overflow-opt-out-11783

51b41c6

fix(TabList): hide stale overflow button at scroll end

feb0542

Subhom1 deployed to @carbon/react storybook preview July 24, 2026 14:05 — with GitHub Actions View deployment

heloiselui approved these changes Jul 24, 2026

View reviewed changes

heloiselui added the status: one more review 👀 label Jul 24, 2026

devadula-nandan approved these changes Jul 27, 2026

View reviewed changes

devadula-nandan added this pull request to the merge queue Jul 27, 2026

Merged via the queue into carbon-design-system:main with commit e1ad12a Jul 27, 2026
44 of 45 checks passed

Uh oh!

Conversation

Subhom1 commented Jul 19, 2026

Changelog

Testing / Reviewing

PR Checklist

Uh oh!

netlify Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

netlify Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v2-carbon-react ready!

Uh oh!

netlify Bot commented Jul 19, 2026

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

Uh oh!

netlify Bot commented Jul 19, 2026

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify Bot commented Jul 19, 2026

✅ Deploy Preview for carbon-elements ready!

Uh oh!

netlify Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

netlify Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for carbon-elements ready!

Uh oh!

codecov Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

devadula-nandan left a comment

Choose a reason for hiding this comment

Uh oh!

Subhom1 commented Jul 21, 2026

Uh oh!

devadula-nandan commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Subhom1 commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

heloiselui left a comment

Choose a reason for hiding this comment

Uh oh!

devadula-nandan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented Jul 19, 2026 •

edited

Loading

netlify Bot commented Jul 19, 2026 •

edited

Loading

netlify Bot commented Jul 19, 2026 •

edited

Loading

netlify Bot commented Jul 19, 2026 •

edited

Loading

netlify Bot commented Jul 19, 2026 •

edited

Loading

codecov Bot commented Jul 19, 2026 •

edited

Loading

devadula-nandan commented Jul 24, 2026 •

edited

Loading

Subhom1 commented Jul 24, 2026 •

edited

Loading