Skip to content

feat(table-toolbar): xs size, contextual layout tokens#22268

Merged
riddhybansal merged 13 commits into
carbon-design-system:mainfrom
maradwan26:condensed--table-toolbar
May 27, 2026
Merged

feat(table-toolbar): xs size, contextual layout tokens#22268
riddhybansal merged 13 commits into
carbon-design-system:mainfrom
maradwan26:condensed--table-toolbar

Conversation

@maradwan26

@maradwan26 maradwan26 commented May 14, 2026

Copy link
Copy Markdown
Contributor

Closes #21345
Partially addresses #13923

Adds xs size and contextual layout tokens support to the Data table toolbar in both React and WC.
Also refactors many of the table-toolbar styles. The children of table-toolbar (e.g. search, menu) now inherit the size of the toolbar, instead of having the toolbar manually set the necessary styles to its children when its size changes; thus, many of these styles have been removed in favour of simply passing the toolbar's size to its children.

Changelog

New

  • New xs size
  • (React) New useTableToolbar context which passes the toolbar's size down to its children
  • (WC) Added normalizeToolbarSize function to table.ts
    • Toolbar only supports xs, sm, and lg. This function normalizes the data-table's xl and md sizes to lg.

Changed

  • (React) Fixed a bug with the ToolbarMenu's size not updating when Toolbar's size updated. This was due to the menu simply not taking applying its size.
  • (WC) Fixed a bug with the toolbar search's hover style not working
  • (WC) Fixed an issue where the overflow-menu would not properly render in the toolbar stories. This was simply due to a missing import.

Removed

  • Removed instances of DataTable normalizing the xs size to sm in the Toolbar, since Toolbar now supports xs.
  • Removed size style selectors in favour of using contextual layout tokens
  • Addressed TODO comments in TableToolbarSearch from feat(search): contextual layout tokens, xs size #21721

Testing / Reviewing

  • Go to the Datatable stories that have a toolbar: DataTable/Batch Actions, DataTable/Toolbar etc. in React and WC
  • xs size should render as expected
  • md and xl sizes should render the Toolbar with its lg size
  • There should be no regressions to DataTable, TableToolbar, etc. nor any other component that uses the styles updated in this PR.

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

@maradwan26 maradwan26 requested review from a team as code owners May 14, 2026 18:13
@maradwan26 maradwan26 requested a review from alina-jacob May 14, 2026 18:14
@netlify

netlify Bot commented May 14, 2026

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 8998428
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6a0610e986548b00080525a2
😎 Deploy Preview https://deploy-preview-22268--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

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

netlify Bot commented May 14, 2026

Copy link
Copy Markdown

✅ Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 8998428
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6a0610e98e7e200008714d99
😎 Deploy Preview https://deploy-preview-22268--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

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

netlify Bot commented May 14, 2026

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit 8998428
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a0610e9b17d4e0008225a4a
😎 Deploy Preview https://deploy-preview-22268--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

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

netlify Bot commented May 14, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit ed73ec3
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6a168fcf3ee722000869de7d
😎 Deploy Preview https://deploy-preview-22268--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

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

netlify Bot commented May 14, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit ed73ec3
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6a168fcff42e6f0008c70b99
😎 Deploy Preview https://deploy-preview-22268--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

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

netlify Bot commented May 14, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit ed73ec3
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a168fcf3ba66000082c92d0
😎 Deploy Preview https://deploy-preview-22268--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

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

codecov Bot commented May 14, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 96.29630% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 95.50%. Comparing base (f4921fc) to head (ed73ec3).
⚠️ Report is 6 commits behind head on main.

Files with missing lines Patch % Lines
...kages/react/src/components/DataTable/DataTable.tsx 50.00% 1 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #22268      +/-   ##
==========================================
+ Coverage   95.49%   95.50%   +0.01%     
==========================================
  Files         582      582              
  Lines       50443    50450       +7     
  Branches     6746     6744       -2     
==========================================
+ Hits        48172    48184      +12     
+ Misses       2138     2133       -5     
  Partials      133      133
Flag Coverage Δ
main-packages 89.21% <88.88%> (+0.01%) ⬆️
web-components 98.08% <100.00%> (+<0.01%) ⬆️

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.

alina-jacob
alina-jacob requested changes May 15, 2026
View reviewed changes

@alina-jacob alina-jacob left a comment •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Awesome work @maradwan26!
Other than the two observations mentioned below, everything else is good to go! 🚀

The tool bar size isn't getting updated for some reason
Image

  • Observations in WC

Not sure if this is a toolbar rendering problem or a ghost button rendering problem.

Image
Image

@maradwan26

maradwan26 commented May 19, 2026

Copy link
Copy Markdown
Contributor Author

@alina-jacob

Observations in React
The tool bar size isn't getting updated for some reason

Fixed ✅, was just a small problem with the story example itself.

Observations in WC
Not sure if this is a toolbar rendering problem or a ghost button rendering problem.

This is an issue with the overflow-menu icon button, I opened an issue for this: #22293

@maradwan26 maradwan26 requested a review from alina-jacob May 19, 2026 15:59
alina-jacob
alina-jacob approved these changes May 20, 2026
View reviewed changes

@alina-jacob alina-jacob left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM! 🚀

adamalston
adamalston reviewed May 21, 2026
View reviewed changes
Comment thread packages/web-components/src/components/data-table/_table-action.scss Outdated
Comment thread packages/web-components/src/components/data-table/__tests__/table-toolbar-content-test.js
@maradwan26 maradwan26 requested a review from adamalston May 21, 2026 18:18
riddhybansal
riddhybansal approved these changes May 27, 2026
View reviewed changes

@riddhybansal riddhybansal left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 💯

@riddhybansal riddhybansal enabled auto-merge May 27, 2026 06:31
@riddhybansal riddhybansal added this pull request to the merge queue May 27, 2026
Merged via the queue into carbon-design-system:main with commit 5773076 May 27, 2026
40 checks passed
@maradwan26 maradwan26 deleted the condensed--table-toolbar branch May 27, 2026 13:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@riddhybansal riddhybansal riddhybansal approved these changes

@devadula-nandan devadula-nandan devadula-nandan approved these changes

@alina-jacob alina-jacob alina-jacob approved these changes

@annawen1 annawen1 Awaiting requested review from annawen1 annawen1 is a code owner automatically assigned from carbon-design-system/developers-system-admins

@tay1orjones tay1orjones Awaiting requested review from tay1orjones tay1orjones is a code owner automatically assigned from carbon-design-system/monorepo-reviewers

@emyarod emyarod Awaiting requested review from emyarod emyarod is a code owner automatically assigned from carbon-design-system/monorepo-reviewers

@adamalston adamalston Awaiting requested review from adamalston

Assignees

No one assigned

Labels

status: one more review 👀

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Condensed components] Data table toolbar: Implementation

5 participants

@maradwan26 @adamalston @riddhybansal @devadula-nandan @alina-jacob