mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

type => variant

pull/629/head
Cory LaViska 2021-12-13 17:38:40 -05:00
rodzic 1d44ee2f45
commit fb20155485
25 zmienionych plików z 338 dodań i 337 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
docs/assets/plugins/metadata/metadata.js
Wyświetl plik

@ -357,11 +357,11 @@
</div> </div>
<div class="component-header__info"> <div class="component-header__info">
<sl-badge type="neutral" pill> <sl-badge variant="neutral" pill>
Since ${component.since || '?'} Since ${component.since || '?'}
</sl-badge> </sl-badge>
<sl-badge type="${badgeType}" pill style="text-transform: capitalize;"> <sl-badge variant="${badgeType}" pill style="text-transform: capitalize;">
${component.status} ${component.status}
</sl-badge> </sl-badge>
</div> </div>

92
docs/components/alert.md
Wyświetl plik

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

4
docs/components/animation.md
Wyświetl plik

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

80
docs/components/badge.md
Wyświetl plik

@ -18,16 +18,16 @@ const App = () => (
## Examples ## 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 ```html preview
<sl-badge type="primary">Primary</sl-badge> <sl-badge variant="primary">Primary</sl-badge>
<sl-badge type="success">Success</sl-badge> <sl-badge variant="success">Success</sl-badge>
<sl-badge type="neutral">Neutral</sl-badge> <sl-badge variant="neutral">Neutral</sl-badge>
<sl-badge type="warning">Warning</sl-badge> <sl-badge variant="warning">Warning</sl-badge>
<sl-badge type="danger">Danger</sl-badge> <sl-badge variant="danger">Danger</sl-badge>
``` ```
```jsx react ```jsx react
@ -35,11 +35,11 @@ import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlBadge type="primary">Primary</SlBadge> <SlBadge variant="primary">Primary</SlBadge>
<SlBadge type="success">Success</SlBadge> <SlBadge variant="success">Success</SlBadge>
<SlBadge type="neutral">Neutral</SlBadge> <SlBadge variant="neutral">Neutral</SlBadge>
<SlBadge type="warning">Warning</SlBadge> <SlBadge variant="warning">Warning</SlBadge>
<SlBadge type="danger">Danger</SlBadge> <SlBadge variant="danger">Danger</SlBadge>
</> </>
); );
``` ```
@ -49,11 +49,11 @@ const App = () => (
Use the `pill` attribute to give badges rounded edges. Use the `pill` attribute to give badges rounded edges.
```html preview ```html preview
<sl-badge type="primary" pill>Primary</sl-badge> <sl-badge variant="primary" pill>Primary</sl-badge>
<sl-badge type="success" pill>Success</sl-badge> <sl-badge variant="success" pill>Success</sl-badge>
<sl-badge type="neutral" pill>Neutral</sl-badge> <sl-badge variant="neutral" pill>Neutral</sl-badge>
<sl-badge type="warning" pill>Warning</sl-badge> <sl-badge variant="warning" pill>Warning</sl-badge>
<sl-badge type="danger" pill>Danger</sl-badge> <sl-badge variant="danger" pill>Danger</sl-badge>
``` ```
```jsx react ```jsx react
@ -61,11 +61,11 @@ import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlBadge type="primary" pill>Primary</SlBadge> <SlBadge variant="primary" pill>Primary</SlBadge>
<SlBadge type="success" pill>Success</SlBadge> <SlBadge variant="success" pill>Success</SlBadge>
<SlBadge type="neutral" pill>Neutral</SlBadge> <SlBadge variant="neutral" pill>Neutral</SlBadge>
<SlBadge type="warning" pill>Warning</SlBadge> <SlBadge variant="warning" pill>Warning</SlBadge>
<SlBadge type="danger" pill>Danger</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 ```html preview
<div class="badge-pulse"> <div class="badge-pulse">
<sl-badge type="primary" pill pulse>1</sl-badge> <sl-badge variant="primary" pill pulse>1</sl-badge>
<sl-badge type="success" pill pulse>1</sl-badge> <sl-badge variant="success" pill pulse>1</sl-badge>
<sl-badge type="neutral" pill pulse>1</sl-badge> <sl-badge variant="neutral" pill pulse>1</sl-badge>
<sl-badge type="warning" pill pulse>1</sl-badge> <sl-badge variant="warning" pill pulse>1</sl-badge>
<sl-badge type="danger" pill pulse>1</sl-badge> <sl-badge variant="danger" pill pulse>1</sl-badge>
</div> </div>
<style> <style>
@ -102,11 +102,11 @@ const css = `
const App = () => ( const App = () => (
<> <>
<div className="badge-pulse"> <div className="badge-pulse">
<SlBadge type="primary" pill pulse>1</SlBadge> <SlBadge variant="primary" pill pulse>1</SlBadge>
<SlBadge type="success" pill pulse>1</SlBadge> <SlBadge variant="success" pill pulse>1</SlBadge>
<SlBadge type="neutral" pill pulse>1</SlBadge> <SlBadge variant="neutral" pill pulse>1</SlBadge>
<SlBadge type="warning" pill pulse>1</SlBadge> <SlBadge variant="warning" pill pulse>1</SlBadge>
<SlBadge type="danger" pill pulse>1</SlBadge> <SlBadge variant="danger" pill pulse>1</SlBadge>
</div> </div>
<style>{css}</style> <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;"> <sl-button style="margin-left: 1rem;">
Warnings Warnings
<sl-badge type="warning" pill>8</sl-badge> <sl-badge variant="warning" pill>8</sl-badge>
</sl-button> </sl-button>
<sl-button style="margin-left: 1rem;"> <sl-button style="margin-left: 1rem;">
Errors Errors
<sl-badge type="danger" pill>6</sl-badge> <sl-badge variant="danger" pill>6</sl-badge>
</sl-button> </sl-button>
``` ```
@ -147,12 +147,12 @@ const App = () => (
<SlButton style={{ marginLeft: '1rem' }}> <SlButton style={{ marginLeft: '1rem' }}>
Warnings Warnings
<SlBadge type="warning" pill>8</SlBadge> <SlBadge variant="warning" pill>8</SlBadge>
</SlButton> </SlButton>
<SlButton style={{ marginLeft: '1rem' }}> <SlButton style={{ marginLeft: '1rem' }}>
Errors Errors
<SlBadge type="danger" pill>6</SlBadge> <SlBadge variant="danger" pill>6</SlBadge>
</SlButton> </SlButton>
</> </>
); );
@ -165,8 +165,8 @@ When including badges in menu items, use the `suffix` slot to make sure they're
```html preview ```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 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-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>Comments <sl-badge slot="suffix" variant="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>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
</sl-menu> </sl-menu>
``` ```
@ -182,8 +182,8 @@ const App = () => (
}} }}
> >
<SlMenuLabel>Messages</SlMenuLabel> <SlMenuLabel>Messages</SlMenuLabel>
<SlMenuItem>Comments <SlBadge slot="suffix" type="neutral" pill>4</SlBadge></SlMenuItem> <SlMenuItem>Comments <SlBadge slot="suffix" variant="neutral" pill>4</SlBadge></SlMenuItem>
<SlMenuItem>Replies <SlBadge slot="suffix" type="neutral" pill>12</SlBadge></SlMenuItem> <SlMenuItem>Replies <SlBadge slot="suffix" variant="neutral" pill>12</SlBadge></SlMenuItem>
</SlMenu> </SlMenu>
); );
``` ```

