diff --git a/docs/_utils/code-examples.js b/docs/_utils/code-examples.js index d576360af..06dbe910c 100644 --- a/docs/_utils/code-examples.js +++ b/docs/_utils/code-examples.js @@ -22,8 +22,6 @@ export function codeExamplesPlugin(options = {}) { // Look for external links container.querySelectorAll('code.example').forEach(code => { const pre = code.closest('pre'); - const adjacentPre = pre.nextElementSibling?.localName === 'pre' ? pre.nextElementSibling : null; - const adjacentPreForReact = adjacentPre?.querySelector('code.react') ? adjacentPre.querySelector('code') : null; const hasButtons = !code.classList.contains('no-buttons'); const isOpen = code.classList.contains('open') || !hasButtons; const noEdit = code.classList.contains('no-edit'); @@ -41,18 +39,7 @@ export function codeExamplesPlugin(options = {}) { ${preview}
- - HTML - ${pre.outerHTML} - ${ - adjacentPreForReact - ? ` - React - ${adjacentPre.outerHTML} - ` - : '' - } - + ${pre.outerHTML}
${ hasButtons @@ -87,7 +74,6 @@ export function codeExamplesPlugin(options = {}) { `); pre.replaceWith(codeExample); - adjacentPre?.remove(); }); return doc.toString(); diff --git a/docs/docs/components/animated-image.md b/docs/docs/components/animated-image.md index 6cc22b616..84606fca9 100644 --- a/docs/docs/components/animated-image.md +++ b/docs/docs/components/animated-image.md @@ -11,19 +11,6 @@ layout: component.njk > ``` -{% raw %} -```jsx {.react} -import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image'; - -const App = () => ( - -); -``` -{% endraw %} - :::info This component uses `` to draw freeze frames, so images are subject to [cross-origin restrictions](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image). ::: @@ -41,16 +28,6 @@ Both GIF and WEBP images are supported. > ``` -{% raw %} -```jsx {.react} -import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image'; - -const App = () => ( - -); -``` -{% endraw %} - ### Setting a Width and Height To set a custom size, apply a width and/or height to the host element. @@ -64,20 +41,6 @@ To set a custom size, apply a width and/or height to the host element. ``` -{% raw %} -```jsx {.react} -import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image'; - -const App = () => ( - -); -``` -{% endraw %} - ### Customizing the Control Box You can change the appearance and location of the control box by targeting the `control-box` part in your styles. @@ -101,33 +64,3 @@ You can change the appearance and location of the control box by targeting the ` } ``` - -{% raw %} -```jsx {.react} -import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image'; - -const css = ` - .animated-image-custom-control-box::part(control-box) { - top: auto; - right: auto; - bottom: 1rem; - left: 1rem; - background-color: deeppink; - border: none; - color: pink; - } -`; - -const App = () => ( - <> - - - - -); -``` -{% endraw %} diff --git a/docs/docs/components/animation.md b/docs/docs/components/animation.md index 31208969b..d2a261b0c 100644 --- a/docs/docs/components/animation.md +++ b/docs/docs/components/animation.md @@ -25,43 +25,6 @@ To animate an element, wrap it in `` and set an animation `name`. ``` -{% raw %} -```jsx {.react} -import WaAnimation from '@shoelace-style/shoelace/dist/react/animation'; - -const css = ` - .animation-overview .box { - display: inline-block; - width: 100px; - height: 100px; - background-color: var(--wa-color-brand-spot); - margin: 1.5rem; - } -`; - -const App = () => ( - <> -
- -
- - -
- - -
- - -
- -
- - - -); -``` -{% endraw %} - :::info The animation will only be applied to the first child element found in ``. ::: @@ -136,12 +99,6 @@ This example demonstrates all of the baked-in animations and easings. Animations ``` -{% raw %} -```jsx {.react} - -``` -{% endraw %} - ### Using Intersection Observer Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to control the animation when an element enters or exits the viewport. For example, scroll the box below in and out of your screen. The animation stops when the box exits the viewport and restarts each time it enters the viewport. @@ -179,58 +136,6 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/ ``` -{% raw %} -```jsx {.react} -import { useEffect, useRef, useState } from 'react'; -import WaAnimation from '@shoelace-style/shoelace/dist/react/animation'; - -const css = ` - .animation-scroll { - height: calc(100vh + 100px); - } - - .animation-scroll .box { - display: inline-block; - width: 100px; - height: 100px; - background-color: var(--wa-color-brand-spot); - } -`; - -const App = () => { - const animation = useRef(null); - 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; - } - }); - - if (box.current) { - observer.observe(box.current); - } - }, [box]); - - return ( - <> -
- -
- -
- - - - ); -}; -``` -{% endraw %} - ### Custom Keyframe Formats Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) to build custom animations. @@ -271,52 +176,6 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/ ``` -{% raw %} -```jsx {.react} -import WaAnimation from '@shoelace-style/shoelace/dist/react/animation'; - -const css = ` - .animation-keyframes .box { - width: 100px; - height: 100px; - background-color: var(--wa-color-brand-spot); - } -`; - -const App = () => ( - <> -
- -
- -
- - - -); -``` -{% endraw %} - ### Playing Animations on Demand Animations won't play until you apply the `play` attribute. You can omit it initially, then apply it on demand such as after a user interaction. In this example, the button will animate once every time the button is clicked. @@ -338,25 +197,3 @@ Animations won't play until you apply the `play` attribute. You can omit it init }); ``` - -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaAnimation from '@shoelace-style/shoelace/dist/react/animation'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => { - const [play, setPlay] = useState(false); - - return ( -
- setPlay(false)}> - setPlay(true)}> - Click me - - -
- ); -}; -``` -{% endraw %} diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md index 3cf9fd84b..5172bf6ab 100644 --- a/docs/docs/components/avatar.md +++ b/docs/docs/components/avatar.md @@ -10,14 +10,6 @@ By default, a generic icon will be shown. You can personalize avatars by adding ``` -{% raw %} -```jsx {.react} -import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar'; - -const App = () => ; -``` -{% endraw %} - ## Examples ### Images @@ -37,24 +29,6 @@ Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`. > ``` -{% raw %} -```jsx {.react} -import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar'; - -const App = () => ( - - -); -``` -{% endraw %} - ### Initials When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon. @@ -63,14 +37,6 @@ When you don't have an image to use, you can set the `initials` attribute to sho ``` -{% raw %} -```jsx {.react} -import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar'; - -const App = () => ; -``` -{% endraw %} - ### Custom Icons When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot. @@ -89,29 +55,6 @@ When no image or initials are set, an icon will be shown. The default avatar sho ``` -{% raw %} -```jsx {.react} -import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - <> - - - - - - - - - - - - -); -``` -{% endraw %} - ### Shapes Avatars can be shaped using the `shape` attribute. @@ -122,21 +65,6 @@ Avatars can be shaped using the `shape` attribute. ``` -{% raw %} -```jsx {.react} -import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - <> - - - - -); -``` -{% endraw %} - ### Avatar Groups You can group avatars with a few lines of CSS. @@ -174,48 +102,3 @@ You can group avatars with a few lines of CSS. } ``` - -{% raw %} -```jsx {.react} -import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const css = ` - .avatar-group wa-avatar:not(:first-of-type) { - margin-left: calc(-1 * var(--wa-space-m)); - } - - .avatar-group wa-avatar::part(base) { - border: solid 2px var(--wa-color-surface-default); - } -`; - -const App = () => ( - <> -
- - - - - - - -
- - - -); -``` -{% endraw %} diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md index 4a8f90f62..cf39605a7 100644 --- a/docs/docs/components/badge.md +++ b/docs/docs/components/badge.md @@ -8,14 +8,6 @@ layout: component.njk Badge ``` -{% raw %} -```jsx {.react} -import WaBadge from '@shoelace-style/shoelace/dist/react/badge'; - -const App = () => Badge; -``` -{% endraw %} - ## Examples ### Variants @@ -30,22 +22,6 @@ Set the `variant` attribute to change the badge's variant. Danger ``` -{% raw %} -```jsx {.react} -import WaBadge from '@shoelace-style/shoelace/dist/react/badge'; - -const App = () => ( - <> - Brand - Success - Neutral - Warning - Danger - -); -``` -{% endraw %} - ### Pill Badges Use the `pill` attribute to give badges rounded edges. @@ -58,32 +34,6 @@ Use the `pill` attribute to give badges rounded edges. Danger ``` -{% raw %} -```jsx {.react} -import WaBadge from '@shoelace-style/shoelace/dist/react/badge'; - -const App = () => ( - <> - - Brand - - - Success - - - Neutral - - - Warning - - - Danger - - -); -``` -{% endraw %} - ### Pulsating Badges Use the `pulse` attribute to draw attention to the badge with a subtle animation. @@ -104,42 +54,6 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation ``` -{% raw %} -```jsx {.react} -import WaBadge from '@shoelace-style/shoelace/dist/react/badge'; - -const css = ` - .badge-pulse wa-badge:not(:last-of-type) { - margin-right: 1rem; - } -`; - -const App = () => ( - <> -
- - 1 - - - 1 - - - 1 - - - 1 - - - 1 - -
- - - -); -``` -{% endraw %} - ### With Buttons One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button. @@ -161,36 +75,6 @@ One of the most common use cases for badges is attaching them to buttons. To mak ``` -{% raw %} -```jsx {.react} -import WaBadge from '@shoelace-style/shoelace/dist/react/badge'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - - Requests - 30 - - - - Warnings - - 8 - - - - - Errors - - 6 - - - -); -``` -{% endraw %} - ### With Menu Items When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly. @@ -202,33 +86,3 @@ When including badges in menu items, use the `suffix` slot to make sure they're Replies 12 ``` - -{% raw %} -```jsx {.react} -import WaBadge from '@shoelace-style/shoelace/dist/react/badge'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; -import WaMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label'; - -const App = () => ( - - Messages - - Comments - - 4 - - - - Replies - - 12 - - - -); -``` -{% endraw %} diff --git a/docs/docs/components/breadcrumb-item.md b/docs/docs/components/breadcrumb-item.md index 522a5ba46..6be9b1b81 100644 --- a/docs/docs/components/breadcrumb-item.md +++ b/docs/docs/components/breadcrumb-item.md @@ -15,25 +15,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; -import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - - - - Home - - Clothing - Shirts - -); -``` -{% endraw %} - :::info Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb). ::: diff --git a/docs/docs/components/breadcrumb.md b/docs/docs/components/breadcrumb.md index a47f2bf30..f894b1574 100644 --- a/docs/docs/components/breadcrumb.md +++ b/docs/docs/components/breadcrumb.md @@ -15,22 +15,6 @@ Breadcrumbs are usually placed before a page's main content with the current pag ``` -{% raw %} -```jsx {.react} -import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; -import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; - -const App = () => ( - - Catalog - Clothing - Women's - Shirts & Tops - -); -``` -{% endraw %} - ## Examples ### Breadcrumb Links @@ -51,25 +35,6 @@ For websites, you'll probably want to use links instead. You can make any breadc ``` -{% raw %} -```jsx {.react} -import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; -import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; - -const App = () => ( - - Homepage - - Our Services - - Digital Media - - Web Design - -); -``` -{% endraw %} - ### Custom Separators Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image. @@ -101,43 +66,6 @@ Use the `separator` slot to change the separator that goes between breadcrumb it ``` -{% raw %} -```jsx {.react} -import '@shoelace-style/shoelace/dist/components/icon/icon.js'; -import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; -import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; - -const App = () => ( - <> - - - First - Second - Third - - -
- - - - First - Second - Third - - -
- - - / - First - Second - Third - - -); -``` -{% endraw %} - ### Prefixes Use the `prefix` slot to add content before any breadcrumb item. @@ -153,25 +81,6 @@ Use the `prefix` slot to add content before any breadcrumb item. ``` -{% raw %} -```jsx {.react} -import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; -import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - - - - Home - - Articles - Traveling - -); -``` -{% endraw %} - ### Suffixes Use the `suffix` slot to add content after any breadcrumb item. @@ -187,25 +96,6 @@ Use the `suffix` slot to add content after any breadcrumb item. ``` -{% raw %} -```jsx {.react} -import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; -import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - - Documents - Policies - - Security - - - -); -``` -{% endraw %} - ### With Dropdowns Dropdown menus can be placed in a prefix or suffix slot to provide additional options. @@ -230,40 +120,3 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op ``` - -{% raw %} -```jsx {.react} -import { - WaBreadcrumb, - WaBreadcrumbItem, - WaButton, - WaDropdown, - WaIcon, - WaMenu, - WaMenuItem -} from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - - Homepage - Our Services - Digital Media - - Web Design - - - - - - - Web Design - - Web Development - Marketing - - - - -); -``` -{% endraw %} diff --git a/docs/docs/components/button-group.md b/docs/docs/components/button-group.md index 8d919e4cd..3f76f878b 100644 --- a/docs/docs/components/button-group.md +++ b/docs/docs/components/button-group.md @@ -12,21 +12,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; - -const App = () => ( - - Left - Center - Right - -); -``` -{% endraw %} - ## Examples ### Button Sizes @@ -57,41 +42,6 @@ All button sizes are supported, but avoid mixing sizes within the same button gr ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; - -const App = () => ( - <> - - Left - Center - Right - - -
-
- - - Left - Center - Right - - -
-
- - - Left - Center - Right - - -); -``` -{% endraw %} - ### Theme Buttons Theme buttons are supported through the button's `variant` attribute. @@ -136,59 +86,6 @@ Theme buttons are supported through the button's `variant` attribute. ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; - -const App = () => ( - <> - - Left - Center - Right - - -
-
- - - Left - Center - Right - - -
-
- - - Left - Center - Right - - -
-
- - - Left - Center - Right - - -
-
- - - Left - Center - Right - - -); -``` -{% endraw %} - ### Pill Buttons Pill buttons are supported through the button's `pill` attribute. @@ -217,59 +114,6 @@ Pill buttons are supported through the button's `pill` attribute. ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; - -const App = () => ( - <> - - - Left - - - Center - - - Right - - - -
-
- - - - Left - - - Center - - - Right - - - -
-
- - - - Left - - - Center - - - Right - - - -); -``` -{% endraw %} - ### Dropdowns in Button Groups Dropdowns can be placed inside button groups as long as the trigger is an `` element. @@ -289,33 +133,6 @@ Dropdowns can be placed inside button groups as long as the trigger is an ` ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Button - Button - - - Dropdown - - - Item 1 - Item 2 - Item 3 - - - -); -``` -{% endraw %} - ### Split Buttons 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. @@ -336,30 +153,6 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/co ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Save - - - - Save - Save as… - Save all - - - -); -``` -{% endraw %} - ### Tooltips in Button Groups Buttons can be wrapped in tooltips to provide more detail when the user interacts with them. @@ -376,28 +169,6 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact I'm on the right ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const App = () => ( - <> - - Left - Center - Right - - - I'm on the left - I'm in the middle - I'm on the right - -); -``` -{% endraw %} - ### Toolbar Example Create interactive toolbars with button groups. @@ -438,53 +209,3 @@ Create interactive toolbars with button groups. } ``` - -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const css = ` - .button-group-toolbar wa-button-group:not(:last-of-type) { - margin-right: var(--wa-space-xs); - } -`; - -const App = () => ( - <> -
- - - - - - - - - - - - - - - - -
- - Undo - Redo - Bold - Italic - Underline - - - Align Center - Align Right - - - -); -``` -{% endraw %} \ No newline at end of file diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index b6c84cd64..615550f9d 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -8,14 +8,6 @@ layout: component.njk Button ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => Button; -``` -{% endraw %} - ## Examples ### Variants @@ -30,22 +22,6 @@ Use the `variant` attribute to set the button's variant. Danger ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - Brand - Success - Neutral - Warning - Danger - -); -``` -{% endraw %} - ### Sizes Use the `size` attribute to change a button's size. @@ -56,20 +32,6 @@ Use the `size` attribute to change a button's size. Large ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - Small - Medium - Large - -); -``` -{% endraw %} - ### Outline Buttons Use the `outline` attribute to draw outlined buttons with transparent backgrounds. @@ -82,32 +44,6 @@ Use the `outline` attribute to draw outlined buttons with transparent background Danger ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - - Brand - - - Success - - - Neutral - - - Warning - - - Danger - - -); -``` -{% endraw %} - ### Pill Buttons Use the `pill` attribute to give buttons rounded edges. @@ -118,26 +54,6 @@ Use the `pill` attribute to give buttons rounded edges. Large ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - - Small - - - Medium - - - Large - - -); -``` -{% endraw %} - ### 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. @@ -148,26 +64,6 @@ Use the `text` variant to create text buttons that share the same size as regula Text ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - - Text - - - Text - - - Text - - -); -``` -{% endraw %} - ### Link Buttons It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes. @@ -179,27 +75,6 @@ It's often helpful to have a button that works like a link. This is possible by Disabled ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - Link - - New Window - - - Download - - - Disabled - - -); -``` -{% endraw %} - :::info When a `target` is set, the link will receive `rel="noreferrer noopener"` for [security reasons](https://mathiasbynens.github.io/rel-noopener/). ::: @@ -214,26 +89,6 @@ As expected, buttons can be given a custom width by setting the `width` attribut Large ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - - Small - - - Medium - - - Large - - -); -``` -{% endraw %} - ### Prefix and Suffix Icons Use the `prefix` and `suffix` slots to add icons. @@ -292,71 +147,6 @@ Use the `prefix` and `suffix` slots to add icons. ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - <> - - - Settings - - - - - Refresh - - - - - - Open - - -
-
- - - - Settings - - - - - Refresh - - - - - - Open - - -
-
- - - - Settings - - - - - Refresh - - - - - - Open - - -); -``` -{% endraw %} - ### Caret Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover. @@ -367,26 +157,6 @@ Use the `caret` attribute to add a dropdown indicator when a button will trigger Large ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - - Small - - - Medium - - - Large - - -); -``` -{% endraw %} - ### Loading Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. @@ -399,32 +169,6 @@ Use the `loading` attribute to make a button busy. The width will remain the sam Danger ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - - Brand - - - Success - - - Neutral - - - Warning - - - Danger - - -); -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable a button. @@ -437,36 +181,6 @@ Use the `disabled` attribute to disable a button. Danger ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; - -const App = () => ( - <> - - Brand - - - - Success - - - - Neutral - - - - Warning - - - - Danger - - -); -``` -{% endraw %} - ### 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. `wa-button[variant="brand"]`). diff --git a/docs/docs/components/callout.md b/docs/docs/components/callout.md index 649ce4b00..90b1dbf9e 100644 --- a/docs/docs/components/callout.md +++ b/docs/docs/components/callout.md @@ -11,20 +11,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaCallout from '@shoelace-style/shoelace/dist/react/callout'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - - - This is a standard callout. You can customize its content and even the icon. - -); -``` -{% endraw %} - ## Examples ### Variants @@ -71,60 +57,6 @@ Set the `variant` attribute to change the callout's variant. ``` -{% raw %} -```jsx {.react} -import WaCallout from '@shoelace-style/shoelace/dist/react/callout'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - <> - - - This is super informative -
- You can tell by how pretty the callout is. - - -
- - - - Your changes have been saved -
- You can safely exit the app now. - - -
- - - - Your settings have been updated -
- Settings will take effect on next login. - - -
- - - - Your session has ended -
- Please login again to continue. - - -
- - - - Your account has been deleted -
- We're very sorry to see you go! - - -); -``` -{% endraw %} - ### Without Icons Icons are optional. Simply omit the `icon` slot if you don't want them. @@ -132,16 +64,3 @@ Icons are optional. Simply omit the `icon` slot if you don't want them. ```html {.example} Nothing fancy here, just a simple callout. ``` - -{% raw %} -```jsx {.react} -import WaCallout from '@shoelace-style/shoelace/dist/react/callout'; - -const App = () => ( - - Nothing fancy here, just a simple callout. - -); -``` -{% endraw %} - diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md index 322076047..3477d035f 100644 --- a/docs/docs/components/card.md +++ b/docs/docs/components/card.md @@ -39,55 +39,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaCard from '@shoelace-style/shoelace/dist/react/card'; -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const css = ` - .card-overview { - max-width: 300px; - } - - .card-overview small { - color: var(--wa-color-text-quiet); - } - - .card-overview [slot="footer"] { - display: flex; - justify-content: space-between; - align-items: center; - } -`; - -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! -
- 6 weeks old -
- - More Info - - -
- - - - -); -``` -{% endraw %} - ## Examples ### Basic Card @@ -106,28 +57,6 @@ Basic cards aren't very exciting, but they can display any content you want them ``` -{% raw %} -```jsx {.react} -import WaCard from '@shoelace-style/shoelace/dist/react/card'; - -const css = ` - .card-basic { - max-width: 300px; - } -`; - -const App = () => ( - <> - - This is just a basic card. No image, no header, and no footer. Just your content. - - - - -); -``` -{% endraw %} - ### Card with Header Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card. @@ -163,47 +92,6 @@ Headers can be used to display titles and more. Use the `with-header` attribute ``` -{% raw %} -```jsx {.react} -import WaCard from '@shoelace-style/shoelace/dist/react/card'; -import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; - -const css = ` - .card-header { - max-width: 300px; - } - - .card-header [slot="header"] { - display: flex; - align-items: center; - justify-content: space-between; - } - - .card-header h3 { - margin: 0; - } - - .card-header wa-icon-button { - font-size: var(--wa-font-size-m); - } -`; - -const App = () => ( - <> - -
- Header Title - -
- This card has a header. You can put all sorts of things in it! - - - - -); -``` -{% endraw %} - ### Card with Footer Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card. @@ -231,42 +119,6 @@ Footers can be used to display actions, summaries, or other relevant content. Us ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaCard from '@shoelace-style/shoelace/dist/react/card'; -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const css = ` - .card-footer { - max-width: 300px; - } - - .card-footer [slot="footer"] { - display: flex; - justify-content: space-between; - align-items: center; - } -`; - -const App = () => ( - <> - - This card has a footer. You can put all sorts of things in it! -
- - - Preview - -
- - - - -); -``` -{% endraw %} - ### Images Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card. @@ -287,30 +139,3 @@ Card images are displayed atop the card and will stretch to fit. Use the `with-i } ``` - -{% raw %} -```jsx {.react} -import WaCard from '@shoelace-style/shoelace/dist/react/card'; - -const css = ` - .card-image { - max-width: 300px; - } -`; - -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. - - - - -); -``` -{% endraw %} diff --git a/docs/docs/components/carousel-item.md b/docs/docs/components/carousel-item.md index 88c1b4613..2b45bdb9c 100644 --- a/docs/docs/components/carousel-item.md +++ b/docs/docs/components/carousel-item.md @@ -39,48 +39,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; - -const App = () => ( - - - The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash - - - A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash - - - The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash - - - A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash - - - A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash - - -); -``` -{% endraw %} - :::info Additional demonstrations can be found in the [carousel examples](/components/carousel). ::: diff --git a/docs/docs/components/carousel.md b/docs/docs/components/carousel.md index 2138ce778..5f163fa6f 100644 --- a/docs/docs/components/carousel.md +++ b/docs/docs/components/carousel.md @@ -39,50 +39,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; - -const App = () => ( - <> - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - - -); -``` -{% endraw %} - ## Examples ### Pagination @@ -124,48 +80,6 @@ Use the `pagination` attribute to show the total number of slides and the curren ``` -{% raw %} -```jsx {.react} -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; - -const App = () => ( - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - -); -``` -{% endraw %} - ### Navigation Use the `navigation` attribute to show previous and next buttons. @@ -205,48 +119,6 @@ Use the `navigation` attribute to show previous and next buttons. ``` -{% raw %} -```jsx {.react} -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; - -const App = () => ( - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - -); -``` -{% endraw %} - ### Looping By default, the carousel will not advanced beyond the first and last slides. You can change this behavior and force the carousel to "wrap" with the `loop` attribute. @@ -286,48 +158,6 @@ By default, the carousel will not advanced beyond the first and last slides. You ``` -{% raw %} -```jsx {.react} -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; - -const App = () => ( - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - -); -``` -{% endraw %} - ### Autoplay The carousel will automatically advance when the `autoplay` attribute is used. To change how long a slide is shown before advancing, set `autoplay-interval` to the desired number of milliseconds. For best results, use the `loop` attribute when autoplay is enabled. Note that autoplay will pause while the user interacts with the carousel. @@ -367,48 +197,6 @@ The carousel will automatically advance when the `autoplay` attribute is used. T ``` -{% raw %} -```jsx {.react} -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; - -const App = () => ( - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - -); -``` -{% endraw %} - ### Mouse Dragging The carousel uses [scroll snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap) to position slides at various snap positions. This allows users to scroll through the slides very naturally, especially on touch devices. Unfortunately, desktop users won't be able to click and drag with a mouse, which can feel unnatural. Adding the `mouse-dragging` attribute can help with this. @@ -466,63 +254,6 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const App = () => { - const [isEnabled, setIsEnabled] = useState(false); - - return ( - <> - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - - - - - setIsEnabled(!isEnabled)}> - Enable mouse dragging - - - ); -}; -``` -{% endraw %} - ### Multiple Slides Per View The `slides-per-page` attribute makes it possible to display multiple slides at a time. You can also use the `slides-per-move` attribute to advance more than once slide at a time, if desired. @@ -538,24 +269,6 @@ The `slides-per-page` attribute makes it possible to display multiple slides at ``` -{% raw %} -```jsx {.react} -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; - -const App = () => ( - - Slide 1 - Slide 2 - Slide 3 - Slide 4 - Slide 5 - Slide 6 - -); -``` -{% endraw %} - ### Adding and Removing Slides The content of the carousel can be changed by adding or removing carousel items. The carousel will update itself automatically. @@ -628,67 +341,6 @@ The content of the carousel can be changed by adding or removing carousel items. ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; - -const css = ` - .dynamic-carousel { - --aspect-ratio: 3 / 2; - } - - .dynamic-carousel ~ .carousel-options { - display: flex; - justify-content: center; - margin-top: var(--wa-space-l); - } - - .dynamic-carousel wa-carousel-item { - flex: 0 0 100%; - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: var(--wa-font-size-2xl); - } -`; - -const App = () => { - const [slides, setSlides] = useState(['#204ed8', '#be133d', '#6e28d9']); - const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; - - const addSlide = () => { - setSlides([...slides, getRandomColor()]); - }; - - const removeSlide = () => { - setSlides(slides.slice(0, -1)); - }; - - return ( - <> - - {slides.map((color, i) => ( - - Slide {i} - - ))} - - -
- Add slide - Remove slide -
- - - - ); -}; -``` -{% endraw %} - ### Vertical Scrolling Setting the `orientation` attribute to `vertical` will render the carousel in a vertical layout. If the content of your slides vary in height, you will need to set amn explicit `height` or `max-height` on the carousel using CSS. @@ -746,70 +398,6 @@ Setting the `orientation` attribute to `vertical` will render the carousel in a ``` -{% raw %} -```jsx {.react} -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; - -const css = ` - .vertical { - max-height: 400px; - } - - .vertical::part(base) { - grid-template-areas: 'slides slides pagination'; - } - - .vertical::part(pagination) { - flex-direction: column; - } - - .vertical::part(navigation) { - transform: rotate(90deg); - display: flex; - } -`; - -const App = () => ( - <> - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - - - -); -``` -{% endraw %} - ### Aspect Ratio Use the `--aspect-ratio` custom property to customize the size of the carousel's viewport from the default value of 16/9. @@ -868,73 +456,6 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; -import WaOption from '@shoelace-style/shoelace/dist/react/option'; - -const App = () => { - const [aspectRatio, setAspectRatio] = useState('3/2'); - - return ( - <> - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - - - - - setAspectRatio(event.target.value)} - > - 1 / 1 - 3 / 2 - 16 / 9 - - - - - ); -}; -``` -{% endraw %} - ### Scroll Hint Use the `--scroll-hint` custom property to add inline padding in horizontal carousels and block padding in vertical carousels. This will make the closest slides slightly visible, hinting that there are more items in the carousel. @@ -974,53 +495,6 @@ Use the `--scroll-hint` custom property to add inline padding in horizontal caro ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ( - <> - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - - -); -``` -{% endraw %} - ### Gallery Example The carousel has a robust API that makes it possible to extend and customize. This example syncs the active slide with a set of thumbnails, effectively creating a gallery-style carousel. @@ -1139,128 +613,3 @@ The carousel has a robust API that makes it possible to extend and customize. Th } ``` - -{% raw %} -```jsx {.react} -import { useRef } from 'react'; -import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel'; -import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const css = ` - .carousel-thumbnails { - --slide-aspect-ratio: 3 / 2; - } - - .thumbnails { - display: flex; - justify-content: center; - } - - .thumbnails__scroller { - display: flex; - gap: var(--wa-space-s); - overflow-x: auto; - scrollbar-width: none; - scroll-behavior: smooth; - scroll-padding: var(--wa-space-s); - } - - .thumbnails__scroller::-webkit-scrollbar { - display: none; - } - - .thumbnails__image { - width: 64px; - height: 64px; - object-fit: cover; - - opacity: 0.3; - will-change: opacity; - transition: 250ms opacity; - - cursor: pointer; - } - - .thumbnails__image.active { - opacity: 1; - } -`; - -const images = [ - { - src: '/assets/examples/carousel/mountains.jpg', - alt: 'The sun shines on the mountains and trees (by Adam Kool on Unsplash' - }, - { - src: '/assets/examples/carousel/waterfall.jpg', - alt: 'A waterfall in the middle of a forest (by Thomas Kelly on Unsplash' - }, - { - src: '/assets/examples/carousel/sunset.jpg', - alt: 'The sun is setting over a lavender field (by Leonard Cotte on Unsplash' - }, - { - src: '/assets/examples/carousel/field.jpg', - alt: 'A field of grass with the sun setting in the background (by Sapan Patel on Unsplash' - }, - { - src: '/assets/examples/carousel/valley.jpg', - alt: 'A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash' - } -]; - -const App = () => { - const carouselRef = useRef(); - const thumbnailsRef = useRef(); - const [currentSlide, setCurrentSlide] = useState(0); - - useEffect(() => { - const thumbnails = Array.from(thumbnailsRef.current.querySelectorAll('.thumbnails__image')); - - thumbnails[currentSlide]..scrollIntoView({ - block: 'nearest' - }); - }, [currentSlide]); - - const handleThumbnailClick = (index) => { - carouselRef.current.goToSlide(index); - } - - const handleSlideChange = (event) => { - const slideIndex = e.detail.index; - setCurrentSlide(slideIndex); - } - - return ( - <> - - {images.map({ src, alt }) => ( - - {alt} - - )} - - -
-
- {images.map({ src, alt }, i) => ( - {`Thumbnail handleThumbnailClick(i)} - src={src} - /> - )} -
-
- - - ); -}; -``` -{% endraw %} diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md index 8b0ea536f..48229417c 100644 --- a/docs/docs/components/checkbox.md +++ b/docs/docs/components/checkbox.md @@ -8,14 +8,6 @@ layout: component.njk Checkbox ``` -{% raw %} -```jsx {.react} -import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; - -const App = () => Checkbox; -``` -{% endraw %} - :::info 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. ::: @@ -30,14 +22,6 @@ Use the `checked` attribute to activate the checkbox. Checked ``` -{% raw %} -```jsx {.react} -import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; - -const App = () => Checked; -``` -{% endraw %} - ### Indeterminate Use the `indeterminate` attribute to make the checkbox indeterminate. @@ -46,14 +30,6 @@ Use the `indeterminate` attribute to make the checkbox indeterminate. Indeterminate ``` -{% raw %} -```jsx {.react} -import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; - -const App = () => Indeterminate; -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable the checkbox. @@ -62,14 +38,6 @@ Use the `disabled` attribute to disable the checkbox. Disabled ``` -{% raw %} -```jsx {.react} -import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; - -const App = () => Disabled; -``` -{% endraw %} - ### Sizes Use the `size` attribute to change a checkbox's size. @@ -82,22 +50,6 @@ Use the `size` attribute to change a checkbox's size. Large ``` -{% raw %} -```jsx {.react} -import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; - -const App = () => ( - <> - Small -
- Medium -
- Large - -); -``` -{% endraw %} - ### Help Text Add descriptive help text to a switch with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. @@ -106,18 +58,10 @@ Add descriptive help text to a switch with the `help-text` attribute. For help t Label ``` -{% raw %} -```jsx {.react} -import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; -const App = () => Label; - ### Custom Validity Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string. -``` -{% endraw %} - ```html {.example} Check me @@ -148,42 +92,4 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi }); }); -```` - -{% raw %} -```jsx {.react} -import { useEffect, useRef } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; - -const App = () => { - const checkbox = useRef(null); - const errorMessage = `Don't forget to check me!`; - - function handleChange() { - checkbox.current.setCustomValidity(checkbox.current.checked ? '' : errorMessage); - } - - function handleSubmit(event) { - event.preventDefault(); - alert('All fields are valid!'); - } - - useEffect(() => { - checkbox.current.setCustomValidity(errorMessage); - }, []); - - return ( - - - Check me - -
- - Submit - -
- ); -}; ``` -{% endraw %} diff --git a/docs/docs/components/color-picker.md b/docs/docs/components/color-picker.md index 96e95e306..e4f2dd861 100644 --- a/docs/docs/components/color-picker.md +++ b/docs/docs/components/color-picker.md @@ -11,14 +11,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; - -const App = () => ; -``` -{% endraw %} - :::info 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. ::: @@ -33,14 +25,6 @@ Use the `value` attribute to set an initial value for the color picker. ``` -{% raw %} -```jsx {.react} -import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; - -const App = () => ; -``` -{% endraw %} - ### Opacity Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA, or HSVA based on `format`. @@ -49,14 +33,6 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled, ``` -{% raw %} -```jsx {.react} -import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; - -const App = () => ; -``` -{% endraw %} - ### Formats Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, `hsl`, and `hsv`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option. @@ -70,21 +46,6 @@ To prevent users from toggling the format themselves, add the `no-format-toggle` ``` -{% raw %} -```jsx {.react} -import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; - -const App = () => ( - <> - - - - - -); -``` -{% endraw %} - ### Swatches Use the `swatches` attribute to add convenient presets to the color picker. Any format the color picker can parse is acceptable (including CSS color names), but each value must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript. @@ -99,22 +60,6 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any > ``` -{% raw %} -```jsx {.react} -import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; - -const App = () => ( - -); -``` -{% endraw %} - ### Sizes Use the `size` attribute to change the color picker's trigger size. @@ -125,20 +70,6 @@ Use the `size` attribute to change the color picker's trigger size. ``` -{% raw %} -```jsx {.react} -import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; - -const App = () => ( - <> - - - - -); -``` -{% endraw %} - ### Inline The color picker can be rendered inline instead of in a dropdown using the `inline` attribute. @@ -146,11 +77,3 @@ The color picker can be rendered inline instead of in a dropdown using the `inli ```html {.example} ``` - -{% raw %} -```jsx {.react} -import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; - -const App = () => ; -``` -{% endraw %} \ No newline at end of file diff --git a/docs/docs/components/copy-button.md b/docs/docs/components/copy-button.md index cabdf7853..aa52c917a 100644 --- a/docs/docs/components/copy-button.md +++ b/docs/docs/components/copy-button.md @@ -8,16 +8,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; - -const App = () => ( - -); -``` -{% endraw %} - ## Examples ### Custom Labels @@ -33,21 +23,6 @@ Copy Buttons display feedback in a tooltip. You can customize the labels using t > ``` -{% raw %} -```jsx {.react} -import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; - -const App = () => ( - -); -``` -{% endraw %} - ### Custom Icons Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [``](/components/icon) or your own images. @@ -60,23 +35,6 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico ``` -{% raw %} -```jsx {.react} -import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; -import { WaIcon } from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - <> - - - - - - -); -``` -{% endraw %} - ### Copying Values From Other Elements Normally, the data that gets copied will come from the component's `value` attribute, but you can copy data from any element within the same document by providing its `id` to the `from` attribute. @@ -103,33 +61,6 @@ To copy data from an attribute, use `from="id[attr]"` where `id` is the id of th ``` -{% raw %} -```jsx {.react} -import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; -import { WaInput } from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ( - <> - {/* Copies the span's textContent */} - +1 (234) 456-7890 - - -

- - {/* Copies the input's "value" property */} - - - -

- - {/* Copies the link's "href" attribute */} - Web Awesome Website - - -); -``` -{% endraw %} - ### Handling Errors A copy error will occur if the value is an empty string, if the `from` attribute points to an id that doesn't exist, or if the browser rejects the operation for any reason. When this happens, the `wa-error` event will be emitted. @@ -140,16 +71,6 @@ This example demonstrates what happens when a copy error occurs. You can customi ``` -{% raw %} -```jsx {.react} -import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; - -const App = () => ( - -); -``` -{% endraw %} - ### Disabled Copy buttons can be disabled by adding the `disabled` attribute. @@ -158,16 +79,6 @@ Copy buttons can be disabled by adding the `disabled` attribute. ``` -{% raw %} -```jsx {.react} -import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; - -const App = () => ( - -); -``` -{% endraw %} - ### Changing Feedback Duration A success indicator is briefly shown after copying. You can customize the length of time the indicator is shown using the `feedback-duration` attribute. @@ -176,16 +87,6 @@ A success indicator is briefly shown after copying. You can customize the length ``` -{% raw %} -```jsx {.react} -import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; - -const App = () => ( - -); -``` -{% endraw %} - ### Custom Styles You can customize the button to your liking with CSS. @@ -227,47 +128,3 @@ You can customize the button to your liking with CSS. } ``` - -{% raw %} -```jsx {.react} -import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; - -const css = ` - .custom-styles { - --success-color: white; - --error-color: white; - color: white; - } - - .custom-styles::part(button) { - background-color: #ff1493; - border: solid 4px #ff7ac1; - border-right-color: #ad005c; - border-bottom-color: #ad005c; - border-radius: 0; - transition: 100ms scale ease-in-out, 100ms translate ease-in-out; - } - - .custom-styles::part(button):hover { - scale: 1.1; - } - - .custom-styles::part(button):active { - translate: 0 2px; - } - - .custom-styles::part(button):focus-visible { - outline: dashed 2px deeppink; - outline-offset: 4px; - } -`; - -const App = () => ( - <> - - - - -); -``` -{% endraw %} diff --git a/docs/docs/components/details.md b/docs/docs/components/details.md index 04022454c..2845a6f2a 100644 --- a/docs/docs/components/details.md +++ b/docs/docs/components/details.md @@ -13,19 +13,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaDetails from '@shoelace-style/shoelace/dist/react/details'; - -const App = () => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - -); -``` -{% endraw %} - ## Examples ### Disabled @@ -39,19 +26,6 @@ Use the `disable` attribute to prevent the details from expanding. ``` -{% raw %} -```jsx {.react} -import WaDetails from '@shoelace-style/shoelace/dist/react/details'; - -const App = () => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - -); -``` -{% endraw %} - ### Customizing the Summary Icon Use the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively. To disable the animation, override the `rotate` property on the `summary-icon` part as shown below. @@ -73,34 +47,6 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps ``` -{% raw %} -```jsx {.react} -import WaDetails from '@shoelace-style/shoelace/dist/react/details'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const css = ` - wa-details.custom-icon::part(summary-icon) { - /* Disable the expand/collapse animation */ - rotate: none; - } -`; - -const App = () => ( - <> - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. - - - - -); -``` -{% endraw %} - ### Grouping Details Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `wa-show` event. diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md index 132e725a4..20702e373 100644 --- a/docs/docs/components/dialog.md +++ b/docs/docs/components/dialog.md @@ -22,31 +22,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Close - - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - ## Examples ### Dialog with Header @@ -68,28 +43,6 @@ Headers can be used to display titles and more. Use the `with-header` attribute ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - ### Dialog with Footer Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the dialog. @@ -110,31 +63,6 @@ Footers can be used to display titles and more. Use the `with-footer` attribute ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Close - - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - ### Dismissing Dialogs You can add the special `data-dialog="dismiss"` attribute to a button inside the dialog to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the dialog programmatically. @@ -155,31 +83,6 @@ You can add the special `data-dialog="dismiss"` attribute to a button inside the ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Close - - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - ### Custom Width Use the `--width` custom property to set the dialog's width. @@ -200,31 +103,6 @@ Use the `--width` custom property to set the dialog's width. ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Close - - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - ### Scrolling By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user. @@ -247,40 +125,6 @@ By design, a dialog's height will never exceed that of the viewport. As such, di ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> -
-

Scroll down and give it a try! 👇

-
- - - Close - - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - ### Header Actions The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed. @@ -304,38 +148,6 @@ The header shows a functional close button by default. You can use the `header-a ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; -import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - window.open(location.href)} - /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Close - - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - ### Light Dismissal If you want the dialog to close when the user clicks on the overlay, add the `light-dismiss` attribute. @@ -356,38 +168,6 @@ If you want the dialog to close when the user clicks on the overlay, add the `li ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)} - > - This dialog will close when you click on the overlay. - - Close - - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - ### Preventing the Dialog from Closing By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the [[Escape]] key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur. @@ -420,47 +200,6 @@ You can use `event.detail.source` to determine which element triggered the reque ``` -{% raw %} -```jsx {.react} -import { useRef, useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; - -const App = () => { - const closeButton = useRef(null); - const [open, setOpen] = useState(false); - - // Prevent the dialog from closing when the user clicks on the overlay - function handleRequestClose(event) { - if (event.detail.source !== closeButton) { - event.preventDefault(); - } - - } - - return ( - <> - setOpen(false)} - > - This dialog will only close when you click the right button. - - Close - - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - ### Setting Initial Focus To give focus to a specific element when the dialog opens, use the `autofocus` attribute. @@ -481,30 +220,3 @@ To give focus to a specific element when the dialog opens, use the `autofocus` a openButton.addEventListener('click', () => dialog.open = true); ``` - -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDialog from '@shoelace-style/shoelace/dist/react/dialog'; -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - - - Close - - - - setOpen(true)}>Open Dialog - - ); -}; -``` -{% endraw %} - diff --git a/docs/docs/components/divider.md b/docs/docs/components/divider.md index a22de549f..463b1d5a6 100644 --- a/docs/docs/components/divider.md +++ b/docs/docs/components/divider.md @@ -8,14 +8,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; - -const App = () => ; -``` -{% endraw %} - ## Examples ### Width @@ -26,14 +18,6 @@ Use the `--width` custom property to change the width of the divider. ``` -{% raw %} -```jsx {.react} -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; - -const App = () => ; -``` -{% endraw %} - ### Color Use the `--color` custom property to change the color of the divider. @@ -42,14 +26,6 @@ Use the `--color` custom property to change the color of the divider. ``` -{% raw %} -```jsx {.react} -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; - -const App = () => ; -``` -{% endraw %} - ### Spacing Use the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements. @@ -76,28 +52,6 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
``` -{% raw %} -```jsx {.react} -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; - -const App = () => ( -
- First - - Middle - - Last -
-); -``` -{% endraw %} - ### Menu Dividers Use dividers in [menus](/components/menu) to visually group menu items. @@ -113,23 +67,3 @@ Use dividers in [menus](/components/menu) to visually group menu items. Option 6 ``` - -{% raw %} -```jsx {.react} -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - - Option 4 - Option 5 - Option 6 - -); -``` -{% endraw %} diff --git a/docs/docs/components/drawer.md b/docs/docs/components/drawer.md index bf339be14..b7c72f0b9 100644 --- a/docs/docs/components/drawer.md +++ b/docs/docs/components/drawer.md @@ -22,31 +22,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ## Examples ### Drawer with Header @@ -68,28 +43,6 @@ Headers can be used to display titles and more. Use the `with-header` attribute ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Drawer with Footer Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the drawer. @@ -110,31 +63,6 @@ Footers can be used to display titles and more. Use the `with-footer` attribute ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Dismissing Drawers You can add the special `data-drawer="dismiss"` attribute to a button inside the drawer to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the drawer programmatically. @@ -155,31 +83,6 @@ You can add the special `data-drawer="dismiss"` attribute to a button inside the ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Slide in From Start By default, drawers slide in from the end. To make the drawer slide in from the start, set the `placement` attribute to `start`. @@ -200,31 +103,6 @@ By default, drawers slide in from the end. To make the drawer slide in from the ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - This drawer slides in from the start. - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Slide in From Top To make the drawer slide in from the top, set the `placement` attribute to `top`. @@ -245,31 +123,6 @@ To make the drawer slide in from the top, set the `placement` attribute to `top` ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - This drawer slides in from the top. - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Slide in From Bottom To make the drawer slide in from the bottom, set the `placement` attribute to `bottom`. @@ -290,31 +143,6 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - This drawer slides in from the bottom. - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Custom Size Use the `--size` custom property to set the drawer's size. This will be applied to the drawer's width or height depending on its `placement`. @@ -335,31 +163,6 @@ Use the `--size` custom property to set the drawer's size. This will be applied ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)} style={{ '--size': '50vw' }}> - This drawer is always 50% of the viewport. - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Scrolling By design, a drawer's height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user. @@ -382,39 +185,6 @@ By design, a drawer's height will never exceed 100% of its container. As such, d ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> -
-

Scroll down and give it a try! 👇

-
- - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Header Actions The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed. @@ -438,33 +208,6 @@ The header shows a functional close button by default. You can use the `header-a ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; -import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - window.open(location.href)} /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Light Dismissal If you want the drawer to close when the user clicks on the overlay, add the `light-dismiss` attribute. @@ -485,38 +228,6 @@ If you want the drawer to close when the user clicks on the overlay, add the `li ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)} - > - This drawer will close when you click on the overlay. - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### Preventing the Drawer from Closing By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the [[Escape]] key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur. @@ -549,38 +260,6 @@ You can use `event.detail.source` to determine what triggered the request to clo ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; - -const App = () => { - const [open, setOpen] = useState(false); - - // Prevent the drawer from closing when the user clicks on the overlay - function handleRequestClose(event) { - if (event.detail.source === 'overlay') { - event.preventDefault(); - } - } - - return ( - <> - setOpen(false)}> - This drawer will not close when you click on the overlay. - - Save & Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - ### 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. @@ -601,30 +280,3 @@ By default, the drawer's panel will gain focus when opened. This allows a subseq openButton.addEventListener('click', () => drawer.open = true); ``` - -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer'; -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(false)}> - - - Close - - - - setOpen(true)}>Open Drawer - - ); -}; -``` -{% endraw %} - diff --git a/docs/docs/components/dropdown.md b/docs/docs/components/dropdown.md index fa4313251..22cd7edbd 100644 --- a/docs/docs/components/dropdown.md +++ b/docs/docs/components/dropdown.md @@ -31,44 +31,6 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - - Dropdown - - - Dropdown Item 1 - Dropdown Item 2 - Dropdown Item 3 - - - Checkbox - - Disabled - - - Prefix - - - - Suffix Icon - - - - -); -``` -{% endraw %} - ## Examples ### Getting the Selected Item @@ -98,35 +60,6 @@ When dropdowns are used with [menus](/components/menu), you can listen for the [ ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => { - function handleSelect(event) { - const selectedItem = event.detail.item; - console.log(selectedItem.value); - } - - return ( - - - Edit - - - Cut - Copy - Paste - - - ); -}; -``` -{% endraw %} - Alternatively, you can listen for the `click` event on individual menu items. Note that, using this approach, disabled menu items will still emit a `click` event. ```html {.example} @@ -153,42 +86,6 @@ Alternatively, you can listen for the `click` event on individual menu items. No ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => { - function handleCut() { - console.log('cut'); - } - - function handleCopy() { - console.log('copy'); - } - - function handlePaste() { - console.log('paste'); - } - - return ( - - - Edit - - - Cut - Copy - Paste - - - ); -}; -``` -{% endraw %} - ### Placement The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport. @@ -207,32 +104,6 @@ The preferred placement of the dropdown can be set with the `placement` attribut ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - - Edit - - - Cut - Copy - Paste - - Find - Replace - - -); -``` -{% endraw %} - ### Distance The distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels. @@ -251,32 +122,6 @@ The distance from the panel to the trigger can be customized using the `distance ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - - Edit - - - Cut - Copy - Paste - - Find - Replace - - -); -``` -{% endraw %} - ### Skidding The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels. @@ -295,32 +140,6 @@ The offset of the panel along the trigger can be customized using the `skidding` ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - - Edit - - - Cut - Copy - Paste - - Find - Replace - - -); -``` -{% endraw %} - ### Submenus To create a submenu, nest an `` element in a [menu item](/components/menu-item). @@ -357,58 +176,6 @@ To create a submenu, nest an `` element in a [menu item] ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const css = ` - .dropdown-hoist { - border: solid 2px var(--wa-color-surface-border); - padding: var(--wa-space-m); - overflow: hidden; - } -`; - -const App = () => ( - <> - - Edit - - - Undo - Redo - - Cut - Copy - Paste - - - Find - - Find… - Find Next - Find Previous - - - - Transformations - - Make uppercase - Make lowercase - Capitalize - - - - - -); -``` -{% endraw %} - :::warning As a UX best practice, avoid using more than one level of submenu when possible. ::: @@ -447,51 +214,3 @@ Dropdown panels will be clipped if they're inside a container that has `overflow } ``` - -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const css = ` - .dropdown-hoist { - border: solid 2px var(--wa-color-surface-border); - padding: var(--wa-space-m); - overflow: hidden; - } -`; - -const App = () => ( - <> -
- - - No Hoist - - - Item 1 - Item 2 - Item 3 - - - - - - Hoist - - - Item 1 - Item 2 - Item 3 - - -
- - - -); -``` -{% endraw %} diff --git a/docs/docs/components/format-bytes.md b/docs/docs/components/format-bytes.md index aab293ff6..8cfc63a1c 100644 --- a/docs/docs/components/format-bytes.md +++ b/docs/docs/components/format-bytes.md @@ -19,34 +19,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes'; -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => { - const [value, setValue] = useState(1000); - - return ( - <> - The file is in size. -
-
- setValue(event.target.value)} - /> - - ); -}; -``` -{% endraw %} - ## Examples ### Formatting Bytes @@ -60,24 +32,6 @@ Set the `value` attribute to a number to get the value in bytes. ``` -{% raw %} -```jsx {.react} -import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes'; - -const App = () => ( - <> - -
- -
- -
- - -); -``` -{% endraw %} - ### Formatting Bits To get the value in bits, set the `unit` attribute to `bit`. @@ -89,24 +43,6 @@ To get the value in bits, set the `unit` attribute to `bit`. ``` -{% raw %} -```jsx {.react} -import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes'; - -const App = () => ( - <> - -
- -
- -
- - -); -``` -{% endraw %} - ### Localization Use the `lang` attribute to set the number formatting locale. @@ -117,21 +53,3 @@ Use the `lang` attribute to set the number formatting locale.
``` - -{% raw %} -```jsx {.react} -import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes'; - -const App = () => ( - <> - -
- -
- -
- - -); -``` -{% endraw %} diff --git a/docs/docs/components/format-date.md b/docs/docs/components/format-date.md index f371e0d2e..0107bce1c 100644 --- a/docs/docs/components/format-date.md +++ b/docs/docs/components/format-date.md @@ -11,14 +11,6 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev ``` -{% raw %} -```jsx {.react} -import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date'; - -const App = () => ; -``` -{% endraw %} - 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. :::info @@ -51,39 +43,6 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h ``` -{% raw %} -```jsx {.react} -import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date'; - -const App = () => ( - <> - {/* Human-readable date */} - -
- - {/* Time */} - -
- - {/* Weekday */} - -
- - {/* Month */} - -
- - {/* Year */} - -
- - {/* No formatting options */} - - -); -``` -{% endraw %} - ### Hour Formatting 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`. @@ -93,20 +52,6 @@ By default, the browser will determine whether to use 12-hour or 24-hour time. T ``` -{% raw %} -```jsx {.react} -import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date'; - -const App = () => ( - <> - -
- - -); -``` -{% endraw %} - ### Localization Use the `lang` attribute to set the date/time formatting locale. @@ -116,19 +61,3 @@ English:
French:
Russian: ``` - -{% raw %} -```jsx {.react} -import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date'; - -const App = () => ( - <> - English: -
- French: -
- Russian: - -); -``` -{% endraw %} diff --git a/docs/docs/components/format-number.md b/docs/docs/components/format-number.md index 60fe75339..f0eeab9d3 100644 --- a/docs/docs/components/format-number.md +++ b/docs/docs/components/format-number.md @@ -22,33 +22,6 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number'; -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => { - const [value, setValue] = useState(1000); - - return ( - <> - -
-
- setValue(event.target.value)} - /> - - ); -}; -``` -{% endraw %} - ## Examples ### Percentages @@ -63,26 +36,6 @@ To get the value as a percent, set the `type` attribute to `percent`. ``` -{% raw %} -```jsx {.react} -import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number'; - -const App = () => ( - <> - -
- -
- -
- -
- - -); -``` -{% endraw %} - ### Localization Use the `lang` attribute to set the number formatting locale. @@ -93,22 +46,6 @@ German: ``` -{% raw %} -```jsx {.react} -import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number'; - -const App = () => ( - <> - English: -
- German: -
- Russian: - -); -``` -{% endraw %} - ### Currency 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. @@ -120,23 +57,3 @@ To format a number as a monetary value, set the `type` attribute to `currency` a
``` - -{% raw %} -```jsx {.react} -import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number'; - -const App = () => ( - <> - -
- -
- -
- -
- - -); -``` -{% endraw %} diff --git a/docs/docs/components/icon-button.md b/docs/docs/components/icon-button.md index 87a1f4157..cbc3e812f 100644 --- a/docs/docs/components/icon-button.md +++ b/docs/docs/components/icon-button.md @@ -10,14 +10,6 @@ For a full list of icons that come bundled with Web Awesome, refer to the [icon ``` -{% raw %} -```jsx {.react} -import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; - -const App = () => ; -``` -{% endraw %} - ## Examples ### Sizes @@ -30,20 +22,6 @@ Icon buttons inherit their parent element's `font-size`. ``` -{% raw %} -```jsx {.react} -import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; - -const App = () => ( - <> - - - - -); -``` -{% endraw %} - ### Colors Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part. @@ -71,39 +49,6 @@ Icon buttons are designed to have a uniform appearance, so their color is not in ``` -{% raw %} -```jsx {.react} -import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; - -const css = ` - .icon-button-color wa-icon-button::part(base) { - color: #b00091; - } - - .icon-button-color wa-icon-button::part(base):hover, - .icon-button-color wa-icon-button::part(base):focus { - color: #c913aa; - } - - .icon-button-color wa-icon-button::part(base):active { - color: #960077; - } -`; - -const App = () => ( - <> -
- - - -
- - - -); -``` -{% endraw %} - ### Link Buttons Use the `href` attribute to convert the button to a link. @@ -112,14 +57,6 @@ Use the `href` attribute to convert the button to a link. ``` -{% raw %} -```jsx {.react} -import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; - -const App = () => ; -``` -{% endraw %} - ### Icon Button with Tooltip Wrap a tooltip around an icon button to provide contextual information to the user. @@ -129,20 +66,6 @@ Wrap a tooltip around an icon button to provide contextual information to the us Settings ``` -{% raw %} -```jsx {.react} -import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const App = () => ( - <> - - Settings - -); -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable the icon button. @@ -150,11 +73,3 @@ Use the `disabled` attribute to disable the icon button. ```html {.example} ``` - -{% raw %} -```jsx {.react} -import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; - -const App = () => ; -``` -{% endraw %} \ No newline at end of file diff --git a/docs/docs/components/icon.md b/docs/docs/components/icon.md index f2ce74578..da303e383 100644 --- a/docs/docs/components/icon.md +++ b/docs/docs/components/icon.md @@ -23,19 +23,6 @@ Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regu ``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - <> - - - -); -``` -{% endraw %} - ### Colors Icons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color. @@ -67,41 +54,6 @@ Icons inherit their color from the current text color. Thus, you can set the `co
``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - <> -
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
- -); -``` -{% endraw %} - ### Sizing Icons are sized relative to the current font size. To change their size, set the `font-size` property on the icon itself or on a parent element as shown below. @@ -117,33 +69,6 @@ Icons are sized relative to the current font size. To change their size, set the
``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( -
- - - - - - - - - - - - - - - - -
-); -``` -{% endraw %} - ### Fixed Width Icons By default, icons have a 1em height and a variable width. Use the `fixed-width` attribute to render the host element in a 1em by 1em box. @@ -157,23 +82,6 @@ By default, icons have a 1em height and a variable width. Use the `fixed-width` ``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - <> - - - - - - - -); -``` -{% endraw %} - ### Labels For non-decorative icons, use the `label` attribute to announce it to assistive devices. @@ -182,14 +90,6 @@ For non-decorative icons, use the `label` attribute to announce it to assistive ``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ; -``` -{% endraw %} - ### Custom Icons Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries). @@ -198,14 +98,6 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a ``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ; -``` -{% endraw %} - ## Icon Libraries You can register additional icons to use with the `` component through icon libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used. diff --git a/docs/docs/components/image-comparer.md b/docs/docs/components/image-comparer.md index 485cee4c4..70cd2eb49 100644 --- a/docs/docs/components/image-comparer.md +++ b/docs/docs/components/image-comparer.md @@ -21,27 +21,6 @@ For best results, use images that share the same dimensions. The slider can be c ``` -{% raw %} -```jsx {.react} -import WaImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer'; - -const App = () => ( - - Grayscale version of kittens in a basket looking around. - Color version of kittens in a basket looking around. - -); -``` -{% endraw %} - ## Examples ### Initial Position @@ -62,24 +41,3 @@ Use the `position` attribute to set the initial position of the slider. This is /> ``` - -{% raw %} -```jsx {.react} -import WaImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer'; - -const App = () => ( - - A person sitting on bricks wearing untied boots. - A person sitting on a yellow curb tying shoelaces on a boot. - -); -``` -{% endraw %} diff --git a/docs/docs/components/include.md b/docs/docs/components/include.md index eb082b302..b78439069 100644 --- a/docs/docs/components/include.md +++ b/docs/docs/components/include.md @@ -12,14 +12,6 @@ The included content will be inserted into the `` element's default ``` -{% raw %} -```jsx {.react} -import WaInclude from '@shoelace-style/shoelace/dist/react/include'; - -const App = () => ; -``` -{% endraw %} - ## Examples ### Listening for Events diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md index 78f5f9c4a..116d878bd 100644 --- a/docs/docs/components/input.md +++ b/docs/docs/components/input.md @@ -8,14 +8,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ; -``` -{% endraw %} - :::info 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. ::: @@ -30,15 +22,6 @@ Use the `label` attribute to give the input an accessible label. For labels that ``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ; -``` -{% endraw %} - ### Help Text Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. @@ -47,15 +30,6 @@ Add descriptive help text to an input with the `help-text` attribute. For help t ``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ; -``` -{% endraw %} - ### Placeholders Use the `placeholder` attribute to add a placeholder. @@ -64,14 +38,6 @@ Use the `placeholder` attribute to add a placeholder. ``` -{% raw %} -```jsx {.react} -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ; -``` -{% endraw %} - ### Clearable Add the `clearable` attribute to add a clear button when the input has content. @@ -80,14 +46,6 @@ Add the `clearable` attribute to add a clear button when the input has content. ``` -{% raw %} -```jsx {.react} -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ; -``` -{% endraw %} - ### Toggle Password Add the `password-toggle` attribute to add a toggle button that will show the password when activated. @@ -96,14 +54,6 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa ``` -{% raw %} -```jsx {.react} -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ; -``` -{% endraw %} - ### Filled Inputs Add the `filled` attribute to draw a filled input. @@ -112,14 +62,6 @@ Add the `filled` attribute to draw a filled input. ``` -{% raw %} -```jsx {.react} -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ; -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable an input. @@ -128,14 +70,6 @@ Use the `disabled` attribute to disable an input. ``` -{% raw %} -```jsx {.react} -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ; -``` -{% endraw %} - ### Sizes Use the `size` attribute to change an input's size. @@ -148,22 +82,6 @@ Use the `size` attribute to change an input's size. ``` -{% raw %} -```jsx {.react} -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ( - <> - -
- -
- - -); -``` -{% endraw %} - ### Pill Use the `pill` attribute to give inputs rounded edges. @@ -176,22 +94,6 @@ Use the `pill` attribute to give inputs rounded edges. ``` -{% raw %} -```jsx {.react} -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ( - <> - -
- -
- - -); -``` -{% endraw %} - ### Input Types The `type` attribute controls the type of input the browser renders. @@ -204,22 +106,6 @@ The `type` attribute controls the type of input the browser renders. ``` -{% raw %} -```jsx {.react} -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ( - <> - -
- -
- - -); -``` -{% endraw %} - ### Prefix & Suffix Icons Use the `prefix` and `suffix` slots to add icons. @@ -241,32 +127,6 @@ Use the `prefix` and `suffix` slots to add icons. ``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const App = () => ( - <> - - - - -
- - - - -
- - - - - -); -``` -{% endraw %} - ### Customizing Label Position Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls. diff --git a/docs/docs/components/menu-item.md b/docs/docs/components/menu-item.md index d048f8b23..f5224d15a 100644 --- a/docs/docs/components/menu-item.md +++ b/docs/docs/components/menu-item.md @@ -24,37 +24,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - - - Checkbox - - Disabled - - - Prefix Icon - - - - Suffix Icon - - - -); -``` -{% endraw %} - ## Examples ### Prefix & Suffix @@ -83,40 +52,6 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s ``` -{% raw %} -```jsx {.react} -import WaBadge from '@shoelace-style/shoelace/dist/react/badge'; -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - - - Home - - - - - Messages - - 12 - - - - - - - - Settings - - -); -``` -{% endraw %} - ### Disabled Add the `disabled` attribute to disable the menu item so it cannot be selected. @@ -129,21 +64,6 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected. ``` -{% raw %} -```jsx {.react} -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Loading Use the `loading` attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed. @@ -156,21 +76,6 @@ Use the `loading` attribute to indicate that a menu item is busy. Like a disable ``` -{% raw %} -```jsx {.react} -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Checkbox Menu Items Set the `type` attribute to `checkbox` to create a menu item that will toggle on and off when selected. You can use the `checked` attribute to set the initial state. @@ -185,23 +90,6 @@ Checkbox menu items are visually indistinguishable from regular menu items. Thei ``` -{% raw %} -```jsx {.react} -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Autosave - - Check Spelling - - Word Wrap - -); -``` -{% endraw %} - ### Value & Selection The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `wa-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more. @@ -233,29 +121,3 @@ The `value` attribute can be used to assign a hidden value, such as a unique ide ``` -{% raw %} -```jsx {.react} -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => { - function handleSelect(event) { - const item = event.detail.item; - - // Toggle checked state - item.checked = !item.checked; - - // Log value - console.log(`Selected value: ${item.value}`); - } - - return ( - - Option 1 - Option 2 - Option 3 - - ); -}; -``` -{% endraw %} diff --git a/docs/docs/components/menu-label.md b/docs/docs/components/menu-label.md index 4ad281ee4..ad206a6d2 100644 --- a/docs/docs/components/menu-label.md +++ b/docs/docs/components/menu-label.md @@ -17,26 +17,3 @@ layout: component.njk Zucchini ``` - -{% raw %} -```jsx {.react} -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Fruits - Apple - Banana - Orange - - Vegetables - Broccoli - Carrot - Zucchini - -); -``` -{% endraw %} diff --git a/docs/docs/components/menu.md b/docs/docs/components/menu.md index f4bcf4526..7639846f8 100644 --- a/docs/docs/components/menu.md +++ b/docs/docs/components/menu.md @@ -18,26 +18,6 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu- ``` -{% raw %} -```jsx {.react} -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaMenu from '@shoelace-style/shoelace/dist/react/menu'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => ( - - Undo - Redo - - Cut - Copy - Paste - Delete - -); -``` -{% endraw %} - :::info Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you're building navigation, use `
``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer'; - -const css = ` - .mutation-overview wa-button { - margin-bottom: 1rem; - } -`; - -const variants = ['brand', 'success', 'neutral', 'warning', 'danger']; -let clicks = 0; - -const App = () => { - const [variant, setVariant] = useState('brand'); - - function handleClick() { - clicks++; - setVariant(variants[clicks % variants.length]); - } - - return ( - <> - console.log(event.detail)}> - - Click to mutate - - - -
- 👆 Click the button and watch the console - - - - ); -}; -``` -{% endraw %} - :::info When you create a mutation observer, you must indicate what changes it should respond to by including at least one of `attr`, `child-list`, or `char-data`. If you don't specify at least one of these attributes, no mutation events will be emitted. ::: @@ -143,55 +102,3 @@ Use the `child-list` attribute to watch for new child elements that are added or
``` - -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer'; - -const css = ` - .mutation-child-list .buttons { - display: flex; - gap: .25rem; - flex-wrap: wrap; - margin-bottom: 1rem; - } -`; - -let buttonCount = 0; - -const App = () => { - const [buttonIds, setButtonIds] = useState([]); - - function addButton() { - setButtonIds([...buttonIds, ++buttonCount]); - } - - function removeButton(id) { - setButtonIds(buttonIds.filter(i => i !== id)); - } - - return ( - <> -
- console.log(event.detail)}> -
- - Add button - - {buttonIds.map(id => ( - removeButton(id)}> - {id} - - ))} -
- -
- 👆 Add and remove buttons and watch the console - - - ); -}; -``` -{% endraw %} diff --git a/docs/docs/components/option.md b/docs/docs/components/option.md index ba2aa8efa..1fe954435 100644 --- a/docs/docs/components/option.md +++ b/docs/docs/components/option.md @@ -12,21 +12,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ## Examples ### Disabled @@ -41,23 +26,6 @@ Use the `disabled` attribute to disable an option and prevent it from being sele ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - - Option 2 - - Option 3 - -); -``` -{% endraw %} - ### Prefix & Suffix Add icons to the start and end of menu items using the `prefix` and `suffix` slots. diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md index 3849349ff..927b02789 100644 --- a/docs/docs/components/popup.md +++ b/docs/docs/components/popup.md @@ -101,130 +101,6 @@ Popup is a low-level utility built specifically for positioning elements. Do not ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; -import WaInput from '@shoelace-style/shoelace/dist/react/input'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const css = ` - .popup-overview wa-popup { - --arrow-color: var(--wa-color-brand-spot); - } - - .popup-overview span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 50px; - } - - .popup-overview .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } - - .popup-overview-options { - display: flex; - flex-wrap: wrap; - align-items: end; - gap: 1rem; - } - - .popup-overview-options wa-select { - width: 160px; - } - - .popup-overview-options wa-input { - width: 100px; - } - - .popup-overview-options + .popup-overview-options { - margin-top: 1rem; - } -`; - -const App = () => { - const [placement, setPlacement] = useState('top'); - const [distance, setDistance] = useState(0); - const [skidding, setSkidding] = useState(0); - const [active, setActive] = useState(true); - const [arrow, setArrow] = useState(false); - - return ( - <> -
- - -
- - -
- setPlacement(event.target.value)} - > - top - top-start - top-end - bottom - bottom-start - bottom-end - right - right-start - right-end - left - left-start - left-end - - setDistance(event.target.value)} - /> - setSkidding(event.target.value)} - /> -
- -
- setActive(event.target.checked)}> - Active - - setArrow(event.target.checked)}> - Arrow - -
-
- - - - ); -}; -``` -{% endraw %} - :::info A popup's anchor should not be styled with `display: contents` since the coordinates will not be eligible for calculation. However, if the anchor is a `` element, popup will use the first assigned element as the anchor. This behavior allows other components to pass anchors through more easily via composition. ::: @@ -272,53 +148,6 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const css = ` - .popup-active span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 50px; - } - - .popup-active .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } -`; - -const App = () => { - const [active, setActive] = useState(true); - - return ( - <> -
- - -
- - -
- setActive(event.target.checked)}> - Active - -
- - - - ); -}; -``` -{% endraw %} - ### External Anchors By default, anchors are slotted into the popup using the `anchor` slot. If your anchor needs to live outside of the popup, you can pass the anchor's `id` to the `anchor` attribute. Alternatively, you can pass an element reference to the `anchor` property to achieve the same effect without using an `id`. @@ -348,43 +177,6 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your ``` -{% raw %} -```jsx {.react} -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; - -const css = ` - #external-anchor { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 50px 0 0 50px; - } - - #external-anchor ~ wa-popup .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } -`; - -const App = () => { - return ( - <> - - - -
- - - - - ); -}; -``` -{% endraw %} - ### Placement Use the `placement` attribute to tell the popup the preferred placement of the popup. Note that the actual position will vary to ensure the panel remains in the viewport if you're using positioning features such as `flip` and `shift`. @@ -444,68 +236,6 @@ Since placement is preferred when using `flip`, you can observe the popup's curr ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const css = ` - .popup-placement span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 50px; - } - - .popup-placement .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } - - .popup-placement wa-select { - max-width: 280px; - } -`; - -const App = () => { - const [placement, setPlacement] = useState('top'); - - return ( -
-
- - -
- - - setPlacement(event.target.value)}> - top - top-start - top-end - bottom - bottom-start - bottom-end - right - right-start - right-end - left - left-start - left-end - -
- - -
- ); -}; -``` -{% endraw %} - ### Distance Use the `distance` attribute to change the distance between the popup and its anchor. A positive value will move the popup further away and a negative value will move it closer. @@ -550,61 +280,6 @@ Use the `distance` attribute to change the distance between the popup and its an ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const css = ` - .popup-distance span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 50px; - } - - .popup-distance .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } - - .popup-distance wa-range { - max-width: 260px; - } -`; - -const App = () => { - const [distance, setDistance] = useState(0); - - return ( - <> -
- - -
- - - setDistance(event.target.value)} - /> -
- - - - ); -}; -``` -{% endraw %} - ### Skidding The `skidding` attribute is similar to `distance`, but instead allows you to offset the popup along the anchor's axis. Both positive and negative values are allowed. @@ -649,61 +324,6 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const css = ` - .popup-skidding span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 50px; - } - - .popup-skidding .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } - - .popup-skidding wa-range { - max-width: 260px; - } -`; - -const App = () => { - const [skidding, setSkidding] = useState(0); - - return ( - <> -
- - -
- - - setSkidding(event.target.value)} - /> -
- - - - ); -}; -``` -{% endraw %} - ### Arrows Add an arrow to your popup with the `arrow` attribute. It's usually a good idea to set a `distance` to make room for the arrow. To adjust the arrow's color and size, use the `--arrow-color` and `--arrow-size` custom properties, respectively. You can also target the `arrow` part to add additional styles such as shadows and borders. @@ -795,112 +415,6 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const css = ` - .popup-arrow wa-popup { - --arrow-color: var(--wa-color-brand-spot); - } - - .popup-arrow span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 50px; - } - - .popup-arrow .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } - - .popup-arrow-options { - display: flex; - flex-wrap: wrap; - align-items: end; - gap: 1rem; - } - - .popup-arrow-options wa-select { - width: 160px; - } - - .popup-arrow-options + .popup-arrow-options { - margin-top: 1rem; - } -`; - -const App = () => { - const [placement, setPlacement] = useState('top'); - const [arrowPlacement, setArrowPlacement] = useState('anchor'); - const [arrow, setArrow] = useState(true); - - return ( - <> -
- - -
- - -
- setPlacement(event.target.value)} - > - top - top-start - top-end - bottom - bottom-start - bottom-end - right - right-start - right-end - left - left-start - left-end - - - setArrowPlacement(event.target.value)} - > - anchor - start - end - center - -
- -
- setArrow(event.target.checked)}> - Arrow - -
-
- - - - ); -}; -``` -{% endraw %} - ### Syncing with the Anchor's Dimensions Use the `sync` attribute to make the popup the same width or height as the anchor element. This is useful for controls that need the popup to stay the same width or height as the trigger. @@ -953,62 +467,6 @@ Use the `sync` attribute to make the popup the same width or height as the ancho ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const css = ` - .popup-sync span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 50px; - } - - .popup-sync .box { - width: 100%; - height: 100%; - min-width: 50px; - min-height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } - - .popup-sync wa-switch { - margin-top: 1rem; - } -`; - -const App = () => { - const [sync, setSync] = useState('width'); - - return ( - <> -
- - -
- - - setSync(event.target.value)}> - Width - Height - Both - None - -
- - - - ); -}; -``` -{% endraw %} - ### Positioning Strategy By default, the popup is positioned using an absolute positioning strategy. However, if your anchor is fixed or exists within a container that has `overflow: auto|hidden`, the popup risks being clipped. To work around this, you can use a fixed positioning strategy by setting the `strategy` attribute to `fixed`. @@ -1068,65 +526,6 @@ Toggle the switch and scroll the container to see the difference. ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const css = ` - .popup-strategy .overflow { - position: relative; - height: 300px; - border: solid 2px var(--wa-color-surface-border); - overflow: auto; - } - - .popup-strategy span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 150px 50px; - } - - .popup-strategy .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } - - .popup-strategy wa-switch { - margin-top: 1rem; - } -`; - -const App = () => { - const [fixed, setFixed] = useState(true); - - return ( - <> -
-
- - -
- -
- - setFixed(event.target.checked)}> - Fixed - -
- - - - ); -}; -``` -{% endraw %} - ### Flip When the popup doesn't have enough room in its preferred placement, it can automatically flip to keep it in view. To enable this, use the `flip` attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using `flip-fallback-placement` and `flip-fallback-strategy`. Additional options are available to control the flip behavior's boundary and padding. @@ -1179,62 +578,6 @@ Scroll the container to see how the popup flips to prevent clipping. ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const css = ` - .popup-flip .overflow { - position: relative; - height: 300px; - border: solid 2px var(--wa-color-surface-border); - overflow: auto; - } - - .popup-flip span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 150px 50px; - } - - .popup-flip .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } -`; - -const App = () => { - const [flip, setFlip] = useState(true); - - return ( - <> -
-
- - -
- -
- -
- setFlip(event.target.checked)}> - Flip - -
- - - - ); -}; -``` -{% endraw %} - ### Flip Fallbacks While using the `flip` attribute, you can customize the placement of the popup when the preferred placement doesn't have room. For this, use `flip-fallback-placements` and `flip-fallback-strategy`. @@ -1280,53 +623,6 @@ Scroll the container to see how the popup changes it's fallback placement to pre ``` -{% raw %} -```jsx {.react} -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; - -const css = ` - .popup-flip-fallbacks .overflow { - position: relative; - height: 300px; - border: solid 2px var(--wa-color-surface-border); - overflow: auto; - } - - .popup-flip-fallbacks span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 250px 50px; - } - - .popup-flip-fallbacks .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } -`; - -const App = () => { - return ( - <> -
-
- - -
- -
-
- - - - ); -}; -``` -{% endraw %} - ### Shift When a popup is longer than its anchor, it risks being clipped by an overflowing container. In this case, use the `shift` attribute to shift the popup along its axis and back into view. You can customize the shift behavior using `shiftBoundary` and `shift-padding`. @@ -1377,60 +673,6 @@ Toggle the switch to see the difference. ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const css = ` - .popup-shift .overflow { - position: relative; - border: solid 2px var(--wa-color-surface-border); - overflow: auto; - } - - .popup-shift span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 60px 0 0 10px; - } - - .popup-shift .box { - width: 300px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } -`; - -const App = () => { - const [shift, setShift] = useState(true); - - return ( - <> -
-
- - -
- -
- - setShift(event.target.checked)}> - Shift - -
- - - - ); -}; -``` -{% endraw %} - ### Auto-size Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from getting clipped. Possible values are `horizontal`, `vertical`, and `both`. You can use `autoSizeBoundary` and `auto-size-padding` to customize the behavior of this option. Auto-size works well with `flip`, but if you're using `auto-size-padding` make sure `flip-padding` is the same value. @@ -1492,69 +734,6 @@ Scroll the container to see the popup resize as its available space changes. ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const css = ` - .popup-auto-size .overflow { - position: relative; - height: 300px; - border: solid 2px var(--wa-color-surface-border); - overflow: auto; - } - - .popup-auto-size span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 250px 50px 100px 50px; - } - - .popup-auto-size .box { - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - - /* This sets the preferred size of the popup's content */ - width: 100px; - height: 200px; - - /* This sets the maximum dimensions and allows scrolling when auto-size kicks in */ - max-width: var(--auto-size-available-width); - max-height: var(--auto-size-available-height); - overflow: auto; - } -`; - -const App = () => { - const [autoSize, setAutoSize] = useState(true); - - return ( - <> -
-
- - -
- -
- -
- setAutoSize(event.target.checked)}> - Auto-size - -
- - - - ); -}; -``` -{% endraw %} - ### Hover Bridge When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the gap using an invisible element. This makes listening for events such as `mouseover` and `mouseout` more sane because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is active. For demonstration purposes, the bridge in this example is shown in orange. @@ -1608,80 +787,6 @@ When a gap exists between the anchor and the popup element, this option will add ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaRange from '@shoelace-style/shoelace/dist/react/range'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; -const css = ` - .popup-hover-bridge span[slot='anchor'] { - display: inline-block; - width: 150px; - height: 150px; - border: dashed 2px var(--wa-color-neutral-spot); - margin: 50px; - } - - .popup-hover-bridge .box { - width: 100px; - height: 50px; - background: var(--wa-color-brand-spot); - border-radius: var(--wa-corners-s); - } - - .popup-hover-bridge wa-range { - max-width: 260px; - margin-top: .5rem; - } - - .popup-hover-bridge wa-popup::part(hover-bridge) { - background: tomato; - opacity: .5; - } -`; -const App = () => { - const [hoverBridge, setHoverBridge] = useState(true); - const [distance, setDistance] = useState(10); - const [skidding, setSkidding] = useState(0); - return ( - <> -
- - -
- -
- setHoverBridge(event.target.checked)} - > - Hover Bridge -
- setDistance(event.target.value)} - /> - setSkidding(event.target.value)} - /> -
- - - ); -}; -``` -{% endraw %} - ### Virtual Elements In most cases, popups are anchored to an actual element. Sometimes, it can be useful to anchor them to a non-element. To do this, you can pass a `VirtualElement` to the anchor property. A virtual element must contain a function called `getBoundingClientRect()` that returns a [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) object as shown below. @@ -1773,93 +878,6 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc ``` -{% raw %} -```jsx {.react} -import { useRef, useState } from 'react'; -import WaPopup from '@shoelace-style/shoelace/dist/react/popup'; -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const css = ` - /* If you need to set a z-index, set it on the popup part like this */ - .popup-virtual-element wa-popup::part(popup) { - z-index: 1000; - pointer-events: none; - } - - .popup-virtual-element .circle { - width: 100px; - height: 100px; - border: solid 4px var(--wa-color-neutral-spot); - border-radius: 50%; - translate: -50px -50px; - animation: 1s virtual-cursor infinite; - } - - @keyframes virtual-cursor { - 0% { scale: 1; } - 50% { scale: 1.1; } - } -`; - -const App = () => { - const [enabled, setEnabled] = useState(false); - const [clientX, setClientX] = useState(0); - const [clientY, setClientY] = useState(0); - const popup = useRef(null); - const circle = useRef(null); - const virtualElement = { - getBoundingClientRect() { - return { - width: 0, - height: 0, - x: clientX, - y: clientY, - top: clientY, - left: clientX, - right: clientX, - bottom: clientY - }; - } - }; - - // Listen for the mouse to move - document.addEventListener('mousemove', handleMouseMove); - - // Update the virtual element as the mouse moves - function handleMouseMove(event) { - setClientX(event.clientX); - setClientY(event.clientY); - - // Reposition the popup when the virtual anchor moves - if (popup.active) { - popup.current.reposition(); - } - } - - return ( - <> -
- -
- - - setEnabled(event.target.checked)}> - Highlight mouse cursor - -
- - - - ); -}; -``` -{% endraw %} - ### Built-in Animations The following classes can be applied to the popup's `popup` part to animate it in or out programmatically. You can control the animation duration with the `--show-duration` and `--hide-duration` custom properties. diff --git a/docs/docs/components/progress-bar.md b/docs/docs/components/progress-bar.md index 12303866b..73c84de1c 100644 --- a/docs/docs/components/progress-bar.md +++ b/docs/docs/components/progress-bar.md @@ -8,14 +8,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; - -const App = () => ; -``` -{% endraw %} - ## Examples ### Labels @@ -26,14 +18,6 @@ Use the `label` attribute to label the progress bar and tell assistive devices h ``` -{% raw %} -```jsx {.react} -import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; - -const App = () => ; -``` -{% endraw %} - ### Custom Height Use the `--height` custom property to set the progress bar's height. @@ -42,14 +26,6 @@ Use the `--height` custom property to set the progress bar's height. ``` -{% raw %} -```jsx {.react} -import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; - -const App = () => ; -``` -{% endraw %} - ### Showing Values Use the default slot to show a value. @@ -81,42 +57,6 @@ Use the default slot to show a value. ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; - -const App = () => { - const [value, setValue] = useState(50); - - function adjustValue(amount) { - let newValue = value + amount; - if (newValue < 0) newValue = 0; - if (newValue > 100) newValue = 100; - setValue(newValue); - } - - return ( - <> - {value}% - -
- - adjustValue(-10)}> - - - - adjustValue(10)}> - - - - ); -}; -``` -{% endraw %} - ### Indeterminate The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown. @@ -124,11 +64,3 @@ The `indeterminate` attribute can be used to inform the user that the operation ```html {.example} ``` - -{% raw %} -```jsx {.react} -import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; - -const App = () => ; -``` -{% endraw %} diff --git a/docs/docs/components/progress-ring.md b/docs/docs/components/progress-ring.md index 048439d38..7952b9237 100644 --- a/docs/docs/components/progress-ring.md +++ b/docs/docs/components/progress-ring.md @@ -8,14 +8,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; - -const App = () => ; -``` -{% endraw %} - ## Examples ### Size @@ -26,14 +18,6 @@ Use the `--size` custom property to set the diameter of the progress ring. ``` -{% raw %} -```jsx {.react} -import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; - -const App = () => ; -``` -{% endraw %} - ### Track and Indicator Width Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator. @@ -42,14 +26,6 @@ Use the `--track-width` and `--indicator-width` custom properties to set the wid ``` -{% raw %} -```jsx {.react} -import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; - -const App = () => ; -``` -{% endraw %} - ### Colors To change the color, use the `--track-color` and `--indicator-color` custom properties. @@ -64,22 +40,6 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop > ``` -{% raw %} -```jsx {.react} -import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; - -const App = () => ( - -); -``` -{% endraw %} - ### Labels Use the `label` attribute to label the progress ring and tell assistive devices how to announce it. @@ -88,14 +48,6 @@ Use the `label` attribute to label the progress ring and tell assistive devices ``` -{% raw %} -```jsx {.react} -import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; - -const App = () => ; -``` -{% endraw %} - ### Showing Values Use the default slot to show a label inside the progress ring. @@ -126,41 +78,3 @@ Use the default slot to show a label inside the progress ring. }); ``` - -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; - -const App = () => { - const [value, setValue] = useState(50); - - function adjustValue(amount) { - let newValue = value + amount; - if (newValue < 0) newValue = 0; - if (newValue > 100) newValue = 100; - setValue(newValue); - } - - return ( - <> - - {value}% - - -
- - adjustValue(-10)}> - - - - adjustValue(10)}> - - - - ); -}; -``` -{% endraw %} diff --git a/docs/docs/components/qr-code.md b/docs/docs/components/qr-code.md index f2dfed9f9..09b9a1030 100644 --- a/docs/docs/components/qr-code.md +++ b/docs/docs/components/qr-code.md @@ -36,41 +36,6 @@ QR codes are useful for providing small pieces of information to users who can q ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; -import WaInput from '@shoelace-style/shoelace/dist/react/input'; - -const css = ` - .qr-overview { - max-width: 256px; - } - - .qr-overview wa-input { - margin-top: 1rem; - } -`; - -const App = () => { - const [value, setValue] = useState('https://shoelace.style/'); - - return ( - <> -
- -
- - setValue(event.target.value)} /> -
- - - - ); -}; -``` -{% endraw %} - ## Examples ### Colors @@ -81,14 +46,6 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s ``` -{% raw %} -```jsx {.react} -import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; - -const App = () => ; -``` -{% endraw %} - ### Size Use the `size` attribute to change the size of the QR code. @@ -97,14 +54,6 @@ Use the `size` attribute to change the size of the QR code. ``` -{% raw %} -```jsx {.react} -import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; - -const App = () => ; -``` -{% endraw %} - ### Radius Create a rounded effect with the `radius` attribute. @@ -113,14 +62,6 @@ Create a rounded effect with the `radius` attribute. ``` -{% raw %} -```jsx {.react} -import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; - -const App = () => ; -``` -{% endraw %} - ### Error Correction QR codes can be rendered with various levels of [error correction](https://www.qrcode.com/en/about/error_correction.html) that can be set using the `error-correction` attribute. This example generates four codes with the same value using different error correction levels. @@ -141,32 +82,3 @@ QR codes can be rendered with various levels of [error correction](https://www.q } ``` - -{% raw %} -```jsx {.react} -import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; - -const css = ` - .qr-error-correction { - display: flex; - flex-wrap: wrap; - gap: 1rem; - } -`; - -const App = () => { - return ( - <> -
- - - - -
- - - - ); -}; -``` -{% endraw %} diff --git a/docs/docs/components/radio-button.md b/docs/docs/components/radio-button.md index 96ec90c94..7fb63d81f 100644 --- a/docs/docs/components/radio-button.md +++ b/docs/docs/components/radio-button.md @@ -14,21 +14,6 @@ Radio buttons are designed to be used with [radio groups](/components/radio-grou ``` -{% raw %} -```jsx {.react} -import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ## Examples ### Checked States @@ -43,21 +28,6 @@ To set the initial value and checked state, use the `value` attribute on the con ``` -{% raw %} -```jsx {.react} -import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable a radio button. @@ -70,23 +40,6 @@ Use the `disabled` attribute to disable a radio button. ``` -{% raw %} -```jsx {.react} -import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1 - - Option 2 - - Option 3 - -); -``` -{% endraw %} - ### Sizes Use the `size` attribute to change a radio button's size. @@ -115,37 +68,6 @@ Use the `size` attribute to change a radio button's size. ``` -{% raw %} -```jsx {.react} -import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Pill Buttons Use the `pill` attribute to give radio buttons rounded edges. @@ -174,37 +96,6 @@ Use the `pill` attribute to give radio buttons rounded edges. ``` -{% raw %} -```jsx {.react} -import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Prefix and Suffix Icons Use the `prefix` and `suffix` slots to add icons. @@ -229,34 +120,6 @@ Use the `prefix` and `suffix` slots to add icons. ``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - - - Option 1 - - - - - Option 2 - - - - - - Option 3 - - -); -``` -{% endraw %} - ### Buttons with Icons You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly. @@ -284,35 +147,3 @@ You can omit button labels and use icons instead. Make sure to set a `label` att ``` - -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - - - - - - - - - - - - - - - - - - - - -); -``` -{% endraw %} \ No newline at end of file diff --git a/docs/docs/components/radio-group.md b/docs/docs/components/radio-group.md index 00fa89517..01ad37bb4 100644 --- a/docs/docs/components/radio-group.md +++ b/docs/docs/components/radio-group.md @@ -12,21 +12,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ## Examples ### Help Text @@ -41,21 +26,6 @@ Add descriptive help text to a radio group with the `help-text` attribute. For h ``` -{% raw %} -```jsx {.react} -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Radio Buttons [Radio buttons](/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/components/button-group) is used to group the buttons into a single, cohesive control. @@ -68,21 +38,6 @@ const App = () => ( ``` -{% raw %} -```jsx {.react} -import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Disabling Options Radios and radio buttons can be disabled by adding the `disabled` attribute to the respective options inside the radio group. @@ -95,23 +50,6 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t ``` -{% raw %} -```jsx {.react} -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1 - - Option 2 - - Option 3 - -); -``` -{% endraw %} - ### Sizing Options The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-buttons) will be determined by the Radio Group's `size` attribute. @@ -132,34 +70,6 @@ The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-bu ``` -{% raw %} -```jsx react -import { useState } from 'react'; -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => { - const [size, setSize] = useState('medium'); - - return ( - <> - setSize(event.target.value)} - > - Small - Medium - Large - - - ); -}; -``` -{% endraw %} - :::info [Radios](/components/radio) and [Radio Buttons](/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group. ::: @@ -190,41 +100,6 @@ Setting the `required` attribute to make selecting an option mandatory. If a val ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; -const App = () => { - function handleSubmit(event) { - event.preventDefault(); - alert('All fields are valid!'); - } - - return ( - - - - Option 1 - - - Option 2 - - - Option 3 - - -
- - Submit - - - ); -}; -``` -{% endraw %} - ### Custom Validity Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string. @@ -263,44 +138,3 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi }); ``` - -{% raw %} -```jsx {.react} -import { useEffect, useRef } from 'react'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; -const App = () => { - const radioGroup = useRef(null); - const errorMessage = 'You must choose this option'; - - function handleChange() { - radioGroup.current.setCustomValidity(radioGroup.current.value === '3' ? '' : errorMessage); - } - - function handleSubmit(event) { - event.preventDefault(); - alert('All fields are valid!'); - } - - useEffect(() => { - radio.current.setCustomValidity(errorMessage); - }, []); - - return ( -
- - Not me - Me neither - Choose me - -
- - Submit - -
- ); -}; -``` -{% endraw %} diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md index eb97102f3..316d1b1fc 100644 --- a/docs/docs/components/radio.md +++ b/docs/docs/components/radio.md @@ -14,21 +14,6 @@ Radios are designed to be used with [radio groups](/components/radio-group). ``` -{% raw %} -```jsx {.react} -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1
- Option 2
- Option 3 - -); -``` -{% endraw %} - :::info 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. ::: @@ -47,21 +32,6 @@ To set the initial value and checked state, use the `value` attribute on the con ``` -{% raw %} -```jsx {.react} -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1
- Option 2
- Option 3 - -); -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable a radio. @@ -74,21 +44,6 @@ Use the `disabled` attribute to disable a radio. ``` -{% raw %} -```jsx {.react} -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; -import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; - -const App = () => ( - - Option 1
- Option 2
- Option 3 - -); -``` -{% endraw %} - ## Sizes Add the `size` attribute to the [Radio Group](/components/radio-group) to change the radios' size. @@ -116,33 +71,3 @@ Add the `size` attribute to the [Radio Group](/components/radio-group) to change Large 3 ``` - -```jsx react -import WaRadio from '@shoelace-style/shoelace/dist/react/radio'; - -const App = () => ( - <> - - Small 1
- Small 2
- Small 3 - - -
- - - Medium 1
- Medium 2
- Medium 3 - - -
- - - Large 1
- Large 2
- Large 3 - - -); -``` \ No newline at end of file diff --git a/docs/docs/components/range.md b/docs/docs/components/range.md index 5490df8c3..f6bfd1318 100644 --- a/docs/docs/components/range.md +++ b/docs/docs/components/range.md @@ -8,14 +8,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ; -``` -{% endraw %} - :::info 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. ::: @@ -30,14 +22,6 @@ Use the `label` attribute to give the range an accessible label. For labels that ``` -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ; -``` -{% endraw %} - ### Help Text Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. @@ -46,14 +30,6 @@ Add descriptive help text to a range with the `help-text` attribute. For help te ``` -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ; -``` -{% endraw %} - ### Min, Max, and Step Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing. @@ -62,14 +38,6 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values ``` -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ; -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable a slider. @@ -78,14 +46,6 @@ Use the `disabled` attribute to disable a slider. ``` -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ; -``` -{% endraw %} - ### Tooltip Placement By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider. @@ -94,14 +54,6 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be ``` -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ; -``` -{% endraw %} - ### Disable the Tooltip To disable the tooltip, set `tooltip` to `none`. @@ -110,14 +62,6 @@ To disable the tooltip, set `tooltip` to `none`. ``` -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ; -``` -{% endraw %} - ### Custom Track Colors You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties. @@ -131,21 +75,6 @@ You can customize the active and inactive portions of the track using the `--tra > ``` -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ( - -); -``` -{% endraw %} - ### Custom Track Offset You can customize the initial offset of the active track using the `--track-active-offset` custom property. @@ -162,24 +91,6 @@ You can customize the initial offset of the active track using the `--track-acti > ``` -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => ( - -); -``` -{% endraw %} - ### Custom Tooltip Formatter You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument. @@ -192,11 +103,3 @@ You can change the tooltip's content by setting the `tooltipFormatter` property range.tooltipFormatter = value => `Total - ${value}%`; ``` - -{% raw %} -```jsx {.react} -import WaRange from '@shoelace-style/shoelace/dist/react/range'; - -const App = () => `Total - ${value}%`} />; -``` -{% endraw %} diff --git a/docs/docs/components/rating.md b/docs/docs/components/rating.md index c13a09068..073d4ec49 100644 --- a/docs/docs/components/rating.md +++ b/docs/docs/components/rating.md @@ -8,14 +8,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const App = () => ; -``` -{% endraw %} - ## Examples ### Labels @@ -26,14 +18,6 @@ Ratings are commonly identified contextually, so labels aren't displayed. Howeve ``` -{% raw %} -```jsx {.react} -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const App = () => ; -``` -{% endraw %} - ### Maximum Value Ratings are 0-5 by default. To change the maximum possible value, use the `max` attribute. @@ -42,14 +26,6 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max` ``` -{% raw %} -```jsx {.react} -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const App = () => ; -``` -{% endraw %} - ### Precision Use the `precision` attribute to let users select fractional ratings. @@ -58,14 +34,6 @@ Use the `precision` attribute to let users select fractional ratings. ``` -{% raw %} -```jsx {.react} -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const App = () => ; -``` -{% endraw %} - ### Symbol Sizes Set the `--symbol-size` custom property to adjust the size. @@ -74,14 +42,6 @@ Set the `--symbol-size` custom property to adjust the size. ``` -{% raw %} -```jsx {.react} -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const App = () => ; -``` -{% endraw %} - ### Readonly Use the `readonly` attribute to display a rating that users can't change. @@ -90,14 +50,6 @@ Use the `readonly` attribute to display a rating that users can't change. ``` -{% raw %} -```jsx {.react} -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const App = () => ; -``` -{% endraw %} - ### Disabled Use the `disable` attribute to disable the rating. @@ -106,14 +58,6 @@ Use the `disable` attribute to disable the rating. ``` -{% raw %} -```jsx {.react} -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const App = () => ; -``` -{% endraw %} - ### Detecting Hover Use the `wa-hover` event to detect when the user hovers over (or touch and drag) the rating. This lets you hook into values as the user interacts with the rating, but before they select a value. @@ -159,56 +103,6 @@ The event has a payload with `phase` and `value` properties. The `phase` propert ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent']; -const css = ` - .detect-hover span { - position: relative; - top: -4px; - left: 8px; - border-radius: var(--wa-corners-s); - background: var(--wa-color-neutral-spot); - color: var(--wa-color-neutral-text-on-spot); - text-align: center; - padding: 4px 6px; - } - - .detect-hover span:empty { - display: none; - } -`; - -function handleHover(event) { - rating.addEventListener('wa-hover', event => { - setFeedback(terms[event.detail.value]); - - // Clear feedback when hovering stops - if (event.detail.phase === 'end') { - setFeedback(''); - } - }); -} - -const App = () => { - const [feedback, setFeedback] = useState(true); - - return ( - <> -
- - {feedback} -
- - - ); -}; -``` -{% endraw %} - ### Custom Icons You can provide custom icons by passing a function to the `getSymbol` property. @@ -222,20 +116,6 @@ You can provide custom icons by passing a function to the `getSymbol` property. ``` -{% raw %} -```jsx {.react} -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -const App = () => ( - ''} - style={{ '--symbol-color-active': '#ff4136' }} - /> -); -``` -{% endraw %} - ### Value-based Icons You can also use the `getSymbol` property to render different icons based on value. @@ -252,16 +132,3 @@ You can also use the `getSymbol` property to render different icons based on val }; ``` - -{% raw %} -```jsx {.react} -import WaRating from '@shoelace-style/shoelace/dist/react/rating'; - -function getSymbol(value) { - const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh']; - return ``; -} - -const App = () => ; -``` -{% endraw %} diff --git a/docs/docs/components/relative-time.md b/docs/docs/components/relative-time.md index 4ae85ee66..d40b3290a 100644 --- a/docs/docs/components/relative-time.md +++ b/docs/docs/components/relative-time.md @@ -11,14 +11,6 @@ Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https:/ ``` -{% raw %} -```jsx {.react} -import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time'; - -const App = () => ; -``` -{% endraw %} - The `date` attribute determines when the date/time is calculated from. 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. :::info @@ -44,16 +36,6 @@ Use the `sync` attribute to update the displayed value automatically as time pas ``` -{% raw %} -```jsx {.react} -import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time'; - -const date = new Date(new Date().getTime() - 60000); - -const App = () => ; -``` -{% endraw %} - ### Formatting Styles You can change how the time is displayed using the `format` attribute. Note that some locales may display the same values for `narrow` and `short` formats. @@ -64,22 +46,6 @@ You can change how the time is displayed using the `format` attribute. Note that ``` -{% raw %} -```jsx {.react} -import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time'; - -const App = () => ( - <> - -
- -
- - -); -``` -{% endraw %} - ### Localization Use the `lang` attribute to set the desired locale. @@ -91,23 +57,3 @@ German:
Russian: ``` - -{% raw %} -```jsx {.react} -import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time'; - -const App = () => ( - <> - English: -
- Chinese: -
- German: -
- Greek: -
- Russian: - -); -``` -{% endraw %} diff --git a/docs/docs/components/resize-observer.md b/docs/docs/components/resize-observer.md index 3310bc59f..f83c03c04 100644 --- a/docs/docs/components/resize-observer.md +++ b/docs/docs/components/resize-observer.md @@ -33,32 +33,3 @@ The resize observer will report changes to the dimensions of the elements it wra } ``` - -{% raw %} -```jsx {.react} -import WaResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observer'; - -const css = ` - .resize-observer-overview div { - display: flex; - border: solid 2px var(--wa-color-surface-border); - align-items: center; - justify-content: center; - text-align: center; - padding: 4rem 2rem; - } -`; - -const App = () => ( - <> -
- console.log(event.detail)}> -
Resize this box and watch the console 👉
- -
- - - -); -``` -{% endraw %} diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md index 125c5be10..a216361bc 100644 --- a/docs/docs/components/select.md +++ b/docs/docs/components/select.md @@ -15,24 +15,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - Option 4 - Option 5 - Option 6 - -); -``` -{% endraw %} - :::info 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. ::: @@ -51,21 +33,6 @@ Use the `label` attribute to give the select an accessible label. For labels tha ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Help Text Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. @@ -78,21 +45,6 @@ Add descriptive help text to a select with the `help-text` attribute. For help t ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Novice - Intermediate - Advanced - -); -``` -{% endraw %} - ### Placeholders Use the `placeholder` attribute to add a placeholder. @@ -105,21 +57,6 @@ Use the `placeholder` attribute to add a placeholder. ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Clearable Use the `clearable` attribute to make the control clearable. The clear button only appears when an option is selected. @@ -132,21 +69,6 @@ Use the `clearable` attribute to make the control clearable. The clear button on ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Filled Selects Add the `filled` attribute to draw a filled select. @@ -159,21 +81,6 @@ Add the `filled` attribute to draw a filled select. ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Pill Use the `pill` attribute to give selects rounded edges. @@ -186,21 +93,6 @@ Use the `pill` attribute to give selects rounded edges. ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable a select. @@ -213,21 +105,6 @@ Use the `disabled` attribute to disable a select. ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Multiple To allow multiple options to be selected, use the `multiple` attribute. It's a good practice to use `clearable` when this option is enabled. To set multiple values at once, set `value` to a space-delimited list of values. @@ -243,24 +120,6 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - Option 4 - Option 5 - Option 6 - -); -``` -{% endraw %} - :::info Note that multi-select options may wrap, causing the control to expand vertically. You can use the `max-options-visible` attribute to control the maximum number of selected options to show at once. ::: @@ -280,22 +139,6 @@ When using `multiple`, the `value` _attribute_ uses space-delimited values to se ``` -{% raw %} -```jsx {.react} -import WaDivider from '@shoelace-style/shoelace/dist/react/divider'; -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Grouping Options Use `` to group listbox items visually. You can also use `` to provide labels, but they won't be announced by most assistive devices. @@ -314,24 +157,6 @@ Use `` to group listbox items visually. You can also use `` t ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - Option 4 - Option 5 - Option 6 - -); -``` -{% endraw %} - ### Sizes Use the `size` attribute to change a select's size. Note that size does not apply to listbox options. @@ -360,39 +185,6 @@ Use the `size` attribute to change a select's size. Note that size does not appl ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - <> - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -); -``` -{% endraw %} - ### Placement The preferred placement of the select's listbox can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport. Valid placements are `top` and `bottom`. @@ -405,21 +197,6 @@ The preferred placement of the select's listbox can be set with the `placement` ``` -{% raw %} -```jsx {.react} -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` -{% endraw %} - ### Prefix Icons Use the `prefix` slot to prepend an icon to the control. @@ -447,39 +224,6 @@ Use the `prefix` slot to prepend an icon to the control. ``` -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaOption from '@shoelace-style/shoelace/dist/react/option'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; - -const App = () => ( - <> - - - Option 1 - Option 2 - Option 3 - -
- - - Option 1 - Option 2 - Option 3 - -
- - - Option 1 - Option 2 - Option 3 - - -); -``` -{% endraw %} - ### Custom Tags When multiple options can be selected, you can provide custom tags by passing a function to the `getTag` property. Your function can return a string of HTML, a Lit Template, or an [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). The `getTag()` function will be called for each option. The first argument is an `` element and the second argument is the tag's index (its position in the tag list). diff --git a/docs/docs/components/skeleton.md b/docs/docs/components/skeleton.md index 9ccb06a35..2b72b4e3f 100644 --- a/docs/docs/components/skeleton.md +++ b/docs/docs/components/skeleton.md @@ -54,62 +54,6 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi ``` -{% raw %} -```jsx {.react} -import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; - -const css = ` - .skeleton-overview header { - display: flex; - align-items: center; - margin-bottom: 1rem; - } - - .skeleton-overview header wa-skeleton:last-child { - flex: 0 0 auto; - width: 30%; - } - - .skeleton-overview wa-skeleton { - margin-bottom: 1rem; - } - - .skeleton-overview wa-skeleton:nth-child(1) { - float: left; - width: 3rem; - height: 3rem; - margin-right: 1rem; - vertical-align: middle; - } - - .skeleton-overview wa-skeleton:nth-child(3) { - width: 95%; - } - - .skeleton-overview wa-skeleton:nth-child(4) { - width: 80%; - } -`; - -const App = () => ( - <> -
-
- - -
- - - - -
- - - -); -``` -{% endraw %} - ## Examples ### Effects @@ -139,37 +83,6 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s ``` -{% raw %} -```jsx {.react} -import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; - -const css = ` - .skeleton-effects { - font-size: var(--wa-font-size-s); - } - - .skeleton-effects wa-skeleton:not(:first-child) { - margin-top: 1rem; - } -`; - -const App = () => ( - <> -
- - None - - Sheen - - Pulse -
- - - -); -``` -{% endraw %} - ### Paragraphs Use multiple skeletons and some clever styles to simulate paragraphs. @@ -202,44 +115,6 @@ Use multiple skeletons and some clever styles to simulate paragraphs. ``` -{% raw %} -```jsx {.react} -import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; - -const css = ` - .skeleton-paragraphs wa-skeleton { - margin-bottom: 1rem; - } - - .skeleton-paragraphs wa-skeleton:nth-child(2) { - width: 95%; - } - - .skeleton-paragraphs wa-skeleton:nth-child(4) { - width: 90%; - } - - .skeleton-paragraphs wa-skeleton:last-child { - width: 50%; - } -`; - -const App = () => ( - <> -
- - - - - -
- - - -); -``` -{% endraw %} - ### Avatars Set a matching width and height to make a circle, square, or rounded avatar skeleton. @@ -269,41 +144,6 @@ Set a matching width and height to make a circle, square, or rounded avatar skel ``` -{% raw %} -```jsx {.react} -import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; - -const css = ` - .skeleton-avatars wa-skeleton { - display: inline-block; - width: 3rem; - height: 3rem; - margin-right: .5rem; - } - - .skeleton-avatars wa-skeleton:nth-child(1) { - --border-radius: 0; - } - - .skeleton-avatars wa-skeleton:nth-child(2) { - --border-radius: var(--wa-corners-s); - } -`; - -const App = () => ( - <> -
- - - -
- - - -); -``` -{% endraw %} - ### Custom Shapes Use the `--border-radius` custom property to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes. @@ -366,61 +206,6 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl ``` -{% raw %} -```jsx {.react} -import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; - -const css = ` - .skeleton-shapes wa-skeleton { - display: inline-flex; - width: 50px; - height: 50px; - } - - .skeleton-shapes .square::part(indicator) { - --border-radius: var(--wa-corners-s); - } - - .skeleton-shapes .circle::part(indicator) { - --border-radius: var(--wa-corners-circle); - } - - .skeleton-shapes .triangle::part(indicator) { - --border-radius: 0; - clip-path: polygon(50% 0, 0 100%, 100% 100%); - } - - .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%); - } - - .skeleton-shapes .comment::part(indicator) { - --border-radius: 0; - clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); - } - - .skeleton-shapes wa-skeleton:not(:last-child) { - margin-right: .5rem; - } -`; - -const App = () => ( - <> -
- - - - - -
- - - -); -``` -{% endraw %} - ### Custom Colors Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's color. @@ -428,28 +213,3 @@ Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's ```html {.example} ``` - -{% raw %} -```jsx {.react} -import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; - -const css = ` - .skeleton-avatars wa-skeleton { - display: inline-block; - width: 3rem; - height: 3rem; - margin-right: .5rem; - } - - .skeleton-avatars wa-skeleton:nth-child(1) { - --border-radius: 0; - } - - .skeleton-avatars wa-skeleton:nth-child(2) { - --border-radius: var(--wa-corners-s); - } -`; - -const App = () => ; -``` -{% endraw %} diff --git a/docs/docs/components/spinner.md b/docs/docs/components/spinner.md index 23d89a1e8..3b654a11e 100644 --- a/docs/docs/components/spinner.md +++ b/docs/docs/components/spinner.md @@ -8,14 +8,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner'; - -const App = () => ; -``` -{% endraw %} - ## Examples ### Size @@ -28,20 +20,6 @@ Spinners are sized based on the current font size. To change their size, set the ``` -{% raw %} -```jsx {.react} -import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner'; - -const App = () => ( - <> - - - - -); -``` -{% endraw %} - ### Track Width The width of the spinner's track can be changed by setting the `--track-width` custom property. @@ -50,21 +28,6 @@ The width of the spinner's track can be changed by setting the `--track-width` c ``` -{% raw %} -```jsx {.react} -import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner'; - -const App = () => ( - -); -``` -{% endraw %} - ### Color The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties. @@ -72,19 +35,3 @@ The spinner's colors can be changed by setting the `--indicator-color` and `--tr ```html {.example} ``` - -{% raw %} -```jsx {.react} -import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner'; - -const App = () => ( - -); -``` -{% endraw %} diff --git a/docs/docs/components/split-panel.md b/docs/docs/components/split-panel.md index c94f1dd28..618860292 100644 --- a/docs/docs/components/split-panel.md +++ b/docs/docs/components/split-panel.md @@ -21,41 +21,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; - -const App = () => ( - -
- Start -
-
- End -
- -); -``` -{% endraw %} - ## Examples ### Initial Position @@ -114,41 +79,6 @@ To set the initial position in pixels instead of a percentage, use the `position ``` -{% raw %} -```jsx {.react} -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; - -const App = () => ( - -
- Start -
-
- End -
- -); -``` -{% endraw %} - ### Vertical Add the `vertical` attribute to render the split panel in a vertical orientation where the start and end panels are stacked. You also need to set a height when using the vertical orientation. @@ -170,41 +100,6 @@ Add the `vertical` attribute to render the split panel in a vertical orientation ``` -{% raw %} -```jsx {.react} -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; - -const App = () => ( - -
- Start -
-
- End -
- -); -``` -{% endraw %} - ### Snapping To snap panels at specific positions while dragging, add the `snap` attribute with one or more space-separated values. Values must be in pixels or percentages. For example, to snap the panel at `100px` and `50%`, use `snap="100px 50%"`. You can also customize how close the divider must be before snapping with the `snap-threshold` attribute. @@ -256,75 +151,6 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi ``` -{% raw %} -```jsx {.react} -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; - -const css = ` - .split-panel-snapping { - position: relative; - } - - .split-panel-snapping-dots::before, - .split-panel-snapping-dots::after { - content: ''; - position: absolute; - bottom: -12px; - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--wa-color-neutral-spot); - transform: translateX(-3px); - } - - .split-panel-snapping-dots::before { - left: 100px; - } - - .split-panel-snapping-dots::after { - left: 50%; - } -`; - -const App = () => ( - <> -
- -
- Start -
-
- End -
- - -
-
- - - -); -``` -{% endraw %} - ### Disabled Add the `disabled` attribute to prevent the divider from being repositioned. @@ -346,41 +172,6 @@ Add the `disabled` attribute to prevent the divider from being repositioned. ``` -{% raw %} -```jsx {.react} -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; - -const App = () => ( - -
- Start -
-
- End -
- -); -``` -{% endraw %} - ### Setting the Primary Panel By default, both panels will grow or shrink proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the secondary panel will grow or shrink to fit the remaining space. You can set the primary panel to `start` or `end` using the `primary` attribute. @@ -420,61 +211,6 @@ Try resizing the example below with each option and notice how the panels respon ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; -import WaSelect from '@shoelace-style/shoelace/dist/react/select'; -import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; - -const App = () => { - const [primary, setPrimary] = useState(''); - - return ( - <> - -
- Start -
-
- End -
- - - setPrimary(event.target.value)} - > - None - Start - End - - - ); -}; -``` -{% endraw %} - ### Min & Max To set a minimum or maximum size of the primary panel, use the `--min` and `--max` custom properties. Since the secondary panel is flexible, size constraints can only be applied to the primary panel. If no primary panel is designated, these constraints will be applied to the `start` panel. @@ -498,41 +234,6 @@ This examples demonstrates how you can ensure both panels are at least 150px usi ``` -{% raw %} -```jsx {.react} -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; - -const App = () => ( - -
- Start -
-
- End -
- -); -``` -{% endraw %} - ### Nested Split Panels Create complex layouts that can be repositioned independently by nesting split panels. @@ -564,57 +265,6 @@ Create complex layouts that can be repositioned independently by nesting split p ``` -{% raw %} -```jsx {.react} -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; - -const App = () => ( - -
- Start -
-
- -
- Start -
-
- End -
- -
- -); -``` -{% endraw %} - ### Customizing the Divider You can target the `divider` part to apply CSS properties to the divider. To add a custom handle, slot an icon into the `divider` slot. When customizing the divider, make sure to think about focus styles for keyboard users. @@ -651,43 +301,6 @@ You can target the `divider` part to apply CSS properties to the divider. To add ``` -{% raw %} -```jsx {.react} -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const App = () => ( - - -
- Start -
-
- End -
- -); -``` -{% endraw %} - Here's a more elaborate example that changes the divider's color and width and adds a styled handle. ```html {.example} @@ -750,73 +363,3 @@ Here's a more elaborate example that changes the divider's color and width and a } ``` - -{% raw %} -```jsx {.react} -import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; - -const css = ` - .split-panel-divider wa-split-panel { - --divider-width: 4px; - } - - .split-panel-divider wa-split-panel::part(divider) { - background-color: var(--wa-color-red-50); - } - - .split-panel-divider wa-icon { - position: absolute; - border-radius: var(--wa-corners-xs); - background: var(--wa-color-red-50); - color: white; - padding: .5rem .25rem; - } - - .split-panel-divider wa-split-panel::part(divider):focus-visible { - background-color: var(--wa-color-blue-50); - } - - .split-panel-divider wa-split-panel:focus-within wa-icon { - background-color: var(--wa-color-blue-50); - color: white; - } -`; - -const App = () => ( - <> -
- - -
- Start -
-
- End -
- -
- - - -); -``` -{% endraw %} diff --git a/docs/docs/components/switch.md b/docs/docs/components/switch.md index 40c01e031..e915c6250 100644 --- a/docs/docs/components/switch.md +++ b/docs/docs/components/switch.md @@ -8,14 +8,6 @@ layout: component.njk Switch ``` -{% raw %} -```jsx {.react} -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const App = () => Switch; -``` -{% endraw %} - :::info 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. ::: @@ -30,14 +22,6 @@ Use the `checked` attribute to activate the switch. Checked ``` -{% raw %} -```jsx {.react} -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const App = () => Checked; -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable the switch. @@ -46,14 +30,6 @@ Use the `disabled` attribute to disable the switch. Disabled ``` -{% raw %} -```jsx {.react} -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const App = () => Disabled; -``` -{% endraw %} - ### Sizes Use the `size` attribute to change a switch's size. @@ -66,22 +42,6 @@ Use the `size` attribute to change a switch's size. Large ``` -{% raw %} -```jsx {.react} -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const App = () => ( - <> - Small -
- Medium -
- Large - -); -``` -{% endraw %} - ### Help Text Add descriptive help text to a switch with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. @@ -90,14 +50,6 @@ Add descriptive help text to a switch with the `help-text` attribute. For help t Label ``` -{% raw %} -```jsx {.react} -import WaSwitch from '@shoelace-style/shoelace/dist/react/checkbox'; - -const App = () => Label; -``` -{% endraw %} - ### Custom Styles Use the available custom properties to change how the switch is styled. @@ -105,19 +57,3 @@ Use the available custom properties to change how the switch is styled. ```html {.example} Really big ``` - -{% raw %} -```jsx {.react} -import WaSwitch from '@shoelace-style/shoelace/dist/react/switch'; - -const App = () => ( - -); -``` -{% endraw %} \ No newline at end of file diff --git a/docs/docs/components/tab-group.md b/docs/docs/components/tab-group.md index 206ab3eea..88a4d6e9b 100644 --- a/docs/docs/components/tab-group.md +++ b/docs/docs/components/tab-group.md @@ -20,36 +20,6 @@ Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab- ``` -{% raw %} -```jsx {.react} -import WaTab from '@shoelace-style/shoelace/dist/react/tab'; -import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; -import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; - -const App = () => ( - - - General - - - Custom - - - Advanced - - - Disabled - - - This is the general tab panel. - This is the custom tab panel. - This is the advanced tab panel. - This is a disabled tab panel. - -); -``` -{% endraw %} - ## Examples ### Setting the Active Tab @@ -86,36 +56,6 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`. ``` -{% raw %} -```jsx {.react} -import WaTab from '@shoelace-style/shoelace/dist/react/tab'; -import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; -import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; - -const App = () => ( - - - General - - - Custom - - - Advanced - - - Disabled - - - This is the general tab panel. - This is the custom tab panel. - This is the advanced tab panel. - This is a disabled tab panel. - -); -``` -{% endraw %} - ### Tabs on Start Tabs can be shown on the starting side by setting `placement` to `start`. @@ -134,36 +74,6 @@ Tabs can be shown on the starting side by setting `placement` to `start`. ``` -{% raw %} -```jsx {.react} -import WaTab from '@shoelace-style/shoelace/dist/react/tab'; -import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; -import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; - -const App = () => ( - - - General - - - Custom - - - Advanced - - - Disabled - - - This is the general tab panel. - This is the custom tab panel. - This is the advanced tab panel. - This is a disabled tab panel. - -); -``` -{% endraw %} - ### Tabs on End Tabs can be shown on the ending side by setting `placement` to `end`. @@ -182,36 +92,6 @@ Tabs can be shown on the ending side by setting `placement` to `end`. ``` -{% raw %} -```jsx {.react} -import WaTab from '@shoelace-style/shoelace/dist/react/tab'; -import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; -import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; - -const App = () => ( - - - General - - - Custom - - - Advanced - - - Disabled - - - This is the general tab panel. - This is the custom tab panel. - This is the advanced tab panel. - This is a disabled tab panel. - -); -``` -{% endraw %} - ### Closable Tabs You can make a tab closable by adding a close button next to the tab and inside the `nav` slot. You can position the button to your liking with CSS and handle close/restore behaviors by removing/appending the tab as desired. Note the use of `tabindex="-1"`, which prevents the close button from interfering with the tab order. The close button is still recognizable to the virtual cursor in screen readers. @@ -262,52 +142,6 @@ You can make a tab closable by adding a close button next to the tab and inside ``` -{% raw %} -```jsx {.react} -import WaTab from '@shoelace-style/shoelace/dist/react/tab'; -import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; -import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; - -const App = () => { - function handleClose(event) { - // - // 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('wa-tab-group'); - const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`); - - tab.remove(); - tabPanel.remove(); - } - - return ( - - - General - - - Closable 1 - - - Closable 2 - - - Closable 3 - - - This is the general tab panel. - This is the first closable tab panel. - This is the second closable tab panel. - This is the third closable tab panel. - - ); -}; -``` -{% endraw %} - ### Scrolling Tabs When there are more tabs than horizontal space allows, the nav will be scrollable. @@ -358,100 +192,6 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl ``` -{% raw %} -```jsx {.react} -import WaTab from '@shoelace-style/shoelace/dist/react/tab'; -import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; -import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; - -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 panel 1 - Tab panel 2 - Tab panel 3 - Tab panel 4 - Tab panel 5 - Tab panel 6 - Tab panel 7 - Tab panel 8 - Tab panel 9 - Tab panel 10 - Tab panel 11 - Tab panel 12 - Tab panel 13 - Tab panel 14 - Tab panel 15 - Tab panel 16 - Tab panel 17 - Tab panel 18 - Tab panel 19 - Tab panel 20 - -); -``` -{% endraw %} - ### Manual Activation When focused, keyboard users can press [[Left]] or [[Right]] to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting `activation="manual"` which will require the user to press [[Space]] or [[Enter]] before showing the tab panel (manual activation). @@ -469,33 +209,3 @@ When focused, keyboard users can press [[Left]] or [[Right]] to select the desir This is a disabled tab panel. ``` - -{% raw %} -```jsx {.react} -import WaTab from '@shoelace-style/shoelace/dist/react/tab'; -import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; -import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; - -const App = () => ( - - - General - - - Custom - - - Advanced - - - Disabled - - - This is the general tab panel. - This is the custom tab panel. - This is the advanced tab panel. - This is a disabled tab panel. - -); -``` -{% endraw %} diff --git a/docs/docs/components/tab-panel.md b/docs/docs/components/tab-panel.md index e5e6f966b..759663989 100644 --- a/docs/docs/components/tab-panel.md +++ b/docs/docs/components/tab-panel.md @@ -18,36 +18,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaTab from '@shoelace-style/shoelace/dist/react/tab'; -import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; -import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; - -const App = () => ( - - - General - - - Custom - - - Advanced - - - Disabled - - - This is the general tab panel. - This is the custom tab panel. - This is the advanced tab panel. - This is a disabled tab panel. - -); -``` -{% endraw %} - :::info Additional demonstrations can be found in the [tab group examples](/components/tab-group). ::: diff --git a/docs/docs/components/tag.md b/docs/docs/components/tag.md index 018d7be21..6d76d3f77 100644 --- a/docs/docs/components/tag.md +++ b/docs/docs/components/tag.md @@ -12,22 +12,6 @@ layout: component.njk Danger ``` -{% raw %} -```jsx {.react} -import WaTag from '@shoelace-style/shoelace/dist/react/tag'; - -const App = () => ( - <> - Brand - Success - Neutral - Warning - Danger - -); -``` -{% endraw %} - ## Examples ### Sizes @@ -40,20 +24,6 @@ Use the `size` attribute to change a tab's size. Large ``` -{% raw %} -```jsx {.react} -import WaTag from '@shoelace-style/shoelace/dist/react/tag'; - -const App = () => ( - <> - Small - Medium - Large - -); -``` -{% endraw %} - ### Pill Use the `pill` attribute to give tabs rounded edges. @@ -64,26 +34,6 @@ Use the `pill` attribute to give tabs rounded edges. Large ``` -{% raw %} -```jsx {.react} -import WaTag from '@shoelace-style/shoelace/dist/react/tag'; - -const App = () => ( - <> - - Small - - - Medium - - - Large - - -); -``` -{% endraw %} - ### Removable Use the `removable` attribute to add a remove button to the tag. @@ -111,43 +61,3 @@ Use the `removable` attribute to add a remove button to the tag. } ``` - -{% raw %} -```jsx {.react} -import WaTag from '@shoelace-style/shoelace/dist/react/tag'; - -const css = ` - .tags-removable wa-tag { - transition: var(--wa-transition-fast) opacity; - } -`; - -const App = () => { - function handleRemove(event) { - const tag = event.target; - tag.style.opacity = '0'; - setTimeout(() => (tag.style.opacity = '1'), 2000); - } - - return ( - <> -
- - Small - - - - Medium - - - - Large - -
- - - - ); -}; -``` -{% endraw %} diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md index 4df37293b..196cf20ca 100644 --- a/docs/docs/components/textarea.md +++ b/docs/docs/components/textarea.md @@ -8,14 +8,6 @@ layout: component.njk ``` -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ; -``` -{% endraw %} - :::info 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. ::: @@ -30,14 +22,6 @@ Use the `label` attribute to give the textarea an accessible label. For labels t ``` -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ; -``` -{% endraw %} - ### Help Text Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. @@ -46,14 +30,6 @@ Add descriptive help text to a textarea with the `help-text` attribute. For help ``` -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ; -``` -{% endraw %} - ### Rows Use the `rows` attribute to change the number of text rows that get shown. @@ -62,14 +38,6 @@ Use the `rows` attribute to change the number of text rows that get shown. ``` -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ; -``` -{% endraw %} - ### Placeholders Use the `placeholder` attribute to add a placeholder. @@ -78,14 +46,6 @@ Use the `placeholder` attribute to add a placeholder. ``` -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ; -``` -{% endraw %} - ### Filled Textareas Add the `filled` attribute to draw a filled textarea. @@ -94,14 +54,6 @@ Add the `filled` attribute to draw a filled textarea. ``` -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ; -``` -{% endraw %} - ### Disabled Use the `disabled` attribute to disable a textarea. @@ -110,14 +62,6 @@ Use the `disabled` attribute to disable a textarea. ``` -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ; -``` -{% endraw %} - ### Sizes Use the `size` attribute to change a textarea's size. @@ -130,22 +74,6 @@ Use the `size` attribute to change a textarea's size. ``` -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ( - <> - -
- -
- - -); -``` -{% endraw %} - ### Prevent Resizing By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`. @@ -154,14 +82,6 @@ By default, textareas can be resized vertically by the user. To prevent resizing ``` -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ; -``` -{% endraw %} - ### Expand with Content Textareas will automatically resize to expand to fit their content when `resize` is set to `auto`. @@ -169,11 +89,3 @@ Textareas will automatically resize to expand to fit their content when `resize` ```html {.example} ``` - -{% raw %} -```jsx {.react} -import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea'; - -const App = () => ; -``` -{% endraw %} diff --git a/docs/docs/components/tooltip.md b/docs/docs/components/tooltip.md index 64df3dd68..245526f53 100644 --- a/docs/docs/components/tooltip.md +++ b/docs/docs/components/tooltip.md @@ -12,20 +12,6 @@ A tooltip's target is based on the `for` attribute which points to an element id Hover Me ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const App = () => ( - <> - This is a tooltip - Hover Me - -); -``` -{% endraw %} - ## Examples ### Placement @@ -99,85 +85,6 @@ Use the `placement` attribute to set the preferred placement of the tooltip. ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const css = ` - - -); -``` -{% endraw %} - ### Click Trigger Set the `trigger` attribute to `click` to toggle the tooltip on click instead of hover. @@ -187,20 +94,6 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of Click again to dismiss ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const App = () => ( - <> - Click to Toggle - Click again to dismiss - -); -``` -{% endraw %} - ### Manual Trigger Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown. @@ -219,28 +112,6 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t ``` -{% raw %} -```jsx {.react} -import { useState } from 'react'; -import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar'; -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const App = () => { - const [open, setOpen] = useState(false); - - return ( - <> - setOpen(!open)}>Toggle Manually - - This is an avatar! - - - ); -}; -``` -{% endraw %} - ### Removing Arrows You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove them, set the value to `0` as shown below. @@ -250,20 +121,6 @@ You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow This is a tooltip with no arrow ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const App = () => ( - <> - No Arrow - This is a tooltip with no arrow - -); -``` -{% endraw %} - To override it globally, set it in a root block in your stylesheet after the Web Awesome stylesheet is loaded. ```css @@ -283,22 +140,6 @@ Use the default slot to create tooltips with HTML content. Tooltips are designed ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const App = () => ( - <> - Hover me - -
I'm not just a tooltip, I'm a tooltip with HTML!
- - -); -``` -{% endraw %} - ### Setting a Maximum Width Use the `--max-width` custom property to change the width the tooltip can grow to before wrapping occurs. @@ -310,22 +151,6 @@ Use the `--max-width` custom property to change the width the tooltip can grow t Hover me ``` -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const App = () => ( - <> - Hover me - - This tooltip will wrap after only 80 pixels. - - -); -``` -{% endraw %} - ### Hoisting Tooltips will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details. @@ -348,33 +173,3 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto| } ``` - -{% raw %} -```jsx {.react} -import WaButton from '@shoelace-style/shoelace/dist/react/button'; -import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; - -const css = ` - .tooltip-hoist { - border: solid 2px var(--wa-color-surface-border); - overflow: hidden; - padding: var(--wa-space-m); - position: relative; - } -`; - -const App = () => ( - <> -
- This is a tooltip - No Hoist - - This is a tooltip - Hoist -
- - - -); -``` -{% endraw %} \ No newline at end of file diff --git a/docs/docs/components/tree-item.md b/docs/docs/components/tree-item.md index b79930534..cf77244ae 100644 --- a/docs/docs/components/tree-item.md +++ b/docs/docs/components/tree-item.md @@ -17,27 +17,6 @@ layout: component.njk ``` - -{% raw %} -```jsx {.react} -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => ( - - - Item 1 - Item A - Item B - Item C - - Item 2 - Item 3 - -); -``` -{% endraw %} - ## Examples ### Nested tree items @@ -62,32 +41,6 @@ A tree item can contain other tree items. This allows the node to be expanded or ``` - -{% raw %} -```jsx {.react} -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => ( - - - Item 1 - - Item A - Item Z - Item Y - Item X - - Item B - Item C - - Item 2 - Item 3 - -); -``` -{% endraw %} - ### Selected Use the `selected` attribute to select a tree item initially. @@ -105,27 +58,6 @@ Use the `selected` attribute to select a tree item initially. ``` - -{% raw %} -```jsx {.react} -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => ( - - - Item 1 - Item A - Item B - Item C - - Item 2 - Item 3 - -); -``` -{% endraw %} - ### Expanded Use the `expanded` attribute to expand a tree item initially. @@ -147,29 +79,3 @@ Use the `expanded` attribute to expand a tree item initially. Item 3 ``` - - -{% raw %} -```jsx {.react} -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => ( - - - Item 1 - - Item A - Item Z - Item Y - Item X - - Item B - Item C - - Item 2 - Item 3 - -); -``` -{% endraw %} diff --git a/docs/docs/components/tree.md b/docs/docs/components/tree.md index cb31c7ae7..4de762cd4 100644 --- a/docs/docs/components/tree.md +++ b/docs/docs/components/tree.md @@ -34,44 +34,6 @@ layout: component.njk ``` - -{% raw %} -```jsx {.react} -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => ( - - - Deciduous - Birch - - Maple - Field maple - Red maple - Sugar maple - - Oak - - - - Coniferous - Cedar - Pine - Spruce - - - - Non-trees - Bamboo - Cactus - Fern - - -); -``` -{% endraw %} - ## Examples ### Selection Modes @@ -118,46 +80,6 @@ The `selection` attribute lets you change the selection behavior of the tree. ``` - -{% raw %} -```jsx {.react} -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => { - const [selection, setSelection] = useState('single'); - - return ( - <> - setSelection(event.target.value)}> - single - multiple - leaf - - -
- - - - Item 1 - - Item A - Item Z - Item Y - Item X - - Item B - Item C - - Item 2 - Item 3 - - - ); -}; -``` -{% endraw %} - ### Showing Indent Guides Indent guides can be drawn by setting `--indent-guide-width`. You can also change the color, offset, and style, using `--indent-guide-color`, `--indent-guide-style`, and `--indent-guide-offset`, respectively. @@ -198,44 +120,6 @@ Indent guides can be drawn by setting `--indent-guide-width`. You can also chang ``` - -{% raw %} -```jsx {.react} -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => ( - - - Deciduous - Birch - - Maple - Field maple - Red maple - Sugar maple - - Oak - - - - Coniferous - Cedar - Pine - Spruce - - - - Non-trees - Bamboo - Cactus - Fern - - -); -``` -{% endraw %} - ### Lazy Loading Use the `lazy` attribute on a tree item to indicate that the content is not yet present and will be loaded later. When the user tries to expand the node, the `loading` state is set to `true` and the `wa-lazy-load` event will be emitted to allow you to load data asynchronously. The item will remain in a loading state until its content is changed. @@ -268,39 +152,6 @@ If you want to disable this behavior after the first load, simply remove the `la ``` -{% raw %} -```jsx {.react} -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => { - const [childItems, setChildItems] = useState([]); - const [lazy, setLazy] = useState(true); - - const handleLazyLoad = () => { - // Simulate asynchronous loading - setTimeout(() => { - setChildItems(['Birch', 'Cedar', 'Maple', 'Pine']); - - // Disable lazy mode once the content has been loaded - setLazy(false); - }, 1000); - }; - - return ( - - - Available Trees - {childItems.map(item => ( - {item} - ))} - - - ); -}; -``` -{% endraw %} - ### Customizing the Expand and Collapse Icons Use the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively. To disable the animation, override the `rotate` property on the `expand-button` part as shown below. @@ -345,47 +196,6 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps ``` - -{% raw %} -```jsx {.react} -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => ( - - - - - - Deciduous - Birch - - Maple - Field maple - Red maple - Sugar maple - - Oak - - - - Coniferous - Cedar - Pine - Spruce - - - - Non-trees - Bamboo - Cactus - Fern - - -); -``` -{% endraw %} - ### With Icons Decorative icons can be used before labels to provide hints for each node. @@ -432,52 +242,3 @@ Decorative icons can be used before labels to provide hints for each node. ``` - -{% raw %} -```jsx {.react} -import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -import WaTree from '@shoelace-style/shoelace/dist/react/tree'; -import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; - -const App = () => { - return ( - - - - Root - - - Folder 1 - - File 1 - 1 - - - - File 1 - 2 - - - - File 1 - 3 - - - - - Folder 2 - - File 2 - 1 - - - - File 2 - 2 - - - - - File 1 - - - - ); -}; -``` -{% endraw %} diff --git a/src/themes/default.css b/src/themes/default.css index 688c1b52b..27de5bb80 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -291,7 +291,8 @@ --wa-corners-l: calc(var(--wa-corners-base) * 3rem); /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */ - --wa-corners-pill: 9999 --wa-corners-circle: 50%; + --wa-corners-pill: 9999px; + --wa-corners-circle: 50%; --wa-corners-sharp: 0; /**