js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

type => variant

Browse Source
This commit is contained in:
Cory LaViska
2021-12-13 17:38:40 -05:00
parent 1d44ee2f45
commit fb20155485
25 changed files with 338 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
docs/components/alert.md
View File

@@ -2,7 +2,7 @@
[component-header:sl-alert]
Alerts are used to display important messages either inline or as toast notifications.
Alerts are used to display important messages inline or as toast notifications.
```html preview
<sl-alert open>
@@ -26,12 +26,12 @@ const App = () => (
## Examples
### Types
### Variants
Set the `type` attribute to change the alert's type.
Set the `variant` attribute to change the alert's variant.
```html preview
<sl-alert type="primary" open>
<sl-alert variant="primary" open>
<sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br>
You can tell by how pretty the alert is.
@@ -39,7 +39,7 @@ Set the `type` attribute to change the alert's type.
<br>
<sl-alert type="success" open>
<sl-alert variant="success" open>
<sl-icon slot="icon" name="check2-circle"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can safely exit the app now.
@@ -47,7 +47,7 @@ Set the `type` attribute to change the alert's type.
<br>
<sl-alert type="neutral" open>
<sl-alert variant="neutral" open>
<sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br>
Settings will take affect on next login.
@@ -55,7 +55,7 @@ Set the `type` attribute to change the alert's type.
<br>
<sl-alert type="warning" open>
<sl-alert variant="warning" open>
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
<strong>Your session has ended</strong><br>
Please login again to continue.
@@ -63,7 +63,7 @@ Set the `type` attribute to change the alert's type.
<br>
<sl-alert type="danger" open>
<sl-alert variant="danger" open>
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
<strong>Your account has been deleted</strong><br>
We're very sorry to see you go!
@@ -75,7 +75,7 @@ import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlAlert type="primary" open>
<SlAlert variant="primary" open>
<SlIcon slot="icon" name="info-circle" />
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
@@ -83,7 +83,7 @@ const App = () => (
<br />
<SlAlert type="success" open>
<SlAlert variant="success" open>
<SlIcon slot="icon" name="check2-circle" />
<strong>Your changes have been saved</strong><br />
You can safely exit the app now.
@@ -91,7 +91,7 @@ const App = () => (
<br />
<SlAlert type="neutral" open>
<SlAlert variant="neutral" open>
<SlIcon slot="icon" name="gear" />
<strong>Your settings have been updated</strong><br />
Settings will take affect on next login.
@@ -99,7 +99,7 @@ const App = () => (
<br />
<SlAlert type="warning" open>
<SlAlert variant="warning" open>
<SlIcon slot="icon" name="exclamation-triangle" />
<strong>Your session has ended</strong><br />
Please login again to continue.
@@ -107,7 +107,7 @@ const App = () => (
<br />
<SlAlert type="danger" open>
<SlAlert variant="danger" open>
<SlIcon slot="icon" name="exclamation-octagon" />
<strong>Your account has been deleted</strong><br />
We're very sorry to see you go!
@@ -121,7 +121,7 @@ const App = () => (
Add the `closable` attribute to show a close button that will hide the alert.
```html preview
<sl-alert type="primary" open closable class="alert-closable">
<sl-alert variant="primary" open closable class="alert-closable">
<sl-icon slot="icon" name="info-circle"></sl-icon>
You can close this alert any time!
</sl-alert>
@@ -164,7 +164,7 @@ const App = () => {
Icons are optional. Simply omit the `icon` slot if you don't want them.
```html preview
<sl-alert type="primary" open>
<sl-alert variant="primary" open>
Nothing fancy here, just a simple alert.
</sl-alert>
```
@@ -173,7 +173,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
import { SlAlert } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlAlert type="primary" open>
<SlAlert variant="primary" open>
Nothing fancy here, just a simple alert.
</SlAlert>
);
@@ -185,9 +185,9 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
```html preview
<div class="alert-duration">
<sl-button type="primary">Show Alert</sl-button>
<sl-button variant="primary">Show Alert</sl-button>
<sl-alert type="primary" duration="3000" closable>
<sl-alert variant="primary" duration="3000" closable>
<sl-icon slot="icon" name="info-circle"></sl-icon>
This alert will automatically hide itself after three seconds, unless you interact with it.
</sl-alert>
@@ -228,10 +228,10 @@ const App = () => {
return (
<>
<div className="alert-duration">
<SlButton type="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
<SlButton variant="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
<SlAlert
type="primary"
variant="primary"
duration="3000"
open={open}
closable
@@ -256,37 +256,37 @@ You should always use the `closable` attribute so users can dismiss the notifica
```html preview
<div class="alert-toast">
<sl-button type="primary">Primary</sl-button>
<sl-button type="success">Success</sl-button>
<sl-button type="neutral">Neutral</sl-button>
<sl-button type="warning">Warning</sl-button>
<sl-button type="danger">Danger</sl-button>
<sl-button variant="primary">Primary</sl-button>
<sl-button variant="success">Success</sl-button>
<sl-button variant="neutral">Neutral</sl-button>
<sl-button variant="warning">Warning</sl-button>
<sl-button variant="danger">Danger</sl-button>
<sl-alert type="primary" duration="3000" closable>
<sl-alert variant="primary" duration="3000" closable>
<sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br>
You can tell by how pretty the alert is.
</sl-alert>
<sl-alert type="success" duration="3000" closable>
<sl-alert variant="success" duration="3000" closable>
<sl-icon slot="icon" name="check2-circle"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can safely exit the app now.
</sl-alert>
<sl-alert type="neutral" duration="3000" closable>
<sl-alert variant="neutral" duration="3000" closable>
<sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br>
Settings will take affect on next login.
</sl-alert>
<sl-alert type="warning" duration="3000" closable>
<sl-alert variant="warning" duration="3000" closable>
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
<strong>Your session has ended</strong><br>
Please login again to continue.
</sl-alert>
<sl-alert type="danger" duration="3000" closable>
<sl-alert variant="danger" duration="3000" closable>
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
<strong>Your account has been deleted</strong><br>
We're very sorry to see you go!
@@ -296,9 +296,9 @@ You should always use the `closable` attribute so users can dismiss the notifica
<script>
const container = document.querySelector('.alert-toast');
['primary', 'success', 'neutral', 'warning', 'danger'].map(type => {
const button = container.querySelector(`sl-button[type="${type}"]`);
const alert = container.querySelector(`sl-alert[type="${type}"]`);
['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
const button = container.querySelector(`sl-button[variant="${variant}"]`);
const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
button.addEventListener('click', () => alert.toast());
});
@@ -326,51 +326,51 @@ const App = () => {
return (
<>
<SlButton type="primary" onClick={() => primary.current.toast()}>
<SlButton variant="primary" onClick={() => primary.current.toast()}>
Primary
</SlButton>
<SlButton type="success" onClick={() => success.current.toast()}>
<SlButton variant="success" onClick={() => success.current.toast()}>
Success
</SlButton>
<SlButton type="neutral" onClick={() => neutral.current.toast()}>
<SlButton variant="neutral" onClick={() => neutral.current.toast()}>
Neutral
</SlButton>
<SlButton type="warning" onClick={() => warning.current.toast()}>
<SlButton variant="warning" onClick={() => warning.current.toast()}>
Warning
</SlButton>
<SlButton type="danger" onClick={() => danger.current.toast()}>
<SlButton variant="danger" onClick={() => danger.current.toast()}>
Danger
</SlButton>
<SlAlert ref={primary} type="primary" duration="3000" closable>
<SlAlert ref={primary} variant="primary" duration="3000" closable>
<SlIcon slot="icon" name="info-circle" />
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
</SlAlert>
<SlAlert ref={success} type="success" duration="3000" closable>
<SlAlert ref={success} variant="success" duration="3000" closable>
<SlIcon slot="icon" name="check2-circle" />
<strong>Your changes have been saved</strong><br />
You can safely exit the app now.
</SlAlert>
<SlAlert ref={neutral} type="neutral" duration="3000" closable>
<SlAlert ref={neutral} variant="neutral" duration="3000" closable>
<SlIcon slot="icon" name="gear" />
<strong>Your settings have been updated</strong><br />
Settings will take affect on next login.
</SlAlert>
<SlAlert ref={warning} type="warning" duration="3000" closable>
<SlAlert ref={warning} variant="warning" duration="3000" closable>
<SlIcon slot="icon" name="exclamation-triangle" />
<strong>Your session has ended</strong><br />
Please login again to continue.
</SlAlert>
<SlAlert ref={danger} type="danger" duration="3000" closable>
<SlAlert ref={danger} variant="danger" duration="3000" closable>
<SlIcon slot="icon" name="exclamation-octagon" />
<strong>Your account has been deleted</strong><br />
We're very sorry to see you go!
@@ -386,7 +386,7 @@ For convenience, you can create a utility that emits toast notifications with a
```html preview
<div class="alert-toast-wrapper">
<sl-button type="primary">Create Toast</sl-button>
<sl-button variant="primary">Create Toast</sl-button>
</div>
<script>
@@ -402,9 +402,9 @@ For convenience, you can create a utility that emits toast notifications with a
}
// Custom function to emit toast notifications
function notify(message, type = 'primary', icon = 'info-circle', duration = 3000) {
function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
const alert = Object.assign(document.createElement('sl-alert'), {
type: type,
variant,
closable: true,
duration: duration,
innerHTML: `

4
docs/components/animation.md
View File

@@ -308,7 +308,7 @@ Animations won't play until you apply the `play` attribute. You can omit it init
```html preview
<div class="animation-form">
<sl-animation name="rubberBand" duration="1000" iterations="1">
<sl-button type="primary">Click me</sl-button>
<sl-button variant="primary">Click me</sl-button>
</sl-animation>
</div>
@@ -339,7 +339,7 @@ const App = () => {
play={play}
onSlFinish={() => setPlay(false)}
>
<SlButton type="primary" onClick={() => setPlay(true)}>
<SlButton variant="primary" onClick={() => setPlay(true)}>
Click me
</SlButton>
</SlAnimation>

80
docs/components/badge.md
View File

@@ -18,16 +18,16 @@ const App = () => (
## Examples
### Types
### Variants
Set the `type` attribute to change the badge's type.
Set the `variant` attribute to change the badge's variant.
```html preview
<sl-badge type="primary">Primary</sl-badge>
<sl-badge type="success">Success</sl-badge>
<sl-badge type="neutral">Neutral</sl-badge>
<sl-badge type="warning">Warning</sl-badge>
<sl-badge type="danger">Danger</sl-badge>
<sl-badge variant="primary">Primary</sl-badge>
<sl-badge variant="success">Success</sl-badge>
<sl-badge variant="neutral">Neutral</sl-badge>
<sl-badge variant="warning">Warning</sl-badge>
<sl-badge variant="danger">Danger</sl-badge>
```
```jsx react
@@ -35,11 +35,11 @@ import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlBadge type="primary">Primary</SlBadge>
<SlBadge type="success">Success</SlBadge>
<SlBadge type="neutral">Neutral</SlBadge>
<SlBadge type="warning">Warning</SlBadge>
<SlBadge type="danger">Danger</SlBadge>
<SlBadge variant="primary">Primary</SlBadge>
<SlBadge variant="success">Success</SlBadge>
<SlBadge variant="neutral">Neutral</SlBadge>
<SlBadge variant="warning">Warning</SlBadge>
<SlBadge variant="danger">Danger</SlBadge>
</>
);
```
@@ -49,11 +49,11 @@ const App = () => (
Use the `pill` attribute to give badges rounded edges.
```html preview
<sl-badge type="primary" pill>Primary</sl-badge>
<sl-badge type="success" pill>Success</sl-badge>
<sl-badge type="neutral" pill>Neutral</sl-badge>
<sl-badge type="warning" pill>Warning</sl-badge>
<sl-badge type="danger" pill>Danger</sl-badge>
<sl-badge variant="primary" pill>Primary</sl-badge>
<sl-badge variant="success" pill>Success</sl-badge>
<sl-badge variant="neutral" pill>Neutral</sl-badge>
<sl-badge variant="warning" pill>Warning</sl-badge>
<sl-badge variant="danger" pill>Danger</sl-badge>
```
```jsx react
@@ -61,11 +61,11 @@ import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlBadge type="primary" pill>Primary</SlBadge>
<SlBadge type="success" pill>Success</SlBadge>
<SlBadge type="neutral" pill>Neutral</SlBadge>
<SlBadge type="warning" pill>Warning</SlBadge>
<SlBadge type="danger" pill>Danger</SlBadge>
<SlBadge variant="primary" pill>Primary</SlBadge>
<SlBadge variant="success" pill>Success</SlBadge>
<SlBadge variant="neutral" pill>Neutral</SlBadge>
<SlBadge variant="warning" pill>Warning</SlBadge>
<SlBadge variant="danger" pill>Danger</SlBadge>
</>
);
```
@@ -76,11 +76,11 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
```html preview
<div class="badge-pulse">
<sl-badge type="primary" pill pulse>1</sl-badge>
<sl-badge type="success" pill pulse>1</sl-badge>
<sl-badge type="neutral" pill pulse>1</sl-badge>
<sl-badge type="warning" pill pulse>1</sl-badge>
<sl-badge type="danger" pill pulse>1</sl-badge>
<sl-badge variant="primary" pill pulse>1</sl-badge>
<sl-badge variant="success" pill pulse>1</sl-badge>
<sl-badge variant="neutral" pill pulse>1</sl-badge>
<sl-badge variant="warning" pill pulse>1</sl-badge>
<sl-badge variant="danger" pill pulse>1</sl-badge>
</div>
<style>
@@ -102,11 +102,11 @@ const css = `
const App = () => (
<>
<div className="badge-pulse">
<SlBadge type="primary" pill pulse>1</SlBadge>
<SlBadge type="success" pill pulse>1</SlBadge>
<SlBadge type="neutral" pill pulse>1</SlBadge>
<SlBadge type="warning" pill pulse>1</SlBadge>
<SlBadge type="danger" pill pulse>1</SlBadge>
<SlBadge variant="primary" pill pulse>1</SlBadge>
<SlBadge variant="success" pill pulse>1</SlBadge>
<SlBadge variant="neutral" pill pulse>1</SlBadge>
<SlBadge variant="warning" pill pulse>1</SlBadge>
<SlBadge variant="danger" pill pulse>1</SlBadge>
</div>
<style>{css}</style>
@@ -126,12 +126,12 @@ One of the most common use cases for badges is attaching them to buttons. To mak
<sl-button style="margin-left: 1rem;">
Warnings
<sl-badge type="warning" pill>8</sl-badge>
<sl-badge variant="warning" pill>8</sl-badge>
</sl-button>
<sl-button style="margin-left: 1rem;">
Errors
<sl-badge type="danger" pill>6</sl-badge>
<sl-badge variant="danger" pill>6</sl-badge>
</sl-button>
```
@@ -147,12 +147,12 @@ const App = () => (
<SlButton style={{ marginLeft: '1rem' }}>
Warnings
<SlBadge type="warning" pill>8</SlBadge>
<SlBadge variant="warning" pill>8</SlBadge>
</SlButton>
<SlButton style={{ marginLeft: '1rem' }}>
Errors
<SlBadge type="danger" pill>6</SlBadge>
<SlBadge variant="danger" pill>6</SlBadge>
</SlButton>
</>
);
@@ -165,8 +165,8 @@ When including badges in menu items, use the `suffix` slot to make sure they're
```html preview
<sl-menu style="max-width: 240px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
<sl-menu-label>Messages</sl-menu-label>
<sl-menu-item>Comments <sl-badge slot="suffix" type="neutral" pill>4</sl-badge></sl-menu-item>
<sl-menu-item>Replies <sl-badge slot="suffix" type="neutral" pill>12</sl-badge></sl-menu-item>
<sl-menu-item>Comments <sl-badge slot="suffix" variant="neutral" pill>4</sl-badge></sl-menu-item>
<sl-menu-item>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
</sl-menu>
```
@@ -182,8 +182,8 @@ const App = () => (
}}
>
<SlMenuLabel>Messages</SlMenuLabel>
<SlMenuItem>Comments <SlBadge slot="suffix" type="neutral" pill>4</SlBadge></SlMenuItem>
<SlMenuItem>Replies <SlBadge slot="suffix" type="neutral" pill>12</SlBadge></SlMenuItem>
<SlMenuItem>Comments <SlBadge slot="suffix" variant="neutral" pill>4</SlBadge></SlMenuItem>
<SlMenuItem>Replies <SlBadge slot="suffix" variant="neutral" pill>12</SlBadge></SlMenuItem>
</SlMenu>
);
```

68
docs/components/button-group.md
View File

@@ -90,41 +90,41 @@ Theme buttons are supported through the button's `type` attribute.
```html preview
<sl-button-group>
<sl-button type="primary">Left</sl-button>
<sl-button type="primary">Center</sl-button>
<sl-button type="primary">Right</sl-button>
<sl-button variant="primary">Left</sl-button>
<sl-button variant="primary">Center</sl-button>
<sl-button variant="primary">Right</sl-button>
</sl-button-group>
<br><br>
<sl-button-group>
<sl-button type="success">Left</sl-button>
<sl-button type="success">Center</sl-button>
<sl-button type="success">Right</sl-button>
<sl-button variant="success">Left</sl-button>
<sl-button variant="success">Center</sl-button>
<sl-button variant="success">Right</sl-button>
</sl-button-group>
<br><br>
<sl-button-group>
<sl-button type="neutral">Left</sl-button>
<sl-button type="neutral">Center</sl-button>
<sl-button type="neutral">Right</sl-button>
<sl-button variant="neutral">Left</sl-button>
<sl-button variant="neutral">Center</sl-button>
<sl-button variant="neutral">Right</sl-button>
</sl-button-group>
<br><br>
<sl-button-group>
<sl-button type="warning">Left</sl-button>
<sl-button type="warning">Center</sl-button>
<sl-button type="warning">Right</sl-button>
<sl-button variant="warning">Left</sl-button>
<sl-button variant="warning">Center</sl-button>
<sl-button variant="warning">Right</sl-button>
</sl-button-group>
<br><br>
<sl-button-group>
<sl-button type="danger">Left</sl-button>
<sl-button type="danger">Center</sl-button>
<sl-button type="danger">Right</sl-button>
<sl-button variant="danger">Left</sl-button>
<sl-button variant="danger">Center</sl-button>
<sl-button variant="danger">Right</sl-button>
</sl-button-group>
```
@@ -134,41 +134,41 @@ import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButtonGroup>
<SlButton type="primary">Left</SlButton>
<SlButton type="primary">Center</SlButton>
<SlButton type="primary">Right</SlButton>
<SlButton variant="primary">Left</SlButton>
<SlButton variant="primary">Center</SlButton>
<SlButton variant="primary">Right</SlButton>
</SlButtonGroup>
<br /><br />
<SlButtonGroup>
<SlButton type="success">Left</SlButton>
<SlButton type="success">Center</SlButton>
<SlButton type="success">Right</SlButton>
<SlButton variant="success">Left</SlButton>
<SlButton variant="success">Center</SlButton>
<SlButton variant="success">Right</SlButton>
</SlButtonGroup>
<br /><br />
<SlButtonGroup>
<SlButton type="neutral">Left</SlButton>
<SlButton type="neutral">Center</SlButton>
<SlButton type="neutral">Right</SlButton>
<SlButton variant="neutral">Left</SlButton>
<SlButton variant="neutral">Center</SlButton>
<SlButton variant="neutral">Right</SlButton>
</SlButtonGroup>
<br /><br />
<SlButtonGroup>
<SlButton type="warning">Left</SlButton>
<SlButton type="warning">Center</SlButton>
<SlButton type="warning">Right</SlButton>
<SlButton variant="warning">Left</SlButton>
<SlButton variant="warning">Center</SlButton>
<SlButton variant="warning">Right</SlButton>
</SlButtonGroup>
<br /><br />
<SlButtonGroup>
<SlButton type="danger">Left</SlButton>
<SlButton type="danger">Center</SlButton>
<SlButton type="danger">Right</SlButton>
<SlButton variant="danger">Left</SlButton>
<SlButton variant="danger">Center</SlButton>
<SlButton variant="danger">Right</SlButton>
</SlButtonGroup>
</>
);
@@ -282,9 +282,9 @@ Create a split button using a button and a dropdown.
```html preview
<sl-button-group>
<sl-button type="primary">Save</sl-button>
<sl-button variant="primary">Save</sl-button>
<sl-dropdown placement="bottom-end">
<sl-button slot="trigger" type="primary" caret></sl-button>
<sl-button slot="trigger" variant="primary" caret></sl-button>
<sl-menu>
<sl-menu-item>Save</sl-menu-item>
<sl-menu-item>Save as&hellip;</sl-menu-item>
@@ -305,9 +305,9 @@ import {
const App = () => (
<SlButtonGroup>
<SlButton type="primary">Save</SlButton>
<SlButton variant="primary">Save</SlButton>
<SlDropdown placement="bottom-end">
<SlButton slot="trigger" type="primary" caret></SlButton>
<SlButton slot="trigger" variant="primary" caret></SlButton>
<SlMenu>
<SlMenuItem>Save</SlMenuItem>
<SlMenuItem>Save as&hellip;</SlMenuItem>

176
docs/components/button.md
View File

@@ -18,17 +18,17 @@ const App = () => (
## Examples
### Types
### Variants
Use the `type` attribute to set the button's type.
Use the `variant` attribute to set the button's variant.
```html preview
<sl-button type="default">Default</sl-button>
<sl-button type="primary">Primary</sl-button>
<sl-button type="success">Success</sl-button>
<sl-button type="neutral">Neutral</sl-button>
<sl-button type="warning">Warning</sl-button>
<sl-button type="danger">Danger</sl-button>
<sl-button variant="default">Default</sl-button>
<sl-button variant="primary">Primary</sl-button>
<sl-button variant="success">Success</sl-button>
<sl-button variant="neutral">Neutral</sl-button>
<sl-button variant="warning">Warning</sl-button>
<sl-button variant="danger">Danger</sl-button>
```
```jsx react
@@ -36,12 +36,12 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton type="default">Default</SlButton>
<SlButton type="primary">Primary</SlButton>
<SlButton type="success">Success</SlButton>
<SlButton type="neutral">Neutral</SlButton>
<SlButton type="warning">Warning</SlButton>
<SlButton type="danger">Danger</SlButton>
<SlButton variant="default">Default</SlButton>
<SlButton variant="primary">Primary</SlButton>
<SlButton variant="success">Success</SlButton>
<SlButton variant="neutral">Neutral</SlButton>
<SlButton variant="warning">Warning</SlButton>
<SlButton variant="danger">Danger</SlButton>
</>
);
```
@@ -73,12 +73,12 @@ const App = () => (
Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
```html preview
<sl-button type="default" outline>Default</sl-button>
<sl-button type="primary" outline>Primary</sl-button>
<sl-button type="success" outline>Success</sl-button>
<sl-button type="neutral" outline>Neutral</sl-button>
<sl-button type="warning" outline>Warning</sl-button>
<sl-button type="danger" outline>Danger</sl-button>
<sl-button variant="default" outline>Default</sl-button>
<sl-button variant="primary" outline>Primary</sl-button>
<sl-button variant="success" outline>Success</sl-button>
<sl-button variant="neutral" outline>Neutral</sl-button>
<sl-button variant="warning" outline>Warning</sl-button>
<sl-button variant="danger" outline>Danger</sl-button>
```
```jsx react
@@ -86,12 +86,12 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton type="default" outline>Default</SlButton>
<SlButton type="primary" outline>Primary</SlButton>
<SlButton type="success" outline>Success</SlButton>
<SlButton type="neutral" outline>Neutral</SlButton>
<SlButton type="warning" outline>Warning</SlButton>
<SlButton type="danger" outline>Danger</SlButton>
<SlButton variant="default" outline>Default</SlButton>
<SlButton variant="primary" outline>Primary</SlButton>
<SlButton variant="success" outline>Success</SlButton>
<SlButton variant="neutral" outline>Neutral</SlButton>
<SlButton variant="warning" outline>Warning</SlButton>
<SlButton variant="danger" outline>Danger</SlButton>
</>
);
```
@@ -123,9 +123,9 @@ const App = () => (
Use the `circle` attribute to create circular icon buttons.
```html preview
<sl-button type="default" size="small" circle><sl-icon name="gear"></sl-icon></sl-button>
<sl-button type="default" size="medium" circle><sl-icon name="gear"></sl-icon></sl-button>
<sl-button type="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
<sl-button variant="default" size="small" circle><sl-icon name="gear"></sl-icon></sl-button>
<sl-button variant="default" size="medium" circle><sl-icon name="gear"></sl-icon></sl-button>
<sl-button variant="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
```
```jsx react
@@ -133,21 +133,21 @@ import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton type="default" size="small" circle><SlIcon name="gear" /></SlButton>
<SlButton type="default" size="medium" circle><SlIcon name="gear" /></SlButton>
<SlButton type="default" size="large" circle><SlIcon name="gear" /></SlButton>
<SlButton variant="default" size="small" circle><SlIcon name="gear" /></SlButton>
<SlButton variant="default" size="medium" circle><SlIcon name="gear" /></SlButton>
<SlButton variant="default" size="large" circle><SlIcon name="gear" /></SlButton>
</>
);
```
### Text Buttons
Use the `text` type to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
```html preview
<sl-button type="text" size="small">Text</sl-button>
<sl-button type="text" size="medium">Text</sl-button>
<sl-button type="text" size="large">Text</sl-button>
<sl-button variant="text" size="small">Text</sl-button>
<sl-button variant="text" size="medium">Text</sl-button>
<sl-button variant="text" size="large">Text</sl-button>
```
```jsx react
@@ -155,9 +155,9 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton type="text" size="small">Text</SlButton>
<SlButton type="text" size="medium">Text</SlButton>
<SlButton type="text" size="large">Text</SlButton>
<SlButton variant="text" size="small">Text</SlButton>
<SlButton variant="text" size="medium">Text</SlButton>
<SlButton variant="text" size="large">Text</SlButton>
</>
);
```
@@ -193,9 +193,9 @@ const App = () => (
As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.
```html preview
<sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
<sl-button type="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
<sl-button type="default" size="large" style="width: 100%;">Large</sl-button>
<sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
<sl-button variant="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
<sl-button variant="default" size="large" style="width: 100%;">Large</sl-button>
```
```jsx react
@@ -203,9 +203,9 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton type="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton>
<SlButton type="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton>
<SlButton type="default" size="large" style={{ width: '100%' }}>Large</SlButton>
<SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton>
<SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton>
<SlButton variant="default" size="large" style={{ width: '100%' }}>Large</SlButton>
</>
);
```
@@ -215,17 +215,17 @@ const App = () => (
Use the `prefix` and `suffix` slots to add icons.
```html preview
<sl-button type="default" size="small">
<sl-button variant="default" size="small">
<sl-icon slot="prefix" name="gear"></sl-icon>
Settings
</sl-button>
<sl-button type="default" size="small">
<sl-button variant="default" size="small">
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
Refresh
</sl-button>
<sl-button type="default" size="small">
<sl-button variant="default" size="small">
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
Open
@@ -233,17 +233,17 @@ Use the `prefix` and `suffix` slots to add icons.
<br><br>
<sl-button type="default">
<sl-button variant="default">
<sl-icon slot="prefix" name="gear"></sl-icon>
Settings
</sl-button>
<sl-button type="default">
<sl-button variant="default">
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
Refresh
</sl-button>
<sl-button type="default">
<sl-button variant="default">
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
Open
@@ -251,17 +251,17 @@ Use the `prefix` and `suffix` slots to add icons.
<br><br>
<sl-button type="default" size="large">
<sl-button variant="default" size="large">
<sl-icon slot="prefix" name="gear"></sl-icon>
Settings
</sl-button>
<sl-button type="default" size="large">
<sl-button variant="default" size="large">
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
Refresh
</sl-button>
<sl-button type="default" size="large">
<sl-button variant="default" size="large">
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
Open
@@ -273,17 +273,17 @@ import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton type="default" size="small">
<SlButton variant="default" size="small">
<SlIcon slot="prefix" name="gear"></SlIcon>
Settings
</SlButton>
<SlButton type="default" size="small">
<SlButton variant="default" size="small">
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
Refresh
</SlButton>
<SlButton type="default" size="small">
<SlButton variant="default" size="small">
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
Open
@@ -291,17 +291,17 @@ const App = () => (
<br /><br/ >
<SlButton type="default">
<SlButton variant="default">
<SlIcon slot="prefix" name="gear"></SlIcon>
Settings
</SlButton>
<SlButton type="default">
<SlButton variant="default">
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
Refresh
</SlButton>
<SlButton type="default">
<SlButton variant="default">
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
Open
@@ -309,17 +309,17 @@ const App = () => (
<br /><br />
<SlButton type="default" size="large">
<SlButton variant="default" size="large">
<SlIcon slot="prefix" name="gear"></SlIcon>
Settings
</SlButton>
<SlButton type="default" size="large">
<SlButton variant="default" size="large">
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
Refresh
</SlButton>
<SlButton type="default" size="large">
<SlButton variant="default" size="large">
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
Open
@@ -355,12 +355,12 @@ const App = () => (
Use the `loading` attribute 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
<sl-button type="default" loading>Default</sl-button>
<sl-button type="primary" loading>Primary</sl-button>
<sl-button type="success" loading>Success</sl-button>
<sl-button type="neutral" loading>Neutral</sl-button>
<sl-button type="warning" loading>Warning</sl-button>
<sl-button type="danger" loading>Danger</sl-button>
<sl-button variant="default" loading>Default</sl-button>
<sl-button variant="primary" loading>Primary</sl-button>
<sl-button variant="success" loading>Success</sl-button>
<sl-button variant="neutral" loading>Neutral</sl-button>
<sl-button variant="warning" loading>Warning</sl-button>
<sl-button variant="danger" loading>Danger</sl-button>
```
```jsx react
@@ -368,12 +368,12 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton type="default" loading>Default</SlButton>
<SlButton type="primary" loading>Primary</SlButton>
<SlButton type="success" loading>Success</SlButton>
<SlButton type="neutral" loading>Neutral</SlButton>
<SlButton type="warning" loading>Warning</SlButton>
<SlButton type="danger" loading>Danger</SlButton>
<SlButton variant="default" loading>Default</SlButton>
<SlButton variant="primary" loading>Primary</SlButton>
<SlButton variant="success" loading>Success</SlButton>
<SlButton variant="neutral" loading>Neutral</SlButton>
<SlButton variant="warning" loading>Warning</SlButton>
<SlButton variant="danger" loading>Danger</SlButton>
</>
);
```
@@ -383,12 +383,12 @@ const App = () => (
Use the `disabled` attribute to disable a button. Clicks will be suppressed until the disabled state is removed.
```html preview
<sl-button type="default" disabled>Default</sl-button>
<sl-button type="primary" disabled>Primary</sl-button>
<sl-button type="success" disabled>Success</sl-button>
<sl-button type="neutral" disabled>Neutral</sl-button>
<sl-button type="warning" disabled>Warning</sl-button>
<sl-button type="danger" disabled>Danger</sl-button>
<sl-button variant="default" disabled>Default</sl-button>
<sl-button variant="primary" disabled>Primary</sl-button>
<sl-button variant="success" disabled>Success</sl-button>
<sl-button variant="neutral" disabled>Neutral</sl-button>
<sl-button variant="warning" disabled>Warning</sl-button>
<sl-button variant="danger" disabled>Danger</sl-button>
```
```jsx react
@@ -396,19 +396,19 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton type="default" disabled>Default</SlButton>
<SlButton type="primary" disabled>Primary</SlButton>
<SlButton type="success" disabled>Success</SlButton>
<SlButton type="neutral" disabled>Neutral</SlButton>
<SlButton type="warning" disabled>Warning</SlButton>
<SlButton type="danger" disabled>Danger</SlButton>
<SlButton variant="default" disabled>Default</SlButton>
<SlButton variant="primary" disabled>Primary</SlButton>
<SlButton variant="success" disabled>Success</SlButton>
<SlButton variant="neutral" disabled>Neutral</SlButton>
<SlButton variant="warning" disabled>Warning</SlButton>
<SlButton variant="danger" disabled>Danger</SlButton>
</>
);
```
### Styling Buttons
This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's type attribute instead of a class (e.g. `sl-button[type="primary"]`).
This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's `variant` attribute instead of a class (e.g. `sl-button[variant="primary"]`).
```html preview
<sl-button class="pink">Pink Button</sl-button>

8
docs/components/card.md
View File

@@ -17,7 +17,7 @@ Cards can be used to group related subjects in a container.
<small>6 weeks old</small>
<div slot="footer">
<sl-button type="primary" pill>More Info</sl-button>
<sl-button variant="primary" pill>More Info</sl-button>
<sl-rating></sl-rating>
</div>
</sl-card>
@@ -76,7 +76,7 @@ const App = () => (
<small>6 weeks old</small>
<div slot="footer">
<SlButton type="primary" pill>More Info</SlButton>
<SlButton variant="primary" pill>More Info</SlButton>
<SlRating></SlRating>
</div>
</SlCard>
@@ -210,7 +210,7 @@ Footers can be used to display actions, summaries, or other relevant content.
<div slot="footer">
<sl-rating></sl-rating>
<sl-button slot="footer" type="primary">Preview</sl-button>
<sl-button slot="footer" variant="primary">Preview</sl-button>
</div>
</sl-card>
@@ -253,7 +253,7 @@ const App = () => (
<div slot="footer">
<SlRating></SlRating>
<SlButton slot="footer" type="primary">Preview</SlButton>
<SlButton slot="footer" variant="primary">Preview</SlButton>
</div>
</SlCard>

20
docs/components/dialog.md
View File

@@ -7,7 +7,7 @@ Dialogs, sometimes called "modals", appear above the page and require the user's
```html preview
<sl-dialog label="Dialog" class="dialog-overview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -33,7 +33,7 @@ const App = () => {
<>
<SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>
@@ -59,7 +59,7 @@ Use the `--width` custom property to set the dialog's width.
```html preview
<sl-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -90,7 +90,7 @@ const App = () => {
onSlAfterHide={() => setOpen(false)}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>
@@ -110,7 +110,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
<div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
<p>Scroll down and give it a try! 👇</p>
</div>
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -143,7 +143,7 @@ const App = () => {
<p>Scroll down and give it a try! 👇</p>
</div>
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>
@@ -163,7 +163,7 @@ To keep the dialog open in such cases, you can cancel the `sl-request-close` eve
```html preview
<sl-dialog label="Dialog" class="dialog-deny-close">
This dialog will not close unless you use the button below.
<sl-button slot="footer" type="primary">Save &amp; Close</sl-button>
<sl-button slot="footer" variant="primary">Save &amp; Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -196,7 +196,7 @@ const App = () => {
onSlAfterHide={() => setOpen(false)}
>
This dialog will not close unless you use the button below.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Save &amp; Close
</SlButton>
</SlDialog>
@@ -214,7 +214,7 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq
```html preview
<sl-dialog label="Dialog" class="dialog-focus">
<sl-input placeholder="I will have focus when the dialog is opened"></sl-input>
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -261,7 +261,7 @@ const App = () => {
onSlAfterHide={() => setOpen(false)}
>
<SlInput ref={input} placeholder="I will have focus when the dialog is opened" />
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>

54
docs/components/drawer.md
View File

@@ -7,7 +7,7 @@ Drawers slide in from a container to expose additional options and information.
```html preview
<sl-drawer label="Drawer" class="drawer-overview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -15,7 +15,7 @@ Drawers slide in from a container to expose additional options and information.
<script>
const drawer = document.querySelector('.drawer-overview');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -33,7 +33,7 @@ const App = () => {
<>
<SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -53,7 +53,7 @@ By default, drawers slide in from the end. To make the drawer slide in from the
```html preview
<sl-drawer label="Drawer" placement="start" class="drawer-placement-start">
This drawer slides in from the start.
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -61,7 +61,7 @@ By default, drawers slide in from the end. To make the drawer slide in from the
<script>
const drawer = document.querySelector('.drawer-placement-start');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -84,7 +84,7 @@ const App = () => {
onSlAfterHide={() => setOpen(false)}
>
This drawer slides in from the start.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -102,7 +102,7 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
```html preview
<sl-drawer label="Drawer" placement="top" class="drawer-placement-top">
This drawer slides in from the top.
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -110,7 +110,7 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
<script>
const drawer = document.querySelector('.drawer-placement-top');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -133,7 +133,7 @@ const App = () => {
onSlAfterHide={() => setOpen(false)}
>
This drawer slides in from the top.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -151,7 +151,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
```html preview
<sl-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
This drawer slides in from the bottom.
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -159,7 +159,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
<script>
const drawer = document.querySelector('.drawer-placement-bottom');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -182,7 +182,7 @@ const App = () => {
onSlAfterHide={() => setOpen(false)}
>
This drawer slides in from the bottom.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -205,7 +205,7 @@ By default, the drawer slides out of its [containing block](https://developer.mo
<sl-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
</div>
@@ -214,7 +214,7 @@ By default, the drawer slides out of its [containing block](https://developer.mo
<script>
const drawer = document.querySelector('.drawer-contained');
const openButton = drawer.parentElement.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -249,7 +249,7 @@ const App = () => {
style={{ '--size': '50%' }}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -268,7 +268,7 @@ Use the `--size` custom property to set the drawer's size. This will be applied
```html preview
<sl-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
This drawer is always 50% of the viewport.
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -276,7 +276,7 @@ Use the `--size` custom property to set the drawer's size. This will be applied
<script>
const drawer = document.querySelector('.drawer-custom-size');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -298,7 +298,7 @@ const App = () => {
style={{ '--size': '50vw' }}
>
This drawer is always 50% of the viewport.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -318,7 +318,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
<div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
<p>Scroll down and give it a try! 👇</p>
</div>
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -326,7 +326,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
<script>
const drawer = document.querySelector('.drawer-scrolling');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -352,7 +352,7 @@ const App = () => {
>
<p>Scroll down and give it a try! 👇</p>
</div>
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -373,7 +373,7 @@ To keep the drawer open in such cases, you can cancel the `sl-request-close` eve
```html preview
<sl-drawer label="Drawer" class="drawer-deny-close">
This drawer will not close unless you use the button below.
<sl-button slot="footer" type="primary">Save &amp; Close</sl-button>
<sl-button slot="footer" variant="primary">Save &amp; Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -381,7 +381,7 @@ To keep the drawer open in such cases, you can cancel the `sl-request-close` eve
<script>
const drawer = document.querySelector('.drawer-deny-close');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -406,7 +406,7 @@ const App = () => {
onSlAfterHide={() => setOpen(false)}
>
This drawer will not close unless you use the button below.
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Save &amp; Close
</SlButton>
</SlDrawer>
@@ -424,7 +424,7 @@ By default, the drawer's panel will gain focus when opened. This allows the firs
```html preview
<sl-drawer label="Drawer" class="drawer-focus">
<sl-input placeholder="I will have focus when the drawer is opened"></sl-input>
<sl-button slot="footer" type="primary">Close</sl-button>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -433,7 +433,7 @@ By default, the drawer's panel will gain focus when opened. This allows the firs
const drawer = document.querySelector('.drawer-focus');
const input = drawer.querySelector('sl-input');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -471,7 +471,7 @@ const App = () => {
onSlAfterHide={() => setOpen(false)}
>
<SlInput ref={input} placeholder="I will have focus when the drawer is opened" />
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>

36
docs/components/form.md
View File

@@ -12,7 +12,7 @@ Shoelace forms don't make use of `action` and `method` attributes and they don't
```html preview
<sl-form class="form-overview">
<sl-input name="name" type="text" label="Name"></sl-input>
<sl-input name="name" variant="text" label="Name"></sl-input>
<br>
<sl-select name="favorite" label="Select your favorite">
<sl-menu-item value="birds">Birds</sl-menu-item>
@@ -79,7 +79,7 @@ function handleSubmit(event) {
const App = () => (
<SlForm onSlSubmit={handleSubmit}>
<SlInput name="name" type="text" label="Name" />
<SlInput name="name" variant="text" label="Name" />
<br />
<SlSelect name="favorite" label="Select your favorite">
<SlMenuItem value="birds">Birds</SlMenuItem>
@@ -104,8 +104,8 @@ On submit, a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormD
```html preview
<sl-form class="form-formdata">
<sl-input name="name" type="text" label="Name" required></sl-input>
<sl-input name="age" type="number" label="Age" required></sl-input>
<sl-input name="name" variant="text" label="Name" required></sl-input>
<sl-input name="age" variant="number" label="Age" required></sl-input>
<br>
<sl-button submit>Submit</sl-button>
</sl-form>
@@ -147,8 +147,8 @@ const App = () => {
return (
<SlForm class="form-formdata" onSlSubmit={handleSubmit}>
<SlInput name="name" type="text" label="Name" required />
<SlInput name="age" type="number" label="Age" required />
<SlInput name="name" variant="text" label="Name" required />
<SlInput name="age" variant="number" label="Age" required />
<br />
<SlButton submit>Submit</SlButton>
</SlForm>
@@ -198,7 +198,7 @@ To make a field required, use the `required` prop. The form will not be submitte
<br>
<sl-checkbox required>Check me before submitting</sl-checkbox>
<br><br>
<sl-button type="primary" submit>Submit</sl-button>
<sl-button variant="primary" submit>Submit</sl-button>
</sl-form>
<script>
@@ -233,7 +233,7 @@ const App = () => (
<br />
<SlCheckbox required>Check me before submitting</SlCheckbox>
<br /><br />
<SlButton type="primary" submit>Submit</SlButton>
<SlButton variant="primary" submit>Submit</SlButton>
</SlForm>
);
```
@@ -246,7 +246,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
<sl-form class="input-validation-pattern">
<sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
<br>
<sl-button type="primary" submit>Submit</sl-button>
<sl-button variant="primary" submit>Submit</sl-button>
</sl-form>
<script>
@@ -266,7 +266,7 @@ const App = () => (
<SlForm onSlSubmit={() => alert('All fields are valid!')}>
<SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
<br />
<SlButton type="primary" submit>Submit</SlButton>
<SlButton variant="primary" submit>Submit</SlButton>
</SlForm>
);
```
@@ -277,11 +277,11 @@ Some input types will automatically trigger constraints, such as `email` and `ur
```html preview
<sl-form class="input-validation-type">
<sl-input type="email" label="Email" placeholder="you@example.com" required></sl-input>
<sl-input variant="email" label="Email" placeholder="you@example.com" required></sl-input>
<br>
<sl-input type="url" label="URL" placeholder="https://example.com/" required></sl-input>
<sl-input variant="url" label="URL" placeholder="https://example.com/" required></sl-input>
<br>
<sl-button type="primary" submit>Submit</sl-button>
<sl-button variant="primary" submit>Submit</sl-button>
</sl-form>
<script>
@@ -299,11 +299,11 @@ import {
const App = () => (
<SlForm onSlSubmit={() => alert('All fields are valid!')}>
<SlInput type="email" label="Email" placeholder="you@example.com" required />
<SlInput variant="email" label="Email" placeholder="you@example.com" required />
<br />
<SlInput type="url" label="URL" placeholder="https://example.com/" required />
<SlInput variant="url" label="URL" placeholder="https://example.com/" required />
<br />
<SlButton type="primary" submit>Submit</SlButton>
<SlButton variant="primary" submit>Submit</SlButton>
</SlForm>
);
```
@@ -316,7 +316,7 @@ To create a custom validation error, use the `setCustomValidity` method. The for
<sl-form class="input-validation-custom">
<sl-input label="Type 'shoelace'" required></sl-input>
<br>
<sl-button type="primary" submit>Submit</sl-button>
<sl-button variant="primary" submit>Submit</sl-button>
</sl-form>
<script>
@@ -366,7 +366,7 @@ const App = () => {
onSlInput={handleInput}
/>
<br />
<SlButton type="primary" submit>Submit</SlButton>
<SlButton variant="primary" submit>Submit</SlButton>
</SlForm>
);
};

4
docs/components/menu-item.md
View File

@@ -141,7 +141,7 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
<sl-menu-item>
<sl-icon slot="prefix" name="envelope"></sl-icon>
Messages
<sl-badge slot="suffix" type="primary" pill>12</sl-badge>
<sl-badge slot="suffix" variant="primary" pill>12</sl-badge>
</sl-menu-item>
<sl-divider></sl-divider>
@@ -178,7 +178,7 @@ const App = () => (
<SlMenuItem>
<SlIcon slot="prefix" name="envelope" />
Messages
<SlBadge slot="suffix" type="primary" pill>12</SlBadge>
<SlBadge slot="suffix" variant="primary" pill>12</SlBadge>
</SlMenuItem>
<SlDivider />

14
docs/components/mutation-observer.md
View File

@@ -9,7 +9,7 @@ The mutation observer will report changes to the content it wraps through the `s
```html preview
<div class="mutation-overview">
<sl-mutation-observer attr="type">
<sl-button type="primary">Click to mutate</sl-button>
<sl-button variant="primary">Click to mutate</sl-button>
</sl-mutation-observer>
<br>
@@ -74,7 +74,7 @@ const App = () => {
attr="*"
onSlMutation={event => console.log(event.detail)}
>
<SlButton type={type} onClick={handleClick}>Click to mutate</SlButton>
<SlButton variant={type} onClick={handleClick}>Click to mutate</SlButton>
</SlMutationObserver>
<style>{css}</style>
@@ -95,7 +95,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
<div class="mutation-child-list">
<sl-mutation-observer child-list>
<div class="buttons">
<sl-button type="primary">Add button</sl-button>
<sl-button variant="primary">Add button</sl-button>
</div>
</sl-mutation-observer>
@@ -105,7 +105,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
const container = document.querySelector('.mutation-child-list');
const mutationObserver = container.querySelector('sl-mutation-observer');
const buttons = container.querySelector('.buttons');
const button = container.querySelector('sl-button[type="primary"]');
const button = container.querySelector('sl-button[variant="primary"]');
let i = 0;
// Add a button
@@ -117,7 +117,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
// Remove a button
buttons.addEventListener('click', event => {
const target = event.target.closest('sl-button:not([type="primary"])');
const target = event.target.closest('sl-button:not([variant="primary"])');
event.stopPropagation();
if (target) {
@@ -176,9 +176,9 @@ const App = () => {
onSlMutation={event => console.log(event.detail)}
>
<div className="buttons">
<SlButton type="primary" onClick={addButton}>Add button</SlButton>
<SlButton variant="primary" onClick={addButton}>Add button</SlButton>
{buttonIds.map(id => (
<SlButton key={id} type="default" onClick={() => removeButton(id)}>
<SlButton key={id} variant="default" onClick={() => removeButton(id)}>
{id}
</SlButton>
))}

20
docs/components/tag.md
View File

@@ -5,11 +5,11 @@
Tags are used as labels to organize things or to indicate a selection.
```html preview
<sl-tag type="primary">Primary</sl-tag>
<sl-tag type="success">Success</sl-tag>
<sl-tag type="neutral">Neutral</sl-tag>
<sl-tag type="warning">Warning</sl-tag>
<sl-tag type="danger">Danger</sl-tag>
<sl-tag variant="primary">Primary</sl-tag>
<sl-tag variant="success">Success</sl-tag>
<sl-tag variant="neutral">Neutral</sl-tag>
<sl-tag variant="warning">Warning</sl-tag>
<sl-tag variant="danger">Danger</sl-tag>
```
@@ -18,11 +18,11 @@ import { SlTag } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlTag type="primary">Primary</SlTag>
<SlTag type="success">Success</SlTag>
<SlTag type="neutral">Neutral</SlTag>
<SlTag type="warning">Warning</SlTag>
<SlTag type="danger">Danger</SlTag>
<SlTag variant="primary">Primary</SlTag>
<SlTag variant="success">Success</SlTag>
<SlTag variant="neutral">Neutral</SlTag>
<SlTag variant="warning">Warning</SlTag>
<SlTag variant="danger">Danger</SlTag>
</>
);
```