diff --git a/docs/components/alert.md b/docs/components/alert.md index 6077ca459..d89679bbf 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -4,8 +4,10 @@ Alerts are used to display important messages. +Alerts are designed to be shown dynamically, so you need to include the `open` attribute to display them. + ```html preview - + This is a standard alert. You can customize its content and even the icon. @@ -15,6 +17,8 @@ Alerts are used to display important messages. ### Types +Set the `type` attribute to change the alert's type. + ```html preview @@ -57,14 +61,25 @@ Alerts are used to display important messages. ### Closable +Add the `closable` attribute to show a close button that will hide the alert. + ```html preview - + You can close this alert any time! + + ``` -### Without Icon +### Without Icons + +Icons are optional. Simply omit the `icon` slot if you don't want them. ```html preview diff --git a/docs/components/avatar.md b/docs/components/avatar.md index 22d99cc21..e81b89f44 100644 --- a/docs/components/avatar.md +++ b/docs/components/avatar.md @@ -6,32 +6,32 @@ Avatars are used to represent a person or object. ```html preview - - - - ``` ## Examples -### Shape +### Images + +To use an image for the avatar, set the `image` and `alt` attributes. This will take priority and be shown over initials and icons. ```html preview - - - - ``` -### Custom Icon +### Initials + +When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon. + +```html preview + +``` + +### Custom Icons + +When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot. ```html preview @@ -47,4 +47,16 @@ Avatars are used to represent a person or object. ``` +### Shapes + +Avatars can be shaped using the `shape` attribute. + +```html preview + + + + + +``` + [component-metadata:sl-avatar] diff --git a/docs/components/badge.md b/docs/components/badge.md index 6f9e49a75..47ccae0b7 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -4,6 +4,16 @@ Badges are used to draw attention and display statuses or counts. +```html preview +Badge +``` + +## Examples + +### Types + +Set the `type` attribute to change the badge's type. + ```html preview Primary Success @@ -12,9 +22,7 @@ Badges are used to draw attention and display statuses or counts. Danger ``` -## Examples - -### Buttons +### With Buttons One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button. @@ -35,7 +43,7 @@ One of the most common use cases for badges is attaching them to buttons. To mak ``` -### Menu Items +### With Menu Items When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly. diff --git a/docs/components/button.md b/docs/components/button.md index e27da3630..f0b2f6899 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -4,6 +4,16 @@ Buttons represent actions that are available to the user. +```html preview +Button +``` + +## Examples + +### Types + +Use the `type` attribute to set the button's type. + ```html preview Default Primary @@ -13,8 +23,6 @@ Buttons represent actions that are available to the user. Danger ``` -## Examples - ### Sizes Use the `size` prop to change a button's size. @@ -25,20 +33,17 @@ Use the `size` prop to change a button's size. Large ``` -### Pill +### Pill Buttons Use the `pill` prop to give buttons rounded edges. ```html preview -Default -Primary -Success -Info -Warning -Danger +Small +Medium +Large ``` -### Circle +### Circle Buttons Use the `circle` prop to create circular icon buttons. @@ -48,9 +53,9 @@ Use the `circle` prop to create circular icon buttons. ``` -### Text +### Text Buttons -Use `type="text"` to create text buttons, which share the same size as regular buttons but don't have backgrounds or borders. +Use the `text` type to create text buttons that share the same size as regular buttons but don't have backgrounds or borders. ```html preview Text @@ -58,9 +63,9 @@ Use `type="text"` to create text buttons, which share the same size as regular b Text ``` -### Custom Width +### Setting a Custom Width -Custom width buttons can be created by setting the button's `width`. +As expected, buttons can be given a custom width by setting its `width`. This is useful for making buttons span the full width of their container on smaller screens. ```html preview Small @@ -68,7 +73,7 @@ Custom width buttons can be created by setting the button's `width`. Large ``` -### Icons +### Prefix and Suffix Icons Use the `prefix` and `suffix` slots to add icons. @@ -102,7 +107,7 @@ Use the `caret` prop to add a dropdown indicator when a button will trigger a dr ### Loading -Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. +Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed. ```html preview Default @@ -115,7 +120,7 @@ Use the `loading` prop to make a button busy. The width will remain the same as ### Disabled -Use the `disabled` prop to disable a button. +Use the `disabled` prop to disable a button. Clicks will be suppressed until the disabled state is removed. ```html preview Default diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md index 79d536c0d..8abb80929 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox.md @@ -5,9 +5,34 @@ Checkboxes allow the user to toggle an option on or off. ```html preview -Default
+Checkbox
+``` + +?> This component doesn't work with standard forms. Use [``](/components/form.md) instead. + +## Examples + +### Checked + +Use the `checked` attribute to activate the checkbox. + +```html preview Checked
+``` + +### Indeterminate + +Use the `indeterminate` attribute to make the checkbox indeterminate. + +```html preview Indeterminate
+``` + +### Disabled + +Use the `disabled` attribute to disable the checkbox. + +```html preview Disabled
``` diff --git a/docs/components/input.md b/docs/components/input.md index 2f55d4523..e57862733 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -8,6 +8,8 @@ Inputs collect data from the user. ``` +?> This component doesn't work with standard forms. Use [``](/components/form.md) instead. + ## Examples ### Labels diff --git a/docs/components/radio.md b/docs/components/radio.md index 2da973d61..e00017a52 100644 --- a/docs/components/radio.md +++ b/docs/components/radio.md @@ -5,9 +5,38 @@ Radios allow the user to select one option from a group of many. ```html preview -Default
-Checked
-Disabled
- +Radio
``` + +?> This component doesn't work with standard forms. Use [``](/components/form.md) instead. + +## Examples + +### Checked + +Use the `checked` attribute to activate the radio. + +```html preview +Checked
+``` + +### Disabled + +Use the `disabled` attribute to disable the radio. + +```html preview +Disabled
+``` + +### Grouping Radios + +Radios are grouped based on their `name` attribute. + +```html preview +Option 1
+Option 2
+Option 3
+Option 4
+``` + [component-metadata:sl-radio] diff --git a/docs/components/range.md b/docs/components/range.md index 0177c2142..0c03f0701 100644 --- a/docs/components/range.md +++ b/docs/components/range.md @@ -8,6 +8,8 @@ Ranges allow the user to select a single value within a given range using a slid ``` +?> This component doesn't work with standard forms. Use [``](/components/form.md) instead. + ## Examples ### Custom Formatter diff --git a/docs/components/select.md b/docs/components/select.md index ac98fd1ec..7b6ba4068 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -18,6 +18,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ``` +?> This component doesn't work with standard forms. Use [``](/components/form.md) instead. + ## Examples ### Labels diff --git a/docs/components/spinner.md b/docs/components/spinner.md index 7b294f501..7afc36d4f 100644 --- a/docs/components/spinner.md +++ b/docs/components/spinner.md @@ -10,12 +10,30 @@ Spinners are used to show the progress of an indeterminate operation. ## Examples -## Size +### Size + +Spinners are sized relative to the current font size. To change their size, set the `font-size` property on the spinner itself or on a parent element as shown below. ```html preview - - - + + + +``` + +### Stroke Width + +The width of the spinner can be changed by setting the `--stroke-width` custom property. + +```html preview + +``` + +### Color + +The spinner's color can be changed by setting the `--color` custom property. + +```html preview + ``` [component-metadata:sl-spinner] diff --git a/docs/components/switch.md b/docs/components/switch.md index dfb026a0a..8a3186217 100644 --- a/docs/components/switch.md +++ b/docs/components/switch.md @@ -5,15 +5,28 @@ Switches allow the user to toggle an option on or off. ```html preview -Default - -
- -Checked - -
- -Disabled +Switch ``` +?> This component doesn't work with standard forms. Use [``](/components/form.md) instead. + +## Examples + +### Checked + +Use the `checked` attribute to activate the switch. + +```html preview +Checked
+``` + +### Disabled + +Use the `disabled` attribute to disable the switch. + +```html preview +Disabled
+``` + + [component-metadata:sl-switch] diff --git a/docs/components/textarea.md b/docs/components/textarea.md index 5e4bd46c5..d6e47bd1c 100644 --- a/docs/components/textarea.md +++ b/docs/components/textarea.md @@ -8,6 +8,8 @@ Textareas collect data from the user and allow multiple lines of text. ``` +?> This component doesn't work with standard forms. Use [``](/components/form.md) instead. + ## Examples ### Labels diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx index d4ee0afcd..d1d267360 100644 --- a/src/components/radio/radio.tsx +++ b/src/components/radio/radio.tsx @@ -75,6 +75,9 @@ export class Radio { getAllRadios() { const form = this.host.closest('sl-form, form') || document.body; + + if (!this.name) return []; + return [...form.querySelectorAll('sl-radio')].filter( (radio: HTMLSlRadioElement) => radio.name === this.name ) as HTMLSlRadioElement[];