From 97de7c3cc357331fd6b4ab5d73afb3d3ee20bb10 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 18 Jun 2020 17:36:27 -0400
Subject: [PATCH] Simplify selectors in demos

---
 docs/components/dialog.md  | 24 ++++++++++++------------
 docs/components/range.md   |  5 +++--
 docs/components/tooltip.md |  4 ++--
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index 6073f5622..4ce475942 100644
--- a/docs/components/dialog.md
+++ b/docs/components/dialog.md
@@ -7,18 +7,18 @@ Dialogs...
 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.
 
 ```html preview
-<sl-dialog label="Dialog" id="dialog-overview">
+<sl-dialog label="Dialog" class="dialog-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" type="primary" id="dialog-overview-close">Close</sl-button>
+  <sl-button slot="footer" type="primary">Close</sl-button>
 </sl-dialog>
 
-<sl-button id="dialog-overview-open">Open Dialog</sl-button>
+<sl-button>Open Dialog</sl-button>
 
 <script>
   (() => {
-    const dialog = document.querySelector('#dialog-overview');
-    const openButton = document.querySelector('#dialog-overview-open');
-    const closeButton = document.querySelector('#dialog-overview-close');
+    const dialog = document.querySelector('.dialog-overview');
+    const openButton = dialog.nextElementSibling;
+    const closeButton = dialog.querySelector('sl-button[slot="footer"]');
     
     openButton.addEventListener('click', () => dialog.show());
     closeButton.addEventListener('click', () => dialog.hide());
@@ -33,7 +33,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 ### Scrolling
 
 ```html preview
-<sl-dialog label="Dialog" id="dialog-scrolling">
+<sl-dialog label="Dialog" class="dialog-scrolling">
   <div style="height: 150vh; border: dashed 1px var(--sl-color-gray-80); padding: 0 1rem;">
     <p>
       By design, the dialog's height will never exceed that of the viewport. As such, the dialog won't scroll with the 
@@ -41,16 +41,16 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
     </p>
     <p>Give it a try! 👇</p>
   </div>
-  <sl-button slot="footer" type="primary" id="dialog-scrolling-close">Close</sl-button>
+  <sl-button slot="footer" type="primary">Close</sl-button>
 </sl-dialog>
 
-<sl-button id="dialog-scrolling-open">Open Dialog</sl-button>
+<sl-button>Open Dialog</sl-button>
 
 <script>
   (() => {
-    const dialog = document.querySelector('#dialog-scrolling');
-    const openButton = document.querySelector('#dialog-scrolling-open');
-    const closeButton = document.querySelector('#dialog-scrolling-close');
+    const dialog = document.querySelector('.dialog-scrolling');
+    const openButton = dialog.nextElementSibling;
+    const closeButton = dialog.querySelector('sl-button[slot="footer"]');
     
     openButton.addEventListener('click', () => dialog.show());
     closeButton.addEventListener('click', () => dialog.hide());
diff --git a/docs/components/range.md b/docs/components/range.md
index a22f7e58e..75df8189b 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -17,10 +17,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 ### Custom Formatter
 
 ```html preview
-<sl-range id="range-with-custom-formatter" min="0" max="100" step="1"></sl-range>
+<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-range>
 
 <script>
-  document.querySelector('#range-with-custom-formatter').tooltipFormatter = value => `Total - ${value}%`;
+  const range = document.querySelector('.range-with-custom-formatter');
+  range.tooltipFormatter = value => `Total - ${value}%`;
 </script>
 ```
 
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index 96901777c..61d7cc085 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -120,13 +120,13 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
 ```html preview
 <sl-button style="margin-right: 4rem;">Toggle Manually</sl-button>
 
-<sl-tooltip content="This is an avatar" trigger="manual">
+<sl-tooltip content="This is an avatar" class="manual-tooltip">
   <sl-avatar></sl-avatar>
 </sl-tooltip>
 
 
 <script>
-  const tooltip = document.querySelector('sl-tooltip[trigger="manual"]');
+  const tooltip = document.querySelector('.manual-tooltip');
   const toggle = tooltip.previousElementSibling;
 
   toggle.addEventListener('click', () => tooltip.open = !tooltip.open);