From 80a9d05ff370da832b9e44aacb053cf4f94c5436 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 2 Mar 2022 10:10:41 -0500 Subject: [PATCH] add prettier and eslint to markdown --- .prettierignore | 2 - docs/_sidebar.md | 9 +- docs/components/alert.md | 102 ++++--- docs/components/animated-image.md | 27 +- docs/components/animation.md | 69 +++-- docs/components/avatar.md | 46 ++-- docs/components/badge.md | 74 +++-- docs/components/breadcrumb.md | 58 ++-- docs/components/button-group.md | 149 +++++----- docs/components/button.md | 167 ++++++++--- docs/components/card.md | 81 +++--- docs/components/checkbox.md | 16 +- docs/components/color-picker.md | 12 +- docs/components/dialog.md | 9 +- docs/components/divider.md | 33 +-- docs/components/drawer.md | 10 +- docs/components/dropdown.md | 100 +++---- docs/components/format-bytes.md | 69 ++--- docs/components/format-date.md | 44 +-- docs/components/format-number.md | 71 +++-- docs/components/icon-button.md | 17 +- docs/components/icon.md | 45 ++- docs/components/image-comparer.md | 48 +++- docs/components/include.md | 6 +- docs/components/input.md | 58 ++-- docs/components/menu-item.md | 74 +++-- docs/components/menu-label.md | 11 +- docs/components/menu.md | 14 +- docs/components/mutation-observer.md | 27 +- docs/components/progress-bar.md | 36 +-- docs/components/progress-ring.md | 50 +--- docs/components/qr-code.md | 16 +- docs/components/radio-group.md | 9 +- docs/components/radio.md | 12 +- docs/components/range.md | 55 +--- docs/components/rating.md | 37 +-- docs/components/relative-time.md | 38 +-- docs/components/resize-observer.md | 14 +- docs/components/responsive-media.md | 30 +- docs/components/select.md | 26 +- docs/components/skeleton.md | 48 ++-- docs/components/spinner.md | 12 +- docs/components/split-panel.md | 335 ++++++++++++++--------- docs/components/switch.md | 18 +- docs/components/tab-group.md | 182 ++++++++---- docs/components/tab-panel.md | 16 +- docs/components/tag.md | 21 +- docs/components/textarea.md | 49 +--- docs/components/tooltip.md | 17 +- docs/frameworks/react.md | 28 +- docs/frameworks/vue.md | 8 +- docs/getting-started/form-controls.md | 72 +++-- docs/getting-started/installation.md | 23 +- docs/getting-started/overview.md | 8 +- docs/getting-started/themes.md | 16 +- docs/getting-started/usage.md | 4 +- docs/resources/accessibility.md | 2 +- docs/resources/changelog.md | 5 +- docs/tokens/color.md | 1 - docs/tokens/spacing.md | 24 +- docs/tokens/typography.md | 50 ++-- docs/tokens/z-index.md | 14 +- docs/tutorials/integrating-with-rails.md | 23 +- package-lock.json | 305 +++++++++++++++++++++ package.json | 9 +- 65 files changed, 1740 insertions(+), 1321 deletions(-) diff --git a/.prettierignore b/.prettierignore index a9772565..104baae5 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,10 +1,8 @@ *.hbs -*.md .cache .github cspell.json dist -docs/*.md docs/search.json src/components/icon/icons src/react/index.ts diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 06e3a1d4..4cf6a835 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -1,4 +1,5 @@ - Getting Started + - [Overview](/) - [Installation](/getting-started/installation) - [Usage](/getting-started/usage) @@ -8,17 +9,20 @@ - [Localization](/getting-started/localization) - Frameworks + - [React](/frameworks/react) - [Vue](/frameworks/vue) - [Angular](/frameworks/angular) - Resources + - [Community](/resources/community) - [Accessibility](/resources/accessibility) - [Contributing](/resources/contributing) - [Changelog](/resources/changelog) - Components + - [Alert](/components/alert) - [Avatar](/components/avatar) - [Badge](/components/badge) @@ -62,6 +66,7 @@ - Utilities + - [Animated Image](/components/animated-image) - [Animation](/components/animation) - [Format Bytes](/components/format-bytes) @@ -75,6 +80,7 @@ - [Visually Hidden](/components/visually-hidden) - Design Tokens + - [Typography](/tokens/typography) - [Color](/tokens/color) - [Spacing](/tokens/spacing) @@ -84,6 +90,7 @@ - [Z-index](/tokens/z-index) - Tutorials + - [Integrating with Laravel](/tutorials/integrating-with-laravel) - [Integrating with NextJS](/tutorials/integrating-with-nextjs) - - [Integrating with Rails](/tutorials/integrating-with-rails) \ No newline at end of file + - [Integrating with Rails](/tutorials/integrating-with-rails) diff --git a/docs/components/alert.md b/docs/components/alert.md index 3cab705a..9202f081 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -33,40 +33,40 @@ Set the `variant` attribute to change the alert's variant. ```html preview - This is super informative
+ This is super informative
You can tell by how pretty the alert is. -
+
- Your changes have been saved
+ Your changes have been saved
You can safely exit the app now. -
+
- Your settings have been updated
+ Your settings have been updated
Settings will take affect on next login. -
+
- Your session has ended
+ Your session has ended
Please login again to continue. -
+
- Your account has been deleted
- We're very sorry to see you go! + Your account has been deleted
+ We're very sorry to see you go! ``` @@ -77,7 +77,8 @@ const App = () => ( <> - This is super informative
+ This is super informative +
You can tell by how pretty the alert is. @@ -85,7 +86,8 @@ const App = () => ( - Your changes have been saved
+ Your changes have been saved +
You can safely exit the app now. @@ -93,7 +95,8 @@ const App = () => ( - Your settings have been updated
+ Your settings have been updated +
Settings will take affect on next login. @@ -101,7 +104,8 @@ const App = () => ( - Your session has ended
+ Your session has ended +
Please login again to continue. @@ -109,8 +113,9 @@ const App = () => ( - Your account has been deleted
- We're very sorry to see you go! + Your account has been deleted +
+ We're very sorry to see you go! ); @@ -129,7 +134,7 @@ Add the `closable` attribute to show a close button that will hide the alert. ``` @@ -147,11 +152,7 @@ const App = () => { } return ( - + You can close this alert any time! @@ -164,9 +165,7 @@ const App = () => { Icons are optional. Simply omit the `icon` slot if you don't want them. ```html preview - - Nothing fancy here, just a simple alert. - + Nothing fancy here, just a simple alert. ``` ```jsx react @@ -210,11 +209,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti ```jsx react import { useState } from 'react'; -import { - SlAlert, - SlButton, - SlIcon -} from '@shoelace-style/shoelace/dist/react'; +import { SlAlert, SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react'; const css = ` .alert-duration sl-alert { @@ -228,15 +223,11 @@ const App = () => { return ( <>
- setOpen(true)}>Show Alert + setOpen(true)}> + Show Alert + - setOpen(false)} - > + setOpen(false)}> This alert will automatically hide itself after three seconds, unless you interact with it. @@ -261,34 +252,34 @@ You should always use the `closable` attribute so users can dismiss the notifica Neutral Warning Danger - + - This is super informative
+ This is super informative
You can tell by how pretty the alert is. - Your changes have been saved
+ Your changes have been saved
You can safely exit the app now. - Your settings have been updated
+ Your settings have been updated
Settings will take affect on next login. - Your session has ended
+ Your session has ended
Please login again to continue. - Your account has been deleted
+ Your account has been deleted
We're very sorry to see you go!
@@ -307,11 +298,7 @@ You should always use the `closable` attribute so users can dismiss the notifica ```jsx react import { useRef } from 'react'; -import { - SlAlert, - SlButton, - SlIcon -} from '@shoelace-style/shoelace/dist/react'; +import { SlAlert, SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react'; function showToast(alert) { alert.toast(); @@ -348,31 +335,36 @@ const App = () => { - This is super informative
+ This is super informative +
You can tell by how pretty the alert is. - Your changes have been saved
+ Your changes have been saved +
You can safely exit the app now. - Your settings have been updated
+ Your settings have been updated +
Settings will take affect on next login. - Your session has ended
+ Your session has ended +
Please login again to continue. - Your account has been deleted
+ Your account has been deleted +
We're very sorry to see you go! @@ -399,7 +391,7 @@ For convenience, you can create a utility that emits toast notifications with a const div = document.createElement('div'); div.textContent = html; return div.innerHTML; - } + } // Custom function to emit toast notifications function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) { diff --git a/docs/components/animated-image.md b/docs/components/animated-image.md index 5f81730e..4f12320b 100644 --- a/docs/components/animated-image.md +++ b/docs/components/animated-image.md @@ -5,8 +5,8 @@ A component for displaying animated GIFs and WEBPs that play and pause on interaction. ```html preview - ``` @@ -16,7 +16,7 @@ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react'; const App = () => ( ); @@ -31,8 +31,8 @@ const App = () => ( Both GIF and WEBP images are supported. ```html preview - ``` @@ -41,10 +41,7 @@ Both GIF and WEBP images are supported. import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - + ); ``` @@ -53,8 +50,8 @@ const App = () => ( To set a custom size, apply a width and/or height to the host element. ```html preview - @@ -66,7 +63,7 @@ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react'; const App = () => ( @@ -78,8 +75,8 @@ const App = () => ( You can change the appearance and location of the control box by targeting the `control-box` part in your styles. ```html preview - @@ -116,7 +113,7 @@ const App = () => ( <> diff --git a/docs/components/animation.md b/docs/components/animation.md index 6e367f18..29244a39 100644 --- a/docs/components/animation.md +++ b/docs/components/animation.md @@ -41,13 +41,21 @@ const css = ` const App = () => ( <>
-
-
-
-
+ +
+ + +
+ + +
+ + +
+
- + ); ``` @@ -91,7 +99,7 @@ This example demonstrates all of the baked-in animations and easings. Animations }); animationName.appendChild(menuItem); }); - + easings.map(name => { const menuItem = Object.assign(document.createElement('sl-menu-item'), { textContent: name, @@ -100,9 +108,9 @@ This example demonstrates all of the baked-in animations and easings. Animations easingName.appendChild(menuItem); }); - animationName.addEventListener('sl-change', () => animation.name = animationName.value); - easingName.addEventListener('sl-change', () => animation.easing = easingName.value); - playbackRate.addEventListener('sl-input', () => animation.playbackRate = playbackRate.value); + animationName.addEventListener('sl-change', () => (animation.name = animationName.value)); + easingName.addEventListener('sl-change', () => (animation.easing = easingName.value)); + playbackRate.addEventListener('sl-input', () => (animation.playbackRate = playbackRate.value)); ``` @@ -182,16 +190,14 @@ const App = () => { const box = useRef(null); useEffect(() => { - const observer = new IntersectionObserver( - (entries) => { - if (entries[0].isIntersecting) { - animation.current.play = true; - } else { - animation.current.play = false; - animation.current.currentTime = 0; - } + const observer = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + animation.current.play = true; + } else { + animation.current.play = false; + animation.current.currentTime = 0; } - ); + }); if (box.current) { observer.observe(box.current); @@ -201,17 +207,12 @@ const App = () => { return ( <>
- +
- + ); }; @@ -271,9 +272,9 @@ const css = ` const App = () => ( <>
- (
- + ); ``` @@ -332,13 +333,7 @@ const App = () => { return (
- setPlay(false)} - > + setPlay(false)}> setPlay(true)}> Click me diff --git a/docs/components/avatar.md b/docs/components/avatar.md index 61b3f571..2fa905be 100644 --- a/docs/components/avatar.md +++ b/docs/components/avatar.md @@ -13,9 +13,7 @@ Like [images](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), yo ```jsx react import { SlAvatar } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ## Examples @@ -53,9 +51,7 @@ When you don't have an image to use, you can set the `initials` attribute to sho ```jsx react import { SlAvatar } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Custom Icons @@ -124,22 +120,22 @@ You can group avatars with a few lines of CSS. ```html preview
- - - - @@ -172,28 +168,28 @@ const css = ` const App = () => ( <>
- - - - - -
- + ); ``` diff --git a/docs/components/badge.md b/docs/components/badge.md index 430bb0cc..93123f6c 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -11,9 +11,7 @@ Badges are used to draw attention and display statuses or counts. ```jsx react import { SlBadge } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - Badge -); +const App = () => Badge; ``` ## Examples @@ -39,7 +37,7 @@ const App = () => ( Success Neutral Warning - Danger + Danger ); ``` @@ -61,11 +59,21 @@ import { SlBadge } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Primary - Success - Neutral - Warning - Danger + + Primary + + + Success + + + Neutral + + + Warning + + + Danger + ); ``` @@ -102,11 +110,21 @@ const css = ` const App = () => ( <>
- 1 - 1 - 1 - 1 - 1 + + 1 + + + 1 + + + 1 + + + 1 + + + 1 +
@@ -147,12 +165,16 @@ const App = () => ( Warnings - 8 + + 8 + Errors - 6 + + 6 + ); @@ -163,7 +185,9 @@ const App = () => ( When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly. ```html preview - + Messages Comments 4 Replies 12 @@ -174,7 +198,7 @@ When including badges in menu items, use the `suffix` slot to make sure they're import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - ( }} > Messages - Comments 4 - Replies 12 + + Comments + + 4 + + + + Replies + + 12 + + ); ``` diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md index b1c554d8..6684b447 100644 --- a/docs/components/breadcrumb.md +++ b/docs/components/breadcrumb.md @@ -38,21 +38,13 @@ For websites, you'll probably want to use links instead. You can make any breadc ```html preview - - Homepage - + Homepage - - Our Services - + Our Services - - Digital Media - + Digital Media - - Web Design - + Web Design ``` @@ -61,21 +53,13 @@ import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/re const App = () => ( - - Homepage - + Homepage - - Our Services - + Our Services - - Digital Media - + Digital Media - - Web Design - + Web Design ); ``` @@ -89,25 +73,25 @@ Use the `separator` slot to change the separator that goes between breadcrumb it First Second - Third + Third -
+
First Second - Third + Third -
+
/ First Second - Third + Third ``` @@ -121,7 +105,7 @@ const App = () => ( First Second - Third + Third
@@ -130,7 +114,7 @@ const App = () => ( First Second - Third + Third
@@ -139,7 +123,7 @@ const App = () => ( / First Second - Third + Third ); @@ -225,15 +209,15 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op Web Development Marketing - + ``` ```jsx react -import { - SlBreadcrumb, - SlBreadcrumbItem, +import { + SlBreadcrumb, + SlBreadcrumbItem, SlButton, SlDropdown, SlIcon, @@ -257,7 +241,7 @@ const App = () => ( Web Development Marketing - + ); diff --git a/docs/components/button-group.md b/docs/components/button-group.md index 8b081524..6b415f88 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -37,7 +37,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr Right -

+

Left @@ -45,7 +45,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr Right -

+

Left @@ -65,7 +65,8 @@ const App = () => ( Right -

+
+
Left @@ -73,7 +74,8 @@ const App = () => ( Right -

+
+
Left @@ -95,7 +97,7 @@ Theme buttons are supported through the button's `type` attribute. Right -

+

Left @@ -103,7 +105,7 @@ Theme buttons are supported through the button's `type` attribute. Right -

+

Left @@ -111,7 +113,7 @@ Theme buttons are supported through the button's `type` attribute. Right -

+

Left @@ -119,7 +121,7 @@ Theme buttons are supported through the button's `type` attribute. Right -

+

Left @@ -139,7 +141,8 @@ const App = () => ( Right -

+
+
Left @@ -147,7 +150,8 @@ const App = () => ( Right -

+
+
Left @@ -155,7 +159,8 @@ const App = () => ( Right -

+
+
Left @@ -163,7 +168,8 @@ const App = () => ( Right -

+
+
Left @@ -185,7 +191,7 @@ Pill buttons are supported through the button's `pill` attribute. Right -

+

Left @@ -193,7 +199,7 @@ Pill buttons are supported through the button's `pill` attribute. Right -

+

Left @@ -208,25 +214,45 @@ import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Left - Center - Right + + Left + + + Center + + + Right + -

+
+
- Left - Center - Right + + Left + + + Center + + + Right + -

+
+
- Left - Center - Right + + Left + + + Center + + + Right + ); @@ -237,7 +263,7 @@ const App = () => ( Dropdowns can be placed inside button groups as long as the trigger is an `` element. ```html preview - + Button Button @@ -252,20 +278,16 @@ Dropdowns can be placed inside button groups as long as the trigger is an ` ( - + Button Button - Dropdown + + Dropdown + Item 1 Item 2 @@ -281,7 +303,7 @@ const App = () => ( Create a split button using a button and a dropdown. ```html preview - + Save @@ -295,16 +317,10 @@ Create a split button using a button and a dropdown. ``` ```jsx react -import { - SlButton, - SlButtonGroup, - SlDropdown, - SlMenu, - SlMenuItem, -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlButtonGroup, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - + Save @@ -339,11 +355,7 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact ``` ```jsx react -import { - SlButton, - SlButtonGroup, - SlTooltip -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlButtonGroup, SlTooltip } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> @@ -412,12 +424,7 @@ Create interactive toolbars with button groups. ``` ```jsx react -import { - SlButton, - SlButtonGroup, - SlIcon, - SlTooltip -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlButtonGroup, SlIcon, SlTooltip } from '@shoelace-style/shoelace/dist/react'; const css = ` .button-group-toolbar sl-button-group:not(:last-of-type) { @@ -430,34 +437,50 @@ const App = () => (
- + + + - + + + - + + + - + + + - + + + - + + + - + + + - + + +
diff --git a/docs/components/button.md b/docs/components/button.md index 9ef10195..48d60b79 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -11,9 +11,7 @@ Buttons represent actions that are available to the user. ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - Button -); +const App = () => Button; ``` ## Examples @@ -41,7 +39,7 @@ const App = () => ( Success Neutral Warning - Danger + Danger ); ``` @@ -86,12 +84,24 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Default - Primary - Success - Neutral - Warning - Danger + + Default + + + Primary + + + Success + + + Neutral + + + Warning + + + Danger + ); ``` @@ -111,9 +121,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Small - Medium - Large + + Small + + + Medium + + + Large + ); ``` @@ -133,9 +149,15 @@ import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - - - + + + + + + + + + ); ``` @@ -155,9 +177,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Text - Text - Text + + Text + + + Text + + + Text + ); ``` @@ -179,9 +207,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Link - New Window - Download - Disabled + + New Window + + + Download + + + Disabled + ); ``` @@ -203,9 +237,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Small - Medium - Large + + Small + + + Medium + + + Large + ); ``` @@ -231,7 +271,7 @@ Use the `prefix` and `suffix` slots to add icons. Open -

+

@@ -249,7 +289,7 @@ Use the `prefix` and `suffix` slots to add icons. Open -

+

@@ -289,7 +329,8 @@ const App = () => ( Open -

+
+
@@ -307,7 +348,8 @@ const App = () => ( Open -

+
+
@@ -343,9 +385,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Small - Medium - Large + + Small + + + Medium + + + Large + ); ``` @@ -368,12 +416,24 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Default - Primary - Success - Neutral - Warning - Danger + + Default + + + Primary + + + Success + + + Neutral + + + Warning + + + Danger + ); ``` @@ -396,12 +456,29 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Default - Primary - Success - Neutral - Warning - Danger + + Default + + + + Primary + + + + Success + + + + Neutral + + + + Warning + + + + Danger + ); ``` @@ -418,7 +495,7 @@ This example demonstrates how to style buttons using a custom class. This is the /* Set design tokens for height and border width */ --sl-input-height-medium: 48px; --sl-input-border-width: 4px; - + border-radius: 0; background-color: #ff1493; border-top-color: #ff7ac1; diff --git a/docs/components/card.md b/docs/components/card.md index 4d4b0fef..4ecac543 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -6,14 +6,14 @@ Cards can be used to group related subjects in a container. ```html preview - A kitten sits patiently between a terracotta pot and decorative grasses. + /> - Mittens
- This kitten is as cute as he is playful. Bring him home today!
+ Mittens
+ This kitten is as cute as he is playful. Bring him home today!
6 weeks old
@@ -31,20 +31,16 @@ Cards can be used to group related subjects in a container. color: var(--sl-color-neutral-500); } - .card-overview [slot="footer"] { - display: flex; - justify-content: space-between; + .card-overview [slot='footer'] { + display: flex; + justify-content: space-between; align-items: center; } ``` ```jsx react -import { - SlButton, - SlCard, - SlRating -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlCard, SlRating } from '@shoelace-style/shoelace/dist/react'; const css = ` .card-overview { @@ -65,18 +61,20 @@ const css = ` const App = () => ( <> - A kitten sits patiently between a terracotta pot and decorative grasses. - - Mittens
- This kitten is as cute as he is playful. Bring him home today!
+ Mittens +
+ This kitten is as cute as he is playful. Bring him home today! +
6 weeks old -
- More Info + + More Info +
@@ -144,9 +142,9 @@ Headers can be used to display titles and more. max-width: 300px; } - .card-header [slot="header"] { - display: flex; - align-items: center; + .card-header [slot='header'] { + display: flex; + align-items: center; justify-content: space-between; } @@ -188,10 +186,8 @@ const App = () => (
Header Title -
- This card has a header. You can put all sorts of things in it! @@ -219,20 +215,16 @@ Footers can be used to display actions, summaries, or other relevant content. max-width: 300px; } - .card-footer [slot="footer"] { - display: flex; - justify-content: space-between; + .card-footer [slot='footer'] { + display: flex; + justify-content: space-between; align-items: center; } ``` ```jsx react -import { - SlButton, - SlCard, - SlRating -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlCard, SlRating } from '@shoelace-style/shoelace/dist/react'; const css = ` .card-footer { @@ -250,10 +242,11 @@ const App = () => ( <> This card has a footer. You can put all sorts of things in it! -
- Preview + + Preview +
@@ -268,11 +261,11 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches ```html preview - A kitten walks towards camera on top of pallet. + /> This is a kitten, but not just any kitten. This kitten likes walking along pallets. @@ -295,9 +288,9 @@ const css = ` const App = () => ( <> - A kitten walks towards camera on top of pallet. This is a kitten, but not just any kitten. This kitten likes walking along pallets. diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md index d11fa427..dbb67e37 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox.md @@ -11,9 +11,7 @@ Checkboxes allow the user to toggle an option on or off. ```jsx react import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - Checkbox -); +const App = () => Checkbox; ``` ?> This component works with standard `
` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation. @@ -31,9 +29,7 @@ Use the `checked` attribute to activate the checkbox. ```jsx react import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - Checked -); +const App = () => Checked; ``` ### Indeterminate @@ -47,9 +43,7 @@ Use the `indeterminate` attribute to make the checkbox indeterminate. ```jsx react import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - Indeterminate -); +const App = () => Indeterminate; ``` ### Disabled @@ -63,9 +57,7 @@ Use the `disabled` attribute to disable the checkbox. ```jsx react import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - Disabled -); +const App = () => Disabled; ``` [component-metadata:sl-checkbox] diff --git a/docs/components/color-picker.md b/docs/components/color-picker.md index 9622875d..ea63ec01 100644 --- a/docs/components/color-picker.md +++ b/docs/components/color-picker.md @@ -11,9 +11,7 @@ Color pickers allow the user to select a color. ```jsx react import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ?> This component works with standard `` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation. @@ -31,9 +29,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled, ```jsx react import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Formats @@ -93,9 +89,7 @@ The color picker can be rendered inline instead of in a dropdown using the `inli ```jsx react import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` [component-metadata:sl-color-picker] diff --git a/docs/components/dialog.md b/docs/components/dialog.md index 44a726aa..64b3dfa0 100644 --- a/docs/components/dialog.md +++ b/docs/components/dialog.md @@ -202,12 +202,7 @@ const App = () => { return ( <> - setOpen(false)} - > + setOpen(false)}> This dialog will not close when you click on the overlay. setOpen(false)}> Close @@ -222,7 +217,7 @@ const App = () => { ### Customizing Initial Focus -By default, the dialog's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the `autofocus` attribute to it as shown below. +By default, the dialog's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the `autofocus` attribute to it as shown below. ```html preview diff --git a/docs/components/divider.md b/docs/components/divider.md index 674fe39c..94ad5bec 100644 --- a/docs/components/divider.md +++ b/docs/components/divider.md @@ -11,10 +11,9 @@ Dividers are used to visually separate or group elements. ```jsx react import { SlDivider } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` + ## Examples ### Width @@ -28,9 +27,7 @@ Use the `--width` custom property to change the width of the divider. ```jsx react import { SlDivider } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Color @@ -44,9 +41,7 @@ Use the `--color` custom property to change the color of the divider. ```jsx react import { SlDivider } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Spacing @@ -91,10 +86,10 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The import { SlDivider } from '@shoelace-style/shoelace/dist/react'; const App = () => ( -
@@ -112,7 +107,9 @@ const App = () => ( Use dividers in [menus](/components/menu) to visually group menu items. ```html preview - + Option 1 Option 2 Option 3 @@ -124,14 +121,10 @@ Use dividers in [menus](/components/menu) to visually group menu items. ``` ```jsx react -import { - SlDivider, - SlMenu, - SlMenuItem -} from '@shoelace-style/shoelace/dist/react'; +import { SlDivider, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - ``` @@ -390,12 +389,7 @@ const App = () => { return ( <> - setOpen(false)} - > + setOpen(false)}> This drawer will not close when you click on the overlay. setOpen(false)}> Save & Close @@ -410,7 +404,7 @@ const App = () => { ### Customizing Initial Focus -By default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below. +By default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below. ```html preview diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md index 59588fa7..e6f14106 100644 --- a/docs/components/dropdown.md +++ b/docs/components/dropdown.md @@ -32,18 +32,13 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a ``` ```jsx react -import { - SlButton, - SlDivider, - SlDropdown, - SlIcon, - SlMenu, - SlMenuItem -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlDivider, SlDropdown, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - Dropdown + + Dropdown + Dropdown Item 1 Dropdown Item 2 @@ -61,7 +56,7 @@ const App = () => ( - + ); ``` @@ -95,12 +90,7 @@ When dropdowns are used with [menus](/components/menu), you can listen for the ` ``` ```jsx react -import { - SlButton, - SlDropdown, - SlMenu, - SlMenuItem -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => { function handleSelect(event) { @@ -110,13 +100,15 @@ const App = () => { return ( - Edit + + Edit + Cut Copy Paste - + ); }; ``` @@ -148,12 +140,7 @@ Alternatively, you can listen for the `click` event on individual menu items. No ``` ```jsx react -import { - SlButton, - SlDropdown, - SlMenu, - SlMenuItem -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => { function handleCut() { @@ -170,13 +157,15 @@ const App = () => { return ( - Edit + + Edit + Cut Copy Paste - + ); }; ``` @@ -200,17 +189,13 @@ The preferred placement of the dropdown can be set with the `placement` attribut ``` ```jsx react -import { - SlButton, - SlDivider, - SlDropdown, - SlMenu, - SlMenuItem -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlDivider, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - Edit + + Edit + Cut Copy @@ -219,7 +204,7 @@ const App = () => ( Find Replace - + ); ``` @@ -242,17 +227,13 @@ The distance from the panel to the trigger can be customized using the `distance ``` ```jsx react -import { - SlButton, - SlDivider, - SlDropdown, - SlMenu, - SlMenuItem -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlDivider, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - Edit + + Edit + Cut Copy @@ -261,7 +242,7 @@ const App = () => ( Find Replace - + ); ``` @@ -284,17 +265,13 @@ The offset of the panel along the trigger can be customized using the `skidding` ``` ```jsx react -import { - SlButton, - SlDivider, - SlDropdown, - SlMenu, - SlMenuItem -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlDivider, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - Edit + + Edit + Cut Copy @@ -303,7 +280,7 @@ const App = () => ( Find Replace - + ); ``` @@ -342,14 +319,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow ``` ```jsx react -import { - SlButton, - SlDivider, - SlDropdown, - SlIcon, - SlMenu, - SlMenuItem -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlDivider, SlDropdown, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; const css = ` .dropdown-hoist { @@ -363,7 +333,9 @@ const App = () => ( <>
- No Hoist + + No Hoist + Item 1 Item 2 @@ -372,7 +344,9 @@ const App = () => ( - Hoist + + Hoist + Item 1 Item 2 diff --git a/docs/components/format-bytes.md b/docs/components/format-bytes.md index eeab55dd..4b7a4ad2 100644 --- a/docs/components/format-bytes.md +++ b/docs/components/format-bytes.md @@ -6,9 +6,8 @@ Formats a number as a human readable bytes value. ```html preview
- The file is in size. -

- + The file is in size.

+
``` - ```jsx react import { useState } from 'react'; -import { - SlButton, - SlFormatBytes, - SlInput -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlFormatBytes, SlInput } from '@shoelace-style/shoelace/dist/react'; const App = () => { const [value, setValue] = useState(1000); @@ -35,11 +29,12 @@ const App = () => { return ( <> The file is in size. -

- +
+ setValue(event.target.value)} /> @@ -55,21 +50,23 @@ const App = () => { Set the `value` attribute to a number to get the value in bytes. ```html preview -
-
-
+
+
+
``` - ```jsx react import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> -
-
-
+ +
+ +
+ +
); @@ -80,9 +77,9 @@ const App = () => ( To get the value in bits, set the `unit` attribute to `bit`. ```html preview -
-
-
+
+
+
``` @@ -91,9 +88,12 @@ import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> -
-
-
+ +
+ +
+ +
); @@ -104,9 +104,9 @@ const App = () => ( Use the `lang` attribute to set the number formatting locale. ```html preview -
-
-
+
+
+
``` @@ -115,9 +115,12 @@ import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> -
-
-
+ +
+ +
+ +
); diff --git a/docs/components/format-date.md b/docs/components/format-date.md index 39d016c9..1e8a2202 100644 --- a/docs/components/format-date.md +++ b/docs/components/format-date.md @@ -14,9 +14,7 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev ```jsx react import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` The `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed. @@ -31,19 +29,19 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h ```html preview -
+
-
+
-
+
-
+
-
+
@@ -55,19 +53,24 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> {/* Human-readable date */} -
+ +
{/* Time */} -
+ +
{/* Weekday */} -
+ +
{/* Month */} -
+ +
{/* Year */} -
+ +
{/* No formatting options */} @@ -80,7 +83,7 @@ const App = () => ( By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`. ```html preview -
+
``` @@ -89,7 +92,8 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> -
+ +
); @@ -100,8 +104,8 @@ const App = () => ( Use the `lang` attribute to set the date/time formatting locale. ```html preview -English:
-French:
+English:
+French:
Russian: ``` @@ -110,8 +114,10 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - English:
- French:
+ English: +
+ French: +
Russian: ); diff --git a/docs/components/format-number.md b/docs/components/format-number.md index 1188cbca..77cb9cbc 100644 --- a/docs/components/format-number.md +++ b/docs/components/format-number.md @@ -8,9 +8,9 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel ```html preview
- -

- + +

+
``` @@ -32,11 +32,12 @@ const App = () => { return ( <> -

- +
+ setValue(event.target.value)} /> @@ -52,10 +53,10 @@ const App = () => { To get the value as a percent, set the `type` attribute to `percent`. ```html preview -
-
-
-
+
+
+
+
``` @@ -64,11 +65,15 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> -
-
-
-
- + +
+ +
+ +
+ +
+ ); ``` @@ -78,8 +83,8 @@ const App = () => ( Use the `lang` attribute to set the number formatting locale. ```html preview -English:
-German:
+English:
+German:
Russian: ``` @@ -88,8 +93,10 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - English:
- German:
+ English: +
+ German: +
Russian: ); @@ -100,10 +107,10 @@ const App = () => ( To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `lang` to ensure the the number is formatted correctly for the target locale. ```html preview -
-
-
-
+
+
+
+
``` @@ -112,10 +119,14 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> -
-
-
-
+ +
+ +
+ +
+ +
); diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md index 09037f0c..f2922eed 100644 --- a/docs/components/icon-button.md +++ b/docs/components/icon-button.md @@ -13,9 +13,7 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com ```jsx react import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ## Examples @@ -111,14 +109,7 @@ Use the `href` attribute to convert the button to a link. ```jsx react import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Icon Button with Tooltip @@ -152,9 +143,7 @@ Use the `disabled` attribute to disable the icon button. ```jsx react import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` [component-metadata:sl-icon-button] diff --git a/docs/components/icon.md b/docs/components/icon.md index 50420463..91d482a7 100644 --- a/docs/components/icon.md +++ b/docs/components/icon.md @@ -75,7 +75,7 @@ const App = () => ( -
+
); ``` @@ -90,9 +90,7 @@ For non-decorative icons, use the `label` attribute to announce it to assistive ```jsx react import { SlIcon } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Custom Icons @@ -103,13 +101,10 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a ``` - ```jsx react import { SlIcon } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ## Icon Libraries @@ -163,7 +158,7 @@ Icons in this library are licensed under the [Creative Commons 4.0 License](http if (name.substring(0, 4) === 'bxl-') folder = 'logos'; return `https://cdn.jsdelivr.net/npm/boxicons@2.0.5/svg/${folder}/${name}.svg`; }, - mutator:svg => svg.setAttribute('fill', 'currentColor') + mutator: svg => svg.setAttribute('fill', 'currentColor') }); @@ -174,14 +169,14 @@ Icons in this library are licensed under the [Creative Commons 4.0 License](http -
+
-
+
@@ -245,20 +240,20 @@ Icons in this library are licensed under the [Font Awesome Free License](https:/ -
+
-
+
- +
``` @@ -340,14 +335,14 @@ Icons in this library are licensed under the [MIT License](https://github.com/io -
+
-
+
@@ -380,7 +375,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/mi -
+
@@ -416,14 +411,14 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github -
+
-
+
@@ -460,13 +455,13 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github -
+
- +
``` @@ -483,7 +478,9 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github registerIconLibrary('unicons', { resolver: name => { const match = name.match(/^(.*?)(-s)?$/); - return `https://cdn.jsdelivr.net/npm/@iconscout/unicons@3.0.3/svg/${match[2] === '-s' ? 'solid' : 'line'}/${match[1]}.svg`; + return `https://cdn.jsdelivr.net/npm/@iconscout/unicons@3.0.3/svg/${match[2] === '-s' ? 'solid' : 'line'}/${ + match[1] + }.svg`; }, mutator: svg => svg.setAttribute('fill', 'currentColor') }); @@ -496,12 +493,12 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github -
+
- +
``` diff --git a/docs/components/image-comparer.md b/docs/components/image-comparer.md index 6fcabab7..a8cf946e 100644 --- a/docs/components/image-comparer.md +++ b/docs/components/image-comparer.md @@ -8,8 +8,16 @@ For best results, use images that share the same dimensions. The slider can be c ```html preview - Grayscale version of kittens in a basket looking around. - Color version of kittens in a basket looking around. + Grayscale version of kittens in a basket looking around. + Color version of kittens in a basket looking around. ``` @@ -18,8 +26,16 @@ import { SlImageComparer } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - Grayscale version of kittens in a basket looking around. - Color version of kittens in a basket looking around. + Grayscale version of kittens in a basket looking around. + Color version of kittens in a basket looking around. ); ``` @@ -32,8 +48,16 @@ Use the `position` attribute to set the initial position of the slider. This is ```html preview - A person sitting on bricks wearing untied boots. - A person sitting on a yellow curb tying shoelaces on a boot. + A person sitting on bricks wearing untied boots. + A person sitting on a yellow curb tying shoelaces on a boot. ``` @@ -42,8 +66,16 @@ import { SlImageComparer } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - A person sitting on bricks wearing untied boots. - A person sitting on a yellow curb tying shoelaces on a boot. + A person sitting on bricks wearing untied boots. + A person sitting on a yellow curb tying shoelaces on a boot. ); ``` diff --git a/docs/components/include.md b/docs/components/include.md index 17d6cbe8..870baf14 100644 --- a/docs/components/include.md +++ b/docs/components/include.md @@ -15,9 +15,7 @@ The included content will be inserted into the `` element's default ```jsx react import { SlInclude } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ## Examples @@ -33,7 +31,7 @@ If the request fails, the `sl-error` event will be emitted. In this case, `event @@ -112,7 +112,7 @@ const App = () => ( ### Effects -There are two built-in effects, `sheen` and `pulse`. Effects are intentionally subtle, as they can be distracting when used extensively. The default is `none`, which displays a static, non-animated skeleton. +There are two built-in effects, `sheen` and `pulse`. Effects are intentionally subtle, as they can be distracting when used extensively. The default is `none`, which displays a static, non-animated skeleton. ```html preview
@@ -155,10 +155,8 @@ const App = () => (
None - Sheen - Pulse
@@ -252,13 +250,13 @@ Set a matching width and height to make a circle, square, or rounded avatar skel display: inline-block; width: 3rem; height: 3rem; - margin-right: .5rem; + margin-right: 0.5rem; } .skeleton-avatars sl-skeleton:nth-child(1) { --border-radius: 0; } - + .skeleton-avatars sl-skeleton:nth-child(2) { --border-radius: var(--sl-border-radius-medium); } @@ -333,7 +331,20 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl .skeleton-shapes .cross::part(indicator) { --border-radius: 0; - clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); + clip-path: polygon( + 20% 0%, + 0% 20%, + 30% 50%, + 0% 80%, + 20% 100%, + 50% 70%, + 80% 100%, + 100% 80%, + 70% 50%, + 100% 20%, + 80% 0%, + 50% 30% + ); } .skeleton-shapes .comment::part(indicator) { @@ -342,7 +353,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl } .skeleton-shapes sl-skeleton:not(:last-child) { - margin-right: .5rem; + margin-right: 0.5rem; } ``` @@ -387,13 +398,13 @@ const css = ` const App = () => ( <> -
- - - - - -
+
+ + + + + +
@@ -428,12 +439,7 @@ const css = ` } `; -const App = () => ( - -); +const App = () => ; ``` [component-metadata:sl-skeleton] diff --git a/docs/components/spinner.md b/docs/components/spinner.md index d1dac44b..56fbb045 100644 --- a/docs/components/spinner.md +++ b/docs/components/spinner.md @@ -11,9 +11,7 @@ Spinners are used to show the progress of an indeterminate operation. ```jsx react import { SlSpinner } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ## Examples @@ -52,11 +50,11 @@ The width of the spinner's track can be changed by setting the `--track-width` c import { SlSpinner } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - ); ``` @@ -73,12 +71,12 @@ The spinner's colors can be changed by setting the `--indicator-color` and `--tr import { SlSpinner } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - ); ``` diff --git a/docs/components/split-panel.md b/docs/components/split-panel.md index 801b888c..f195a2a8 100644 --- a/docs/components/split-panel.md +++ b/docs/components/split-panel.md @@ -6,10 +6,16 @@ Split panels display two adjacent panels, allowing the user to reposition them. ```html preview -
+
Start
-
+
End
@@ -20,22 +26,28 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; const App = () => ( -
+
Start
-
+
End
@@ -50,10 +62,16 @@ To set the initial position, use the `position` attribute. If no position is pro ```html preview -
+
Start
-
+
End
@@ -65,10 +83,16 @@ To set the initial position in pixels instead of a percentage, use the `position ```html preview -
+
Start
-
+
End
@@ -79,8 +103,8 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; const App = () => ( -
( > Start
-
-
+
Start
-
+
End
@@ -127,26 +157,26 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; const App = () => ( -
Start
-
End @@ -162,10 +192,16 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi ```html preview
-
+
Start
-
+
End
@@ -233,8 +269,8 @@ const App = () => ( <>
-
( > Start
-
-
+
Start
-
+
End
@@ -287,8 +329,8 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; const App = () => ( -
( > Start
-
-
+
Start
-
+
End
@@ -344,7 +392,7 @@ Try resizing the example below with each option and notice how the panels respon const splitPanel = container.querySelector('sl-split-panel'); const select = container.querySelector('sl-select'); - select.addEventListener('sl-change', () => splitPanel.primary = select.value); + select.addEventListener('sl-change', () => (splitPanel.primary = select.value)); ``` @@ -358,8 +406,8 @@ const App = () => { return ( <> -
{ > Start
-
{
- setPrimary(event.target.value)} > None Start End - + ); }; @@ -407,10 +455,16 @@ This examples demonstrates how you can ensure both panels are at least 150px usi ```html preview -
+
Start
-
+
End
@@ -421,8 +475,8 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; const App = () => ( -
( > Start
-
-
+
Start
-
+
Top
-
+
Bottom
- +
``` @@ -476,8 +539,8 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; const App = () => ( -
(
-
( > Start
-
End
@@ -527,10 +590,16 @@ You can target the `divider` part to apply CSS properties to the divider. To add ```html preview -
+
Start
-
+
End
@@ -542,22 +611,28 @@ import { SlSplitPanel, SlIcon } from '@shoelace-style/shoelace/dist/react'; const App = () => ( -
+
Start
-
+
End
@@ -570,10 +645,16 @@ Here's a more elaborate example that changes the divider's color and width and a
-
+
Start
-
+
End
@@ -593,7 +674,7 @@ Here's a more elaborate example that changes the divider's color and width and a border-radius: var(--sl-border-radius-small); background: var(--sl-color-pink-600); color: var(--sl-color-neutral-0); - padding: .5rem .125rem; + padding: 0.5rem 0.125rem; } .split-panel-handle sl-split-panel::part(divider):focus-visible { @@ -639,29 +720,35 @@ const css = ` const App = () => ( <> -
- - -
- Start -
-
- End -
- -
+
+ + +
+ Start +
+
+ End +
+ +
diff --git a/docs/components/switch.md b/docs/components/switch.md index c638b487..4ce52264 100644 --- a/docs/components/switch.md +++ b/docs/components/switch.md @@ -2,7 +2,7 @@ [component-header:sl-switch] -Switches allow the user to toggle an option on or off. +Switches allow the user to toggle an option on or off. ```html preview Switch @@ -11,9 +11,7 @@ Switches allow the user to toggle an option on or off. ```jsx react import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - Switch -); +const App = () => Switch; ``` ?> This component works with standard `` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation. @@ -31,9 +29,7 @@ Use the `checked` attribute to activate the switch. ```jsx react import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - Checked -); +const App = () => Checked; ``` ### Disabled @@ -47,9 +43,7 @@ Use the `disabled` attribute to disable the switch. ```jsx react import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - Disabled -); +const App = () => Disabled; ``` ### Custom Size @@ -64,12 +58,12 @@ Use the available custom properties to make the switch a different size. import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - ); ``` diff --git a/docs/components/tab-group.md b/docs/components/tab-group.md index e29d9df7..4380b1ac 100644 --- a/docs/components/tab-group.md +++ b/docs/components/tab-group.md @@ -25,10 +25,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea const App = () => ( - General - Custom - Advanced - Disabled + + General + + + Custom + + + Advanced + + + Disabled + This is the general tab panel. This is the custom tab panel. @@ -63,10 +71,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea const App = () => ( - General - Custom - Advanced - Disabled + + General + + + Custom + + + Advanced + + + Disabled + This is the general tab panel. This is the custom tab panel. @@ -94,16 +110,23 @@ Tabs can be shown on the starting side by setting `placement` to `start`. ``` - ```jsx react import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - General - Custom - Advanced - Disabled + + General + + + Custom + + + Advanced + + + Disabled + This is the general tab panel. This is the custom tab panel. @@ -131,16 +154,23 @@ Tabs can be shown on the ending side by setting `placement` to `end`. ``` - ```jsx react import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - General - Custom - Advanced - Disabled + + General + + + Custom + + + Advanced + + + Disabled + This is the general tab panel. This is the custom tab panel. @@ -192,24 +222,32 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea const App = () => { function handleClose(event) { // - // This is a crude example that removes the tab and its panel from the DOM. + // This is a crude example that removes the tab and its panel from the DOM. // There are better ways to manage tab creation/removal in React, but that // would significantly complicate the example. // const tab = event.target; const tabGroup = tab.closest('sl-tab-group'); const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`); - + tab.remove(); tabPanel.remove(); } return ( - General - Closable 1 - Closable 2 - Closable 3 + + General + + + Closable 1 + + + Closable 2 + + + Closable 3 + This is the general tab panel. This is the first closable tab panel. @@ -275,26 +313,66 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea const App = () => ( - Tab 1 - Tab 2 - Tab 3 - Tab 4 - Tab 5 - Tab 6 - Tab 7 - Tab 8 - Tab 9 - Tab 10 - Tab 11 - Tab 12 - Tab 13 - Tab 14 - Tab 15 - Tab 16 - Tab 17 - Tab 18 - Tab 19 - Tab 20 + + Tab 1 + + + Tab 2 + + + Tab 3 + + + Tab 4 + + + Tab 5 + + + Tab 6 + + + Tab 7 + + + Tab 8 + + + Tab 9 + + + Tab 10 + + + Tab 11 + + + Tab 12 + + + Tab 13 + + + Tab 14 + + + Tab 15 + + + Tab 16 + + + Tab 17 + + + Tab 18 + + + Tab 19 + + + Tab 20 + Tab panel 1 Tab panel 2 @@ -343,10 +421,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea const App = () => ( - General - Custom - Advanced - Disabled + + General + + + Custom + + + Advanced + + + Disabled + This is the general tab panel. This is the custom tab panel. diff --git a/docs/components/tab-panel.md b/docs/components/tab-panel.md index 34ad4c48..e89be8ea 100644 --- a/docs/components/tab-panel.md +++ b/docs/components/tab-panel.md @@ -23,10 +23,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea const App = () => ( - General - Custom - Advanced - Disabled + + General + + + Custom + + + Advanced + + + Disabled + This is the general tab panel. This is the custom tab panel. diff --git a/docs/components/tag.md b/docs/components/tag.md index 21bf50df..3df75c8c 100644 --- a/docs/components/tag.md +++ b/docs/components/tag.md @@ -12,7 +12,6 @@ Tags are used as labels to organize things or to indicate a selection. Danger ``` - ```jsx react import { SlTag } from '@shoelace-style/shoelace/dist/react'; @@ -22,7 +21,7 @@ const App = () => ( Success Neutral Warning - Danger + Danger ); ``` @@ -66,9 +65,15 @@ import { SlTag } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - Small - Medium - Large + + Small + + + Medium + + + Large + ); ``` @@ -90,7 +95,7 @@ Use the `removable` attribute to add a remove button to the tag. div.addEventListener('sl-remove', event => { const tag = event.target; tag.style.opacity = '0'; - setTimeout(() => tag.style.opacity = '1', 2000); + setTimeout(() => (tag.style.opacity = '1'), 2000); }); @@ -114,7 +119,7 @@ const App = () => { function handleRemove(event) { const tag = event.target; tag.style.opacity = '0'; - setTimeout(() => tag.style.opacity = '1', 2000); + setTimeout(() => (tag.style.opacity = '1'), 2000); } return ( @@ -135,7 +140,7 @@ const App = () => { - ) + ); }; ``` diff --git a/docs/components/textarea.md b/docs/components/textarea.md index 3d4a30b7..9d37c915 100644 --- a/docs/components/textarea.md +++ b/docs/components/textarea.md @@ -11,9 +11,7 @@ Textareas collect data from the user and allow multiple lines of text. ```jsx react import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ?> This component works with standard `` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation. @@ -31,9 +29,7 @@ Use the `rows` attribute to change the number of text rows that get shown. ```jsx react import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Placeholders @@ -47,9 +43,7 @@ Use the `placeholder` attribute to add a placeholder. ```jsx react import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Filled Textareas @@ -63,9 +57,7 @@ Add the `filled` attribute to draw a filled textarea. ```jsx react import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Disabled @@ -79,9 +71,7 @@ Use the `disabled` attribute to disable a textarea. ```jsx react import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Sizes @@ -90,9 +80,9 @@ Use the `size` attribute to change a textarea's size. ```html preview -
+
-
+
``` @@ -121,9 +111,7 @@ Use the `label` attribute to give the textarea an accessible label. For labels t ```jsx react import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Help Text @@ -131,22 +119,13 @@ const App = () => ( Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. ```html preview - - + ``` ```jsx react import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Prevent Resizing @@ -160,9 +139,7 @@ By default, textareas can be resized vertically by the user. To prevent resizing ```jsx react import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` ### Expand with Content @@ -176,9 +153,7 @@ Textareas will automatically resize to expand to fit their content when `resize` ```jsx react import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; -const App = () => ( - -); +const App = () => ; ``` [component-metadata:sl-textarea] diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md index bea76349..84857525 100644 --- a/docs/components/tooltip.md +++ b/docs/components/tooltip.md @@ -20,7 +20,7 @@ import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Hover Me - + ); ``` @@ -238,7 +238,7 @@ import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Click to Toggle - + ); ``` @@ -270,10 +270,7 @@ const App = () => { return ( <> - setOpen(!open)} - > + setOpen(!open)}> Toggle Manually @@ -331,10 +328,8 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design ```html preview -
- I'm not just a tooltip, I'm a tooltip with HTML! -
- +
I'm not just a tooltip, I'm a tooltip with HTML!
+ Hover me ``` @@ -349,7 +344,7 @@ const App = () => (
Hover Me - + ); ``` diff --git a/docs/frameworks/react.md b/docs/frameworks/react.md index 693f96c7..0419c547 100644 --- a/docs/frameworks/react.md +++ b/docs/frameworks/react.md @@ -33,11 +33,7 @@ Every Shoelace component is available to import as a React component. Note that ```jsx import { SlButton } from '@shoelace-style/shoelace/dist/react'; -const MyComponent = () => ( - - Click me - -); +const MyComponent = () => Click me; export default MyComponent; ``` @@ -57,13 +53,8 @@ import { SlInput } from '@shoelace-style/shoelace/dist/react'; function MyComponent() { const [value, setValue] = useState(''); - return ( - setValue(event.target.value)} - /> - ) -}; + return setValue(event.target.value)} />; +} export default MyComponent; ``` @@ -78,13 +69,8 @@ import type SlInputElement from '@shoelace-style/shoelace/dist/components/input/ function MyComponent() { const [value, setValue] = useState(''); - return ( - setValue((event.target as SlInputElement).value)} - /> - ) -}; + return setValue((event.target as SlInputElement).value)} />; +} export default MyComponent; ``` @@ -124,8 +110,8 @@ Object.defineProperty(window, 'matchMedia', { removeListener: jest.fn(), // deprecated addEventListener: jest.fn(), removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), - })), + dispatchEvent: jest.fn() + })) }); ``` diff --git a/docs/frameworks/vue.md b/docs/frameworks/vue.md index 377c805e..70db345d 100644 --- a/docs/frameworks/vue.md +++ b/docs/frameworks/vue.md @@ -57,9 +57,9 @@ One caveat is there's currently [no support for v-model on custom elements](http ```html - - - + + ``` If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command. @@ -86,7 +86,7 @@ app.mount('#app'); Now you can use the `v-sl-model` directive to keep your data in sync! ```html - + ``` ?> Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md) diff --git a/docs/getting-started/form-controls.md b/docs/getting-started/form-controls.md index 3fae82c1..d85bdf3b 100644 --- a/docs/getting-started/form-controls.md +++ b/docs/getting-started/form-controls.md @@ -49,18 +49,18 @@ To make a field required, use the `required` prop. The form will not be submitte ```html preview -
+
Birds Cats Dogs Other -
+
-
+
Check me before submitting -

+

Submit @@ -68,20 +68,13 @@ To make a field required, use the `required` prop. The form will not be submitte const form = document.querySelector('.input-validation-required'); form.addEventListener('submit', event => { event.preventDefault(); - alert('All fields are valid!') + alert('All fields are valid!'); }); ``` ```jsx react -import { - SlButton, - SlCheckbox, - SlInput, - SlMenuItem, - SlSelect, - SlTextarea -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlCheckbox, SlInput, SlMenuItem, SlSelect, SlTextarea } from '@shoelace-style/shoelace/dist/react'; const App = () => { function handleSubmit(event) { @@ -103,8 +96,11 @@ const App = () => {
Check me before submitting -

- Submit +
+
+ + Submit + ); }; @@ -117,7 +113,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/ ```html preview
-
+
Submit
@@ -125,7 +121,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/ const form = document.querySelector('.input-validation-pattern'); form.addEventListener('submit', event => { event.preventDefault(); - alert('All fields are valid!') + alert('All fields are valid!'); }); ``` @@ -143,7 +139,9 @@ const App = () => {

- Submit + + Submit + ); }; @@ -156,9 +154,9 @@ Some input types will automatically trigger constraints, such as `email` and `ur ```html preview
-
+
-
+
Submit
@@ -166,7 +164,7 @@ Some input types will automatically trigger constraints, such as `email` and `ur const form = document.querySelector('.input-validation-type'); form.addEventListener('submit', event => { event.preventDefault(); - alert('All fields are valid!') + alert('All fields are valid!'); }); ``` @@ -186,7 +184,9 @@ const App = () => {

- Submit + + Submit + ); }; @@ -199,7 +199,7 @@ To create a custom validation error, use the `setCustomValidity` method. The for ```html preview
-
+
Submit
@@ -209,14 +209,14 @@ To create a custom validation error, use the `setCustomValidity` method. The for form.addEventListener('submit', event => { event.preventDefault(); - alert('All fields are valid!') + alert('All fields are valid!'); }); input.addEventListener('sl-input', () => { if (input.value === 'shoelace') { input.setCustomValidity(''); } else { - input.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!'); + input.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!"); } }); @@ -236,7 +236,7 @@ const App = () => { if (event.target.value === 'shoelace') { input.current.setCustomValidity(''); } else { - input.current.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!'); + input.current.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!"); } } @@ -247,15 +247,11 @@ const App = () => { return (
- +
- Submit + + Submit + ); }; @@ -276,9 +272,9 @@ The `invalid` attribute reflects the form control's validity, so you can style i color: var(--sl-color-danger-600); } - .custom-input[invalid]:not([disabled])::part(base) { + .custom-input[invalid]:not([disabled])::part(base) { border-color: var(--sl-color-danger-500); - } + } .custom-input[invalid]:focus-within::part(base) { box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500); @@ -330,7 +326,7 @@ Instead, toggle a class and target it in your stylesheet as shown below. -``` \ No newline at end of file +``` diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index b884b2bd..d844b780 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -9,7 +9,7 @@ If you're using a framework, make sure to check out the pages for [React](/frame The easiest way to install Shoelace is with the CDN. Just add the following tags to your page to get all components and the default light theme. ```html - + ``` @@ -20,7 +20,7 @@ The easiest way to install Shoelace is with the CDN. Just add the following tags If you prefer to use the [dark theme](/getting-started/themes#dark-theme) instead, use this code and add `` to the page. ```html - + ``` @@ -29,10 +29,17 @@ If you prefer to use the [dark theme](/getting-started/themes#dark-theme) instea If you want to load the light or dark theme based on the user's `prefers-color-scheme` setting, use this. The `media` attributes ensure that only the user's preferred theme stylesheet loads and the `onload` attribute sets the appropriate [theme class](/getting-started/themes) on the `` element. ```html - - + + ``` @@ -51,7 +58,7 @@ It's up to you to make the source files available to your app. One way to do thi Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created. ```html - + ``` @@ -88,7 +95,7 @@ Cherry picking can be done from your local install or [directly from the CDN](ht Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in. ```html - + ``` @@ -44,7 +45,6 @@ Now you have access to all of Shoelace's components! Try adding a button: ?> This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation). - ## New to Web Components? **TL;DR** – we finally have a way to create [our own HTML elements](https://html.spec.whatwg.org/multipage/custom-elements.html) and use them in any framework we want! @@ -73,11 +73,11 @@ With Shoelace, you can: - Incrementally adopt components as needed (no need to ditch your framework) - Upgrade or switch frameworks without rebuilding foundational components -If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come. +If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).\* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come. Whether you use Shoelace as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it. -*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska). +\*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska). ## Browser Support diff --git a/docs/getting-started/themes.md b/docs/getting-started/themes.md index bde4d93e..dd56da2b 100644 --- a/docs/getting-started/themes.md +++ b/docs/getting-started/themes.md @@ -8,7 +8,7 @@ A theme is nothing more than a stylesheet that uses the Shoelace API to define d ## Theme Basics -All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `sl-theme-light` and `sl-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power` +All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `sl-theme-light` and `sl-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power` All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots. @@ -26,7 +26,7 @@ To activate a theme, import it and apply the theme's class to the `` eleme ```html - + @@ -44,15 +44,15 @@ You can activate themes on various containers throughout the page. This example ```html - - + + - + @@ -71,8 +71,8 @@ The easiest way to customize Shoelace is to override one of the built-in themes. If you're customizing the light theme, you should scope your styles to the following selectors. ```css -:root, -:host, +:root, +:host, .sl-theme-light { /* your custom styles here */ } @@ -117,7 +117,7 @@ The dark theme works by taking the light theme's [color tokens](/tokens/color) a To install the dark theme, add the following to the `` section of your page. ```html - + ``` To activate the theme, apply the `sl-theme-dark` class to the `` element. diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md index 221df44f..4d408446 100644 --- a/docs/getting-started/usage.md +++ b/docs/getting-started/usage.md @@ -2,7 +2,7 @@ Shoelace components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more. -If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them. +If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them. ## Properties @@ -132,7 +132,7 @@ A clever way to use this method is to hide the `` with `opacity: 0` and ad body.ready { opacity: 1; - transition: .25s opacity; + transition: 0.25s opacity; } diff --git a/docs/resources/accessibility.md b/docs/resources/accessibility.md index 4760d454..f7c85dea 100644 --- a/docs/resources/accessibility.md +++ b/docs/resources/accessibility.md @@ -15,4 +15,4 @@ I’m fully aware that I may not get it right every time for every user, so I in This is the path forward. Together, we will continue to make Shoelace accessible to as many users as possible. — Cory LaViska
-_Creator of Shoelace_ \ No newline at end of file +_Creator of Shoelace_ diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 1862e794..4f0da733 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next - Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `` [#699](https://github.com/shoelace-style/shoelace/issues/699) +- Added Prettier and ESLint to markdown files - Fixed a bug that prevented forms from submitting when pressing Enter inside of an `` [#700](https://github.com/shoelace-style/shoelace/issues/700) - Improved `autofocus` behavior in Safari for `` and `` [#693](https://github.com/shoelace-style/shoelace/issues/693) - Removed feature detection for `focus({ preventScroll })` since it no longer works in Safari @@ -16,7 +17,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## 2.0.0-beta.70 - Added `tag-base`, `tag-content`, and `tag-remove-button` parts to `` [#682](https://github.com/shoelace-style/shoelace/discussions/682) -- Added support for focusing elements with `autofocus` when `` and `` open [#688](https://github.com/shoelace-style/shoelace/issues/688) +- Added support for focusing elements with `autofocus` when `` and `` open [#688](https://github.com/shoelace-style/shoelace/issues/688) - Added the `placement` attribute to `` [#687](https://github.com/shoelace-style/shoelace/pull/687) - Added Danish translation [#690](https://github.com/shoelace-style/shoelace/pull/690) - Fixed a bug that allowed `` to go into an incorrect state when activating the trigger while disabled [#684](https://github.com/shoelace-style/shoelace/pull/684) @@ -63,7 +64,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Refactored `` to use `Intl.NumberFormat` so it supports localization - Refactored themes so utility styles are no longer injected as `