Skip to content

ToggleGroup - add fill/full width modifier #12373

Closed

Description

@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

Activity

  1. coderabbitai commented on Apr 23, 2026

    @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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions