feat(Toolbar): add flexGrow and widths props to ToolbarItem and Toolb… #12237

arpanroy41 · 2026-02-06T08:13:40Z

Fixes #11910 : ToolbarItem - props for width and flex-grow

Add flexGrow prop to ToolbarItem with breakpoint support (default, sm, md, lg, xl, 2xl)
Add flexGrow prop to ToolbarGroup with breakpoint support
Add widths prop to ToolbarItem for setting custom widths at various breakpoints
Add comprehensive tests for new props
Add example documentation showing flexGrow and widths usage

Summary by CodeRabbit

New Features
- Added responsive flexGrow prop to ToolbarGroup and ToolbarItem to enable flexible space distribution across breakpoints.
- Added responsive widths prop to ToolbarItem for dynamic width control at different breakpoints.
Tests
- Added test coverage for new flexGrow and widths functionality across all breakpoints.
Documentation
- Added documentation and code examples demonstrating flexGrow and widths usage.

…arGroup - Add flexGrow prop to ToolbarItem with breakpoint support (default, sm, md, lg, xl, 2xl) - Add flexGrow prop to ToolbarGroup with breakpoint support - Add widths prop to ToolbarItem for setting custom widths at various breakpoints - Add comprehensive tests for new props - Add example documentation showing flexGrow and widths usage Fixes patternfly#11910 Co-authored-by: Cursor <cursoragent@cursor.com>

coderabbitai · 2026-02-06T08:14:02Z

Walkthrough

Introduces responsive flexGrow and widths props to ToolbarGroup and ToolbarItem components for flexible layout control. ToolbarGroup gains breakpoint-specific flex growth, while ToolbarItem adds both flex growth and responsive width sizing via CSS variables. Tests and documentation examples demonstrate usage across multiple breakpoints.

Changes

Cohort / File(s)	Summary
Toolbar Group & Item Props `packages/react-core/src/components/Toolbar/ToolbarGroup.tsx`, `packages/react-core/src/components/Toolbar/ToolbarItem.tsx`	Added responsive `flexGrow` prop with breakpoint variants (default, sm, md, lg, xl, 2xl) to both components. ToolbarItem additionally introduces `widths` prop with CSS variable computation via `setBreakpointCssVars`. Props integrated into component rendering via `formatBreakpointMods` and inline style merging.
Test Coverage `packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx`, `packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx`	Added test suites validating `flexGrow` class generation across all breakpoints and `widths` CSS variable application at multiple breakpoints for ToolbarItem.
Documentation & Examples `packages/react-core/src/components/Toolbar/examples/Toolbar.md`, `packages/react-core/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx`	Added documentation subsection describing flexGrow and widths usage. New example component demonstrates flexGrow on items and groups, fixed/responsive widths, and integration with SearchInput and Button components.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding flexGrow and widths props to ToolbarItem and ToolbarGroup components.
Linked Issues check	✅ Passed	All requirements from issue `#11910` are met: flexGrow prop added to both ToolbarItem and ToolbarGroup with breakpoint support, widths prop restored to ToolbarItem, comprehensive tests added, and example documentation provided.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to issue `#11910`: ToolbarItem/ToolbarGroup component modifications, test coverage, and documentation examples. No unrelated changes detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

patternfly-build · 2026-02-06T08:18:41Z

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

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

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/react-core/src/components/Toolbar/ToolbarItem.tsx (1)
210-222: ⚠️ Potential issue | 🟠 Major

Bug: style prop is now silently dropped for separator variant ToolbarItems.

Before this change, style was part of ...props and forwarded to <Divider>. Now that style is explicitly destructured (Line 210) for the responsive-widths merge, it's no longer included in the rest props spread to the separator's <Divider> (Line 219). Any style passed to a <ToolbarItem variant="separator" style={...} /> will be silently lost.
Proposed fix — forward style to the Divider branch
     return (
       <Divider
         className={css(className)}
         orientation={{ default: 'vertical' }}
+        style={style}
         {...props}
         {...(isDividerRoleValid && { role: role as 'separator' | 'presentation' })}
       />
     );

🤖 Fix all issues with AI agents

In
`@packages/react-core/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx`:
- Line 6: The component definition uses React.FunctionComponent but React isn't
imported; fix by either importing React (e.g., add a default import for React)
so React.FunctionComponent is valid, or change the signature to use the named
FunctionComponent type and import it from 'react' (update the component
declaration ToolbarFlexGrowAndWidths to use FunctionComponent and add the
corresponding import). Ensure the import and the symbol used in the declaration
match.

🧹 Nitpick comments (2)

packages/react-core/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx (2)
1-4: Use the public API import for SearchInput and consolidate imports.

Line 4 uses a deep internal path (@patternfly/react-core/dist/esm/components/SearchInput/SearchInput) which is fragile and bypasses the public API. SearchInput is exported from @patternfly/react-core and can be co-imported with Button and the Toolbar components. Additionally, Button on Line 3 can be merged into the Line 2 import.
♻️ Proposed fix
 import { Fragment } from 'react';
-import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
-import { Button } from '@patternfly/react-core';
-import SearchInput from '@patternfly/react-core/dist/esm/components/SearchInput/SearchInput';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent, Button, SearchInput } from '@patternfly/react-core';
72-104: Consider using semantic heading elements for example section labels.

The bare text nodes ("Using flexGrow on ToolbarItem", etc.) with <br /> spacers are not semantically meaningful. Using <h3> or <p> elements would improve readability in the rendered documentation.

packages/react-core/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx

arpanroy41 marked this pull request as draft February 6, 2026 08:17

coderabbitai bot reviewed Feb 6, 2026

View reviewed changes

packages/react-core/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx Show resolved Hide resolved

arpanroy41 marked this pull request as ready for review February 6, 2026 08:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Toolbar): add flexGrow and widths props to ToolbarItem and Toolb… #12237

feat(Toolbar): add flexGrow and widths props to ToolbarItem and Toolb… #12237

arpanroy41 commented Feb 6, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Feb 6, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Feb 6, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(Toolbar): add flexGrow and widths props to ToolbarItem and Toolb… #12237

Are you sure you want to change the base?

feat(Toolbar): add flexGrow and widths props to ToolbarItem and Toolb… #12237

Conversation

arpanroy41 commented Feb 6, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Uh oh!

patternfly-build commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

arpanroy41 commented Feb 6, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 6, 2026 •

edited

Loading

patternfly-build commented Feb 6, 2026 •

edited

Loading