diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 0dcb9c5c..018064af 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -23,6 +23,7 @@ - [Color Picker](/components/color-picker) - [Details](/components/details) - [Dialog](/components/dialog) + - [Divider](/components/divider) - [Drawer](/components/drawer) - [Dropdown](/components/dropdown) - [Form](/components/form) @@ -31,7 +32,6 @@ - [Image Comparer](/components/image-comparer) - [Input](/components/input) - [Menu](/components/menu) - - [Menu Divider](/components/menu-divider) - [Menu Item](/components/menu-item) - [Menu Label](/components/menu-label) - [Progress Bar](/components/progress-bar) diff --git a/docs/assets/plugins/theme-picker/theme-picker.js b/docs/assets/plugins/theme-picker/theme-picker.js index fad2649c..bce337ef 100644 --- a/docs/assets/plugins/theme-picker/theme-picker.js +++ b/docs/assets/plugins/theme-picker/theme-picker.js @@ -50,7 +50,7 @@ Toggle \\ Light Dark - + Auto `; diff --git a/docs/components/divider.md b/docs/components/divider.md new file mode 100644 index 00000000..ba867e40 --- /dev/null +++ b/docs/components/divider.md @@ -0,0 +1,71 @@ +# Divider + +[component-header:sl-divider] + +Dividers are used to visually separate or group elements. + +```html preview + +``` + +## Examples + +### Width + +Use the `--width` custom property to change the width of the divider. + +```html preview + +``` + +### Color + +Use the `--color` custom property to change the color of the divider. + +```html preview + +``` + +### Spacing + +Use the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements. + +```html preview +
+ Above + + Below +
+``` + +### Vertical + +Add the `vertical` attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container. + +```html preview +
+ First + + Middle + + Last +
+``` + +### Menu Dividers + +Use dividers in [menus](/components/menu) to visually group menu items. + +```html preview + + Option 1 + Option 2 + Option 3 + + Option 4 + Option 5 + Option 6 + +``` + +[component-metadata:sl-divider] diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md index 9df15d5d..fec7e53e 100644 --- a/docs/components/dropdown.md +++ b/docs/components/dropdown.md @@ -15,10 +15,10 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 - + Checked Disabled - + Prefix @@ -44,7 +44,7 @@ The preferred placement of the dropdown can be set with the `placement` attribut Cut Copy Paste - + Find Replace @@ -62,7 +62,7 @@ The distance from the panel to the trigger can be customized using the `distance Cut Copy Paste - + Find Replace @@ -80,7 +80,7 @@ The offset of the panel along the trigger can be customized using the `skidding` Cut Copy Paste - + Find Replace diff --git a/docs/components/menu-divider.md b/docs/components/menu-divider.md deleted file mode 100644 index 68281b92..00000000 --- a/docs/components/menu-divider.md +++ /dev/null @@ -1,22 +0,0 @@ -# Menu Divider - -[component-header:sl-menu-divider] - -Menu dividers are used to visually group menu items. - -```html preview - - Option 1 - Option 2 - - Option 3 - Option 4 - - Option 5 - Option 6 - -``` - -[component-metadata:sl-menu-divider] diff --git a/docs/components/menu-item.md b/docs/components/menu-item.md index d20ce6d7..ac217801 100644 --- a/docs/components/menu-item.md +++ b/docs/components/menu-item.md @@ -11,10 +11,10 @@ Menu items provide options for the user to pick from in a menu. Option 1 Option 2 Option 3 - + Checked Disabled - + Prefix Icon diff --git a/docs/components/menu-label.md b/docs/components/menu-label.md index 050e9b25..600e3043 100644 --- a/docs/components/menu-label.md +++ b/docs/components/menu-label.md @@ -12,7 +12,7 @@ Menu labels are used to describe a group of menu items. Apple Banana Orange - + Vegetables Broccoli Carrot diff --git a/docs/components/menu.md b/docs/components/menu.md index ed8be096..a0ea31ea 100644 --- a/docs/components/menu.md +++ b/docs/components/menu.md @@ -4,13 +4,13 @@ Menus provide a list of options for the user to choose from. -You can use [menu items](/components/menu-item), [menu dividers](/components/menu-divider), and [menu labels](/components/menu-label) to compose a menu. Menus support keyboard interactions, including type-to-select an option. +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 - + Cut Copy Paste diff --git a/docs/components/select.md b/docs/components/select.md index b615301d..148f6896 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -9,7 +9,7 @@ Selects allow you to choose one or more items from a dropdown menu. Option 1 Option 2 Option 3 - + Option 4 Option 5 Option 6 @@ -89,7 +89,7 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g Option 1 Option 2 Option 3 - + Option 4 Option 5 Option 6 @@ -98,7 +98,7 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g ### Grouping Options -Options can be grouped visually using menu labels and menu dividers. +Options can be grouped visually using menu labels and dividers. ```html preview @@ -106,7 +106,7 @@ Options can be grouped visually using menu labels and menu dividers. Option 1 Option 2 Option 3 - + Group 2 Option 4 Option 5 diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index aacc91f1..04a1f127 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -8,6 +8,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +- 🚨 BREAKING: removed `` (use `` instead) +- Added the `` component - Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode - Added the `--sl-panel-border-width` design token - Added missing background color to `` diff --git a/src/components/divider/divider.styles.ts b/src/components/divider/divider.styles.ts new file mode 100644 index 00000000..fba0f4c7 --- /dev/null +++ b/src/components/divider/divider.styles.ts @@ -0,0 +1,25 @@ +import { css } from 'lit'; +import componentStyles from '../../styles/component.styles'; + +export default css` + ${componentStyles} + + :host { + --color: rgb(var(--sl-panel-border-color)); + --width: var(--sl-panel-border-width); + --spacing: var(--sl-spacing-medium); + } + + :host(:not([vertical])) { + display: block; + border-top: solid var(--width) var(--color); + margin: var(--spacing) 0; + } + + :host([vertical]) { + display: inline-block; + height: 100%; + border-left: solid var(--width) var(--color); + margin: 0 var(--spacing); + } +`; diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts new file mode 100644 index 00000000..bba7cf08 --- /dev/null +++ b/src/components/divider/divider.ts @@ -0,0 +1,41 @@ +import { LitElement, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { watch } from '../../internal/watch'; +import styles from './divider.styles'; + +/** + * @since 2.0 + * @status stable + * + * @csspart base - The component's base wrapper. + * + * @cssproperty --color - The color of the divider. + * @cssproperty --spacing - The spacing between the divider and neighboring elements. + * @cssproperty --width - The width of the divider. + */ +@customElement('sl-divider') +export default class SlDivider extends LitElement { + static styles = styles; + + /** Draws the divider in a vertical orientation. */ + @property({ type: Boolean, reflect: true }) vertical = false; + + firstUpdated() { + this.setAttribute('role', 'separator'); + } + + @watch('vertical') + handleVerticalChange() { + this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal'); + } + + render() { + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'sl-divider': SlDivider; + } +} diff --git a/src/components/menu-divider/menu-divider.styles.ts b/src/components/menu-divider/menu-divider.styles.ts deleted file mode 100644 index 2e1f1cef..00000000 --- a/src/components/menu-divider/menu-divider.styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { css } from 'lit'; -import componentStyles from '../../styles/component.styles'; - -export default css` - ${componentStyles} - - :host { - display: block; - } - - .menu-divider { - border-top: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color)); - margin: var(--sl-spacing-x-small) 0; - } -`; diff --git a/src/components/menu-divider/menu-divider.ts b/src/components/menu-divider/menu-divider.ts deleted file mode 100644 index 15d6a6d4..00000000 --- a/src/components/menu-divider/menu-divider.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { LitElement, html } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import styles from './menu-divider.styles'; - -/** - * @since 2.0 - * @status stable - * - * @csspart base - The component's base wrapper. - */ -@customElement('sl-menu-divider') -export default class SlMenuDivider extends LitElement { - static styles = styles; - - render() { - return html` `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'sl-menu-divider': SlMenuDivider; - } -} diff --git a/src/components/menu/menu.styles.ts b/src/components/menu/menu.styles.ts index 3b0ccb56..defa8293 100644 --- a/src/components/menu/menu.styles.ts +++ b/src/components/menu/menu.styles.ts @@ -11,4 +11,8 @@ export default css` .menu { padding: var(--sl-spacing-x-small) 0; } + + ::slotted(sl-divider) { + --spacing: var(--sl-spacing-x-small); + } `; diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index 6c75d8ff..16cf24cf 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -10,7 +10,7 @@ import styles from './menu.styles'; * @since 2.0 * @status stable * - * @slot - The menu's content, including menu items, menu dividers, and menu labels. + * @slot - The menu's content, including menu items, menu labels, and dividers. * * @event {{ item: SlMenuItem }} sl-select - Emitted when a menu item is selected. * diff --git a/src/shoelace.ts b/src/shoelace.ts index c4024c33..e58bdfba 100644 --- a/src/shoelace.ts +++ b/src/shoelace.ts @@ -12,6 +12,7 @@ export { default as SlCheckbox } from './components/checkbox/checkbox'; export { default as SlColorPicker } from './components/color-picker/color-picker'; export { default as SlDetails } from './components/details/details'; export { default as SlDialog } from './components/dialog/dialog'; +export { default as SlDivider } from './components/divider/divider'; export { default as SlDrawer } from './components/drawer/drawer'; export { default as SlDropdown } from './components/dropdown/dropdown'; export { default as SlForm } from './components/form/form'; @@ -24,7 +25,6 @@ export { default as SlImageComparer } from './components/image-comparer/image-co export { default as SlInclude } from './components/include/include'; export { default as SlInput } from './components/input/input'; export { default as SlMenu } from './components/menu/menu'; -export { default as SlMenuDivider } from './components/menu-divider/menu-divider'; export { default as SlMenuItem } from './components/menu-item/menu-item'; export { default as SlMenuLabel } from './components/menu-label/menu-label'; export { default as SlProgressBar } from './components/progress-bar/progress-bar';