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

improve documentation

Browse Source
This commit is contained in:
Cory LaViska
2022-12-06 11:18:14 -05:00
parent 2dd57956d5
commit f2efa73e20
62 changed files with 553 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
[component-header:sl-button-group]
```html preview
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button>Left</sl-button>
<sl-button>Center</sl-button>
<sl-button>Right</sl-button>
@@ -14,7 +14,7 @@
import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton>Left</SlButton>
<SlButton>Center</SlButton>
<SlButton>Right</SlButton>
@@ -29,7 +29,7 @@ const App = () => (
All button sizes are supported, but avoid mixing sizes within the same button group.
```html preview
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button size="small">Left</sl-button>
<sl-button size="small">Center</sl-button>
<sl-button size="small">Right</sl-button>
@@ -37,7 +37,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
<br /><br />
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button size="medium">Left</sl-button>
<sl-button size="medium">Center</sl-button>
<sl-button size="medium">Right</sl-button>
@@ -45,7 +45,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
<br /><br />
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button size="large">Left</sl-button>
<sl-button size="large">Center</sl-button>
<sl-button size="large">Right</sl-button>
@@ -57,7 +57,7 @@ import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton size="small">Left</SlButton>
<SlButton size="small">Center</SlButton>
<SlButton size="small">Right</SlButton>
@@ -66,7 +66,7 @@ const App = () => (
<br />
<br />
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton size="medium">Left</SlButton>
<SlButton size="medium">Center</SlButton>
<SlButton size="medium">Right</SlButton>
@@ -75,7 +75,7 @@ const App = () => (
<br />
<br />
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton size="large">Left</SlButton>
<SlButton size="large">Center</SlButton>
<SlButton size="large">Right</SlButton>
@@ -89,7 +89,7 @@ const App = () => (
Theme buttons are supported through the button's `variant` attribute.
```html preview
<sl-button-group>
<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>
@@ -97,7 +97,7 @@ Theme buttons are supported through the button's `variant` attribute.
<br /><br />
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button variant="success">Left</sl-button>
<sl-button variant="success">Center</sl-button>
<sl-button variant="success">Right</sl-button>
@@ -105,7 +105,7 @@ Theme buttons are supported through the button's `variant` attribute.
<br /><br />
<sl-button-group>
<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>
@@ -113,7 +113,7 @@ Theme buttons are supported through the button's `variant` attribute.
<br /><br />
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button variant="warning">Left</sl-button>
<sl-button variant="warning">Center</sl-button>
<sl-button variant="warning">Right</sl-button>
@@ -121,7 +121,7 @@ Theme buttons are supported through the button's `variant` attribute.
<br /><br />
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button variant="danger">Left</sl-button>
<sl-button variant="danger">Center</sl-button>
<sl-button variant="danger">Right</sl-button>
@@ -133,7 +133,7 @@ import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton variant="primary">Left</SlButton>
<SlButton variant="primary">Center</SlButton>
<SlButton variant="primary">Right</SlButton>
@@ -142,7 +142,7 @@ const App = () => (
<br />
<br />
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton variant="success">Left</SlButton>
<SlButton variant="success">Center</SlButton>
<SlButton variant="success">Right</SlButton>
@@ -151,7 +151,7 @@ const App = () => (
<br />
<br />
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton variant="neutral">Left</SlButton>
<SlButton variant="neutral">Center</SlButton>
<SlButton variant="neutral">Right</SlButton>
@@ -160,7 +160,7 @@ const App = () => (
<br />
<br />
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton variant="warning">Left</SlButton>
<SlButton variant="warning">Center</SlButton>
<SlButton variant="warning">Right</SlButton>
@@ -169,7 +169,7 @@ const App = () => (
<br />
<br />
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton variant="danger">Left</SlButton>
<SlButton variant="danger">Center</SlButton>
<SlButton variant="danger">Right</SlButton>
@@ -183,7 +183,7 @@ const App = () => (
Pill buttons are supported through the button's `pill` attribute.
```html preview
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button size="small" pill>Left</sl-button>
<sl-button size="small" pill>Center</sl-button>
<sl-button size="small" pill>Right</sl-button>
@@ -191,7 +191,7 @@ Pill buttons are supported through the button's `pill` attribute.
<br /><br />
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button size="medium" pill>Left</sl-button>
<sl-button size="medium" pill>Center</sl-button>
<sl-button size="medium" pill>Right</sl-button>
@@ -199,7 +199,7 @@ Pill buttons are supported through the button's `pill` attribute.
<br /><br />
<sl-button-group>
<sl-button-group label="Alignment">
<sl-button size="large" pill>Left</sl-button>
<sl-button size="large" pill>Center</sl-button>
<sl-button size="large" pill>Right</sl-button>
@@ -211,7 +211,7 @@ import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton size="small" pill>
Left
</SlButton>
@@ -226,7 +226,7 @@ const App = () => (
<br />
<br />
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton size="medium" pill>
Left
</SlButton>
@@ -241,7 +241,7 @@ const App = () => (
<br />
<br />
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlButton size="large" pill>
Left
</SlButton>
@@ -261,7 +261,7 @@ const App = () => (
Dropdowns can be placed inside button groups as long as the trigger is an `<sl-button>` element.
```html preview
<sl-button-group>
<sl-button-group label="Example Button Group">
<sl-button>Button</sl-button>
<sl-button>Button</sl-button>
<sl-dropdown>
@@ -279,7 +279,7 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<sl-b
import { SlButton, SlButtonGroup, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlButtonGroup>
<SlButtonGroup label="Example Button Group">
<SlButton>Button</SlButton>
<SlButton>Button</SlButton>
<SlDropdown>
@@ -301,7 +301,7 @@ const App = () => (
Create a split button using a button and a dropdown. Use a [visually hidden](/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.
```html preview
<sl-button-group>
<sl-button-group label="Example Button Group">
<sl-button variant="primary">Save</sl-button>
<sl-dropdown placement="bottom-end">
<sl-button slot="trigger" variant="primary" caret>
@@ -320,7 +320,7 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/co
import { SlButton, SlButtonGroup, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlButtonGroup>
<SlButtonGroup label="Example Button Group">
<SlButton variant="primary">Save</SlButton>
<SlDropdown placement="bottom-end">
<SlButton slot="trigger" variant="primary" caret></SlButton>
@@ -339,7 +339,7 @@ const App = () => (
Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
```html preview
<sl-button-group>
<sl-button-group label="Alignment">
<sl-tooltip content="I'm on the left">
<sl-button>Left</sl-button>
</sl-tooltip>
@@ -359,7 +359,7 @@ import { SlButton, SlButtonGroup, SlTooltip } from '@shoelace-style/shoelace/dis
const App = () => (
<>
<SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlTooltip content="I'm on the left">
<SlButton>Left</SlButton>
</SlTooltip>

2
docs/components/button.md
View File

@@ -134,7 +134,7 @@ const App = () => (
### Circle Buttons
Use the `circle` attribute to create circular icon 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>

2
docs/components/popup.md
View File

@@ -6,7 +6,7 @@ This component's name is inspired by [`<popup>`](https://github.com/MicrosoftEdg
Popup doesn't provide any styles — just positioning! The popup's preferred placement, distance, and skidding (offset) can be configured using attributes. An arrow that points to the anchor can be shown and customized to your liking. Additional positioning options are available and described in more detail below.
!> Popup is a low-level utility built specifically for positioning elements. Do not mistake it for a [tooltip](/components/tooltip) or similar because _it does not facilitate an accessible experience!_ Almost every correct usage of `<sl-popup>` will involve building other components. It should rarely, if ever, occur in your own HTML.
!> Popup is a low-level utility built specifically for positioning elements. Do not mistake it for a [tooltip](/components/tooltip) or similar because _it does not facilitate an accessible experience!_ Almost every correct usage of `<sl-popup>` will involve building other components. It should rarely, if ever, occur directly in your HTML.
```html preview
<div class="popup-overview">

4
docs/components/visually-hidden.md
View File

@@ -7,7 +7,7 @@ According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how
Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboards user won't be able to determine where the focus indicator is without it.
```html preview
<div style="min-height: 100px;">
<div style="min-height: 1.875rem;">
<sl-visually-hidden>
<a href="#">Skip to main content</a>
</sl-visually-hidden>
@@ -30,7 +30,7 @@ In this example, the link will open a new window. Screen readers will announce "
### Content Conveyed By Context
Adding a title or label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content.
Adding a label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.
```html preview
<sl-card style="width: 100%; max-width: 360px;">

4
docs/getting-started/usage.md
View File

@@ -4,7 +4,7 @@ Shoelace components are just regular HTML elements, or [custom elements](https:/
If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
## Properties
## Attributes & Properties
Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
@@ -18,7 +18,7 @@ Some properties are boolean, so they only have true/false values. To activate a
<sl-button disabled>Click me</sl-button>
```
In rare cases, a property may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` property to an array of colors. This can be done with JavaScript.
In rare cases, a property may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` property to an array of colors. This must be done with JavaScript.
```html
<sl-color-picker></sl-color-picker>

5
docs/resources/changelog.md
View File

@@ -10,10 +10,14 @@ New versions of Shoelace are released as-needed and generally occur when a criti
## Next
- 🚨 BREAKING: changed the default value of `date` in `<sl-relative-time>` to the current date instead of the Unix epoch
- 🚨 BREAKING: removed the `handle-icon` part and slot from `<sl-image-comparer>` (use `handle` instead)
- 🚨 BREAKING: removed the `handle` slot from `<sl-split-panel>` (use the `divider` slot instead)
- 🚨 BREAKING: removed the `--box-shadow` custom property from `<sl-alert>` (apply a box shadow to `::part(base)` instead)
- 🚨 BREAKING: removed the `play-icon` and `pause-icon` parts (use the `play-icon` and `pause-icon` slots instead)
- Added `header-actions` slot to `<sl-dialog>` and `<sl-drawer>`
- Added the `expand-icon` and `collapse-icon` slots to `<sl-details>` and refactored the icon animation [#1046](https://github.com/shoelace-style/shoelace/discussions/1046)
- Added the `play-icon` and `pause-icon` slots to `<sl-animated-image>` so you can customize the default icons
- Fixed a bug in `<sl-tree-item>` where `sl-selection-change` was emitted when the selection didn't change [#1030](https://github.com/shoelace-style/shoelace/pull/1030)
- Fixed a bug in `<sl-button-group>` that caused the border to render incorrectly when hovering over icons inside buttons [#1035](https://github.com/shoelace-style/shoelace/issues/1035)
- Fixed an incorrect default for `flip-fallback-strategy` in `<sl-popup>` that caused the fallback strategy to be `initial` instead of `best-fit`, which is inconsistent with Floating UI's default [#1036](https://github.com/shoelace-style/shoelace/issues/1036)
@@ -24,6 +28,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
- Fixed the border radius in `<sl-dropdown>` so it matches with nested `<sl-menu>` elements
- Improved IntelliSense in VS Code, courtesy of [Burton's amazing CEM Analyzer plugin](https://github.com/break-stuff/cem-plugin-vs-code-custom-data-generator)
- Improved accessibility of `<sl-alert>` so the alert is announced and the close button has a label
- Improved accessibility of `<sl-progress-ring>` so slotted labels are announced along with visually hidden labels
- Refactored all styles and animations to use `translate`, `rotate`, and `scale` instead of `transform`
- Removed slot wrappers from many components, allowing better control over user-applied styles
- Removed unused aria attributes from `<sl-skeleton>`