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

buttons, primary, and more

Browse Source
This commit is contained in:
Cory LaViska
2023-09-05 12:01:19 -04:00
parent 55be0a557f
commit ebed8daee6
35 changed files with 326 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/pages/components/alert.md
View File

@@ -35,7 +35,7 @@ Alerts will not be visible if the `open` attribute is not present.
Set the `variant` attribute to change the alert's variant.
```html:preview
<sl-alert variant="primary" open>
<sl-alert variant="brand" open>
<sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
@@ -80,7 +80,7 @@ import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
<SlAlert variant="primary" open>
<SlAlert variant="brand" open>
<SlIcon slot="icon" name="info-circle" />
<strong>This is super informative</strong>
<br />
@@ -131,7 +131,7 @@ const App = () => (
Add the `closable` attribute to show a close button that will hide the alert.
```html:preview
<sl-alert variant="primary" open closable class="alert-closable">
<sl-alert variant="brand" open closable class="alert-closable">
<sl-icon slot="icon" name="info-circle"></sl-icon>
You can close this alert any time!
</sl-alert>
@@ -171,14 +171,14 @@ const App = () => {
Icons are optional. Simply omit the `icon` slot if you don't want them.
```html:preview
<sl-alert variant="primary" open> Nothing fancy here, just a simple alert. </sl-alert>
<sl-alert variant="brand" open> Nothing fancy here, just a simple alert. </sl-alert>
```
```jsx:react
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
const App = () => (
<SlAlert variant="primary" open>
<SlAlert variant="brand" open>
Nothing fancy here, just a simple alert.
</SlAlert>
);
@@ -190,9 +190,9 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
```html:preview
<div class="alert-duration">
<sl-button variant="primary">Show Alert</sl-button>
<sl-button variant="brand">Show Alert</sl-button>
<sl-alert variant="primary" duration="3000" closable>
<sl-alert variant="brand" duration="3000" closable>
<sl-icon slot="icon" name="info-circle"></sl-icon>
This alert will automatically hide itself after three seconds, unless you interact with it.
</sl-alert>
@@ -231,11 +231,11 @@ const App = () => {
return (
<>
<div className="alert-duration">
<SlButton variant="primary" onClick={() => setOpen(true)}>
<SlButton variant="brand" onClick={() => setOpen(true)}>
Show Alert
</SlButton>
<SlAlert variant="primary" duration="3000" open={open} closable onSlAfterHide={() => setOpen(false)}>
<SlAlert variant="brand" duration="3000" open={open} closable onSlAfterHide={() => setOpen(false)}>
<SlIcon slot="icon" name="info-circle" />
This alert will automatically hide itself after three seconds, unless you interact with it.
</SlAlert>
@@ -255,13 +255,13 @@ You should always use the `closable` attribute so users can dismiss the notifica
```html:preview
<div class="alert-toast">
<sl-button variant="primary">Primary</sl-button>
<sl-button variant="brand">Brand</sl-button>
<sl-button variant="success">Success</sl-button>
<sl-button variant="neutral">Neutral</sl-button>
<sl-button variant="warning">Warning</sl-button>
<sl-button variant="danger">Danger</sl-button>
<sl-alert variant="primary" duration="3000" closable>
<sl-alert variant="brand" duration="3000" closable>
<sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
@@ -295,7 +295,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
<script>
const container = document.querySelector('.alert-toast');
['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
['brand', 'success', 'neutral', 'warning', 'danger'].map(variant => {
const button = container.querySelector(`sl-button[variant="${variant}"]`);
const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
@@ -315,7 +315,7 @@ function showToast(alert) {
}
const App = () => {
const primary = useRef(null);
const brand = useRef(null);
const success = useRef(null);
const neutral = useRef(null);
const warning = useRef(null);
@@ -323,8 +323,8 @@ const App = () => {
return (
<>
<SlButton variant="primary" onClick={() => primary.current.toast()}>
Primary
<SlButton variant="brand" onClick={() => brand.current.toast()}>
Brand
</SlButton>
<SlButton variant="success" onClick={() => success.current.toast()}>
@@ -343,7 +343,7 @@ const App = () => {
Danger
</SlButton>
<SlAlert ref={primary} variant="primary" duration="3000" closable>
<SlAlert ref={brand} variant="brand" duration="3000" closable>
<SlIcon slot="icon" name="info-circle" />
<strong>This is super informative</strong>
<br />
@@ -388,7 +388,7 @@ For convenience, you can create a utility that emits toast notifications with a
```html:preview
<div class="alert-toast-wrapper">
<sl-button variant="primary">Create Toast</sl-button>
<sl-button variant="brand">Create Toast</sl-button>
</div>
<script>
@@ -404,7 +404,7 @@ For convenience, you can create a utility that emits toast notifications with a
}
// Custom function to emit toast notifications
function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
function notify(message, variant = 'brand', icon = 'info-circle', duration = 3000) {
const alert = Object.assign(document.createElement('sl-alert'), {
variant,
closable: true,

4
docs/pages/components/animation.md
View File

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

14
docs/pages/components/badge.md
View File

@@ -22,7 +22,7 @@ const App = () => <SlBadge>Badge</SlBadge>;
Set the `variant` attribute to change the badge's variant.
```html:preview
<sl-badge variant="primary">Primary</sl-badge>
<sl-badge variant="brand">Brand</sl-badge>
<sl-badge variant="success">Success</sl-badge>
<sl-badge variant="neutral">Neutral</sl-badge>
<sl-badge variant="warning">Warning</sl-badge>
@@ -34,7 +34,7 @@ import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
const App = () => (
<>
<SlBadge variant="primary">Primary</SlBadge>
<SlBadge variant="brand">Brand</SlBadge>
<SlBadge variant="success">Success</SlBadge>
<SlBadge variant="neutral">Neutral</SlBadge>
<SlBadge variant="warning">Warning</SlBadge>
@@ -48,7 +48,7 @@ const App = () => (
Use the `pill` attribute to give badges rounded edges.
```html:preview
<sl-badge variant="primary" pill>Primary</sl-badge>
<sl-badge variant="brand" pill>Brand</sl-badge>
<sl-badge variant="success" pill>Success</sl-badge>
<sl-badge variant="neutral" pill>Neutral</sl-badge>
<sl-badge variant="warning" pill>Warning</sl-badge>
@@ -60,8 +60,8 @@ import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
const App = () => (
<>
<SlBadge variant="primary" pill>
Primary
<SlBadge variant="brand" pill>
Brand
</SlBadge>
<SlBadge variant="success" pill>
Success
@@ -85,7 +85,7 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
```html:preview
<div class="badge-pulse">
<sl-badge variant="primary" pill pulse>1</sl-badge>
<sl-badge variant="brand" pill pulse>1</sl-badge>
<sl-badge variant="success" pill pulse>1</sl-badge>
<sl-badge variant="neutral" pill pulse>1</sl-badge>
<sl-badge variant="warning" pill pulse>1</sl-badge>
@@ -111,7 +111,7 @@ const css = `
const App = () => (
<>
<div className="badge-pulse">
<SlBadge variant="primary" pill pulse>
<SlBadge variant="brand" pill pulse>
1
</SlBadge>
<SlBadge variant="success" pill pulse>

32
docs/pages/components/button-group.md
View File

@@ -95,9 +95,9 @@ Theme buttons are supported through the button's `variant` attribute.
```html:preview
<sl-button-group label="Alignment">
<sl-button variant="primary">Left</sl-button>
<sl-button variant="primary">Center</sl-button>
<sl-button variant="primary">Right</sl-button>
<sl-button variant="brand">Left</sl-button>
<sl-button variant="brand">Center</sl-button>
<sl-button variant="brand">Right</sl-button>
</sl-button-group>
<br /><br />
@@ -111,9 +111,9 @@ Theme buttons are supported through the button's `variant` attribute.
<br /><br />
<sl-button-group label="Alignment">
<sl-button variant="neutral">Left</sl-button>
<sl-button variant="neutral">Center</sl-button>
<sl-button variant="neutral">Right</sl-button>
<sl-button>Left</sl-button>
<sl-button>Center</sl-button>
<sl-button>Right</sl-button>
</sl-button-group>
<br /><br />
@@ -140,9 +140,9 @@ import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
const App = () => (
<>
<SlButtonGroup label="Alignment">
<SlButton variant="primary">Left</SlButton>
<SlButton variant="primary">Center</SlButton>
<SlButton variant="primary">Right</SlButton>
<SlButton variant="brand">Left</SlButton>
<SlButton variant="brand">Center</SlButton>
<SlButton variant="brand">Right</SlButton>
</SlButtonGroup>
<br />
@@ -158,9 +158,9 @@ const App = () => (
<br />
<SlButtonGroup label="Alignment">
<SlButton variant="neutral">Left</SlButton>
<SlButton variant="neutral">Center</SlButton>
<SlButton variant="neutral">Right</SlButton>
<SlButton>Left</SlButton>
<SlButton>Center</SlButton>
<SlButton>Right</SlButton>
</SlButtonGroup>
<br />
@@ -313,9 +313,9 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/co
```html:preview
<sl-button-group label="Example Button Group">
<sl-button variant="primary">Save</sl-button>
<sl-button variant="brand">Save</sl-button>
<sl-dropdown placement="bottom-end">
<sl-button slot="trigger" variant="primary" caret>
<sl-button slot="trigger" variant="brand" caret>
<sl-visually-hidden>More options</sl-visually-hidden>
</sl-button>
<sl-menu>
@@ -336,9 +336,9 @@ import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
const App = () => (
<SlButtonGroup label="Example Button Group">
<SlButton variant="primary">Save</SlButton>
<SlButton variant="brand">Save</SlButton>
<SlDropdown placement="bottom-end">
<SlButton slot="trigger" variant="primary" caret></SlButton>
<SlButton slot="trigger" variant="brand" caret></SlButton>
<SlMenu>
<SlMenuItem>Save</SlMenuItem>
<SlMenuItem>Save as&hellip;</SlMenuItem>

137
docs/pages/components/button.md
View File

@@ -22,8 +22,7 @@ const App = () => <SlButton>Button</SlButton>;
Use the `variant` attribute to set the button's variant.
```html:preview
<sl-button variant="default">Default</sl-button>
<sl-button variant="primary">Primary</sl-button>
<sl-button variant="brand">Brand</sl-button>
<sl-button variant="success">Success</sl-button>
<sl-button variant="neutral">Neutral</sl-button>
<sl-button variant="warning">Warning</sl-button>
@@ -35,8 +34,7 @@ import SlButton from '@shoelace-style/shoelace/dist/react/button';
const App = () => (
<>
<SlButton variant="default">Default</SlButton>
<SlButton variant="primary">Primary</SlButton>
<SlButton variant="brand">Brand</SlButton>
<SlButton variant="success">Success</SlButton>
<SlButton variant="neutral">Neutral</SlButton>
<SlButton variant="warning">Warning</SlButton>
@@ -72,8 +70,7 @@ const App = () => (
Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
```html:preview
<sl-button variant="default" outline>Default</sl-button>
<sl-button variant="primary" outline>Primary</sl-button>
<sl-button variant="brand" outline>Brand</sl-button>
<sl-button variant="success" outline>Success</sl-button>
<sl-button variant="neutral" outline>Neutral</sl-button>
<sl-button variant="warning" outline>Warning</sl-button>
@@ -85,11 +82,8 @@ import SlButton from '@shoelace-style/shoelace/dist/react/button';
const App = () => (
<>
<SlButton variant="default" outline>
Default
</SlButton>
<SlButton variant="primary" outline>
Primary
<SlButton variant="brand" outline>
Brand
</SlButton>
<SlButton variant="success" outline>
Success
@@ -135,43 +129,6 @@ const App = () => (
);
```
### Circle Buttons
Use the `circle` attribute to create circular icon buttons. When this attribute is set, the button expects a single `<sl-icon>` in the default slot.
```html:preview
<sl-button variant="default" size="small" circle>
<sl-icon name="gear" label="Settings"></sl-icon>
</sl-button>
<sl-button variant="default" size="medium" circle>
<sl-icon name="gear" label="Settings"></sl-icon>
</sl-button>
<sl-button variant="default" size="large" circle>
<sl-icon name="gear" label="Settings"></sl-icon>
</sl-button>
```
```jsx:react
import SlButton from '@shoelace-style/shoelace/dist/react/button';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
<SlButton variant="default" size="small" circle>
<SlIcon name="gear" />
</SlButton>
<SlButton variant="default" size="medium" circle>
<SlIcon name="gear" />
</SlButton>
<SlButton variant="default" size="large" circle>
<SlIcon name="gear" />
</SlButton>
</>
);
```
### Text Buttons
Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
@@ -239,9 +196,9 @@ When a `target` is set, the link will receive `rel="noreferrer noopener"` for [s
As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.
```html:preview
<sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
<sl-button variant="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
<sl-button variant="default" size="large" style="width: 100%;">Large</sl-button>
<sl-button size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
<sl-button size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
<sl-button size="large" style="width: 100%;">Large</sl-button>
```
{% raw %}
@@ -251,13 +208,13 @@ import SlButton from '@shoelace-style/shoelace/dist/react/button';
const App = () => (
<>
<SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>
<SlButton size="small" style={{ width: '100%', marginBottom: '1rem' }}>
Small
</SlButton>
<SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
<SlButton size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
Medium
</SlButton>
<SlButton variant="default" size="large" style={{ width: '100%' }}>
<SlButton size="large" style={{ width: '100%' }}>
Large
</SlButton>
</>
@@ -271,17 +228,17 @@ const App = () => (
Use the `prefix` and `suffix` slots to add icons.
```html:preview
<sl-button variant="default" size="small">
<sl-button size="small">
<sl-icon slot="prefix" name="gear"></sl-icon>
Settings
</sl-button>
<sl-button variant="default" size="small">
<sl-button size="small">
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
Refresh
</sl-button>
<sl-button variant="default" size="small">
<sl-button size="small">
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
Open
@@ -289,17 +246,17 @@ Use the `prefix` and `suffix` slots to add icons.
<br /><br />
<sl-button variant="default">
<sl-button>
<sl-icon slot="prefix" name="gear"></sl-icon>
Settings
</sl-button>
<sl-button variant="default">
<sl-button>
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
Refresh
</sl-button>
<sl-button variant="default">
<sl-button>
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
Open
@@ -307,17 +264,17 @@ Use the `prefix` and `suffix` slots to add icons.
<br /><br />
<sl-button variant="default" size="large">
<sl-button size="large">
<sl-icon slot="prefix" name="gear"></sl-icon>
Settings
</sl-button>
<sl-button variant="default" size="large">
<sl-button size="large">
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
Refresh
</sl-button>
<sl-button variant="default" size="large">
<sl-button size="large">
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
Open
@@ -330,17 +287,17 @@ import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
<SlButton variant="default" size="small">
<SlButton size="small">
<SlIcon slot="prefix" name="gear"></SlIcon>
Settings
</SlButton>
<SlButton variant="default" size="small">
<SlButton size="small">
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
Refresh
</SlButton>
<SlButton variant="default" size="small">
<SlButton size="small">
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
Open
@@ -349,17 +306,17 @@ const App = () => (
<br />
<br />
<SlButton variant="default">
<SlButton>
<SlIcon slot="prefix" name="gear"></SlIcon>
Settings
</SlButton>
<SlButton variant="default">
<SlButton>
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
Refresh
</SlButton>
<SlButton variant="default">
<SlButton>
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
Open
@@ -368,17 +325,17 @@ const App = () => (
<br />
<br />
<SlButton variant="default" size="large">
<SlButton size="large">
<SlIcon slot="prefix" name="gear"></SlIcon>
Settings
</SlButton>
<SlButton variant="default" size="large">
<SlButton size="large">
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
Refresh
</SlButton>
<SlButton variant="default" size="large">
<SlButton size="large">
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
Open
@@ -420,8 +377,7 @@ const App = () => (
Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
```html:preview
<sl-button variant="default" loading>Default</sl-button>
<sl-button variant="primary" loading>Primary</sl-button>
<sl-button variant="brand" loading>Brand</sl-button>
<sl-button variant="success" loading>Success</sl-button>
<sl-button variant="neutral" loading>Neutral</sl-button>
<sl-button variant="warning" loading>Warning</sl-button>
@@ -433,11 +389,8 @@ import SlButton from '@shoelace-style/shoelace/dist/react/button';
const App = () => (
<>
<SlButton variant="default" loading>
Default
</SlButton>
<SlButton variant="primary" loading>
Primary
<SlButton variant="brand" loading>
Brand
</SlButton>
<SlButton variant="success" loading>
Success
@@ -460,8 +413,7 @@ const App = () => (
Use the `disabled` attribute to disable a button.
```html:preview
<sl-button variant="default" disabled>Default</sl-button>
<sl-button variant="primary" disabled>Primary</sl-button>
<sl-button variant="brand" disabled>Brand</sl-button>
<sl-button variant="success" disabled>Success</sl-button>
<sl-button variant="neutral" disabled>Neutral</sl-button>
<sl-button variant="warning" disabled>Warning</sl-button>
@@ -473,12 +425,8 @@ import SlButton from '@shoelace-style/shoelace/dist/react/button';
const App = () => (
<>
<SlButton variant="default" disabled>
Default
</SlButton>
<SlButton variant="primary" disabled>
Primary
<SlButton variant="brand" disabled>
Brand
</SlButton>
<SlButton variant="success" disabled>
@@ -502,18 +450,15 @@ const App = () => (
### 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 `variant` attribute instead of a class (e.g. `sl-button[variant="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="brand"]`).
```html:preview
<sl-button class="pink">Pink Button</sl-button>
<style>
sl-button.pink::part(base) {
/* Set design tokens for height and border width */
--sl-input-height-medium: 48px;
--sl-input-border-width: 4px;
border-radius: 0;
border-radius: 6px;
border: solid 2px;
background-color: #ff1493;
border-top-color: #ff7ac1;
border-left-color: #ff7ac1;
@@ -522,11 +467,11 @@ This example demonstrates how to style buttons using a custom class. This is the
color: white;
font-size: 1.125rem;
box-shadow: 0 2px 10px #0002;
transition: var(--sl-transition-medium) transform ease, var(--sl-transition-medium) border ease;
transition: var(--wa-transition-normal) all;
}
sl-button.pink::part(base):hover {
transform: scale(1.05) rotate(-1deg);
transform: scale(1.05);
}
sl-button.pink::part(base):active {
@@ -534,7 +479,7 @@ This example demonstrates how to style buttons using a custom class. This is the
border-right-color: #ff7ac1;
border-bottom-color: #ff7ac1;
border-left-color: #ad005c;
transform: scale(1.05) rotate(-1deg) translateY(2px);
transform: translateY(1px);
}
sl-button.pink::part(base):focus-visible {

8
docs/pages/components/card.md
View File

@@ -18,7 +18,7 @@ layout: component
<small>6 weeks old</small>
<div slot="footer">
<sl-button variant="primary" pill>More Info</sl-button>
<sl-button variant="brand" pill>More Info</sl-button>
<sl-rating></sl-rating>
</div>
</sl-card>
@@ -75,7 +75,7 @@ const App = () => (
<br />
<small>6 weeks old</small>
<div slot="footer">
<SlButton variant="primary" pill>
<SlButton variant="brand" pill>
More Info
</SlButton>
<SlRating></SlRating>
@@ -209,7 +209,7 @@ Footers can be used to display actions, summaries, or other relevant content.
<div slot="footer">
<sl-rating></sl-rating>
<sl-button variant="primary">Preview</sl-button>
<sl-button variant="brand">Preview</sl-button>
</div>
</sl-card>
@@ -249,7 +249,7 @@ const App = () => (
This card has a footer. You can put all sorts of things in it!
<div slot="footer">
<SlRating></SlRating>
<SlButton slot="footer" variant="primary">
<SlButton slot="footer" variant="brand">
Preview
</SlButton>
</div>

4
docs/pages/components/checkbox.md
View File

@@ -97,7 +97,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
<form class="custom-validity">
<sl-checkbox>Check me</sl-checkbox>
<br />
<sl-button type="submit" variant="primary" style="margin-top: 1rem;">Submit</sl-button>
<sl-button type="submit" variant="brand" style="margin-top: 1rem;">Submit</sl-button>
</form>
<script>
const form = document.querySelector('.custom-validity');
@@ -153,7 +153,7 @@ const App = () => {
Check me
</SlCheckbox>
<br />
<SlButton type="submit" variant="primary" style={{ marginTop: '1rem' }}>
<SlButton type="submit" variant="brand" style={{ marginTop: '1rem' }}>
Submit
</SlButton>
</form>

24
docs/pages/components/dialog.md
View File

@@ -10,7 +10,7 @@ layout: component
```html:preview
<sl-dialog label="Dialog" class="dialog-overview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -37,7 +37,7 @@ const App = () => {
<>
<SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>
@@ -57,7 +57,7 @@ Use the `--width` custom property to set the dialog's width.
```html:preview
<sl-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -86,7 +86,7 @@ const App = () => {
<>
<SlDialog label="Dialog" open={open} style={{ '--width': '50vw' }} onSlAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>
@@ -108,7 +108,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
<div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
<p>Scroll down and give it a try! 👇</p>
</div>
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -146,7 +146,7 @@ const App = () => {
<p>Scroll down and give it a try! 👇</p>
</div>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>
@@ -167,7 +167,7 @@ The header shows a functional close button by default. You can use the `header-a
<sl-dialog label="Dialog" class="dialog-header-actions">
<sl-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></sl-icon-button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -203,7 +203,7 @@ const App = () => {
onClick={() => window.open(location.href)}
/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>
@@ -225,7 +225,7 @@ You can use `event.detail.source` to determine what triggered the request to clo
```html:preview
<sl-dialog label="Dialog" class="dialog-deny-close">
This dialog will not close when you click on the overlay.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -266,7 +266,7 @@ const App = () => {
<>
<SlDialog label="Dialog" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
This dialog will not close when you click on the overlay.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>
@@ -284,7 +284,7 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq
```html:preview
<sl-dialog label="Dialog" class="dialog-focus">
<sl-input autofocus placeholder="I will have focus when the dialog is opened"></sl-input>
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
@@ -313,7 +313,7 @@ const App = () => {
<>
<SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
<SlInput autofocus placeholder="I will have focus when the dialog is opened" />
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>

60
docs/pages/components/drawer.md
View File

@@ -10,7 +10,7 @@ layout: component
```html:preview
<sl-drawer label="Drawer" class="drawer-overview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -18,7 +18,7 @@ layout: component
<script>
const drawer = document.querySelector('.drawer-overview');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -37,7 +37,7 @@ const App = () => {
<>
<SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -57,7 +57,7 @@ By default, drawers slide in from the end. To make the drawer slide in from the
```html:preview
<sl-drawer label="Drawer" placement="start" class="drawer-placement-start">
This drawer slides in from the start.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -65,7 +65,7 @@ By default, drawers slide in from the end. To make the drawer slide in from the
<script>
const drawer = document.querySelector('.drawer-placement-start');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -84,7 +84,7 @@ const App = () => {
<>
<SlDrawer label="Drawer" placement="start" open={open} onSlAfterHide={() => setOpen(false)}>
This drawer slides in from the start.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -102,7 +102,7 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
```html:preview
<sl-drawer label="Drawer" placement="top" class="drawer-placement-top">
This drawer slides in from the top.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -110,7 +110,7 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
<script>
const drawer = document.querySelector('.drawer-placement-top');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -129,7 +129,7 @@ const App = () => {
<>
<SlDrawer label="Drawer" placement="top" open={open} onSlAfterHide={() => setOpen(false)}>
This drawer slides in from the top.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -147,7 +147,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
```html:preview
<sl-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
This drawer slides in from the bottom.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -155,7 +155,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
<script>
const drawer = document.querySelector('.drawer-placement-bottom');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -174,7 +174,7 @@ const App = () => {
<>
<SlDrawer label="Drawer" placement="bottom" open={open} onSlAfterHide={() => setOpen(false)}>
This drawer slides in from the bottom.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -199,7 +199,7 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s
<sl-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
</div>
@@ -208,7 +208,7 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s
<script>
const drawer = document.querySelector('.drawer-contained');
const openButton = drawer.parentElement.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
openButton.addEventListener('click', () => (drawer.open = !drawer.open));
closeButton.addEventListener('click', () => drawer.hide());
@@ -247,7 +247,7 @@ const App = () => {
style={{ '--size': '50%' }}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -268,7 +268,7 @@ Use the `--size` custom property to set the drawer's size. This will be applied
```html:preview
<sl-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
This drawer is always 50% of the viewport.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -276,7 +276,7 @@ Use the `--size` custom property to set the drawer's size. This will be applied
<script>
const drawer = document.querySelector('.drawer-custom-size');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -297,7 +297,7 @@ const App = () => {
<>
<SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)} style={{ '--size': '50vw' }}>
This drawer is always 50% of the viewport.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -319,7 +319,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
<div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
<p>Scroll down and give it a try! 👇</p>
</div>
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -327,7 +327,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
<script>
const drawer = document.querySelector('.drawer-scrolling');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -356,7 +356,7 @@ const App = () => {
>
<p>Scroll down and give it a try! 👇</p>
</div>
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -377,7 +377,7 @@ The header shows a functional close button by default. You can use the `header-a
<sl-drawer label="Drawer" class="drawer-header-actions">
<sl-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></sl-icon-button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -385,7 +385,7 @@ The header shows a functional close button by default. You can use the `header-a
<script>
const drawer = document.querySelector('.drawer-header-actions');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
const newWindowButton = drawer.querySelector('.new-window');
openButton.addEventListener('click', () => drawer.show());
@@ -408,7 +408,7 @@ const App = () => {
<SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
<SlIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>
@@ -430,7 +430,7 @@ You can use `event.detail.source` to determine what triggered the request to clo
```html:preview
<sl-drawer label="Drawer" class="drawer-deny-close">
This drawer will not close when you click on the overlay.
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -438,7 +438,7 @@ You can use `event.detail.source` to determine what triggered the request to clo
<script>
const drawer = document.querySelector('.drawer-deny-close');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -471,7 +471,7 @@ const App = () => {
<>
<SlDrawer label="Drawer" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
This drawer will not close when you click on the overlay.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Save &amp; Close
</SlButton>
</SlDrawer>
@@ -489,7 +489,7 @@ By default, the drawer's panel will gain focus when opened. This allows a subseq
```html:preview
<sl-drawer label="Drawer" class="drawer-focus">
<sl-input autofocus placeholder="I will have focus when the drawer is opened"></sl-input>
<sl-button slot="footer" variant="primary">Close</sl-button>
<sl-button slot="footer" variant="brand">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
@@ -498,7 +498,7 @@ By default, the drawer's panel will gain focus when opened. This allows a subseq
const drawer = document.querySelector('.drawer-focus');
const input = drawer.querySelector('sl-input');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[variant="primary"]');
const closeButton = drawer.querySelector('sl-button[variant="brand"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
@@ -518,7 +518,7 @@ const App = () => {
<>
<SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
<SlInput autofocus placeholder="I will have focus when the drawer is opened" />
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
<SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDrawer>

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

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

16
docs/pages/components/mutation-observer.md
View File

@@ -10,7 +10,7 @@ The mutation observer will report changes to the content it wraps through the `s
```html:preview
<div class="mutation-overview">
<sl-mutation-observer attr="variant">
<sl-button variant="primary">Click to mutate</sl-button>
<sl-button variant="brand">Click to mutate</sl-button>
</sl-mutation-observer>
<br />
@@ -20,7 +20,7 @@ The mutation observer will report changes to the content it wraps through the `s
const container = document.querySelector('.mutation-overview');
const mutationObserver = container.querySelector('sl-mutation-observer');
const button = container.querySelector('sl-button');
const variants = ['primary', 'success', 'neutral', 'warning', 'danger'];
const variants = ['brand', 'success', 'neutral', 'warning', 'danger'];
let clicks = 0;
// Change the button's variant attribute
@@ -54,11 +54,11 @@ const css = `
}
`;
const variants = ['primary', 'success', 'neutral', 'warning', 'danger'];
const variants = ['brand', 'success', 'neutral', 'warning', 'danger'];
let clicks = 0;
const App = () => {
const [variant, setVariant] = useState('primary');
const [variant, setVariant] = useState('brand');
function handleClick() {
clicks++;
@@ -96,7 +96,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
<div class="mutation-child-list">
<sl-mutation-observer child-list>
<div class="buttons">
<sl-button variant="primary">Add button</sl-button>
<sl-button variant="brand">Add button</sl-button>
</div>
</sl-mutation-observer>
@@ -106,7 +106,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
const container = document.querySelector('.mutation-child-list');
const mutationObserver = container.querySelector('sl-mutation-observer');
const buttons = container.querySelector('.buttons');
const button = container.querySelector('sl-button[variant="primary"]');
const button = container.querySelector('sl-button[variant="brand"]');
let i = 0;
// Add a button
@@ -118,7 +118,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
// Remove a button
buttons.addEventListener('click', event => {
const target = event.target.closest('sl-button:not([variant="primary"])');
const target = event.target.closest('sl-button:not([variant="brand"])');
event.stopPropagation();
if (target) {
@@ -175,7 +175,7 @@ const App = () => {
<div className="mutation-child-list">
<SlMutationObserver child-list onSlMutation={event => console.log(event.detail)}>
<div className="buttons">
<SlButton variant="primary" onClick={addButton}>
<SlButton variant="brand" onClick={addButton}>
Add button
</SlButton>
{buttonIds.map(id => (

8
docs/pages/components/radio-group.md
View File

@@ -167,7 +167,7 @@ Setting the `required` attribute to make selecting an option mandatory. If a val
<sl-radio value="3">Option 3</sl-radio>
</sl-radio-group>
<br />
<sl-button type="submit" variant="primary">Submit</sl-button>
<sl-button type="submit" variant="brand">Submit</sl-button>
</form>
<script>
@@ -206,7 +206,7 @@ const App = () => {
</SlRadio>
</SlRadioGroup>
<br />
<SlButton type="submit" variant="primary">
<SlButton type="submit" variant="brand">
Submit
</SlButton>
</form>
@@ -226,7 +226,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
<sl-radio value="3">Choose me</sl-radio>
</sl-radio-group>
<br />
<sl-button type="submit" variant="primary">Submit</sl-button>
<sl-button type="submit" variant="brand">Submit</sl-button>
</form>
<script>
@@ -284,7 +284,7 @@ const App = () => {
<SlRadio value="3">Choose me</SlRadio>
</SlRadioGroup>
<br />
<SlButton type="submit" variant="primary">
<SlButton type="submit" variant="brand">
Submit
</SlButton>
</form>

4
docs/pages/components/tag.md
View File

@@ -6,7 +6,7 @@ layout: component
---
```html:preview
<sl-tag variant="primary">Primary</sl-tag>
<sl-tag variant="brand">Brand</sl-tag>
<sl-tag variant="success">Success</sl-tag>
<sl-tag variant="neutral">Neutral</sl-tag>
<sl-tag variant="warning">Warning</sl-tag>
@@ -18,7 +18,7 @@ import SlTag from '@shoelace-style/shoelace/dist/react/tag';
const App = () => (
<>
<SlTag variant="primary">Primary</SlTag>
<SlTag variant="brand">Brand</SlTag>
<SlTag variant="success">Success</SlTag>
<SlTag variant="neutral">Neutral</SlTag>
<SlTag variant="warning">Warning</SlTag>