Merge pull request #317 from shoelace-style/component-search

Add search filter to component index page

cspell.json

@@ -105,6 +105,7 @@
     "metaframeworks",
     "middlewares",
     "minlength",
+    "minmax",
     "monospace",
     "mousedown",
     "mousemove",
@@ -157,6 +158,7 @@
     "smartquotes",
     "spacebar",
     "stylesheet",
+    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",

docs/docs/components/index.md

@@ -4,17 +4,13 @@ description: Browse the library of customizable, framework-friendly web componen
 layout: page-outline
 ---
 
-<style>
-  wa-card#drawer-card::part(header) {
-    --spacing: 0;
-    justify-content: flex-end;
-    overflow: hidden;
-  }
-</style>
-
 <p class="index-summary">Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.</p>
 
-<div class="index-grid">
+<div id="component-filter">
+  <wa-input type="search" placeholder="Search components" clearable autofocus></wa-input>
+</div>
+
+<div id="component-grid" class="index-grid">
   <h2 class="index-category">Actions</h2>
   <a href="/docs/components/button">
     <wa-card with-header>
@@ -114,7 +110,7 @@ layout: page-outline
       <span class="page-name">Skeleton</span>
     </wa-card>
   </a>
-  <a href="/docs/components/spinner">
+  <a href="/docs/components/spinner" data-keywords="loader">
     <wa-card with-header>
       <div slot="header">
         {% include "svgs/spinner.njk" %}
@@ -198,7 +194,7 @@ layout: page-outline
       <span class="page-name">Color Picker</span>
     </wa-card>
   </a>
-  <a href="/docs/components/input">
+  <a href="/docs/components/input" data-keywords="textfield text field">
     <wa-card with-header>
       <div slot="header">
         {% include "svgs/input.njk" %}
@@ -238,7 +234,7 @@ layout: page-outline
       <span class="page-name">Select</span>
     </wa-card>
   </a>
-  <a href="/docs/components/switch">
+  <a href="/docs/components/switch" data-keywords="toggle">
     <wa-card with-header>
       <div slot="header">
         {% include "svgs/switch.njk" %}
@@ -298,7 +294,7 @@ layout: page-outline
       <span class="page-name">Details</span>
     </wa-card>
   </a>
-  <a href="/docs/components/dialog">
+  <a href="/docs/components/dialog" data-keywords="modal">
     <wa-card with-header>
       <div slot="header">
         {% include "svgs/dialog.njk" %}
@@ -420,4 +416,77 @@ layout: page-outline
       <span class="page-name">Visually Hidden</span>
     </wa-card>
   </a>
-</div>
+</div>
+
+<div id="component-filter-empty" hidden>
+  No results
+</div>
+
+<script type="module">
+  const container = document.getElementById('component-filter');
+  const empty = document.getElementById('component-filter-empty');
+  const grid = document.getElementById('component-grid');
+  const input = container.querySelector('wa-input');
+
+  function updateResults() {
+    const filter = input.value.toLowerCase().trim();
+    
+    // Hide headings while filtering
+    grid.querySelectorAll('h2').forEach(heading => {
+      heading.hidden = filter === '' ? false : true;
+    });
+
+    // Show matching components
+    grid.querySelectorAll('a').forEach(link => {
+      const content = link.textContent.toLowerCase();
+      const keywords = link.getAttribute('data-keywords') || '';
+      const isMatch = filter === '' || (content + keywords).includes(filter);
+      link.classList.toggle('hidden', !isMatch);
+    });
+
+    // Show empty state when there's a search filter and no results
+    if (filter !== '' && grid.querySelector('a:not(.hidden)') === null) {
+      empty.hidden = false;
+    } else {
+      empty.hidden = true;
+    }
+  }
+
+  input.addEventListener('wa-input', updateResults);
+</script>
+
+<style>
+  wa-card#drawer-card::part(header) {
+    --spacing: 0;
+    justify-content: flex-end;
+    overflow: hidden;
+  }
+
+  #component-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: var(--wa-space-m);
+    margin-block-start: var(--wa-space-2xl);
+
+    > a {
+      position: static;
+      visibility: visible;
+
+      &.hidden {
+        display: block;  
+        position: absolute;
+        visibility: hidden;
+      }
+    }    
+  }
+
+  #component-filter-empty {
+    border: dashed var(--wa-border-width-m) var(--wa-color-neutral-border-quiet);
+    border-radius: var(--wa-border-radius-m);
+    font-size: var(--wa-font-size-l);
+    color: var(--wa-color-text-quiet);
+    text-align: center;
+    padding-block: var(--wa-space-2xl);
+    margin-block-start: 0
+  }
+</style>

src/styles/applied.css

@@ -8,7 +8,7 @@
 @import url('native/tables.css');
 @import url('native/blockquote.css');
 
-@import url('shadow/size.css');
+@import url('utilities/size.css');
 @import url('utilities/variants.css');
 @import url('utilities/appearance.css');