-
Notifications
You must be signed in to change notification settings - Fork 34
Open
Description
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 tofalse. - Visibility Logic:
- When enabled, actions should be visually hidden (
opacity: 0orvisibility: 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.
- When enabled, actions should be visually hidden (
- 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
Labels
No labels
Type
Projects
Status
Needs triage