menu improvements

2022-03-03 17:15:58 -05:00 · 2022-03-03 17:15:58 -05:00 · 517415f743
commit 517415f743
--- 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
-<sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);"
->
+<sl-menu style="max-width: 200px;">
  <sl-menu-item>Option 1</sl-menu-item>
  <sl-menu-item>Option 2</sl-menu-item>
  <sl-menu-item>Option 3</sl-menu-item>
@ -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 = () => (
-  <SlMenu
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
+  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem>Option 1</SlMenuItem>
    <SlMenuItem>Option 2</SlMenuItem>
    <SlMenuItem>Option 3</SlMenuItem>
@ -63,9 +55,7 @@ const App = () => (
 Use the `checked` attribute to draw menu items in a checked state.

 ```html preview
-<sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);"
->
+<sl-menu style="max-width: 200px;">
  <sl-menu-item>Option 1</sl-menu-item>
  <sl-menu-item checked>Option 2</sl-menu-item>
  <sl-menu-item>Option 3</sl-menu-item>
@ -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 = () => (
-  <SlMenu
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
+  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem>Option 1</SlMenuItem>
    <SlMenuItem checked>Option 2</SlMenuItem>
    <SlMenuItem>Option 3</SlMenuItem>
@ -95,9 +79,7 @@ const App = () => (
 Add the `disabled` attribute to disable the menu item so it cannot be selected.

 ```html preview
-<sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);"
->
+<sl-menu style="max-width: 200px;">
  <sl-menu-item>Option 1</sl-menu-item>
  <sl-menu-item disabled>Option 2</sl-menu-item>
  <sl-menu-item>Option 3</sl-menu-item>
@ -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 = () => (
-  <SlMenu
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
+  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem>Option 1</SlMenuItem>
    <SlMenuItem disabled>Option 2</SlMenuItem>
    <SlMenuItem>Option 3</SlMenuItem>
@ -127,9 +103,7 @@ const App = () => (
 Add content to the start and end of menu items using the `prefix` and `suffix` slots.

 ```html preview
-<sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);"
->
+<sl-menu style="max-width: 200px;">
  <sl-menu-item>
    <sl-icon slot="prefix" name="house"></sl-icon>
    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 = () => (
-  <SlMenu
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
+  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem>
      <SlIcon slot="prefix" name="house" />
      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
-<sl-menu
-  class="menu-value"
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);"
->
+<sl-menu class="menu-value" style="max-width: 200px;">
  <sl-menu-item value="opt-1">Option 1</sl-menu-item>
  <sl-menu-item value="opt-2">Option 2</sl-menu-item>
  <sl-menu-item value="opt-3">Option 3</sl-menu-item>
@ -228,14 +193,7 @@ const App = () => {
  }

  return (
-    <SlMenu
-      style={{
-        maxWidth: '200px',
-        border: 'solid 1px var(--sl-panel-border-color)',
-        borderRadius: 'var(--sl-border-radius-medium)'
-      }}
-      onSlSelect={handleSelect}
-    >
+    <SlMenu style={{ maxWidth: '200px' }} onSlSelect={handleSelect}>
      <SlMenuItem value="opt-1">Option 1</SlMenuItem>
      <SlMenuItem value="opt-2">Option 2</SlMenuItem>
      <SlMenuItem value="opt-3">Option 3</SlMenuItem>
--- 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
-<sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);"
->
+<sl-menu style="max-width: 200px;">
  <sl-menu-item value="undo">Undo</sl-menu-item>
  <sl-menu-item value="redo">Redo</sl-menu-item>
  <sl-divider></sl-divider>
@ -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 = () => (
-  <SlMenu
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
+  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem value="undo">Undo</SlMenuItem>
    <SlMenuItem value="redo">Redo</SlMenuItem>
    <SlDivider />
--- 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 `<sl-menu-item>` in preparation for parts refactor
 - Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699)
 - Added Prettier and ESLint to markdown files
+- Added background color and border to `<sl-menu>`
 - Fixed a bug that prevented forms from submitting when pressing <kbd>Enter</kbd> inside of an `<sl-input>` [#700](https://github.com/shoelace-style/shoelace/issues/700)
 - Fixed a bug in `<sl-input>` that prevented the `valueAsDate` and `valueAsNumber` properties from working when set before the component was initialized
 - Improved `autofocus` behavior in Safari for `<sl-dialog>` and `<sl-drawer>` [#693](https://github.com/shoelace-style/shoelace/issues/693)
 - Improved type to select logic in `<sl-menu>` so it supports <kbd>Backspace</kbd> and gives users more time before resetting
+- Improved checkmark size and positioning in `<sl-menu-item>`
 - 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 `<sl-dropdown>` and `<sl-tooltip>`
--- 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: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
-      <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+  'check-lg': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+      <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
    </svg>
  `,
  'chevron-down': `
--- 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;
  }
 `;
--- 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
        })}
      >
-        <sl-icon
-          part="checked-icon"
-          class="menu-item__check"
-          name="check"
-          library="system"
-          aria-hidden="true"
-        ></sl-icon>
+        <span class="menu-item__check">
+          <sl-icon name="check-lg" library="default" aria-hidden="true"></sl-icon>
+        </span>

        <span part="prefix" class="menu-item__prefix">
          <slot name="prefix"></slot>
@ -79,6 +75,10 @@ export default class SlMenuItem extends LitElement {
        <span part="suffix" class="menu-item__suffix">
          <slot name="suffix"></slot>
        </span>
+
+        <span class="menu-item__chevron">
+          <sl-icon name="chevron-right" library="default" aria-hidden="true"></sl-icon>
+        </span>
      </div>
    `;
  }
--- 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;
  }

--- 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);
--- 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`
-                  <button
-                    part="clear-button"
-                    class="select__clear"
-                    library="system"
-                    @click=${this.handleClearClick}
-                    tabindex="-1"
-                  >
+                  <button part="clear-button" class="select__clear" @click=${this.handleClearClick} tabindex="-1">
                    <slot name="clear-icon">
                      <sl-icon name="x-circle-fill" library="system"></sl-icon>
                    </slot>