Description
According to the PatternFly design guidelines, a kebab menu that only has disabled actions should result in the kebab itself being disabled.
Currently, the ResponsiveActions component does not disable the kebab toggle when all actions in the dropdown are disabled, which violates this accessibility guideline.
Current Behavior
-
Kebab toggle is always enabled, regardless of the disabled state of its actions
-
Users can click the kebab and see a list of disabled actions, which is poor UX
Expected Behavior
The kebab toggle should be disabled when:
-
Above the breakpoint: All regular (non-pinned) actions are disabled (pinned items show as buttons)
-
Below the breakpoint: All actions (both pinned and regular) are disabled (pinned items move into the kebab)
Responsive Considerations
The disabled state must be responsive to the viewport width:
-
When above the breakpoint, pinned items show as separate buttons, so only regular items in the kebab should determine the disabled state
-
When the browser is resized below the breakpoint, pinned items move into the kebab dropdown, so they should also be considered in the disabled state calculation
Proposed Solution
Use the OverflowMenuContext to access isBelowBreakpoint state and calculate the kebab's disabled state based on the actual viewport width and which items are currently in the dropdown.
Acceptance Criteria
Jira Issue: PF-4127
Description
According to the PatternFly design guidelines, a kebab menu that only has disabled actions should result in the kebab itself being disabled.
Currently, the ResponsiveActions component does not disable the kebab toggle when all actions in the dropdown are disabled, which violates this accessibility guideline.
Current Behavior
Kebab toggle is always enabled, regardless of the disabled state of its actions
Users can click the kebab and see a list of disabled actions, which is poor UX
Expected Behavior
The kebab toggle should be disabled when:
Above the breakpoint: All regular (non-pinned) actions are disabled (pinned items show as buttons)
Below the breakpoint: All actions (both pinned and regular) are disabled (pinned items move into the kebab)
Responsive Considerations
The disabled state must be responsive to the viewport width:
When above the breakpoint, pinned items show as separate buttons, so only regular items in the kebab should determine the disabled state
When the browser is resized below the breakpoint, pinned items move into the kebab dropdown, so they should also be considered in the disabled state calculation
Proposed Solution
Use the
OverflowMenuContextto accessisBelowBreakpointstate and calculate the kebab's disabled state based on the actual viewport width and which items are currently in the dropdown.Acceptance Criteria
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
Jira Issue: PF-4127