68
docs/components/button-group.md
Wyświetl plik

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

176
docs/components/button.md
Wyświetl plik

@ -18,17 +18,17 @@ const App = () => (
## Examples ## 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 ```html preview
<sl-button type="default">Default</sl-button> <sl-button variant="default">Default</sl-button>
<sl-button type="primary">Primary</sl-button> <sl-button variant="primary">Primary</sl-button>
<sl-button type="success">Success</sl-button> <sl-button variant="success">Success</sl-button>
<sl-button type="neutral">Neutral</sl-button> <sl-button variant="neutral">Neutral</sl-button>
<sl-button type="warning">Warning</sl-button> <sl-button variant="warning">Warning</sl-button>
<sl-button type="danger">Danger</sl-button> <sl-button variant="danger">Danger</sl-button>
``` ```
```jsx react ```jsx react
@ -36,12 +36,12 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton type="default">Default</SlButton> <SlButton variant="default">Default</SlButton>
<SlButton type="primary">Primary</SlButton> <SlButton variant="primary">Primary</SlButton>
<SlButton type="success">Success</SlButton> <SlButton variant="success">Success</SlButton>
<SlButton type="neutral">Neutral</SlButton> <SlButton variant="neutral">Neutral</SlButton>
<SlButton type="warning">Warning</SlButton> <SlButton variant="warning">Warning</SlButton>
<SlButton type="danger">Danger</SlButton> <SlButton variant="danger">Danger</SlButton>
</> </>
); );
``` ```
@ -73,12 +73,12 @@ const App = () => (
Use the `outline` attribute to draw outlined buttons with transparent backgrounds. Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
```html preview ```html preview
<sl-button type="default" outline>Default</sl-button> <sl-button variant="default" outline>Default</sl-button>
<sl-button type="primary" outline>Primary</sl-button> <sl-button variant="primary" outline>Primary</sl-button>
<sl-button type="success" outline>Success</sl-button> <sl-button variant="success" outline>Success</sl-button>
<sl-button type="neutral" outline>Neutral</sl-button> <sl-button variant="neutral" outline>Neutral</sl-button>
<sl-button type="warning" outline>Warning</sl-button> <sl-button variant="warning" outline>Warning</sl-button>
<sl-button type="danger" outline>Danger</sl-button> <sl-button variant="danger" outline>Danger</sl-button>
``` ```
```jsx react ```jsx react
@ -86,12 +86,12 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton type="default" outline>Default</SlButton> <SlButton variant="default" outline>Default</SlButton>
<SlButton type="primary" outline>Primary</SlButton> <SlButton variant="primary" outline>Primary</SlButton>
<SlButton type="success" outline>Success</SlButton> <SlButton variant="success" outline>Success</SlButton>
<SlButton type="neutral" outline>Neutral</SlButton> <SlButton variant="neutral" outline>Neutral</SlButton>
<SlButton type="warning" outline>Warning</SlButton> <SlButton variant="warning" outline>Warning</SlButton>
<SlButton type="danger" outline>Danger</SlButton> <SlButton variant="danger" outline>Danger</SlButton>
</> </>
); );
``` ```
@ -123,9 +123,9 @@ const App = () => (
Use the `circle` attribute to create circular icon buttons. Use the `circle` attribute to create circular icon buttons.
```html preview ```html preview
<sl-button type="default" size="small" 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 type="default" size="medium" 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 type="default" size="large" 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 ```jsx react
@ -133,21 +133,21 @@ import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton type="default" size="small" circle><SlIcon name="gear" /></SlButton> <SlButton variant="default" size="small" circle><SlIcon name="gear" /></SlButton>
<SlButton type="default" size="medium" circle><SlIcon name="gear" /></SlButton> <SlButton variant="default" size="medium" circle><SlIcon name="gear" /></SlButton>
<SlButton type="default" size="large" circle><SlIcon name="gear" /></SlButton> <SlButton variant="default" size="large" circle><SlIcon name="gear" /></SlButton>
</> </>
); );
``` ```
### Text Buttons ### 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 ```html preview
<sl-button type="text" size="small">Text</sl-button> <sl-button variant="text" size="small">Text</sl-button>
<sl-button type="text" size="medium">Text</sl-button> <sl-button variant="text" size="medium">Text</sl-button>
<sl-button type="text" size="large">Text</sl-button> <sl-button variant="text" size="large">Text</sl-button>
``` ```
```jsx react ```jsx react
@ -155,9 +155,9 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton type="text" size="small">Text</SlButton> <SlButton variant="text" size="small">Text</SlButton>
<SlButton type="text" size="medium">Text</SlButton> <SlButton variant="text" size="medium">Text</SlButton>
<SlButton type="text" size="large">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. 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 ```html preview
<sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button> <sl-button variant="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 variant="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="large" style="width: 100%;">Large</sl-button>
``` ```
```jsx react ```jsx react
@ -203,9 +203,9 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton type="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton> <SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton>
<SlButton type="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton> <SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton>
<SlButton type="default" size="large" style={{ width: '100%' }}>Large</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. Use the `prefix` and `suffix` slots to add icons.
```html preview ```html preview
<sl-button type="default" size="small"> <sl-button variant="default" size="small">
<sl-icon slot="prefix" name="gear"></sl-icon> <sl-icon slot="prefix" name="gear"></sl-icon>
Settings Settings
</sl-button> </sl-button>
<sl-button type="default" size="small"> <sl-button variant="default" size="small">
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon> <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
Refresh Refresh
</sl-button> </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="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon> <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
Open Open
@ -233,17 +233,17 @@ Use the `prefix` and `suffix` slots to add icons.
<br><br> <br><br>
<sl-button type="default"> <sl-button variant="default">
<sl-icon slot="prefix" name="gear"></sl-icon> <sl-icon slot="prefix" name="gear"></sl-icon>
Settings Settings
</sl-button> </sl-button>
<sl-button type="default"> <sl-button variant="default">
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon> <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
Refresh Refresh
</sl-button> </sl-button>
<sl-button type="default"> <sl-button variant="default">
<sl-icon slot="prefix" name="link-45deg"></sl-icon> <sl-icon slot="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon> <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
Open Open
@ -251,17 +251,17 @@ Use the `prefix` and `suffix` slots to add icons.
<br><br> <br><br>
<sl-button type="default" size="large"> <sl-button variant="default" size="large">
<sl-icon slot="prefix" name="gear"></sl-icon> <sl-icon slot="prefix" name="gear"></sl-icon>
Settings Settings
</sl-button> </sl-button>
<sl-button type="default" size="large"> <sl-button variant="default" size="large">
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon> <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
Refresh Refresh
</sl-button> </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="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon> <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
Open Open
@ -273,17 +273,17 @@ import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton type="default" size="small"> <SlButton variant="default" size="small">
<SlIcon slot="prefix" name="gear"></SlIcon> <SlIcon slot="prefix" name="gear"></SlIcon>
Settings Settings
</SlButton> </SlButton>
<SlButton type="default" size="small"> <SlButton variant="default" size="small">
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon> <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
Refresh Refresh
</SlButton> </SlButton>
<SlButton type="default" size="small"> <SlButton variant="default" size="small">
<SlIcon slot="prefix" name="link-45deg"></SlIcon> <SlIcon slot="prefix" name="link-45deg"></SlIcon>
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon> <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
Open Open
@ -291,17 +291,17 @@ const App = () => (
<br /><br/ > <br /><br/ >
<SlButton type="default"> <SlButton variant="default">
<SlIcon slot="prefix" name="gear"></SlIcon> <SlIcon slot="prefix" name="gear"></SlIcon>
Settings Settings
</SlButton> </SlButton>
<SlButton type="default"> <SlButton variant="default">
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon> <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
Refresh Refresh
</SlButton> </SlButton>
<SlButton type="default"> <SlButton variant="default">
<SlIcon slot="prefix" name="link-45deg"></SlIcon> <SlIcon slot="prefix" name="link-45deg"></SlIcon>
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon> <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
Open Open
@ -309,17 +309,17 @@ const App = () => (
<br /><br /> <br /><br />
<SlButton type="default" size="large"> <SlButton variant="default" size="large">
<SlIcon slot="prefix" name="gear"></SlIcon> <SlIcon slot="prefix" name="gear"></SlIcon>
Settings Settings
</SlButton> </SlButton>
<SlButton type="default" size="large"> <SlButton variant="default" size="large">
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon> <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
Refresh Refresh
</SlButton> </SlButton>
<SlButton type="default" size="large"> <SlButton variant="default" size="large">
<SlIcon slot="prefix" name="link-45deg"></SlIcon> <SlIcon slot="prefix" name="link-45deg"></SlIcon>
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon> <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
Open 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. 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 ```html preview
<sl-button type="default" loading>Default</sl-button> <sl-button variant="default" loading>Default</sl-button>
<sl-button type="primary" loading>Primary</sl-button> <sl-button variant="primary" loading>Primary</sl-button>
<sl-button type="success" loading>Success</sl-button> <sl-button variant="success" loading>Success</sl-button>
<sl-button type="neutral" loading>Neutral</sl-button> <sl-button variant="neutral" loading>Neutral</sl-button>
<sl-button type="warning" loading>Warning</sl-button> <sl-button variant="warning" loading>Warning</sl-button>
<sl-button type="danger" loading>Danger</sl-button> <sl-button variant="danger" loading>Danger</sl-button>
``` ```
```jsx react ```jsx react
@ -368,12 +368,12 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton type="default" loading>Default</SlButton> <SlButton variant="default" loading>Default</SlButton>
<SlButton type="primary" loading>Primary</SlButton> <SlButton variant="primary" loading>Primary</SlButton>
<SlButton type="success" loading>Success</SlButton> <SlButton variant="success" loading>Success</SlButton>
<SlButton type="neutral" loading>Neutral</SlButton> <SlButton variant="neutral" loading>Neutral</SlButton>
<SlButton type="warning" loading>Warning</SlButton> <SlButton variant="warning" loading>Warning</SlButton>
<SlButton type="danger" loading>Danger</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. Use the `disabled` attribute to disable a button. Clicks will be suppressed until the disabled state is removed.
```html preview ```html preview
<sl-button type="default" disabled>Default</sl-button> <sl-button variant="default" disabled>Default</sl-button>
<sl-button type="primary" disabled>Primary</sl-button> <sl-button variant="primary" disabled>Primary</sl-button>
<sl-button type="success" disabled>Success</sl-button> <sl-button variant="success" disabled>Success</sl-button>
<sl-button type="neutral" disabled>Neutral</sl-button> <sl-button variant="neutral" disabled>Neutral</sl-button>
<sl-button type="warning" disabled>Warning</sl-button> <sl-button variant="warning" disabled>Warning</sl-button>
<sl-button type="danger" disabled>Danger</sl-button> <sl-button variant="danger" disabled>Danger</sl-button>
``` ```
```jsx react ```jsx react
@ -396,19 +396,19 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton type="default" disabled>Default</SlButton> <SlButton variant="default" disabled>Default</SlButton>
<SlButton type="primary" disabled>Primary</SlButton> <SlButton variant="primary" disabled>Primary</SlButton>
<SlButton type="success" disabled>Success</SlButton> <SlButton variant="success" disabled>Success</SlButton>
<SlButton type="neutral" disabled>Neutral</SlButton> <SlButton variant="neutral" disabled>Neutral</SlButton>
<SlButton type="warning" disabled>Warning</SlButton> <SlButton variant="warning" disabled>Warning</SlButton>
<SlButton type="danger" disabled>Danger</SlButton> <SlButton variant="danger" disabled>Danger</SlButton>
</> </>
); );
``` ```
### Styling Buttons ### 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 ```html preview
<sl-button class="pink">Pink Button</sl-button> <sl-button class="pink">Pink Button</sl-button>

8
docs/components/card.md
Wyświetl plik

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

20
docs/components/dialog.md
Wyświetl plik

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

54
docs/components/drawer.md
Wyświetl plik

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

36
docs/components/form.md
Wyświetl plik

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

4
docs/components/menu-item.md
Wyświetl plik

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

14
docs/components/mutation-observer.md
Wyświetl plik

@ -9,7 +9,7 @@ The mutation observer will report changes to the content it wraps through the `s
```html preview ```html preview
<div class="mutation-overview"> <div class="mutation-overview">
<sl-mutation-observer attr="type"> <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> </sl-mutation-observer>
<br> <br>
@ -74,7 +74,7 @@ const App = () => {
attr="*" attr="*"
onSlMutation={event => console.log(event.detail)} 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> </SlMutationObserver>
<style>{css}</style> <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"> <div class="mutation-child-list">
<sl-mutation-observer child-list> <sl-mutation-observer child-list>
<div class="buttons"> <div class="buttons">
<sl-button type="primary">Add button</sl-button> <sl-button variant="primary">Add button</sl-button>
</div> </div>
</sl-mutation-observer> </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 container = document.querySelector('.mutation-child-list');
const mutationObserver = container.querySelector('sl-mutation-observer'); const mutationObserver = container.querySelector('sl-mutation-observer');
const buttons = container.querySelector('.buttons'); const buttons = container.querySelector('.buttons');
const button = container.querySelector('sl-button[type="primary"]'); const button = container.querySelector('sl-button[variant="primary"]');
let i = 0; let i = 0;
// Add a button // 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 // Remove a button
buttons.addEventListener('click', event => { 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(); event.stopPropagation();
if (target) { if (target) {
@ -176,9 +176,9 @@ const App = () => {
onSlMutation={event => console.log(event.detail)} onSlMutation={event => console.log(event.detail)}
> >
<div className="buttons"> <div className="buttons">
<SlButton type="primary" onClick={addButton}>Add button</SlButton> <SlButton variant="primary" onClick={addButton}>Add button</SlButton>
{buttonIds.map(id => ( {buttonIds.map(id => (
<SlButton key={id} type="default" onClick={() => removeButton(id)}> <SlButton key={id} variant="default" onClick={() => removeButton(id)}>
{id} {id}
</SlButton> </SlButton>
))} ))}

20
docs/components/tag.md
Wyświetl plik

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

2
docs/frameworks/react.md
Wyświetl plik

@ -34,7 +34,7 @@ Every Shoelace component is available to import as a React component. Note that
import { SlButton } from '@shoelace-style/shoelace/dist/react'; import { SlButton } from '@shoelace-style/shoelace/dist/react';
const MyComponent = () => ( const MyComponent = () => (
<SlButton type="primary"> <SlButton variant="primary">
Click me Click me
</SlButton> </SlButton>
); );

5
docs/resources/changelog.md
Wyświetl plik

@ -1,13 +1,14 @@
# Changelog # Changelog
Shoelace follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <sl-badge type="primary" pill>Stable</sl-badge> badge 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 will be deprecated but not removed. Shoelace follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <sl-badge variant="primary" pill>Stable</sl-badge> badge 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 will be deprecated but not removed.
Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning. Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
_During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
## Next ## Next
- 🚨 BREAKING: changed the `type` attribute to `variant` in `<sl-alert>`, `<sl-badge>`, `<sl-button>`, and `<sl-tag>` since it's more appropriate and to disambiguate from other `type` attributes
- 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API - 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API
- Fixed bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out - Fixed bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
- Refactored `<sl-button>` to use Lit's static expressions to reduce code - Refactored `<sl-button>` to use Lit's static expressions to reduce code

8
docs/resources/community.md
Wyświetl plik

@ -13,7 +13,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
- Show the community what you're working on - Show the community what you're working on
- Learn more about the project, its values, and its roadmap - Learn more about the project, its values, and its roadmap
<sl-button type="primary" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank"> <sl-button variant="primary" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
<sl-icon name="github" slot="prefix"></sl-icon> <sl-icon name="github" slot="prefix"></sl-icon>
Join the Discussion Join the Discussion
</sl-button> </sl-button>
@ -27,7 +27,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
- Show the community what you're working on - Show the community what you're working on
- Chat live with other designers, developers, and Shoelace fans - Chat live with other designers, developers, and Shoelace fans
<sl-button type="primary" href="https://discord.gg/mg8f26C" target="_blank"> <sl-button variant="primary" href="https://discord.gg/mg8f26C" target="_blank">
<sl-icon name="discord" slot="prefix"></sl-icon> <sl-icon name="discord" slot="prefix"></sl-icon>
Join the Chat Join the Chat
</sl-button> </sl-button>
@ -36,7 +36,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
You can post questions on Stack Overflow using [the "shoelace" tag](https://stackoverflow.com/questions/tagged/shoelace). This is a public forum where talented developers answer questions. It's a great way to get help, but it is not maintained by the Shoelace author. You can post questions on Stack Overflow using [the "shoelace" tag](https://stackoverflow.com/questions/tagged/shoelace). This is a public forum where talented developers answer questions. It's a great way to get help, but it is not maintained by the Shoelace author.
<sl-button type="primary" href="https://stackoverflow.com/questions/ask?tags=shoelace" target="_blank"> <sl-button variant="primary" href="https://stackoverflow.com/questions/ask?tags=shoelace" target="_blank">
<sl-icon name="stack-overflow" slot="prefix"></sl-icon> <sl-icon name="stack-overflow" slot="prefix"></sl-icon>
Ask for Help Ask for Help
</sl-button> </sl-button>
@ -47,7 +47,7 @@ Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for gene
**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you. **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
<sl-button type="primary" href="https://twitter.com/shoelace_style" target="_blank"> <sl-button variant="primary" href="https://twitter.com/shoelace_style" target="_blank">
<sl-icon name="twitter" slot="prefix"></sl-icon> <sl-icon name="twitter" slot="prefix"></sl-icon>
Follow on Twitter Follow on Twitter
</sl-button> </sl-button>

14
src/components/alert/alert.ts
Wyświetl plik

@ -51,8 +51,8 @@ export default class SlAlert extends LitElement {
/** Makes the alert closable. */ /** Makes the alert closable. */
@property({ type: Boolean, reflect: true }) closable = false; @property({ type: Boolean, reflect: true }) closable = false;
/** The type of alert. */ /** The alert's variant. */
@property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary'; @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
/** /**
* The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
@ -178,11 +178,11 @@ export default class SlAlert extends LitElement {
alert: true, alert: true,
'alert--open': this.open, 'alert--open': this.open,
'alert--closable': this.closable, 'alert--closable': this.closable,
'alert--primary': this.type === 'primary', 'alert--primary': this.variant === 'primary',
'alert--success': this.type === 'success', 'alert--success': this.variant === 'success',
'alert--neutral': this.type === 'neutral', 'alert--neutral': this.variant === 'neutral',
'alert--warning': this.type === 'warning', 'alert--warning': this.variant === 'warning',
'alert--danger': this.type === 'danger' 'alert--danger': this.variant === 'danger'
})} })}
role="alert" role="alert"
aria-live="assertive" aria-live="assertive"

2
src/components/badge/badge.styles.ts
Wyświetl plik

@ -24,7 +24,7 @@ export default css`
cursor: inherit; cursor: inherit;
} }
/* Type modifiers */ /* Variant modifiers */
.badge--primary { .badge--primary {
background-color: var(--sl-color-primary-600); background-color: var(--sl-color-primary-600);
color: var(--sl-color-neutral-0); color: var(--sl-color-neutral-0);

8
src/components/badge/badge.test.ts
Wyświetl plik

@ -58,10 +58,10 @@ describe('<sl-badge>', () => {
}); });
}); });
['primary', 'success', 'neutral', 'warning', 'danger'].forEach(type => { ['primary', 'success', 'neutral', 'warning', 'danger'].forEach(variant => {
describe(`when passed a type attribute ${type}`, () => { describe(`when passed a variant attribute ${variant}`, () => {
before(async () => { before(async () => {
el = await fixture<SlBadge>(html`<sl-badge type="${type as any}">Badge</sl-badge>`); el = await fixture<SlBadge>(html`<sl-badge variant="${variant as any}">Badge</sl-badge>`);
}); });
it('should render a component that passes accessibility test', async () => { it('should render a component that passes accessibility test', async () => {
@ -70,7 +70,7 @@ describe('<sl-badge>', () => {
it('should default to square styling, with the primary color', async () => { it('should default to square styling, with the primary color', async () => {
const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement; const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
expect(part.classList.value.trim()).to.eq(`badge badge--${type}`); expect(part.classList.value.trim()).to.eq(`badge badge--${variant}`);
}); });
}); });
}); });

14
src/components/badge/badge.ts
Wyświetl plik

@ -15,8 +15,8 @@ import styles from './badge.styles';
export default class SlBadge extends LitElement { export default class SlBadge extends LitElement {
static styles = styles; static styles = styles;
/** The badge's type. */ /** The badge's variant. */
@property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary'; @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
/** Draws a pill-style badge with rounded edges. */ /** Draws a pill-style badge with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false; @property({ type: Boolean, reflect: true }) pill = false;
@ -30,11 +30,11 @@ export default class SlBadge extends LitElement {
part="base" part="base"
class=${classMap({ class=${classMap({
badge: true, badge: true,
'badge--primary': this.type === 'primary', 'badge--primary': this.variant === 'primary',
'badge--success': this.type === 'success', 'badge--success': this.variant === 'success',
'badge--neutral': this.type === 'neutral', 'badge--neutral': this.variant === 'neutral',
'badge--warning': this.type === 'warning', 'badge--warning': this.variant === 'warning',
'badge--danger': this.type === 'danger', 'badge--danger': this.variant === 'danger',
'badge--pill': this.pill, 'badge--pill': this.pill,
'badge--pulse': this.pulse 'badge--pulse': this.pulse
})} })}

2
src/components/button/button.styles.ts
Wyświetl plik

@ -618,7 +618,7 @@ export default css`
} }
/* Add a visual separator between solid buttons */ /* Add a visual separator between solid buttons */
:host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, [type='default']):not(:hover, :active, :focus)) :host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, [variant='default']):not(:hover, :active, :focus))
.button:after { .button:after {
content: ''; content: '';
position: absolute; position: absolute;

18
src/components/button/button.ts
Wyświetl plik

@ -39,8 +39,8 @@ export default class SlButton extends LitElement {
@state() private hasPrefix = false; @state() private hasPrefix = false;
@state() private hasSuffix = false; @state() private hasSuffix = false;
/** The button's type. */ /** The button's variant. */
@property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = @property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' =
'default'; 'default';
/** The button's size. */ /** The button's size. */
@ -134,13 +134,13 @@ export default class SlButton extends LitElement {
part="base" part="base"
class=${classMap({ class=${classMap({
button: true, button: true,
'button--default': this.type === 'default', 'button--default': this.variant === 'default',
'button--primary': this.type === 'primary', 'button--primary': this.variant === 'primary',
'button--success': this.type === 'success', 'button--success': this.variant === 'success',
'button--neutral': this.type === 'neutral', 'button--neutral': this.variant === 'neutral',
'button--warning': this.type === 'warning', 'button--warning': this.variant === 'warning',
'button--danger': this.type === 'danger', 'button--danger': this.variant === 'danger',
'button--text': this.type === 'text', 'button--text': this.variant === 'text',
'button--small': this.size === 'small', 'button--small': this.size === 'small',
'button--medium': this.size === 'medium', 'button--medium': this.size === 'medium',
'button--large': this.size === 'large', 'button--large': this.size === 'large',

4
src/components/select/select.ts
Wyświetl plik

@ -380,7 +380,7 @@ export default class SlSelect extends LitElement {
return html` return html`
<sl-tag <sl-tag
exportparts="base:tag" exportparts="base:tag"
type="neutral" variant="neutral"
size=${this.size} size=${this.size}
?pill=${this.pill} ?pill=${this.pill}
removable removable
@ -404,7 +404,7 @@ export default class SlSelect extends LitElement {
this.displayLabel = ''; this.displayLabel = '';
this.displayTags = this.displayTags.slice(0, this.maxTagsVisible); this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
this.displayTags.push(html` this.displayTags.push(html`
<sl-tag exportparts="base:tag" type="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag> <sl-tag exportparts="base:tag" variant="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
`); `);
} }
} else { } else {

2
src/components/tag/tag.styles.ts
Wyświetl plik

@ -24,7 +24,7 @@ export default css`
} }
/* /*
* Type modifiers * Variant modifiers
*/ */
.tag--primary { .tag--primary {

16
src/components/tag/tag.ts
Wyświetl plik

@ -24,8 +24,8 @@ import '../icon-button/icon-button';
export default class SlTag extends LitElement { export default class SlTag extends LitElement {
static styles = styles; static styles = styles;
/** The tag's type. */ /** The tag's variant. */
@property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral'; @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
/** The tag's size. */ /** The tag's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@ -48,12 +48,12 @@ export default class SlTag extends LitElement {
tag: true, tag: true,
// Types // Types
'tag--primary': this.type === 'primary', 'tag--primary': this.variant === 'primary',
'tag--success': this.type === 'success', 'tag--success': this.variant === 'success',
'tag--neutral': this.type === 'neutral', 'tag--neutral': this.variant === 'neutral',
'tag--warning': this.type === 'warning', 'tag--warning': this.variant === 'warning',
'tag--danger': this.type === 'danger', 'tag--danger': this.variant === 'danger',
'tag--text': this.type === 'text', 'tag--text': this.variant === 'text',
// Sizes // Sizes
'tag--small': this.size === 'small', 'tag--small': this.size === 'small',