Merge pull request #119 from shoelace-style/docs

Add examples to docs

docs/docs/components/card.md

@@ -130,7 +130,7 @@ const App = () => (
 
 ### Card with Header
 
-Headers can be used to display titles and more.
+Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card.
 
 ```html {.example}
 <wa-card with-header class="card-header">
@@ -206,7 +206,7 @@ const App = () => (
 
 ### Card with Footer
 
-Footers can be used to display actions, summaries, or other relevant content.
+Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card.
 
 ```html {.example}
 <wa-card with-footer class="card-footer">
@@ -269,7 +269,7 @@ const App = () => (
 
 ### Images
 
-Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.
+Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card.
 
 ```html {.example}
 <wa-card with-image class="card-image">

docs/docs/components/dialog.md

@@ -49,6 +49,137 @@ const App = () => {
 
 ## Examples
 
+### Dialog with Header
+
+Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the dialog.
+
+```html {.example}
+<wa-dialog label="Dialog" with-header class="dialog-header">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</wa-dialog>
+
+<wa-button>Open Dialog</wa-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-header');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+```
+
+{% 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 (
+    <>
+      <WaDialog label="Dialog" with-header open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </WaDialog>
+
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+    </>
+  );
+};
+```
+{% 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.
+
+```html {.example}
+<wa-dialog label="Dialog" with-footer class="dialog-footer">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
+</wa-dialog>
+
+<wa-button>Open Dialog</wa-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-footer');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+```
+
+{% 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 (
+    <>
+      <WaDialog label="Dialog" with-footer open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
+          Close
+        </WaButton>
+      </WaDialog>
+
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+    </>
+  );
+};
+```
+{% 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.
+
+```html {.example}
+<wa-dialog label="Dialog" with-header with-footer class="dialog-dismiss">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
+</wa-dialog>
+
+<wa-button>Open Dialog</wa-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-dismiss');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+```
+
+{% 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 (
+    <>
+      <WaDialog label="Dialog" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
+          Close
+        </WaButton>
+      </WaDialog>
+
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+    </>
+  );
+};
+```
+{% endraw %}
+
 ### Custom Width
 
 Use the `--width` custom property to set the dialog's width.

docs/docs/components/drawer.md

@@ -49,6 +49,137 @@ const App = () => {
 
 ## Examples
 
+### Drawer with Header
+
+Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the drawer.
+
+```html {.example}
+<wa-drawer label="Drawer" with-header class="drawer-header">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</wa-drawer>
+
+<wa-button>Open Drawer</wa-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-header');
+  const openButton = drawer.nextElementSibling;
+
+  openButton.addEventListener('click', () => drawer.open = true);
+</script>
+```
+
+{% 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 (
+    <>
+      <WaDrawer label="Drawer" with-header open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </WaDrawer>
+
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+    </>
+  );
+};
+```
+{% 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.
+
+```html {.example}
+<wa-drawer label="Drawer" with-footer class="drawer-footer">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
+</wa-drawer>
+
+<wa-button>Open Drawer</wa-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-footer');
+  const openButton = drawer.nextElementSibling;
+
+  openButton.addEventListener('click', () => drawer.open = true);
+</script>
+```
+
+{% 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 (
+    <>
+      <WaDrawer label="Drawer" with-footer open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
+          Close
+        </WaButton>
+      </WaDrawer>
+
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+    </>
+  );
+};
+```
+{% endraw %}
+
+### Dismissing Drawers
+
+You can add the special `data-dialog="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.
+
+```html {.example}
+<wa-drawer label="Drawer" with-header with-footer class="drawer-dismiss">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
+</wa-drawer>
+
+<wa-button>Open Drawer</wa-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-dismiss');
+  const openButton = drawer.nextElementSibling;
+
+  openButton.addEventListener('click', () => drawer.open = true);
+</script>
+```
+
+{% 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 (
+    <>
+      <WaDrawer label="Drawer" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
+          Close
+        </WaButton>
+      </WaDrawer>
+
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+    </>
+  );
+};
+```
+{% 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`.

src/components/dialog/dialog.styles.ts

@@ -73,6 +73,7 @@ export default css`
   .dialog__header {
     flex: 0 0 auto;
     display: flex;
+    flex-wrap: wrap;
   }
 
   .dialog__title {
@@ -112,6 +113,7 @@ export default css`
   .dialog__footer {
     flex: 0 0 auto;
     display: flex;
+    flex-wrap: wrap;
     gap: var(--wa-space-xs);
     justify-content: end;
     padding: var(--footer-spacing);

src/components/drawer/drawer.styles.ts

@@ -138,6 +138,7 @@ export default css`
 
   .drawer__header {
     display: flex;
+    flex-wrap: wrap;
   }
 
   .drawer__title {
@@ -176,6 +177,7 @@ export default css`
 
   .drawer__footer {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--wa-space-xs);
     justify-content: end;
     padding: var(--footer-spacing);

src/themes/_utility.css

@@ -1,23 +0,0 @@
-/*
- * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
- * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".wa-"
- * to reduce the possibility of collisions.
- */
-
-@supports (scrollbar-gutter: stable) {
-  .wa-scroll-lock {
-    scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
-  }
-
-  .wa-scroll-lock body {
-    overflow: hidden !important;
-  }
-}
-
-/** This can go away once Safari has scrollbar-gutter support. */
-@supports not (scrollbar-gutter: stable) {
-  .wa-scroll-lock body {
-    padding-right: var(--wa-scroll-lock-size) !important;
-    overflow: hidden !important;
-  }
-}

src/themes/active.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_3_punchy.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
 
 :root,

src/themes/brutalist.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_2_chunky.css';
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
 

src/themes/classic.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_1_semiflat.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
 @import 'classic_components.css';
 

src/themes/default.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_1_semiflat.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
 
 :root,

src/themes/fa.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_2_chunky.css';
 @import 'cera_typeface.css';
 

src/themes/glassy.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_4_glossy.css';
 
 :root,

src/themes/mellow.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_0_flat.css';
 
 :root,

src/themes/migration.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_1_semiflat.css';
 
 :root,

src/themes/playful.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_1_semiflat.css';
 @import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300;400;500;600;700&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
 

src/themes/premium.css

@@ -1,4 +1,3 @@
-@import '_utility.css';
 @import 'depth_1_semiflat.css';
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');