diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 4a9eab1d4..2b4ac35ef 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -58,7 +58,9 @@ In order to keep the project in a maintainable state, code that doesn't follow c ### Semantic Versioning -This project follows [Semantic Versioning](https://semver.org/). Breaking changes will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. +This project follows [Semantic Versioning](https://semver.org/). Breaking changes in stable components will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary in future versions will be deprecated instead. + +**Components marked "experimental" should not be used in production,** as changes to them will not be subject to this rule. ### Code Formatting & Linting diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 77d3459e3..69bb0e34b 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -160,22 +160,13 @@ /* Lead sentences that occur immediately after the header */ .component-header + p { - font-size: var(--sl-font-size-x-large); + font-size: var(--sl-font-size-large); line-height: 1.6; } -/* In component pages we have: - * - * .component-header - * p (leading sentence) - * p (optional secondary sentence) - * .code-block (main example) - * - * So if we have this structure, space out the code block a bit to make it appear on its own. - */ -.component-header + p + .code-block, -.component-header + p + p + .code-block { - margin-top: 2.5rem; +/* Code blocks that occur immediately after the leading sentence. */ +p + .code-block { + margin-top: 2rem; } /* Content */ diff --git a/docs/components/alert.md b/docs/components/alert.md index b51df369a..88b7032dd 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -2,9 +2,7 @@ [component-header:sl-alert] -Alerts... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Alerts are used to display important messages. ```html preview diff --git a/docs/components/avatar.md b/docs/components/avatar.md index f8144a34c..22d99cc21 100644 --- a/docs/components/avatar.md +++ b/docs/components/avatar.md @@ -4,8 +4,6 @@ Avatars are used to represent a person or object. -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - ```html preview diff --git a/docs/components/badge.md b/docs/components/badge.md index 7c97a4109..6f9e49a75 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -4,8 +4,6 @@ Badges are used to draw attention and display statuses or counts. -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - ```html preview Primary Success diff --git a/docs/components/button.md b/docs/components/button.md index 3f478583e..e27da3630 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -4,8 +4,6 @@ Buttons represent actions that are available to the user. -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - ```html preview Default Primary diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md index f43bc0335..968c83aef 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox.md @@ -2,9 +2,7 @@ [component-header:sl-checkbox] -Checkboxes... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Checkboxes allow the user to toggle an option on or off. ```html preview Default
diff --git a/docs/components/color-picker.md b/docs/components/color-picker.md index ca3560756..de5a25d79 100644 --- a/docs/components/color-picker.md +++ b/docs/components/color-picker.md @@ -2,9 +2,7 @@ [component-header:sl-color-picker] -Color pickers give users a way to select a color. - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Color pickers allow the user to select a color. ```html preview diff --git a/docs/components/details.md b/docs/components/details.md index 37c0084b4..4d7c65a83 100644 --- a/docs/components/details.md +++ b/docs/components/details.md @@ -2,9 +2,7 @@ [component-header:sl-details] -Details... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Details show a brief summary and expand to show additional content. ```html preview @@ -26,7 +24,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ### Grouping Details -Details are designed to function independently, but you can simulate a group where only one is shown at a time by listening for the `slShow` event. +Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `slShow` event. ```html preview
diff --git a/docs/components/dialog.md b/docs/components/dialog.md index 5d25980cb..5af3d13f5 100644 --- a/docs/components/dialog.md +++ b/docs/components/dialog.md @@ -2,9 +2,7 @@ [component-header:sl-dialog] -Dialogs... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Dialogs appear above the page and require the user's immediate attention. ```html preview @@ -26,6 +24,12 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ``` +## UX Tips + +- Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action. +- Always provide an obvious way for the user to dismiss the dialog. +- Don't nest dialogs. It almost always leads to a poor experience for the user. + ## Examples ### No Overlay Dismiss diff --git a/docs/components/drawer.md b/docs/components/drawer.md index 3d40a5e92..969d43f5d 100644 --- a/docs/components/drawer.md +++ b/docs/components/drawer.md @@ -2,9 +2,7 @@ [component-header:sl-drawer] -Drawers... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Drawers slide out from a container to expose additional options and information. ```html preview diff --git a/docs/components/icon.md b/docs/components/icon.md index 0204e6725..44228a5a2 100644 --- a/docs/components/icon.md +++ b/docs/components/icon.md @@ -110,11 +110,11 @@ Custom icons can be loaded by setting the `src` attribute. Only SVG images are s // Filter as the user types input.addEventListener('slInput', () => { [...list.querySelectorAll('sl-icon')].map(slIcon => { - if (input.value === '') { + const filter = input.value.toLowerCase(); + if (filter === '') { slIcon.hidden = false; } else { const terms = slIcon.getAttribute('data-terms').toLowerCase(); - const filter = input.value.toLowerCase(); slIcon.hidden = terms.indexOf(filter) < 0; } }); diff --git a/docs/components/input.md b/docs/components/input.md index 6ae40a85e..e77c96b6b 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -2,9 +2,7 @@ [component-header:sl-input] -Inputs... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Inputs collect data from the user. ```html preview diff --git a/docs/components/menu-divider.md b/docs/components/menu-divider.md index 1b4388c8d..dfe14f991 100644 --- a/docs/components/menu-divider.md +++ b/docs/components/menu-divider.md @@ -2,9 +2,7 @@ [component-header:sl-menu-divider] -Menu dividers are used to separate menu items within a menu. - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Menu dividers are used to visually group menu items. ```html preview
diff --git a/docs/components/progress-ring.md b/docs/components/progress-ring.md index 7a4aa344c..8cea74d23 100644 --- a/docs/components/progress-ring.md +++ b/docs/components/progress-ring.md @@ -2,9 +2,7 @@ [component-header:sl-progress-ring] -Progress rings... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Progress rings are used to show the progress of a determinate operation in a circular fashion. ```html preview
diff --git a/docs/components/radio.md b/docs/components/radio.md index 1509b8f59..6f487a408 100644 --- a/docs/components/radio.md +++ b/docs/components/radio.md @@ -2,14 +2,12 @@ [component-header:sl-radio] -Radios... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Radios allow the user to select one option from a group of many. ```html preview Default
Checked
Disabled
-``` +``` [component-metadata:sl-radio] diff --git a/docs/components/range.md b/docs/components/range.md index 911baf8a9..0177c2142 100644 --- a/docs/components/range.md +++ b/docs/components/range.md @@ -2,9 +2,7 @@ [component-header:sl-range] -Ranges... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Ranges allow the user to select a single value within a given range using a slider. ```html preview diff --git a/docs/components/spinner.md b/docs/components/spinner.md index a20754c75..7b294f501 100644 --- a/docs/components/spinner.md +++ b/docs/components/spinner.md @@ -2,9 +2,7 @@ [component-header:sl-spinner] -Spinners... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Spinners are used to show the progress of an indeterminate operation. ```html preview diff --git a/docs/components/switch.md b/docs/components/switch.md index 39e449f93..df1998c70 100644 --- a/docs/components/switch.md +++ b/docs/components/switch.md @@ -2,9 +2,7 @@ [component-header:sl-switch] -Switches... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Switches allow the user to toggle an option on or off. ```html preview Default diff --git a/docs/components/tab-group.md b/docs/components/tab-group.md index 7c6d68dee..29117d450 100644 --- a/docs/components/tab-group.md +++ b/docs/components/tab-group.md @@ -2,9 +2,7 @@ [component-header:sl-tab-group] -Tab groups... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Tab groups organize content into a container that shows one section at a time. ```html preview diff --git a/docs/components/tab-panel.md b/docs/components/tab-panel.md index 9e47478e3..74cddafdb 100644 --- a/docs/components/tab-panel.md +++ b/docs/components/tab-panel.md @@ -2,7 +2,7 @@ [component-header:sl-tab-panel] -Tab panels... +Tab panels are used inside tab groups to display content. A demonstration of this component can be found in the [tab group examples](/components/tab-group.md). diff --git a/docs/components/tab.md b/docs/components/tab.md index 39a465fba..55b4f9dcd 100644 --- a/docs/components/tab.md +++ b/docs/components/tab.md @@ -2,7 +2,7 @@ [component-header:sl-tab] -Tabs... +Tabs are used inside tab groups to represent tab panels. A demonstration of this component can be found in the [tab group examples](/components/tab-group.md). diff --git a/docs/components/tag.md b/docs/components/tag.md index f291278af..2dcde154e 100644 --- a/docs/components/tag.md +++ b/docs/components/tag.md @@ -4,8 +4,6 @@ Tags are used as labels to organize things or to indicate a selection. -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - ```html preview Primary Success @@ -42,6 +40,32 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i Danger ``` +### Pill + +```html preview +Primary +Success +Info +Warning +Danger + +

