Skip to content

Conversation

@web-padawan
Copy link
Member

@web-padawan web-padawan commented Aug 26, 2025

Updated Styling docs for overlay based components to use new part names.

@github-actions
Copy link

github-actions bot commented Aug 26, 2025

AI Language Review

In the updated "Popover" documentation file:

  1. Consider replacing "kbd:[Space]" and "kbd:[Esc]" with a format that doesn't use square brackets or explicitly states they are keyboard inputs, as the square brackets might not render correctly in all contexts.

  2. The consistency of providing the user with information about the components could be improved. For example, in the "Accessibility" section, ensure there are clear, detailed explanations for why certain ARIA roles are recommended or how they should be implemented.

  3. In the "Typical Use Cases" section, additional context or explanation for each use case may be helpful to ensure users understand why each configuration is recommended.

Other than these points, the document is well-structured and provides comprehensive information about the component's functionality and styling.

@web-padawan web-padawan marked this pull request as ready for review August 27, 2025 06:30
@web-padawan web-padawan force-pushed the v25-overlay-parts branch 5 times, most recently from a867872 to 8af6bc5 Compare August 27, 2025 07:58
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are still several references to overlay elements in the component articles:

Date picker:

Today button:: `vaadin-date-picker-overlay+++<wbr>+++** [slot="today-button"]**`  
Cancel button:: `vaadin-date-picker-overlay+++<wbr>+++** [slot="cancel-button"]**`

Menu bar:

Separator element  `vaadin-menu-bar-overlay **[role="separator"]**`

MSBC:

Overlay element:: `vaadin-multi-select-combo-box-overlay`
Overlay background:: `vaadin-multi-select-combo-box-overlay+++<wbr>+++**::part(overlay)**`
Overlay content wrapper:: `vaadin-multi-select-combo-box-overlay+++<wbr>+++**::part(content)**`
Overlay in loading state:: `vaadin-multi-select-combo-box-overlay+++<wbr>+++**[loading]**`
Overlay loading indicator:: `vaadin-multi-select-combo-box-overlay+++<wbr>+++**::part(loader)**`

Popover:

The maximum width of popovers is limited to the width of the viewport, minus a small margin that can be customized with CSS by overriding the `inset` property of the `vaadin-popover-overlay` element.
Root element:: `vaadin-popover-overlay`


=== States

Non-modal:: `vaadin-popover-overlay+++<wbr>+++**[modeless]**`


=== Parts

Modality curtain (backdrop):: `vaadin-popover-overlay+++<wbr>+++**::part(backdrop)**`
Popover surface:: `vaadin-popover-overlay+++<wbr>+++**::part(overlay)**`
Content wrapper:: `vaadin-popover-overlay+++<wbr>+++**::part(content)**`
Arrow element:: `vaadin-popover-overlay+++<wbr>+++**::part(arrow)**`

Tooltip:

Root element:: `vaadin-tooltip-overlay`


=== Parts

Tooltip surface:: `vaadin-tooltip-overlay+++<wbr>+++**::part(overlay)**`
Content wrapper:: `vaadin-tooltip-overlay+++<wbr>+++**::part(content)**`

There are also some in the general component styling docs which needs an update.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, fixed. Also updated general styling docs to not mention date-picker overlay.

Contents that exceed the width of the popover will scroll.

The maximum width of popovers is limited to the width of the viewport, minus a small margin that can be customized with CSS by overriding the `inset` property of the `vaadin-popover-overlay` element.
The maximum width of popovers is limited to the width of the viewport, minus a small margin that can be customized by the theme.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might add custom CSS property for this and then list it when adding base styles properties docs.

@web-padawan web-padawan merged commit c66f37f into main Aug 27, 2025
4 checks passed
@web-padawan web-padawan deleted the v25-overlay-parts branch August 27, 2025 13:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants