fix: update SearchField's background color to be white (#2597)

* feat: change searchfields form background color to white * refactor: refactor after review --------- Co-authored-by: Kyrylo Hudym-Levkovych <[email protected]>
openedx · Sep 6, 2023 · a0e6f3c · a0e6f3c
1 parent 4fee4cc
commit a0e6f3c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/src/SearchField/SearchFieldAdvanced.jsx b/src/SearchField/SearchFieldAdvanced.jsx
@@ -100,7 +100,7 @@ function SearchFieldAdvanced(props) {
         role="search"
         onSubmit={handleSubmit}
         onReset={handleClear}
-        className="d-flex align-items-center w-100"
+        className="pgn__searchfield-form"
         aria-label={formAriaLabel}
       >
         <SearchFieldContext.Provider

diff --git a/src/SearchField/__snapshots__/SearchField.test.jsx.snap b/src/SearchField/__snapshots__/SearchField.test.jsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SearchField /> with basic usage should match the snapshot 1`] = `"<div class=\\"pgn__searchfield d-flex\\"><form role=\\"search\\" class=\\"d-flex align-items-center w-100\\"><label for=\\"pgn-searchfield-input-1\\" class=\\"m-0\\"><span class=\\"sr-only\\">search</span></label><input type=\\"text\\" class=\\"form-control\\" role=\\"searchbox\\" id=\\"pgn-searchfield-input-1\\" name=\\"searchfield-input\\" value=\\"\\"/><button type=\\"submit\\" class=\\"btn\\"><span class=\\"pgn__icon\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z\\" fill=\\"currentColor\\"></path></svg></span><span class=\\"sr-only\\">submit search</span></button></form></div>"`;
+exports[`<SearchField /> with basic usage should match the snapshot 1`] = `"<div class=\\"pgn__searchfield d-flex\\"><form role=\\"search\\" class=\\"pgn__searchfield-form\\"><label for=\\"pgn-searchfield-input-1\\" class=\\"m-0\\"><span class=\\"sr-only\\">search</span></label><input type=\\"text\\" class=\\"form-control\\" role=\\"searchbox\\" id=\\"pgn-searchfield-input-1\\" name=\\"searchfield-input\\" value=\\"\\"/><button type=\\"submit\\" class=\\"btn\\"><span class=\\"pgn__icon\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z\\" fill=\\"currentColor\\"></path></svg></span><span class=\\"sr-only\\">submit search</span></button></form></div>"`;
diff --git a/src/SearchField/_variables.scss b/src/SearchField/_variables.scss
@@ -5,6 +5,7 @@ $search-btn-variants: (
 $search-border-radius:                0 !default;
 $search-line-height:                  1.5rem !default;
 $search-border-color:                 $gray-500 !default;
+$search-form-background-color:        $white !default;
 $search-border-color-interaction:     $black !default;
 $search-border-width:                 .0625rem !default;
 $search-border-width-interaction:     .125rem !default;

diff --git a/src/SearchField/index.scss b/src/SearchField/index.scss
@@ -4,6 +4,13 @@
   transition: $input-transition;
   border: $search-border-width solid $search-border-color;
 
+  .pgn__searchfield-form {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background-color: $search-form-background-color;
+  }
+
   .btn:focus-visible {
     outline: none;
     position: relative;