Skip to content

fix: update ToggleGroup examples to properly toggle options#12239

Merged
nicolethoen merged 1 commit intopatternfly:mainfrom
arpanroy41:fix/toggle-group-examples-12234
Feb 6, 2026
Merged

fix: update ToggleGroup examples to properly toggle options#12239
nicolethoen merged 1 commit intopatternfly:mainfrom
arpanroy41:fix/toggle-group-examples-12234

Conversation

@arpanroy41
Copy link
Contributor

@arpanroy41 arpanroy41 commented Feb 6, 2026

Fixes #12234

  • Update ToggleGroup Single select example to allow toggling off selected options
  • Update Table Basic example to remove 'Default' option and allow toggling
  • Update Table Actions example to remove 'Default actions toggle' option and allow toggling
  • Update Alert Async live region example to remove 'off' option and make single toggle

Ensures all ToggleGroup instances follow aria-pressed semantics where clicking a selected option unselects it, and removes redundant 'default' or 'off' options that prevent proper toggle behavior.

Summary by CodeRabbit

Release Notes

  • Improvements
    • Toggle controls now support deselection—clicking the currently selected item toggles it off, allowing users to easily clear their selections.
    • Example interfaces updated with simplified toggle options and streamlined controls, removing redundant defaults for a cleaner user experience.

- Update ToggleGroup Single select example to allow toggling off selected options
- Update Table Basic example to remove 'Default' option and allow toggling
- Update Table Actions example to remove 'Default actions toggle' option and allow toggling
- Update Alert Async live region example to remove 'off' option and make single toggle

Ensures all ToggleGroup instances follow aria-pressed semantics where clicking
a selected option unselects it, and removes redundant 'default' or 'off' options
that prevent proper toggle behavior.

Fixes patternfly#12234
@coderabbitai
Copy link

coderabbitai bot commented Feb 6, 2026

Walkthrough

Four example components are updated to implement proper toggle behavior where clicking a selected option deselects it. Redundant toggle options are removed from alert and table examples, while deselection logic is added to toggle group and table examples. Total changes: 6 lines added, 27 lines removed.

Changes

Cohort / File(s) Summary
Alert Toggle Simplification
packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
Removed explicit "off" ToggleGroupItem and updated onChange handler to toggle isActive state, reducing from two-button control to single-toggle behavior.
ToggleGroup Single-Select Toggle
packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx
Implemented deselection logic where clicking the currently selected item clears the selection (sets to empty string) instead of forcing re-selection.
Table Examples Toggle Refactor
packages/react-table/src/components/Table/examples/TableActions.tsx, packages/react-table/src/components/Table/examples/TableBasic.tsx
Removed "default" options from type definition and UI rendering; updated state management to allow empty string for no-selection; implemented toggle-off behavior when re-clicking selected items. Table variant logic updated to treat empty/compact/compactBorderless as equivalent for compact display.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 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 summarizes the main change: updating ToggleGroup examples to properly implement toggle functionality across multiple components.
Linked Issues check ✅ Passed All code changes directly address the requirements from issue #12234: examples now support true toggle behavior (unselecting on reclick), default/off options removed, and aria-pressed semantics properly implemented.
Out of Scope Changes check ✅ Passed All changes are scoped to the four examples specified in issue #12234 with no unrelated modifications to other components or files.
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
Copy link
Collaborator

patternfly-build commented Feb 6, 2026

@arpanroy41 arpanroy41 marked this pull request as ready for review February 6, 2026 09:57
@nicolethoen
Copy link
Contributor

@arpanroy41 thank you so much for the contribution!!! 🚀

@nicolethoen nicolethoen merged commit 4332de4 into patternfly:main Feb 6, 2026
14 checks passed
@arpanroy41
Copy link
Contributor Author

@nicolethoen @thatblindgeye Most Welcome. Being a part of Red Hat and a daily user of PF, It's just a head start to me

@patternfly-build
Copy link
Collaborator

Your changes have been released in:

  • @patternfly/react-code-editor@6.5.0-prerelease.35
  • @patternfly/react-core@6.5.0-prerelease.32
  • @patternfly/react-docs@7.5.0-prerelease.37
  • @patternfly/react-drag-drop@6.5.0-prerelease.32
  • demo-app-ts@6.5.0-prerelease.61
  • @patternfly/react-table@6.5.0-prerelease.33
  • @patternfly/react-templates@6.5.0-prerelease.32

Thanks for your contribution! 🎉

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ToggleGroup - update examples to toggle options

4 participants