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 covering flexGrow and widths behavior across all breakpoints.

• Documentation

  • Added docs and an example 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 tests covering breakpoints, and includes a new example and docs for usage demonstration.

Changes

Cohort / File(s)	Summary
Toolbar Group packages/react-core/src/components/Toolbar/ToolbarGroup.tsx	Adds flexGrow to ToolbarGroupProps (breakpoint-specific) and passes it through to formatBreakpointMods so groups can flex-grow per breakpoint.
Toolbar Item packages/react-core/src/components/Toolbar/ToolbarItem.tsx	Adds flexGrow and widths props to ToolbarItemProps; computes responsive CSS vars via setBreakpointCssVars for widths, merges into style, and uses formatBreakpointMods for flexGrow.
Tests packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx, packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx	Adds tests validating flexGrow class modifiers across breakpoints and widths CSS variable output (single and breakpoint-specific).
Docs & Examples packages/react-core/src/components/Toolbar/examples/Toolbar.md, packages/react-core/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx	Adds a documentation subsection and a new example component demonstrating flexGrow (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 Toolbar components, which matches the core objectives in the PR.
Linked Issues check	✅ Passed	All requirements from issue #11910 are met: flexGrow props added to both ToolbarItem and ToolbarGroup with breakpoint support, widths prop reintroduced to ToolbarItem, and comprehensive tests and documentation provided.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objectives: flexGrow and widths props, their tests, and supporting documentation examples. No unrelated modifications 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

• 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.