Skip to content

feature(tabs): add new manual story#21624

Draft
heloiselui wants to merge 5 commits intocarbon-design-system:mainfrom
heloiselui:19760-wc-tabs-parity
Draft

feature(tabs): add new manual story#21624
heloiselui wants to merge 5 commits intocarbon-design-system:mainfrom
heloiselui:19760-wc-tabs-parity

Conversation

@heloiselui
Copy link
Contributor

@heloiselui heloiselui commented Feb 21, 2026

Closes #19760

Sync WC Tab Default and Manual story with React

Changelog

New

  • Added Manual Tabs story to WC

Changed

  • Updated Tabs Default story to match React labels, selected value, panel structure, and tab content layout
  • Updated Tabs story styling to match React panel spacing/background behavior using Carbon tokens
  • Fix validation example form styles in Tabs stories
  • Aligned disabled underline token usage
  • Added hidden close-placeholder structure/style for non-contained tabs to match React spacing behavior

Removed

  • None

Testing / Reviewing

  1. Go to WC Deploy Preview > Tabs > Default and Manual stories
  2. Compare these stories with React, verify visual parity

Note

Please note that no props changed or added

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
Copy link

netlify bot commented Feb 21, 2026

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 4f97d69
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/699ca9d71bfad90008b68e05
😎 Deploy Preview https://deploy-preview-21624--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Feb 21, 2026

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

Name Link
🔨 Latest commit 4f97d69
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/699ca9d70681470008530de9
😎 Deploy Preview https://deploy-preview-21624--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

codecov bot commented Feb 21, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.29%. Comparing base (02663db) to head (4f97d69).

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #21624      +/-   ##
==========================================
- Coverage   87.32%   87.29%   -0.03%     
==========================================
  Files         538      538              
  Lines       43528    43528              
  Branches     6732     6698      -34     
==========================================
- Hits        38010    37997      -13     
- Misses       5356     5369      +13     
  Partials      162      162              
Flag Coverage Δ
main-packages 86.83% <ø> (ø)
web-components 87.53% <ø> (ø)

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

☔ 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.
Copy link
Contributor

@maradwan26 maradwan26 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This mostly looks good just one issue:

The arrow shows up on the left side when moving through the tabs:

Screen.Recording.2026-02-23.at.2.50.59.PM.mov

This happens in the Manual story too.

Comment on lines +78 to +80
<div
class="${prefix}--tabs__nav-item--close--hidden"
aria-hidden="true"></div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is what's causing this

@heloiselui heloiselui marked this pull request as draft February 25, 2026 10:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

2 participants