From 1710cfb8bcb10c73ed0f0cdfe20c2cc1bda2f8eb Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 6 Dec 2023 17:06:18 -0500 Subject: [PATCH] update; #1700 --- docs/pages/components/menu-item.md | 120 +++++++++--------- docs/pages/resources/changelog.md | 1 + .../menu-item/menu-item.component.ts | 4 +- src/components/menu-item/menu-item.styles.ts | 47 +++---- 4 files changed, 83 insertions(+), 89 deletions(-) diff --git a/docs/pages/components/menu-item.md b/docs/pages/components/menu-item.md index 5fa0b207..b5098843 100644 --- a/docs/pages/components/menu-item.md +++ b/docs/pages/components/menu-item.md @@ -9,7 +9,7 @@ layout: component Option 1 Option 2 - Option 3 + Option 3 Checkbox Disabled @@ -37,7 +37,7 @@ const App = () => ( Option 1 Option 2 - Option 3 + Option 3 Checkbox @@ -60,64 +60,6 @@ const App = () => ( ## Examples -### Loading - -Use the `loading` attribute to make a menu item busy. Clicks will be suppressed until the loading state is removed. - -```html:preview - - Option 1 - Option 2 - Option 3 - -``` - -{% raw %} - -```jsx:react -import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` - -{% endraw %} - -### Disabled - -Add the `disabled` attribute to disable the menu item so it cannot be selected. - -```html:preview - - Option 1 - Option 2 - Option 3 - -``` - -{% raw %} - -```jsx:react -import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` - -{% endraw %} - ### Prefix & Suffix Add content to the start and end of menu items using the `prefix` and `suffix` slots. @@ -180,6 +122,64 @@ const App = () => ( {% endraw %} +### Disabled + +Add the `disabled` attribute to disable the menu item so it cannot be selected. + +```html:preview + + Option 1 + Option 2 + Option 3 + +``` + +{% raw %} + +```jsx:react +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; + +const App = () => ( + + Option 1 + Option 2 + Option 3 + +); +``` + +{% endraw %} + +### Loading + +Use the `loading` attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed. + +```html:preview + + Option 1 + Option 2 + Option 3 + +``` + +{% raw %} + +```jsx:react +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; + +const App = () => ( + + Option 1 + Option 2 + Option 3 + +); +``` + +{% endraw %} + ### Checkbox Menu Items Set the `type` attribute to `checkbox` to create a menu item that will toggle on and off when selected. You can use the `checked` attribute to set the initial state. diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index ac23bafa..67b420a0 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next +- Added the `loading` attribute and the `spinner` and `spinner__base` part to `` [#1700] - Fixed focus trapping not scrolling elements into view. [#1750] - Fixed more performance issues with focus trapping performance. [#1750] - Added the `hover-bridge` feature to `` to support better tooltip accessibility [#1734] diff --git a/src/components/menu-item/menu-item.component.ts b/src/components/menu-item/menu-item.component.ts index 5a457a33..adb492b7 100644 --- a/src/components/menu-item/menu-item.component.ts +++ b/src/components/menu-item/menu-item.component.ts @@ -33,6 +33,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart label - The menu item label. * @csspart suffix - The suffix container. * @csspart spinner - The spinner that shows when the menu item is in the loading state. + * @csspart spinner__base - The spinner's base part. * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented). * * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu. @@ -186,7 +187,8 @@ export default class SlMenuItem extends ShoelaceElement { - ${this.submenuController.renderSubmenu()} ${this.loading ? html`` : ''} + ${this.submenuController.renderSubmenu()} + ${this.loading ? html` ` : ''} `; } diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index 75ff2fca..499adecc 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -38,6 +38,25 @@ export default css` cursor: not-allowed; } + .menu-item.menu-item--loading { + outline: none; + cursor: wait; + } + + .menu-item.menu-item--loading *:not(sl-spinner) { + opacity: 0.5; + } + + .menu-item--loading sl-spinner { + --indicator-color: currentColor; + --track-width: 1px; + position: absolute; + font-size: 0.75em; + top: calc(50% - 0.5em); + left: 0.65rem; + opacity: 1; + } + .menu-item .menu-item__label { flex: 1 1 auto; display: inline-block; @@ -132,32 +151,4 @@ export default css` outline-offset: -1px; } } - - /* - * Loading modifier - */ - - .menu-item--loading { - position: relative; - cursor: wait; - } - - .menu-item--loading .menu-item__prefix, - .menu-item--loading .menu-item__label, - .menu-item--loading .menu-item__suffix, - .menu-item--loading .menu-item__check { - opacity: 0.5; - } - - .menu-item--loading sl-spinner { - --indicator-color: currentColor; - --track-width: 1px; - position: absolute; - font-size: 0.75em; - height: 1em; - width: 1em; - top: calc(50% - 0.5em); - left: calc(1rem - 1px); - transform: translateX(-50%); - } `;