patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

fix(Toolbar): add width and flex-grow props to ToolbarItem; add flex-grow to ToolbarGroup; update demo and tests

Open khadesamrudhi opened this issue 4 months ago • 5 comments

This PR adds the previously removed widths prop to <ToolbarItem /> and introduces a new flexGrow prop that maps to .pf-m-flex-grow[on-{breakpoint}] modifiers.

Changes

  • Added responsive widths and flexGrow support using formatBreakpointMods
  • Updated unit tests to verify classnames
  • All ToolbarItem tests passing ✅

Closes #11910

khadesamrudhi avatar Oct 20 '25 18:10 khadesamrudhi

Preview: https://pf-react-pr-12074.surge.sh

A11y report: https://pf-react-pr-12074-a11y.surge.sh

patternfly-build avatar Oct 20 '25 18:10 patternfly-build

First-time contributor, could a maintainer please approve workflows and re-run the failed job?

Notes:

  • The TypeScript parse error in packages/tsconfig.base.json was fixed.
  • Remaining failure is a transient Surge preview upload DNS error (EAI_AGAIN), unrelated to code changes.
  • Changes are limited to ToolbarItem widths + flexGrow, ToolbarGroup flexGrow, tests, demo, and types/global.d.ts.

Thanks!

@mcoker @kmcfaul @thatblindgeye

khadesamrudhi avatar Oct 23 '25 11:10 khadesamrudhi

I’ve fixed the packages/tsconfig.base.json JSON issue and pushed the update. Could you please approve the workflows and re-run the CI? If Surge preview shows EAI_AGAIN, it indicates a transient network error that we can retry. Thanks!

khadesamrudhi avatar Oct 23 '25 12:10 khadesamrudhi

Hi, all automated checks have passed. Requesting a review when convenient. Please let me know if any additional changes are needed. Thank you.
@mcoker @thatblindgeye @kmcfaul

khadesamrudhi avatar Oct 28 '25 06:10 khadesamrudhi

Pushed updates to fix review feedback:

  • ToolbarItem: widths applied via setBreakpointCssVars using base token c_toolbar__item_Width; flexGrow via formatBreakpointMods; removed hardcoded data-testid; JSDoc clarifies flexGrow=1.
  • ToolbarGroup: flexGrow via formatBreakpointMods; JSDoc updated.
  • Tests: ToolbarItem width tests assert CSS var per breakpoint.

No extra demo files included. Previous CI errors from missing react-tokens imports should be resolved. Could you please approve the workflow run so CI can proceed?

@thatblindgeye @mcoker @kmcfaul

khadesamrudhi avatar Nov 09 '25 13:11 khadesamrudhi