Merge pull request #365 from edx/alisan/fix-searchfield-webkit-appear…

…ance searchfield in safari and icon in dropdown menu
edx · Sep 16, 2016 · 17e9b29 · 17e9b29
2 parents 2a9030d + 397ffa1
commit 17e9b29
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/pattern-library/js/select-replace.js b/pattern-library/js/select-replace.js
@@ -20,7 +20,7 @@ define([
             customClass: 'wrapper-custom-select',
             wrapperClass: 'wrapper-replace-select',
             valueClass: 'replace-value',
-            iconClass: 'icon-caret-down',
+            iconClass: 'fa-caret-down',
             hoverClass: 'is-hover'
         },
 
@@ -61,10 +61,8 @@ define([
                             '<select class="' + replaced[0].className + ' is-replaced" id="' + replaced[0].id + '" name="' + replaced[0].name + '" ' + disabled + '>' + replaced[0].innerHTML + '</select>',
                             '<span class="' + variables.customClass + ' ' + statuses.join(' ') + '" aria-hidden="true">',
                                 '<span class="' + variables.valueClass + '">' + CustomSelectReplacement.setInitialText($el) + '</span>',
-                                '<span class="icon-fallback-glyph">',
-                                    '<span class="icon ' + variables.iconClass + '" aria-hidden="true"></span>',
-                                    '<span class="text">Down arrow</span>',
-                                '</span>',
+                                    '<span class="icon fa ' + variables.iconClass + '" aria-hidden="true"></span>',
+                                    '<span class="sr-only">Down arrow</span>',
                             '</span>',
                         '</div>'
                     ].join(''));

diff --git a/pattern-library/sass/_normalize.scss b/pattern-library/sass/_normalize.scss
@@ -358,8 +358,20 @@ input[type="search"] {
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box; /* 2 */
   box-sizing: content-box;
+  -webkit-appearance: textfield;
 }
 
+/**
+  * 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
@@ -261,11 +261,15 @@ $input-width: (
     // 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;
+        @include border-top-left-radius(0);
+        @include border-bottom-left-radius(0);
+        @include border-top-right-radius(3px);
+        @include border-bottom-right-radius(3px);
+        @include margin-left(-1 * $baseline / 4);
+        @include margin-right(0);
         font-size: font-size(base);
-        margin-left: (-1 * $baseline / 4);
     }
+
 }
 
 
@@ -314,15 +318,9 @@ $input-width: (
         @include size(rem($baseline));
         position: absolute;
         @include right(rem(($baseline/4)));
-        margin-top: rem(-($baseline/10)); // vertically centers the down caret icon
-        color: palette(grayscale, base);
         vertical-align: middle;
     }
 
-    .icon-fallback-glyph .icon:before {
-        content: "\25BE"; // system glyph down arrow
-    }
-
     &:disabled,
     &.is-disabled {
         @extend %state-disabled;