From 397ffa15413dac5b70ddc2ab349db23803ee525e Mon Sep 17 00:00:00 2001
From: alisan617 <atang@edx.org>
Date: Tue, 13 Sep 2016 13:56:42 -0400
Subject: [PATCH] searchfield in safari and icon in dropdown menu

---
 pattern-library/js/select-replace.js      |  8 +++-----
 pattern-library/sass/_normalize.scss      | 12 ++++++++++++
 pattern-library/sass/patterns/_forms.scss | 16 +++++++---------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/pattern-library/js/select-replace.js b/pattern-library/js/select-replace.js
index 60c5a79e..b9749e7b 100644
--- 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
index 127cec17..3f732313 100644
--- 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
index 049a73ab..5c876a07 100644
--- 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;