+ +Primary +Success +Info +Warning +Danger + +

+ +Primary +Success +Info +Warning +Danger +``` + ### Removable ```html preview diff --git a/docs/components/textarea.md b/docs/components/textarea.md index e2c7d1e5c..5e4bd46c5 100644 --- a/docs/components/textarea.md +++ b/docs/components/textarea.md @@ -2,9 +2,7 @@ [component-header:sl-textarea] -Textareas... - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Textareas collect data from the user and allow multiple lines of text. ```html preview diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md index 12490a2ee..6d7b4732b 100644 --- a/docs/components/tooltip.md +++ b/docs/components/tooltip.md @@ -2,9 +2,11 @@ [component-header:sl-tooltip] -Tooltips... +Tooltips display additional information based on a specific action. -A tooltip's target is its _first child element_, so you should only wrap one element inside of a tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first. +A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first. + +Tooltip's use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout. ```html preview diff --git a/docs/getting-started/roadmap.md b/docs/getting-started/roadmap.md index 1b85b4b00..1d0b6c897 100644 --- a/docs/getting-started/roadmap.md +++ b/docs/getting-started/roadmap.md @@ -8,7 +8,7 @@ Version 2.1 is still in the planning phase. To request a feature, please [submit ?> Is there a feature you really want to see here? Sponsoring Shoelace is the best way to prioritize its development. [Learn more](https://github.com/sponsors/claviska) -## 2.0 📦 +## 2.0 🚀 - [x] Alert - [x] Avatar diff --git a/docs/tokens/color.md b/docs/tokens/color.md index 7446c1c90..1ec32d2f0 100644 --- a/docs/tokens/color.md +++ b/docs/tokens/color.md @@ -4,7 +4,7 @@ Color tokens are used to maintain consistent color use throughout your app. ## Theme Colors -Theme colors are based on HSL values rather than hex or RGB. This technique lets us generate more consistent palettes for every theme color, ranging from 5% to 95% lightness. There are no 0% nor 100% values for theme colors. Use `--sl-color-black` and `--sl-color-white` instead. +Theme colors are based on HSL values rather than hex or RGB. This technique lets us generate more consistent palettes for every theme color, ranging from 5% to 95% lightness. There are no 0% or 100% values for theme colors. Use `--sl-color-black` and `--sl-color-white` instead. Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components. @@ -16,7 +16,7 @@ To customize a theme color, change its respective hue, saturation, and text toke --sl-color-primary-text: var(--sl-color-white); ``` -?> Palettes are comprised of CSS custom properties ("CSS variables"), so you can update them live in your app and see the changes reflect instantly. +?> Color palettes are comprised of CSS custom properties ("CSS variables"), so you can update them live in your app and see the changes reflect instantly. ## Primary diff --git a/src/components.d.ts b/src/components.d.ts index a8254da11..bc31dc8dd 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -138,7 +138,7 @@ export namespace Components { */ "disabled": boolean; /** - * The format to use for the generated color `value`. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. Note that browser support for HEXA doesn't include pre-Chromium Edge, so it's usually safer to use RGBA or HSLA when using opacity. + * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. The color picker will always accept user input in any format (including CSS color names) and convert it to the desired format. */ "format": 'hex' | 'rgb' | 'hsl'; /** @@ -680,6 +680,10 @@ export namespace Components { "name": string; } interface SlTag { + /** + * Set to true to draw a pill-style button with rounded edges. + */ + "pill": boolean; /** * Set to true to make the tag removable. */ @@ -1188,7 +1192,7 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * The format to use for the generated color `value`. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. Note that browser support for HEXA doesn't include pre-Chromium Edge, so it's usually safer to use RGBA or HSLA when using opacity. + * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. The color picker will always accept user input in any format (including CSS color names) and convert it to the desired format. */ "format"?: 'hex' | 'rgb' | 'hsl'; /** @@ -1806,6 +1810,10 @@ declare namespace LocalJSX { * Emitted when the remove button is activated. */ "onSlRemove"?: (event: CustomEvent) => void; + /** + * Set to true to draw a pill-style button with rounded edges. + */ + "pill"?: boolean; /** * Set to true to make the tag removable. */ diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 197862b42..be3b71272 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -63,9 +63,9 @@ export class ColorPicker { @Prop({ mutable: true, reflect: true }) value = '#ffffff'; /** - * The format to use for the generated color `value`. If opacity is enabled, these will translate to HEXA, RGBA, and - * HSLA respectively. Note that browser support for HEXA doesn't include pre-Chromium Edge, so it's usually safer to - * use RGBA or HSLA when using opacity. + * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA + * respectively. The color picker will always accept user input in any format (including CSS color names) and convert + * it to the desired format. */ @Prop() format: 'hex' | 'rgb' | 'hsl' = 'hex'; diff --git a/src/components/tag/tag.scss b/src/components/tag/tag.scss index 201dd5954..da1ffd33f 100644 --- a/src/components/tag/tag.scss +++ b/src/components/tag/tag.scss @@ -102,3 +102,11 @@ margin-right: calc(-1 * var(--sl-spacing-small)); } } + +//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +// Pill modifier +//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + +.tag--pill { + border-radius: var(--sl-border-radius-pill); +} diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx index 6b459ce71..0ab11ad00 100644 --- a/src/components/tag/tag.tsx +++ b/src/components/tag/tag.tsx @@ -25,6 +25,9 @@ export class Tag { /** The tag's size. */ @Prop() size: 'small' | 'medium' | 'large' = 'medium'; + /** Set to true to draw a pill-style button with rounded edges. */ + @Prop() pill = false; + /** Set to true to make the tag removable. */ @Prop() removable = false; @@ -56,6 +59,7 @@ export class Tag { 'tag--large': this.size === 'large', // Modifers + 'tag--pill': this.pill, 'tag--removable': this.removable }} > diff --git a/src/styles/shoelace.scss b/src/styles/shoelace.scss index 4fa658565..62fad0247 100644 --- a/src/styles/shoelace.scss +++ b/src/styles/shoelace.scss @@ -16,15 +16,15 @@ --sl-color-success-text: var(--sl-color-white); --sl-color-info-hue: var(--sl-color-primary-hue); - --sl-color-info-saturation: 20%; + --sl-color-info-saturation: 10%; --sl-color-info-text: var(--sl-color-white); - --sl-color-warning-hue: 36; + --sl-color-warning-hue: 40; --sl-color-warning-saturation: 90%; --sl-color-warning-text: var(--sl-color-white); - --sl-color-danger-hue: 0; - --sl-color-danger-saturation: 80%; + --sl-color-danger-hue: 10; + --sl-color-danger-saturation: 95%; --sl-color-danger-text: var(--sl-color-white); --sl-color-gray-hue: var(--sl-color-primary-hue);