Skip to content

Feature: add variant to reveal message actions on hover/focus #792

@nicolethoen

Description

@nicolethoen

Based on the results of the Compass/unified theme dev/design sync on Jan 14 and as a follow up to patternfly/patternfly-design-kit#908

Summary

Implement Opt-in Hover/Focus Visibility for Message Actions

Description

Update the Message component to allow consumers to hide actions until hover/focus. Implemented as an opt-in feature (e.g., via a new prop) and must not change the default behavior of existing chat implementations.

Functional Requirements

  • Opt-in Prop: Create a mechanism (e.g., hideActionsUntilHover) that defaults to false.
  • Visibility Logic:
    • When enabled, actions should be visually hidden (opacity: 0 or visibility: hidden) by default.
    • Actions must occupy their full layout space at all times to prevent content shifting/jumping when toggled.
    • Trigger visibility on hover of the message container or focus-within of the action group.
  • Accessibility (A11y):
    • Keyboard users must be able to Tab into the actions.
    • When an action receives focus, the action group must become visually visible.
    • Ensure the "hover" area is large enough to avoid pointer-precision issues (Message + Action container).

Implementation Strategy:

  • Non-Breaking: Existing messages must continue to show actions persistently unless the new prop is passed.
  • CSS: Use properties that preserve document flow (avoid display: none) to meet the "no layout shift" requirement.

Acceptance Criteria

  • Feature is opt-in and does not change default persistent action visibility.
  • Actions appear on hover/focus and disappear on blur/leave.
  • Zero layout shift occurs when actions toggle visibility.
  • Actions are reachable and visible via keyboard Tab navigation.

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