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

[arpanroy41]

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 to ToolbarGroup and ToolbarItem for flexible space distribution at breakpoints.
  • Added responsive widths to ToolbarItem for dynamic item widths across breakpoints.

• Tests

  • Added tests validating flexGrow and widths behavior across all breakpoints.

• Documentation

  • Added docs and a new example component demonstrating flexGrow and widths usage.

[coderabbitai]

Walkthrough

Adds responsive flexGrow to ToolbarGroup and both flexGrow and responsive widths (via CSS variables) to ToolbarItem; integrates these props into rendering, adds breakpoint tests, and supplies a documentation example demonstrating usage.

Changes

Cohort / File(s)	Summary
Toolbar Group packages/react-core/src/components/Toolbar/ToolbarGroup.tsx	Adds a breakpoint-aware flexGrow prop to ToolbarGroupProps and wires it into rendering via formatBreakpointMods to emit flex-grow modifier classes.
Toolbar Item packages/react-core/src/components/Toolbar/ToolbarItem.tsx	Adds flexGrow and responsive widths props to ToolbarItemProps; uses formatBreakpointMods for flexGrow, setBreakpointCssVars + c_toolbar__item_Width to generate CSS vars for widths, and merges them into the element style.
Tests packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx, packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx	Adds tests asserting breakpoint-specific pf-m-flex-grow[-on-{bp}] classes and CSS variable outputs for single and breakpoint widths.
Docs & Examples packages/react-core/src/components/Toolbar/examples/Toolbar.md, packages/react-core/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx	Adds an examples subsection and a new example component demonstrating flexGrow on items/groups and fixed/responsive widths.

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 clearly summarizes the main change: adding flexGrow and widths props to ToolbarItem and ToolbarGroup components.
Linked Issues check	✅ Passed	All objectives from issue #11910 are met: flexGrow props added to both ToolbarItem and ToolbarGroup with breakpoint support, widths prop added to ToolbarItem, tests and examples provided.
Out of Scope Changes check	✅ Passed	All changes are within scope. The PR adds the requested flexGrow and widths props with comprehensive tests and documentation; style prop addition to Divider is a supporting change.
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

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

packages/react-core/src/components/Toolbar/ToolbarItem.tsx (1)

226-226: Style merge order: widths prop overrides user-supplied style for matching CSS variables.

On line 256, the spread { ...style, ...responsiveWidths } means if a consumer sets the same CSS variable via the style prop that widths also targets, the widths value wins silently. This is likely the desired behavior (dedicated prop takes precedence), but it's worth being aware of. If you'd prefer user style to win, reverse the spread order.

Also applies to: 256-256

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[patternfly-build]

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.