From 517415f743579ff789cc06593112af9b289bf708 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 3 Mar 2022 17:15:58 -0500 Subject: [PATCH] menu improvements --- docs/components/menu-item.md | 62 ++++---------------- docs/components/menu.md | 12 +--- docs/resources/changelog.md | 3 + src/components/icon/library.system.ts | 6 +- src/components/menu-item/menu-item.styles.ts | 16 ++--- src/components/menu-item/menu-item.ts | 18 +++--- src/components/menu/menu.styles.ts | 4 ++ src/components/select/select.styles.ts | 4 ++ src/components/select/select.ts | 8 +-- 9 files changed, 44 insertions(+), 89 deletions(-) diff --git a/docs/components/menu-item.md b/docs/components/menu-item.md index 649e930ee..9e21931aa 100644 --- a/docs/components/menu-item.md +++ b/docs/components/menu-item.md @@ -5,9 +5,7 @@ Menu items provide options for the user to pick from in a menu. ```html preview - + Option 1 Option 2 Option 3 @@ -30,13 +28,7 @@ Menu items provide options for the user to pick from in a menu. import { SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - + Option 1 Option 2 Option 3 @@ -63,9 +55,7 @@ const App = () => ( Use the `checked` attribute to draw menu items in a checked state. ```html preview - + Option 1 Option 2 Option 3 @@ -76,13 +66,7 @@ Use the `checked` attribute to draw menu items in a checked state. import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - + Option 1 Option 2 Option 3 @@ -95,9 +79,7 @@ const App = () => ( Add the `disabled` attribute to disable the menu item so it cannot be selected. ```html preview - + Option 1 Option 2 Option 3 @@ -108,13 +90,7 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected. import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - + Option 1 Option 2 Option 3 @@ -127,9 +103,7 @@ const App = () => ( Add content to the start and end of menu items using the `prefix` and `suffix` slots. ```html preview - + Home @@ -154,13 +128,7 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s import { SlBadge, SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - + Home @@ -189,10 +157,7 @@ const App = () => ( The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `sl-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more. ```html preview - + Option 1 Option 2 Option 3 @@ -228,14 +193,7 @@ const App = () => { } return ( - + Option 1 Option 2 Option 3 diff --git a/docs/components/menu.md b/docs/components/menu.md index 78d330e65..d2321864b 100644 --- a/docs/components/menu.md +++ b/docs/components/menu.md @@ -7,9 +7,7 @@ Menus provide a list of options for the user to choose from. You can use [menu items](/components/menu-item), [menu labels](/components/menu-label), and [dividers](/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option. ```html preview - + Undo Redo @@ -24,13 +22,7 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu- import { SlDivider, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - + Undo Redo diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 04aac2752..6afdfbcb8 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -8,12 +8,15 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +- 🚨 BREAKING: removed `checked-icon` part from `` in preparation for parts refactor - Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `` [#699](https://github.com/shoelace-style/shoelace/issues/699) - Added Prettier and ESLint to markdown files +- Added background color and border to `` - Fixed a bug that prevented forms from submitting when pressing Enter inside of an `` [#700](https://github.com/shoelace-style/shoelace/issues/700) - Fixed a bug in `` that prevented the `valueAsDate` and `valueAsNumber` properties from working when set before the component was initialized - Improved `autofocus` behavior in Safari for `` and `` [#693](https://github.com/shoelace-style/shoelace/issues/693) - Improved type to select logic in `` so it supports Backspace and gives users more time before resetting +- Improved checkmark size and positioning in `` - Removed feature detection for `focus({ preventScroll })` since it no longer works in Safari - Removed the `--sl-tooltip-arrow-start-end-offset` design token - Replaced Popper positioning dependency with Floating UI in `` and `` diff --git a/src/components/icon/library.system.ts b/src/components/icon/library.system.ts index 611af11df..5396223ce 100644 --- a/src/components/icon/library.system.ts +++ b/src/components/icon/library.system.ts @@ -8,9 +8,9 @@ import type { IconLibrary } from './library'; // icons are a subset of Bootstrap Icons. // const icons = { - check: ` - - + 'check-lg': ` + + `, 'chevron-down': ` diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index 5068c64c2..5471c144c 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -20,7 +20,7 @@ export default css` letter-spacing: var(--sl-letter-spacing-normal); text-align: left; color: var(--sl-color-neutral-700); - padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-large); + padding: var(--sl-spacing-2x-small) var(--sl-spacing-2x-small); transition: var(--sl-transition-fast) fill; user-select: none; white-space: nowrap; @@ -68,17 +68,17 @@ export default css` color: var(--sl-color-neutral-0); } - .menu-item .menu-item__check { + .menu-item .menu-item__check, + .menu-item .menu-item__chevron { display: flex; - position: absolute; - left: 0.5em; - top: calc(50% - 0.5em); - visibility: hidden; align-items: center; - font-size: inherit; + justify-content: center; + width: 1.5em; + visibility: hidden; } - .menu-item--checked .menu-item__check { + .menu-item--checked .menu-item__check, + .menu-item--has-submenu .menu-item__chevron { visibility: visible; } `; diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index fec4a5814..8bc76e220 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -16,7 +16,6 @@ import styles from './menu-item.styles'; * @slot suffix - Used to append an icon or similar element to the menu item. * * @csspart base - The component's base wrapper. - * @csspart checked-icon - The container that wraps the checked icon. * @csspart prefix - The prefix container. * @csspart label - The menu item label. * @csspart suffix - The suffix container. @@ -57,16 +56,13 @@ export default class SlMenuItem extends LitElement { class=${classMap({ 'menu-item': true, 'menu-item--checked': this.checked, - 'menu-item--disabled': this.disabled + 'menu-item--disabled': this.disabled, + 'menu-item--has-submenu': false })} > - + + + @@ -79,6 +75,10 @@ export default class SlMenuItem extends LitElement { + + + + `; } diff --git a/src/components/menu/menu.styles.ts b/src/components/menu/menu.styles.ts index 857f02b2c..c4c004ce8 100644 --- a/src/components/menu/menu.styles.ts +++ b/src/components/menu/menu.styles.ts @@ -9,6 +9,10 @@ export default css` } .menu { + background: var(--sl-panel-background-color); + border: solid var(--sl-panel-border-width) var(--sl-panel-border-color); + border-radius: var(--sl-border-radius-medium); + background: var(--sl-panel-background-color); padding: var(--sl-spacing-x-small) 0; } diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts index 6cdd0154d..b4c796144 100644 --- a/src/components/select/select.styles.ts +++ b/src/components/select/select.styles.ts @@ -34,6 +34,10 @@ export default css` overflow: auto; } + .select__menu::part(base) { + border: none; + } + /* Standard selects */ .select--standard .select__control { background-color: var(--sl-input-background-color); diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 9881391e2..a811b9f2a 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -520,13 +520,7 @@ export default class SlSelect extends LitElement { ${this.clearable && hasSelection ? html` -