Change Details

## Overview A Popover is a localized, non-modal container that pops up over all other elements on a page to convey additional content and actions. ## Codex implementation ### Component task owners - Designer: //add the main designer's name// - Developer: //add the main developer's name// ### Component scope The initial component will have the following features: - Slots for header, body, and footer. - Props: open, title, useCloseButton, closeButtonLabel, props related to actions and their layout, target (similar to Dialog). - Customizable layouts. For example, images in Wikipedia link previews have a vertical and horizontal layout with an image and text. - Trigger a Popover by toggling a button, or hovering a link such as Wikipedia link previews. - An optional caret that points to the triggering element (opt-in). ### Open questions - Regarding focus behavior and tab order, what is the expected behavior for entering and exiting the focus of the Popover when using a keyboard? - Define the user flow when interacting with elements in the background. - Option 1: First lose the focus of the Popover, then interact with other elements. Example: When a Popover is visible, clicking on a link in the background will close the Popover. - Option 2: Instantly able to interact with other elements. Example: When a Popover is visible, clicking on a link in the background will close the Popover and navigate to another page. - In OOUI, the PopupButton uses the `title` HTML attribute. Should the Popover use the `title` attribute? And do we style it similarly to the Tooltip? - In mobile, Popover appears as a bottom sheet and there are known issues with bottom sheets in iOS. Do we include the mobile-friendly version in the MVP? ### Design spec | [[ https://www.figma.com/design/3x57HYvgLTqNA8ogD89vwP/Popover?node-id=1-3726&t=o8SSp1e9ldc50fDu-1 | Component spec sheet ]] | #### Anatomy //Designer should list the structure and properties of the component.// #### Style //Designer should list the visual features of the component.// #### Interaction //Designer should list interaction specifications.// #### Guidelines | [[ https://docs.google.com/document/d/1YFtqPkFnesIqcceOy0qs69MzkBf-4Fyis_bOS8ZBbdk/edit?usp=sharing | Doc with the guidelines ]] | Images | #### Demos //Designer should describe how the component should be documented in the demos, including configurable and standalone demos.// --- ## Acceptance criteria []

## Overview A Popover is a localized, non-modal container that pops up over all other elements on a page to convey additional content and actions. ## Codex implementation ### Component task owners - Designer: //add the main designer's name// - Developer: //add the main developer's name// ### Component scope The initial component will have the following features: - Slots for header, body, and footer. - Props: open, title, useCloseButton, closeButtonLabel, props related to actions and their layout, target (similar to Dialog). - Customizable layouts. For example, images in Wikipedia link previews have a vertical and horizontal layout with an image and text. - Trigger a Popover by toggling a button, or hovering a link such as Wikipedia link previews. - An optional caret that points to the triggering element (opt-in). ### Open questions - Regarding focus behavior and tab order, what is the expected behavior for entering and exiting the focus of the Popover when using a keyboard? - Define the user flow when interacting with elements in the background. - Option 1: First lose the focus of the Popover, then interact with other elements. Example: When a Popover is visible, clicking on a link in the background will close the Popover. - Option 2: Instantly able to interact with other elements. Example: When a Popover is visible, clicking on a link in the background will close the Popover and navigate to another page. - In OOUI, the PopupButton uses the `title` HTML attribute. Should the Popover use the `title` attribute? And do we style it similarly to the Tooltip? - In mobile, Popover appears as a bottom sheet and there are known issues with bottom sheets in iOS. Do we include the mobile-friendly version in the MVP? - Does this need a global event handler for the Escape key? - Does it need to be aware of the teleport target like the Dialog? ### Design spec | [[ https://www.figma.com/design/3x57HYvgLTqNA8ogD89vwP/Popover?node-id=1-3726&t=o8SSp1e9ldc50fDu-1 | Component spec sheet ]] | #### Anatomy //Designer should list the structure and properties of the component.// #### Style //Designer should list the visual features of the component.// #### Interaction //Designer should list interaction specifications.// #### Guidelines | [[ https://docs.google.com/document/d/1YFtqPkFnesIqcceOy0qs69MzkBf-4Fyis_bOS8ZBbdk/edit?usp=sharing | Doc with the guidelines ]] | Images | #### Demos //Designer should describe how the component should be documented in the demos, including configurable and standalone demos.// --- ## Acceptance criteria []