Skip to content

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

@rhamilto

Description

@rhamilto

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

  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Needs triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions