From aad451055153fa956e748a3c237d59189694b059 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Tue, 26 Aug 2025 13:13:09 +0300 Subject: [PATCH 1/6] docs: update overlay components styling docs for V25 --- articles/components/avatar/styling.adoc | 5 +- articles/components/combo-box/styling.adoc | 9 ++- .../components/confirm-dialog/styling.adoc | 22 +++---- articles/components/context-menu/styling.adoc | 8 +-- articles/components/crud/styling.adoc | 30 ++++----- articles/components/date-picker/styling.adoc | 5 +- articles/components/dialog/styling.adoc | 27 ++++---- articles/components/login/index.adoc | 3 +- articles/components/login/styling.adoc | 63 +++++++++++-------- articles/components/menu-bar/styling.adoc | 10 +-- articles/components/select/styling.adoc | 9 +-- articles/components/time-picker/styling.adoc | 9 +-- 12 files changed, 101 insertions(+), 99 deletions(-) diff --git a/articles/components/avatar/styling.adoc b/articles/components/avatar/styling.adoc index b186665c52..09694ae317 100644 --- a/articles/components/avatar/styling.adoc +++ b/articles/components/avatar/styling.adoc @@ -88,9 +88,8 @@ Avatar in group:: `vaadin-avatar-group++++++** > vaadin-avatar**` === Overlay -Overlay element:: `vaadin-avatar-group-overlay` -Overlay background:: `vaadin-avatar-group-overlay++++++**::part(overlay)**` -Overlay content wrapper:: `vaadin-avatar-group-overlay++++++**::part(content)**` +Overlay background:: `vaadin-avatar-group++++++**::part(overlay)**` +Overlay content wrapper:: `vaadin-avatar-group++++++**::part(content)**` Menu inside overlay:: `vaadin-avatar-group-menu` Item element:: `vaadin-avatar-group-menu-item` Hovered item:: `vaadin-avatar-group-menu-item++++++**:hover**` diff --git a/articles/components/combo-box/styling.adoc b/articles/components/combo-box/styling.adoc index 5ccc1d4313..2fbe2b15ca 100644 --- a/articles/components/combo-box/styling.adoc +++ b/articles/components/combo-box/styling.adoc @@ -68,11 +68,10 @@ Error message text:: `vaadin-combo-box++++++** > [slot="error-message"]**` === Overlay -Overlay element:: `vaadin-combo-box-overlay` -Overlay background:: `vaadin-combo-box-overlay++++++**::part(overlay)**` -Overlay content wrapper:: `vaadin-combo-box-overlay++++++**::part(content)**` -Overlay in loading state:: `vaadin-combo-box-overlay++++++**[loading]**` -Overlay loading indicator:: `vaadin-combo-box-overlay++++++**::part(loader)**` +Overlay background:: `vaadin-combo-box++++++**::part(overlay)**` +Overlay content wrapper:: `vaadin-combo-box++++++**::part(content)**` +Overlay in loading state:: `vaadin-combo-box++++++**[loading]**` +Overlay loading indicator:: `vaadin-combo-box++++++**::part(loader)**` === Items diff --git a/articles/components/confirm-dialog/styling.adoc b/articles/components/confirm-dialog/styling.adoc index 95f1f30e9d..024f1e372f 100644 --- a/articles/components/confirm-dialog/styling.adoc +++ b/articles/components/confirm-dialog/styling.adoc @@ -12,23 +12,23 @@ include::../_styling-section-intros.adoc[tag=selectors] === Overlay -Root element:: `vaadin-confirm-dialog-overlay` -Modality curtain (backdrop):: `vaadin-confirm-dialog-overlay++++++**::part(backdrop)**` -Dialog surface:: `vaadin-confirm-dialog-overlay++++++**::part(overlay)**` +Root element:: `vaadin-confirm-dialog` +Modality curtain (backdrop):: `vaadin-confirm-dialog++++++**::part(backdrop)**` +Dialog surface:: `vaadin-confirm-dialog++++++**::part(overlay)**` === Header -Header:: `vaadin-confirm-dialog-overlay++++++**::part(header)**` -Default title element:: `vaadin-confirm-dialog-overlay++++++** > [slot="header"]**` +Header:: `vaadin-confirm-dialog++++++**::part(header)**` +Default title element:: `vaadin-confirm-dialog++++++** > [slot="header"]**` === Content Area -Content area:: `vaadin-confirm-dialog-overlay++++++**::part(content)**` -Message:: `vaadin-confirm-dialog-overlay++++++**::part(message)**` +Content area:: `vaadin-confirm-dialog++++++**::part(content)**` +Message:: `vaadin-confirm-dialog++++++**::part(message)**` === Footer -Footer:: `vaadin-confirm-dialog-overlay++++++**::part(footer)**` -Confirm button:: `vaadin-confirm-dialog-overlay++++++** > [slot="confirm-button"]**` -Reject button:: `vaadin-confirm-dialog-overlay++++++** > [slot="reject-button"]**` -Cancel button:: `vaadin-confirm-dialog-overlay++++++** > [slot="cancel-button"]**` +Footer:: `vaadin-confirm-dialog++++++**::part(footer)**` +Confirm button:: `vaadin-confirm-dialog++++++** > [slot="confirm-button"]**` +Reject button:: `vaadin-confirm-dialog++++++** > [slot="reject-button"]**` +Cancel button:: `vaadin-confirm-dialog++++++** > [slot="cancel-button"]**` diff --git a/articles/components/context-menu/styling.adoc b/articles/components/context-menu/styling.adoc index 6819787751..e28dd79b66 100644 --- a/articles/components/context-menu/styling.adoc +++ b/articles/components/context-menu/styling.adoc @@ -10,13 +10,13 @@ order: 50 include::../_styling-section-intros.adoc[tag=selectors] -Root element:: `vaadin-context-menu-overlay` +Root element:: `vaadin-context-menu` === Parts -Overlay background:: `vaadin-context-menu-overlay++++++**::part(overlay)**` -Overlay content wrapper:: `vaadin-context-menu-overlay++++++**::part(content)**` +Overlay background:: `vaadin-context-menu++++++**::part(overlay)**` +Overlay content wrapper:: `vaadin-context-menu++++++**::part(content)**` === Items @@ -26,7 +26,7 @@ Item content wrapper:: `vaadin-context-menu-item++++++**::part(content)**` Item selection indicator:: `vaadin-context-menu-item++++++**::part(checkmark)**` Item selection indicator icon:: `vaadin-context-menu-item++++++**::part(checkmark)::before**` Submenu indicator icon:: `vaadin-context-menu-item++++++**::after**` -Separator:: `vaadin-context-menu-overlay++++++** [role="separator"]**` +Separator:: `vaadin-context-menu-list-box++++++** [role="separator"]**` ==== Item States diff --git a/articles/components/crud/styling.adoc b/articles/components/crud/styling.adoc index e5375b7818..274a04572c 100644 --- a/articles/components/crud/styling.adoc +++ b/articles/components/crud/styling.adoc @@ -23,28 +23,30 @@ Toolbar below grid:: `vaadin-crud++++++**::part(toolbar)**` _See <<../grid/styling#,Grid selectors>> for details on styling the grid_ -=== Side/Bottom Edit Panel +=== Toolbar + +Toolbar:: `vaadin-crud++++++**::part(toolbar)**` +New item button:: `vaadin-crud++++++** > vaadin-button[slot="new-button"]**` + +=== Editor -CRUD with editor on the side:: `vaadin-crud++++++**[editor-position="aside"]**` -CRUD with editor at the bottom:: `vaadin-crud++++++**[editor-position="bottom"]**` -Editor panel:: `vaadin-crud++++++**::part(editor)**` -Editor scroller (content above toolbar):: `vaadin-crud++++++**::part(scroller)**` Editor header:: `vaadin-crud++++++**::part(header)**` +Editor footer:: `vaadin-crud++++++**::part(footer)**` Editor title:: `vaadin-crud++++++** > [slot="header"]**` Editor form:: `vaadin-crud-form` -Editor toolbar:: `vaadin-crud++++++**::part(toolbar)**` -New item button:: `vaadin-crud++++++** > vaadin-button[slot="new-button"]**` Save button:: `vaadin-crud++++++** > vaadin-button[slot="save-button"]**` Cancel button:: `vaadin-crud++++++** > vaadin-button[slot="cancel-button"]**` Delete button:: `vaadin-crud++++++** > vaadin-button[slot="delete-button"]**` +=== Side/Bottom Edit Panel -=== Edit Dialog +CRUD with editor on the side:: `vaadin-crud++++++**[editor-position="aside"]**` +CRUD with editor at the bottom:: `vaadin-crud++++++**[editor-position="bottom"]**` +Editor panel:: `vaadin-crud++++++**::part(editor)**` +Editor scroller (content above toolbar):: `vaadin-crud++++++**::part(scroller)**` -Edit dialog element:: `vaadin-crud-dialog-overlay` -Buttons:: `vaadin-crud-dialog-overlay++++++** > vaadin-button**` -Save button:: `vaadin-crud-dialog-overlay++++++** > vaadin-button[slot="save-button"]**` -Cancel button:: `vaadin-crud-dialog-overlay++++++** > vaadin-button[slot="cancel-button"]**` -Delete button:: `vaadin-crud-dialog-overlay++++++** > vaadin-button[slot="delete-button"]**` +=== Edit Dialog -_See <<../dialog/styling#,Dialog selectors>> for details on styling the dialog_ +Modality curtain (backdrop):: `vaadin-crud++++++**::part(backdrop)**` +Dialog surface:: `vaadin-crud++++++**::part(overlay)**` +Content area:: `vaadin-crud++++++**::part(content)**` diff --git a/articles/components/date-picker/styling.adoc b/articles/components/date-picker/styling.adoc index 1178f94b48..400368fe38 100644 --- a/articles/components/date-picker/styling.adoc +++ b/articles/components/date-picker/styling.adoc @@ -69,8 +69,8 @@ Error message text:: `vaadin-date-picker++++++** > [slot="error-message"]** === Overlay -Overlay element:: `vaadin-date-picker-overlay` -Overlay background:: `vaadin-date-picker-overlay++++++**::part(overlay)**` +Modality curtain (backdrop):: `vaadin-date-picker++++++**::part(backdrop)**` +Overlay background:: `vaadin-date-picker++++++**::part(overlay)**` Overlay content wrapper:: `vaadin-date-picker-overlay-content` Overlay toolbar:: `vaadin-date-picker-overlay-content++++++**::part(toolbar)**` Desktop (large viewport) mode:: `vaadin-date-picker-overlay-content++++++**[desktop]**` @@ -79,6 +79,7 @@ Years toggle button:: `vaadin-date-picker-overlay-content++++++**::part(yea All overlay buttons:: `vaadin-date-picker-overlay-content++++++** > vaadin-button**` Today button:: `vaadin-date-picker-overlay++++++** [slot="today-button"]**` Cancel button:: `vaadin-date-picker-overlay++++++** [slot="cancel-button"]**` +Years toggle button:: `vaadin-date-picker-overlay-content++++++**::part(years-toggle-button)**` ==== Years Years visible:: `vaadin-date-picker-overlay-content++++++**[years-visible]**` diff --git a/articles/components/dialog/styling.adoc b/articles/components/dialog/styling.adoc index 11c0e15751..d289624062 100644 --- a/articles/components/dialog/styling.adoc +++ b/articles/components/dialog/styling.adoc @@ -12,24 +12,25 @@ order: 50 include::../_styling-section-intros.adoc[tag=selectors] -Root element:: `vaadin-dialog-overlay` +Root element:: `vaadin-dialog` === States -Non-modal:: `vaadin-dialog-overlay++++++**[modeless]**` -Dialog with header:: `vaadin-dialog-overlay++++++**[has-header]**` -Dialog with footer:: `vaadin-dialog-overlay++++++**[has-footer]**` -Resizable:: `vaadin-dialog-overlay++++++**[resizable]**` +Non-modal:: `vaadin-dialog++++++**[modeless]**` +Dialog with header:: `vaadin-dialog++++++**[has-header]**` +Dialog with footer:: `vaadin-dialog++++++**[has-footer]**` +Resizable:: `vaadin-dialog++++++**[resizable]**` +Draggable:: `vaadin-dialog++++++**[draggable]**` === Parts -Modality curtain (backdrop):: `vaadin-dialog-overlay++++++**::part(backdrop)**` -Dialog surface:: `vaadin-dialog-overlay++++++**::part(overlay)**` -Header:: `vaadin-dialog-overlay++++++**::part(header)**` -Title wrapper:: `vaadin-dialog-overlay++++++**::part(title)**` -Title element:: `vaadin-dialog-overlay++++++** > [slot="title"]**` -Header custom content wrapper:: `vaadin-dialog-overlay++++++**::part(header-content)**` -Content area:: `vaadin-dialog-overlay++++++**::part(content)**` -Footer:: `vaadin-dialog-overlay++++++**::part(footer)**` +Modality curtain (backdrop):: `vaadin-dialog++++++**::part(backdrop)**` +Dialog surface:: `vaadin-dialog++++++**::part(overlay)**` +Header:: `vaadin-dialog++++++**::part(header)**` +Title wrapper:: `vaadin-dialog++++++**::part(title)**` +Title element:: `vaadin-dialog++++++** > [slot="title"]**` +Header custom content wrapper:: `vaadin-dialog++++++**::part(header-content)**` +Content area:: `vaadin-dialog++++++**::part(content)**` +Footer:: `vaadin-dialog++++++**::part(footer)**` diff --git a/articles/components/login/index.adoc b/articles/components/login/index.adoc index b1dd64bada..327cd4007c 100644 --- a/articles/components/login/index.adoc +++ b/articles/components/login/index.adoc @@ -127,8 +127,7 @@ endif::[] .Password Managers [NOTE] -Login is incompatible with password managers if placed inside another component's shadow root. footnote:[When added to a web component that uses shadow root, password managers are unable to find the input fields and therefore won't work.] This isn't an issue, though, when using Login's modal overlay. - +Login is incompatible with password managers if placed inside another component's shadow root. footnote:[When added to a web component that uses shadow root, password managers are unable to find the input fields and therefore won't work.] == Modal Overlay diff --git a/articles/components/login/styling.adoc b/articles/components/login/styling.adoc index c1e22b820e..97c28cdb3b 100644 --- a/articles/components/login/styling.adoc +++ b/articles/components/login/styling.adoc @@ -10,36 +10,47 @@ order: 50 include::../_styling-section-intros.adoc[tag=selectors] -Login form root component:: `vaadin-login-form` -Login form:: `vaadin-login-form-wrapper` +=== Login Form +Root component:: `vaadin-login-form` +Inner form wrapper:: `vaadin-login-form++++++**::part(form)**` +Form title:: `vaadin-login-form++++++**::part(form-title)**` +Error message section:: `vaadin-login-form++++++**::part(error-message)**` +Error message heading:: `vaadin-login-form++++++**::part(error-message-title)**` +Error message description:: `vaadin-login-form++++++**::part(error-message-description)**` +Footer:: `vaadin-login-form++++++**::part(footer)**` -=== Parts +=== Login Form Fields and Buttons -Inner form wrapper:: `vaadin-login-form-wrapper++++++**::part(form)**` -Form title:: `vaadin-login-form-wrapper++++++**::part(form-title)**` -Error message section:: `vaadin-login-form-wrapper++++++**::part(error-message)**` -Error message heading:: `vaadin-login-form-wrapper++++++**::part(error-message-title)**` -Error message description:: `vaadin-login-form-wrapper++++++**::part(error-message-description)**` -Footer:: `vaadin-login-form-wrapper++++++**::part(footer)**` +Username field:: `vaadin-login-form++++++** vaadin-text-field**` +Password field:: `vaadin-login-form++++++** vaadin-password-field**` +Log In button:: `vaadin-login-form++++++** [slot="submit"]**` +Forgot Password button:: `vaadin-login-form++++++** [slot="forgot-password"]**` === Login Overlay -Overlay element:: `vaadin-login-overlay-wrapper` -Overlay backdrop / modality curtain:: `vaadin-login-overlay-wrapper++++++**::part(backdrop)**` -Outer content wrapper:: `vaadin-login-overlay-wrapper++++++**::part(overlay)**` -Inner content wrapper:: `vaadin-login-overlay-wrapper++++++**::part(content)**` -Overlay card:: `vaadin-login-overlay-wrapper++++++**::part(card)**` -Card header:: `vaadin-login-overlay-wrapper++++++**::part(brand)**` -Title:: `vaadin-login-overlay-wrapper++++++**::part(title)**` -Description / sub-title:: `vaadin-login-overlay-wrapper++++++**::part(description)**` -Login form component in overlay:: `vaadin-login-overlay-wrapper++++++** > vaadin-login-form**` - - -=== Fields and Buttons - -Username field:: `vaadin-login-form-wrapper++++++** vaadin-text-field**` -Password field:: `vaadin-login-form-wrapper++++++** vaadin-password-field**` -Log In button:: `vaadin-login-form++++++** vaadin-button[theme~="submit"]**` -Forgot Password button:: `vaadin-login-form++++++** [slot="forgot-password"]**` +Root component:: `vaadin-login-overlay` +Overlay backdrop / modality curtain:: `vaadin-login-overlay++++++**::part(backdrop)**` +Outer content wrapper:: `vaadin-login-overlay++++++**::part(overlay)**` +Inner content wrapper:: `vaadin-login-overlay++++++**::part(content)**` +Overlay card:: `vaadin-login-overlay++++++**::part(card)**` +Card header:: `vaadin-login-overlay++++++**::part(brand)**` +Title:: `vaadin-login-overlay++++++** [slot="title"]**` +Description / sub-title:: `vaadin-login-overlay++++++**::part(description)**` +Title:: `vaadin-login-overlay++++++** [slot="title"]**` +Form wrapper:: `vaadin-login-overlay++++++**::part(form-wrapper)**` +Inner form wrapper:: `vaadin-login-overlay++++++**::part(form)**` +Form title:: `vaadin-login-overlay++++++**::part(form-title)**` +Error message section:: `vaadin-login-overlay++++++**::part(error-message)**` +Error message heading:: `vaadin-login-overlay++++++**::part(error-message-title)**` +Error message description:: `vaadin-login-overlay++++++**::part(error-message-description)**` +Footer:: `vaadin-login-overlay++++++**::part(footer)**` + + +=== Login Overlay Fields and Buttons + +Username field:: `vaadin-login-overlay++++++** vaadin-text-field**` +Password field:: `vaadin-login-overlay++++++** vaadin-password-field**` +Log In button:: `vaadin-login-overlay++++++** [slot="submit"]**` +Forgot Password button:: `vaadin-login-overlay++++++** [slot="forgot-password"]**` diff --git a/articles/components/menu-bar/styling.adoc b/articles/components/menu-bar/styling.adoc index b307a5dc35..f393800755 100644 --- a/articles/components/menu-bar/styling.adoc +++ b/articles/components/menu-bar/styling.adoc @@ -34,12 +34,12 @@ Button rich content wrapper:: `vaadin-menu-bar-button++++++** > vaadin-menu Button icon:: `vaadin-menu-bar-button++++++** > vaadin-menu-bar-item > vaadin-icon**` -=== Overlay +=== Sub-Menu -Overlay element:: `vaadin-menu-bar-overlay` -Overlay background:: `vaadin-menu-bar-overlay++++++**::part(overlay)**` -Overlay content wrapper:: `vaadin-menu-bar-overlay++++++**::part(content)**` -Nested sub-menu overlay:: `vaadin-menu-bar-overlay++++++**[modeless]**` +Sub-menu element:: `vaadin-menu-bar-submenu` +Sub-menu background:: `vaadin-menu-bar-submenu++++++**::part(overlay)**` +Sub-menu content wrapper:: `vaadin-menu-submenu++++++**::part(content)**` +Nested sub-menu:: `vaadin-menu-bar-submenu++++++**[modeless]**` === Items diff --git a/articles/components/select/styling.adoc b/articles/components/select/styling.adoc index 031b5f3781..03a32a09a7 100644 --- a/articles/components/select/styling.adoc +++ b/articles/components/select/styling.adoc @@ -64,13 +64,8 @@ Invalid field:: `vaadin-select++++++**[invalid]**` Field with error message:: `vaadin-select++++++**[has-error-message]**` Error message:: `vaadin-select++++++**::part(error-message)**` Error message text:: `vaadin-select++++++** > [slot="error-message"]**` - - -=== Overlay - -Overlay element:: `vaadin-select-overlay` -Overlay background:: `vaadin-select-overlay++++++**::part(overlay)**` -Overlay list box wrapper:: `vaadin-select-overlay++++++**::part(content)**` +Overlay background:: `vaadin-select++++++**::part(overlay)**` +Overlay list box wrapper:: `vaadin-select++++++**::part(content)**` === Items diff --git a/articles/components/time-picker/styling.adoc b/articles/components/time-picker/styling.adoc index 7949bd7675..cb0f2987a7 100644 --- a/articles/components/time-picker/styling.adoc +++ b/articles/components/time-picker/styling.adoc @@ -64,13 +64,8 @@ Invalid field:: `vaadin-time-picker++++++**[invalid]**` Field with error message:: `vaadin-time-picker++++++**[has-error-message]**` Error message:: `vaadin-time-picker++++++**::part(error-message)**` Error message text:: `vaadin-time-picker++++++** > [slot="error-message"]**` - - -=== Overlay - -Overlay element:: `vaadin-time-picker-overlay` -Overlay background:: `vaadin-time-picker-overlay++++++**::part(overlay)**` -Overlay content wrapper:: `vaadin-time-picker-overlay++++++**::part(content)**` +Overlay background:: `vaadin-time-picker++++++**::part(overlay)**` +Overlay content wrapper:: `vaadin-time-picker++++++**::part(content)**` === Items From 99200b20a3dfb70e64d62ccb776b292e038625f8 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 27 Aug 2025 13:05:37 +0300 Subject: [PATCH 2/6] docs: remove more mentions of overlay from styling docs --- articles/components/combo-box/styling.adoc | 2 +- articles/components/date-picker/styling.adoc | 4 ++-- articles/components/menu-bar/styling.adoc | 2 +- .../components/multi-select-combo-box/styling.adoc | 9 ++++----- articles/components/popover/index.adoc | 2 +- articles/components/popover/styling.adoc | 12 ++++++------ articles/components/tooltip/styling.adoc | 6 +++--- 7 files changed, 18 insertions(+), 19 deletions(-) diff --git a/articles/components/combo-box/styling.adoc b/articles/components/combo-box/styling.adoc index 2fbe2b15ca..b2ddcdccc1 100644 --- a/articles/components/combo-box/styling.adoc +++ b/articles/components/combo-box/styling.adoc @@ -32,6 +32,7 @@ Read-only:: `vaadin-combo-box++++++**[readonly]**` Disabled:: `vaadin-combo-box++++++**[disabled]**` Not empty:: `vaadin-combo-box++++++**[has-value]**` With open overlay:: `vaadin-combo-box++++++**[opened]**` +Loading items:: `vaadin-combo-box++++++**[loading]**` Hovered:: `vaadin-combo-box++++++**:hover**` @@ -70,7 +71,6 @@ Error message text:: `vaadin-combo-box++++++** > [slot="error-message"]**` Overlay background:: `vaadin-combo-box++++++**::part(overlay)**` Overlay content wrapper:: `vaadin-combo-box++++++**::part(content)**` -Overlay in loading state:: `vaadin-combo-box++++++**[loading]**` Overlay loading indicator:: `vaadin-combo-box++++++**::part(loader)**` diff --git a/articles/components/date-picker/styling.adoc b/articles/components/date-picker/styling.adoc index 400368fe38..11cbbfcce3 100644 --- a/articles/components/date-picker/styling.adoc +++ b/articles/components/date-picker/styling.adoc @@ -77,8 +77,8 @@ Desktop (large viewport) mode:: `vaadin-date-picker-overlay-content++++++** Fullscreen (small viewport) mode:: `vaadin-date-picker-overlay-content++++++**[fullscreen]**` Years toggle button:: `vaadin-date-picker-overlay-content++++++**::part(years-toggle-button)**` All overlay buttons:: `vaadin-date-picker-overlay-content++++++** > vaadin-button**` -Today button:: `vaadin-date-picker-overlay++++++** [slot="today-button"]**` -Cancel button:: `vaadin-date-picker-overlay++++++** [slot="cancel-button"]**` +Today button:: `vaadin-date-picker-overlay-content++++++** [slot="today-button"]**` +Cancel button:: `vaadin-date-picker-overlay-content++++++** [slot="cancel-button"]**` Years toggle button:: `vaadin-date-picker-overlay-content++++++**::part(years-toggle-button)**` ==== Years diff --git a/articles/components/menu-bar/styling.adoc b/articles/components/menu-bar/styling.adoc index f393800755..ebffba05c3 100644 --- a/articles/components/menu-bar/styling.adoc +++ b/articles/components/menu-bar/styling.adoc @@ -49,7 +49,7 @@ Item content wrapper:: `vaadin-menu-bar-item++++++**::part(content)**` Checked item indicator:: `vaadin-menu-bar-item++++++**[menu-item-checked]::part(checkmark)**` Checked item indicator icon:: `vaadin-menu-bar-item++++++**[menu-item-checked]::part(checkmark)::before**` Submenu indicator icon:: `vaadin-menu-bar-item++++++**::after**` -Separator element:: `vaadin-menu-bar-overlay++++++** [role="separator"]**` +Separator element:: `vaadin-menu-bar-submenu++++++** [role="separator"]**` ==== Item States diff --git a/articles/components/multi-select-combo-box/styling.adoc b/articles/components/multi-select-combo-box/styling.adoc index 82a0542ad5..f81065d4c5 100644 --- a/articles/components/multi-select-combo-box/styling.adoc +++ b/articles/components/multi-select-combo-box/styling.adoc @@ -66,6 +66,7 @@ Read-only:: `vaadin-multi-select-combo-box++++++**[readonly]**` Disabled:: `vaadin-multi-select-combo-box++++++**[disabled]**` Not empty:: `vaadin-multi-select-combo-box++++++**[has-value]**` With open overlay:: `vaadin-multi-select-combo-box++++++**[opened]**` +Loading items:: `vaadin-multi-select-combo-box++++++**[loading]**` Hovered:: `vaadin-multi-select-combo-box++++++**:hover**` @@ -116,11 +117,9 @@ Chip container inside field:: `vaadin-multi-select-combo-box++++++**::part( === Overlay -Overlay element:: `vaadin-multi-select-combo-box-overlay` -Overlay background:: `vaadin-multi-select-combo-box-overlay++++++**::part(overlay)**` -Overlay content wrapper:: `vaadin-multi-select-combo-box-overlay++++++**::part(content)**` -Overlay in loading state:: `vaadin-multi-select-combo-box-overlay++++++**[loading]**` -Overlay loading indicator:: `vaadin-multi-select-combo-box-overlay++++++**::part(loader)**` +Overlay background:: `vaadin-multi-select-combo-box++++++**::part(overlay)**` +Overlay content wrapper:: `vaadin-multi-select-combo-box++++++**::part(content)**` +Overlay loading indicator:: `vaadin-multi-select-combo-box++++++**::part(loader)**` === Items diff --git a/articles/components/popover/index.adoc b/articles/components/popover/index.adoc index 7e2a2772e5..fe67f3d3df 100644 --- a/articles/components/popover/index.adoc +++ b/articles/components/popover/index.adoc @@ -327,7 +327,7 @@ By default, the Popover’s size is determined by its contents, but an explicit 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. == Modality diff --git a/articles/components/popover/styling.adoc b/articles/components/popover/styling.adoc index 7d8fbc6662..0c51bdfd11 100644 --- a/articles/components/popover/styling.adoc +++ b/articles/components/popover/styling.adoc @@ -40,20 +40,20 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] include::../_styling-section-intros.adoc[tag=selectors] -Root element:: `vaadin-popover-overlay` +Root element:: `vaadin-popover` === States -Non-modal:: `vaadin-popover-overlay++++++**[modeless]**` +Non-modal:: `vaadin-popover++++++**[modeless]**` === Parts -Modality curtain (backdrop):: `vaadin-popover-overlay++++++**::part(backdrop)**` -Popover surface:: `vaadin-popover-overlay++++++**::part(overlay)**` -Content wrapper:: `vaadin-popover-overlay++++++**::part(content)**` -Arrow element:: `vaadin-popover-overlay++++++**::part(arrow)**` +Modality curtain (backdrop):: `vaadin-popover++++++**::part(backdrop)**` +Popover surface:: `vaadin-popover++++++**::part(overlay)**` +Content wrapper:: `vaadin-popover++++++**::part(content)**` +Arrow element:: `vaadin-popover++++++**::part(arrow)**` === Style Variants diff --git a/articles/components/tooltip/styling.adoc b/articles/components/tooltip/styling.adoc index c1e61434ec..3854aa2593 100644 --- a/articles/components/tooltip/styling.adoc +++ b/articles/components/tooltip/styling.adoc @@ -10,10 +10,10 @@ order: 50 include::../_styling-section-intros.adoc[tag=selectors] -Root element:: `vaadin-tooltip-overlay` +Root element:: `vaadin-tooltip` === Parts -Tooltip surface:: `vaadin-tooltip-overlay++++++**::part(overlay)**` -Content wrapper:: `vaadin-tooltip-overlay++++++**::part(content)**` +Tooltip surface:: `vaadin-tooltip++++++**::part(overlay)**` +Content wrapper:: `vaadin-tooltip++++++**::part(content)**` From 7be216ee356c8ce6782256b4e0720a9e5c232d65 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 27 Aug 2025 13:09:01 +0300 Subject: [PATCH 3/6] docs: remove mention of overlay in sub-components --- articles/styling/styling-components/parts-and-states.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/styling/styling-components/parts-and-states.adoc b/articles/styling/styling-components/parts-and-states.adoc index 49b90f25c1..bacafb5fb2 100644 --- a/articles/styling/styling-components/parts-and-states.adoc +++ b/articles/styling/styling-components/parts-and-states.adoc @@ -74,7 +74,7 @@ vaadin-date-picker::part(input-field)::after { === Sub-Components -In addition to the above, many components utilize “sub-components” with their own root HTML elements. In many cases, these have their own shadow parts, child elements and pseudo-elements. As an example, the Date Picker’s overlay is a separate component with the root element `vaadin-date-picker-overlay`. Each month calendar in it is a `vaadin-month-calendar` component. They both contain various shadow parts. +In addition to the above, many components utilize “sub-components” with their own root HTML elements. In many cases, these have their own shadow parts, child elements and pseudo-elements. As an example, the Date Picker’s overlay content renders month and year selectors using `vaadin-month-calendar` and vaadin-date-picker-year` components. They both contain various shadow parts. [source,css] ---- From f3a8516261e1ffe3b37da8f7c0d74fae10fbff56 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 27 Aug 2025 13:13:15 +0300 Subject: [PATCH 4/6] docs: fix popover states --- articles/components/popover/styling.adoc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/articles/components/popover/styling.adoc b/articles/components/popover/styling.adoc index 0c51bdfd11..affcde8848 100644 --- a/articles/components/popover/styling.adoc +++ b/articles/components/popover/styling.adoc @@ -45,7 +45,8 @@ Root element:: `vaadin-popover` === States -Non-modal:: `vaadin-popover++++++**[modeless]**` +Modal:: `vaadin-popover++++++**[modal]**` +With backdrop:: `vaadin-popover++++++**[with-backdrop]**` === Parts From 3ddf0861e54f24f31bff09b3e3b80b3b027e4b27 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 27 Aug 2025 14:06:07 +0300 Subject: [PATCH 5/6] fix: add missing backtick --- articles/styling/styling-components/parts-and-states.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/styling/styling-components/parts-and-states.adoc b/articles/styling/styling-components/parts-and-states.adoc index bacafb5fb2..79ce0d1395 100644 --- a/articles/styling/styling-components/parts-and-states.adoc +++ b/articles/styling/styling-components/parts-and-states.adoc @@ -74,7 +74,7 @@ vaadin-date-picker::part(input-field)::after { === Sub-Components -In addition to the above, many components utilize “sub-components” with their own root HTML elements. In many cases, these have their own shadow parts, child elements and pseudo-elements. As an example, the Date Picker’s overlay content renders month and year selectors using `vaadin-month-calendar` and vaadin-date-picker-year` components. They both contain various shadow parts. +In addition to the above, many components utilize “sub-components” with their own root HTML elements. In many cases, these have their own shadow parts, child elements and pseudo-elements. As an example, the Date Picker’s overlay content renders month and year selectors using `vaadin-month-calendar` and `vaadin-date-picker-year` components. They both contain various shadow parts. [source,css] ---- From 51cf106239f04dd736309031a93976090b25ca7f Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 27 Aug 2025 16:36:40 +0300 Subject: [PATCH 6/6] fix: remove duplicate years toggle button --- articles/components/date-picker/styling.adoc | 1 - 1 file changed, 1 deletion(-) diff --git a/articles/components/date-picker/styling.adoc b/articles/components/date-picker/styling.adoc index 11cbbfcce3..b168a0c84f 100644 --- a/articles/components/date-picker/styling.adoc +++ b/articles/components/date-picker/styling.adoc @@ -79,7 +79,6 @@ Years toggle button:: `vaadin-date-picker-overlay-content++++++**::part(yea All overlay buttons:: `vaadin-date-picker-overlay-content++++++** > vaadin-button**` Today button:: `vaadin-date-picker-overlay-content++++++** [slot="today-button"]**` Cancel button:: `vaadin-date-picker-overlay-content++++++** [slot="cancel-button"]**` -Years toggle button:: `vaadin-date-picker-overlay-content++++++**::part(years-toggle-button)**` ==== Years Years visible:: `vaadin-date-picker-overlay-content++++++**[years-visible]**`