Skip to content

fix(ResponsiveActions): Disable kebab when all actions are disabled#928

Open
rhamilto wants to merge 1 commit intopatternfly:mainfrom
rhamilto:fix/responsive-actions-kebab-disabled-927
Open

fix(ResponsiveActions): Disable kebab when all actions are disabled#928
rhamilto wants to merge 1 commit intopatternfly:mainfrom
rhamilto:fix/responsive-actions-kebab-disabled-927

Conversation

@rhamilto
Copy link
Copy Markdown
Member

@rhamilto rhamilto commented May 6, 2026

Description

Fixes #927

This PR implements the PatternFly design guideline that a kebab menu should be disabled when all of its actions are disabled.

Changes

Implementation

  • Created component that uses to access state
  • Kebab disabled state is now responsive to viewport width:
    • Above breakpoint: Disabled only if all regular (non-pinned) items are disabled (pinned items show as separate buttons)
    • Below breakpoint: Disabled if all items (both pinned and regular) are disabled (pinned items move into the kebab)
  • Tracks disabled state separately for pinned vs regular items

Testing

  • Added 5 comprehensive test cases covering all scenarios
  • All 113 tests passing
  • Snapshots updated

Behavior

Before

  • Kebab was always enabled, even when all actions were disabled
  • Poor UX: users could click the kebab to see a list of disabled actions

After

  • Kebab is automatically disabled when all applicable actions are disabled
  • Disabled state responds to browser resizing (pinned items moving in/out of kebab)
  • Follows PatternFly accessibility guidelines

Backward Compatibility

Fully backward compatible

  • No changes to public API or component props
  • No breaking changes
  • Progressive enhancement only

Screenshots/Examples

The kebab will now properly show as disabled when appropriate, improving accessibility and UX.

Checklist

  • Kebab is disabled when all dropdown actions are disabled
  • Kebab disabled state responds correctly to browser resizing
  • Above breakpoint: only regular items affect kebab disabled state
  • Below breakpoint: both pinned and regular items affect kebab disabled state
  • Fully backward compatible (no breaking changes to public API)
  • Comprehensive test coverage for all scenarios
  • All tests passing
  • Snapshots updated

Fixes patternfly#927

- Uses OverflowMenuContext to access isBelowBreakpoint state
- Kebab disabled state is now responsive to viewport width:
  - Above breakpoint: disabled if all regular items are disabled
  - Below breakpoint: disabled if all items (pinned + regular) are disabled
- Created ResponsiveActionsDropdown component to access context
- Tracks disabled state separately for pinned vs regular items
- Added comprehensive test coverage for all scenarios
- Fully backward compatible (no breaking changes)
@patternfly-build
Copy link
Copy Markdown

patternfly-build commented May 6, 2026

@rhamilto
Copy link
Copy Markdown
Member Author

rhamilto commented May 7, 2026

@nicolethoen, one more fix for openshift/console#16203.

This fix isn't required for openshift/console#16203 since it is not adding actions inside <ResponsiveActions> (I had to add a separate "slot" in the toolbar outside <ResonsiveActions> in order to get the desired dropdown functionality), but it will be needed long term.

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.

ResponsiveActions: Kebab menu should be disabled when all actions are disabled

2 participants