Merge pull request #322 from jonathanhefner/search-input-type-search

Use `type="search"` for search input
rails · Oct 5, 2023 · 0fdcc77 · 0fdcc77
2 parents e52a745 + cfdc5ad
commit 0fdcc77
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 27 deletions.
diff --git a/lib/rdoc/generator/template/rails/_panel.rhtml b/lib/rdoc/generator/template/rails/_panel.rhtml
@@ -14,7 +14,7 @@
   <input id="panel__state" type="checkbox">
 
   <div class="panel__tray">
-    <input id="search" class="panel__search" type="text"
+    <input id="search" class="panel__search" type="search"
       tabindex="-1" autocomplete="off" autosave="searchdoc"
       placeholder="Search (/) for a class, method, ..."
       data-turbo-permanent>

diff --git a/lib/rdoc/generator/template/rails/resources/css/main.css b/lib/rdoc/generator/template/rails/resources/css/main.css
@@ -264,20 +264,6 @@ html {
   height: 100dvh;
 }
 
-.panel__search {
-  height: var(--search-height);
-  width: 100%;
-
-  background: url('../i/search.svg') no-repeat;
-  background-position: 0.5em center;
-  padding-left: calc(0.5em + 16px + 0.5em);
-
-  color: inherit;
-
-  border: 0;
-  box-shadow: 1px 1px 4px color-mix(in srgb, currentColor 50%, transparent) inset;
-}
-
 .panel__results, .panel__nav {
   position: relative;
   height: calc(100dvh - var(--banner-height) - var(--search-height));
@@ -310,6 +296,46 @@ html {
 }
 
 
+/*
+ * Navigation panel - Search input
+ */
+
+.panel__search {
+  height: var(--search-height);
+  width: 100%;
+
+  background: url('../i/search.svg') no-repeat;
+  background-size: 1.3em;
+  background-position: 0.5em center;
+  padding-left: calc(0.5em + 1.3em + 0.5em);
+
+  color: inherit;
+
+  border: 0;
+  box-shadow: 1px 1px 4px color-mix(in srgb, currentColor 50%, transparent) inset;
+}
+
+/* Hide native magnifying glass icon in Webkit-based browsers (in favor of our icon) */
+.panel__search::-webkit-search-results-button {
+  -webkit-appearance: none;
+}
+
+/* Display "clear search" button consistently across (Webkit-based) browsers */
+.panel__search::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+
+  margin-right: 0.5em;
+  height: 1.3em;
+  width: 1.3em;
+  background: url('../i/close.svg') no-repeat;
+  background-size: contain;
+}
+
+.panel__search:not(:focus)::-webkit-search-cancel-button {
+  display: none;
+}
+
+
 /*
  * Navigation panel - Search results
  */

diff --git a/lib/rdoc/generator/template/rails/resources/i/search.svg b/lib/rdoc/generator/template/rails/resources/i/search.svg