Update styling for search box (or any box followed by button) (#351)

Update styling for search box
edx · Aug 2, 2016 · 422d73d · 422d73d
1 parent 6f47bf6
commit 422d73d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/pattern-library/sass/_normalize.scss b/pattern-library/sass/_normalize.scss
@@ -355,23 +355,11 @@ input[type="number"]::-webkit-outer-spin-button {
  */
 
 input[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box; /* 2 */
   box-sizing: content-box;
 }
 
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
 /**
  * Define consistent border, margin, and padding.
  */

diff --git a/pattern-library/sass/patterns/_forms.scss b/pattern-library/sass/patterns/_forms.scss
@@ -257,6 +257,15 @@ $input-width: (
             border-color: palette(error, text);
         }
     }
+
+    // Input fields immediately followed by a button (ie, search boxes) should eliminate the spacing
+    // between them and adopt matching styling/sizing to emphasize that they are connected.
+    &[type=search] + button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        font-size: font-size(base);
+        margin-left: (-1 * $baseline / 4);
+    }
 }
 
 

diff --git a/pldoc/_components/forms.md b/pldoc/_components/forms.md
@@ -111,8 +111,9 @@ info:               Forms allow users to interact with the interface, set prefer
                 <label class="field-label" for="search-03">Search (with visible label and icon)</label>
                 <input class="field-input input-text" type="search" id="search-03" name="search-03" placeholder="Search this website">
                 <button class="btn-brand btn-small" type="button">
-                    <span class="icon fa fa-search" aria-hidden="true"></span>
-                    <span class="sr-only">Search</span>
+                    <span class="icon fa fa-search" aria-hidden="true">
+                        <span class="sr-only">Search</span>
+                    </span>
                 </button>
             </div>
         </fieldset>