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.

Jira Issue: PF-3426

Metadata

Metadata

Assignees

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