Skip to content

Commit

Permalink
feat: export context-menu list-box styles as CSS literals (#5360)
Browse files Browse the repository at this point in the history
  • Loading branch information
web-padawan authored Jan 23, 2023
1 parent a818756 commit a6edd66
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 72 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

const contextMenuListBox = css`
:host {
--_lumo-list-box-item-selected-icon-display: block;
}
/* Normal item */
[part='items'] ::slotted([role='menuitem']) {
-webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
cursor: default;
outline: none;
border-radius: var(--lumo-border-radius-m);
padding-left: calc(var(--lumo-border-radius-m) / 4);
padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
}
/* Hovered item */
/* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
[part='items'] ::slotted([role='menuitem']:hover:not([disabled])),
[part='items'] ::slotted([role='menuitem'][expanded]:not([disabled])) {
background-color: var(--lumo-primary-color-10pct);
}
/* RTL styles */
:host([dir='rtl']) [part='items'] ::slotted([role='menuitem']) {
padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
padding-right: calc(var(--lumo-border-radius-m) / 4);
}
/* Focused item */
@media (pointer: coarse) {
[part='items'] ::slotted([role='menuitem']:hover:not([expanded]):not([disabled])) {
background-color: transparent;
}
}
`;

registerStyles('vaadin-context-menu-list-box', contextMenuListBox, { moduleId: 'lumo-context-menu-list-box' });

export { contextMenuListBox };
40 changes: 0 additions & 40 deletions packages/context-menu/theme/lumo/vaadin-context-menu-styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,46 +34,6 @@ registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay],
moduleId: 'lumo-context-menu-overlay',
});

registerStyles(
'vaadin-context-menu-list-box',
css`
:host {
--_lumo-list-box-item-selected-icon-display: block;
}
/* Normal item */
[part='items'] ::slotted([role='menuitem']) {
-webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
cursor: default;
outline: none;
border-radius: var(--lumo-border-radius-m);
padding-left: calc(var(--lumo-border-radius-m) / 4);
padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
}
/* Hovered item */
/* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
[part='items'] ::slotted([role='menuitem']:hover:not([disabled])),
[part='items'] ::slotted([role='menuitem'][expanded]:not([disabled])) {
background-color: var(--lumo-primary-color-10pct);
}
/* RTL styles */
:host([dir='rtl']) [part='items'] ::slotted([role='menuitem']) {
padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
padding-right: calc(var(--lumo-border-radius-m) / 4);
}
/* Focused item */
@media (pointer: coarse) {
[part='items'] ::slotted([role='menuitem']:hover:not([expanded]):not([disabled])) {
background-color: transparent;
}
}
`,
{ moduleId: 'lumo-context-menu-list-box' },
);

registerStyles(
'vaadin-context-menu-item',
css`
Expand Down
1 change: 1 addition & 0 deletions packages/context-menu/theme/lumo/vaadin-context-menu.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './vaadin-context-menu-list-box-styles.js';
import './vaadin-context-menu-styles.js';
import '@vaadin/item/theme/lumo/vaadin-item.js';
import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/typography.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

const contextMenuListBox = css`
[part='items'] ::slotted([role='menuitem']) {
min-height: 36px;
padding: 8px 32px 8px 10px;
font-size: var(--material-small-font-size);
line-height: 24px;
}
:host([dir='rtl']) [part='items'] ::slotted([role='menuitem']) {
padding: 8px 10px 8px 32px;
}
[part='items'] ::slotted([role='menuitem']:hover:not([disabled])) {
background-color: var(--material-secondary-background-color);
}
[part='items'] ::slotted([role='menuitem'][focused]:not([disabled])) {
background-color: var(--material-divider-color);
}
@media (pointer: coarse) {
[part='items'] ::slotted([role='menuitem']:hover:not([disabled])),
[part='items'] ::slotted([role='menuitem'][focused]:not([disabled])) {
background-color: transparent;
}
}
`;

registerStyles('vaadin-context-menu-list-box', contextMenuListBox, { moduleId: 'material-context-menu-list-box' });

export { contextMenuListBox };
32 changes: 0 additions & 32 deletions packages/context-menu/theme/material/vaadin-context-menu-styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,38 +15,6 @@ registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay],
moduleId: 'material-context-menu-overlay',
});

registerStyles(
'vaadin-context-menu-list-box',
css`
[part='items'] ::slotted([role='menuitem']) {
min-height: 36px;
padding: 8px 32px 8px 10px;
font-size: var(--material-small-font-size);
line-height: 24px;
}
:host([dir='rtl']) [part='items'] ::slotted([role='menuitem']) {
padding: 8px 10px 8px 32px;
}
[part='items'] ::slotted([role='menuitem']:hover:not([disabled])) {
background-color: var(--material-secondary-background-color);
}
[part='items'] ::slotted([role='menuitem'][focused]:not([disabled])) {
background-color: var(--material-divider-color);
}
@media (pointer: coarse) {
[part='items'] ::slotted([role='menuitem']:hover:not([disabled])),
[part='items'] ::slotted([role='menuitem'][focused]:not([disabled])) {
background-color: transparent;
}
}
`,
{ moduleId: 'material-context-menu-list-box' },
);

registerStyles(
'vaadin-context-menu-item',
css`
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './vaadin-context-menu-list-box-styles.js';
import './vaadin-context-menu-styles.js';
import '@vaadin/item/theme/material/vaadin-item.js';
import '@vaadin/list-box/theme/material/vaadin-list-box.js';
Expand Down

0 comments on commit a6edd66

Please sign in to comment.