ToggleGroup - add fill/full width modifier

[thatblindgeye]

Context

Followup to patternfly/patternfly#8326 which added a fill modifier to the ToggleGroup component in patternfly core.

Changes in patternfly core

• Added .pf-m-fill modifier to make toggle group items fill available space
• Items use display: flex; flex-grow: 1 and buttons use flex-basis: 100%; justify-content: center
• Added "Full width toggle" example with 3 variations (basic, multi-select, with disabled item)
• Updated documentation table with the new modifier

Work needed in patternfly-react

1. Add isFill prop to ToggleGroup component

File: packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx:12

• Add new prop to ToggleGroupProps interface after isCompact
• Type: boolean with default false
• Description: "Modifies the toggle group items to fill the available space."

2. Apply fill modifier class

File: packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx:35

• Update className in the component render to include isFill && styles.modifiers.fill

3. Add full width toggle example

Files:

• packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx (new file)

• packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md (update around line 62)

• Create new example demonstrating the fill modifier

• Add example section after "Compact toggle group"

• Include variations matching patternfly core examples:

  • Basic fill toggle group
  • Fill toggle group with multi-select
  • Fill toggle group with disabled item

---

🤖 Generated with Claude Code

---

Jira Issue: PF-4041

[coderabbitai]

🔗 Related PRs

#12199 - chore(grid,stack): update examples flags from js to ts [merged]
#12239 - fix: update ToggleGroup examples to properly toggle options [merged]
#12288 - feat(Accordion): Added isPlain and isNoPlainOnGlass prop to Accordion [merged]
#12292 - feat(Data list): Add isNoPlainOnGlass prop to add pf-m-no-plain modfier to the data list [merged]
#12326 - feat(Menu toggle): Added support for a adding styling for a menu toggle in a form [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!