Merge pull request #174 from hayatbiralem/add-states-support-to-search-input

Add states support to search input with rtl support

css/pico.classless.css

@@ -1544,19 +1544,38 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 }
 
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
-  padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
   border-radius: 5rem;
   background-image: var(--icon-search);
   background-position: center left 1.125rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
+  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+  background-position: center left 1.125rem, center right 0.75rem;
+}
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
+  background-image: var(--icon-search), var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] {
+  background-image: var(--icon-search), var(--icon-invalid);
+}
 
 [type=search]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
 }
 
+[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
+  background-position: center right 1.125rem;
+}
+[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
+  background-position: center right 1.125rem, center left 0.75rem;
+}
+
 /**
  * Table
  */

css/pico.css

@@ -1647,19 +1647,38 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 }
 
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
-  padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
   border-radius: 5rem;
   background-image: var(--icon-search);
   background-position: center left 1.125rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
+  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+  background-position: center left 1.125rem, center right 0.75rem;
+}
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
+  background-image: var(--icon-search), var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] {
+  background-image: var(--icon-search), var(--icon-invalid);
+}
 
 [type=search]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
 }
 
+[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
+  background-position: center right 1.125rem;
+}
+[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
+  background-position: center right 1.125rem, center left 0.75rem;
+}
+
 /**
  * Table
  */

css/pico.fluid.classless.css

@@ -1514,19 +1514,38 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 }
 
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
-  padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
   border-radius: 5rem;
   background-image: var(--icon-search);
   background-position: center left 1.125rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
+  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+  background-position: center left 1.125rem, center right 0.75rem;
+}
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
+  background-image: var(--icon-search), var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] {
+  background-image: var(--icon-search), var(--icon-invalid);
+}
 
 [type=search]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
 }
 
+[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
+  background-position: center right 1.125rem;
+}
+[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
+  background-position: center right 1.125rem, center left 0.75rem;
+}
+
 /**
  * Table
  */

docs/forms.html

@@ -79,7 +79,10 @@
   &lt;/<b>label</b>&gt;
 &lt;/<b>fieldset</b>&gt;</code></pre></footer></article><p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p><article aria-label="Indeterminate checkbox example"><label for="indeterminate-checkbox"><input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox"> Select all</label><script>document.getElementById("indeterminate-checkbox").indeterminate=!0</script><footer class="code"><pre><code>&lt;<b>script</b>&gt;
   <i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
-&lt;/<b>script</b>&gt;</code></pre></footer></article><p>Others input types:</p><article aria-label="File browser, range slider, date, time, color examples"><label for="file">File browser <input type="file" id="file" name="file"></label> <label for="range">Range slider <input type="range" min="0" max="100" value="50" id="range" name="range"></label> <label for="date">Date <input type="date" id="date" name="date"></label> <label for="time">Time <input type="time" id="time" name="time"></label> <label for="color">Color <input type="color" id="color" name="color" value="#0eaaaa"></label><footer class="code"><pre><code><em>&lt;!-- File browser --&gt;</em>
+&lt;/<b>script</b>&gt;</code></pre></footer></article><p>Others input types:</p><article aria-label="Search, file browser, range slider, date, time, color examples"><input type="search" id="search" name="search" placeholder="Search"> <label for="file">File browser <input type="file" id="file" name="file"></label> <label for="range">Range slider <input type="range" min="0" max="100" value="50" id="range" name="range"></label> <label for="date">Date <input type="date" id="date" name="date"></label> <label for="time">Time <input type="time" id="time" name="time"></label> <label for="color">Color <input type="color" id="color" name="color" value="#0eaaaa"></label><footer class="code"><pre><code><em>&lt;!-- Search --&gt;</em>
+&lt;<b>input</b> <i>type</i>=<u>"search"</u> <i>id</i>=<u>"search"</u> <i>name</i>=<u>"search"</u> <i>placeholder</i>=<u>"Search"</u>&gt;
+  
+&lt;!-- File browser --&gt;
 &lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
   &lt;<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>&gt;
 &lt;/<b>label</b>&gt;

docs/src/forms.html

@@ -210,8 +210,10 @@
 
             </footer>
           </article>
+
           <p>Others input types:</p>
-          <article aria-label="File browser, range slider, date, time, color examples">
+          <article aria-label="Search, file browser, range slider, date, time, color examples">
+            <input type="search" id="search" name="search" placeholder="Search">
             <label for="file">File browser
               <input type="file" id="file" name="file">
             </label>
@@ -229,7 +231,10 @@
             </label>
             <footer class="code">
 
-<pre><code><em>&lt;!-- File browser --&gt;</em>
+<pre><code><em>&lt;!-- Search --&gt;</em>
+&lt;<b>input</b> <i>type</i>=<u>"search"</u> <i>id</i>=<u>"search"</u> <i>name</i>=<u>"search"</u> <i>placeholder</i>=<u>"Search"</u>&gt;
+  
+&lt;!-- File browser --&gt;</em>
 &lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
   &lt;<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>&gt;
 &lt;/<b>label</b>&gt;

scss/content/_form-alt-input-types.scss

@@ -226,12 +226,30 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
 // :not() are needed to add Specificity and avoid !important on padding
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
   &[type="search"] {
-    padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+    padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
     border-radius: 5rem;
     background-image: var(--icon-search);
     background-position: center left 1.125rem;
     background-size: 1rem auto;
     background-repeat: no-repeat;
+    
+    &[aria-invalid] {
+      @if $enable-important {
+        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+      } 
+      @else {
+        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+      }
+      background-position: center left 1.125rem, center right 0.75rem;
+    }
+
+    &[aria-invalid="false"] {
+      background-image: var(--icon-search), var(--icon-valid);
+    }
+
+    &[aria-invalid="true"] {
+      background-image: var(--icon-search), var(--icon-invalid);
+    }
   }
 }
 
@@ -242,3 +260,17 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
     display: none;
   }
 }
+
+[dir="rtl"] {
+  :where(input) {
+    &:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
+      &[type="search"] {
+        background-position: center right 1.125rem;
+        
+        &[aria-invalid] {
+          background-position: center right 1.125rem, center left 0.75rem;
+        }
+      }
+    }
+  }
+}