fix(docsearch): group search button elements in containers (#74)

algolia · Sep 2, 2020 · 8640418 · 8640418
1 parent a8fb063
commit 8640418
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
@@ -8,6 +8,7 @@
   display: flex;
   font-weight: 500;
   height: 36px;
+  justify-content: space-between;
   margin: 0 0 0 16px;
   padding: 0 8px;
   user-select: none;
@@ -22,6 +23,11 @@
   outline: none;
 }
 
+.DocSearch-Button-Container {
+  align-items: center;
+  display: flex;
+}
+
 .DocSearch-Search-Icon {
   stroke-width: 1.6;
 }
@@ -35,6 +41,10 @@
   padding: 0 12px 0 6px;
 }
 
+.DocSearch-Button-Keys {
+  display: flex;
+}
+
 .DocSearch-Button-Key {
   align-items: center;
   background: var(--docsearch-key-gradient);

diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -41,13 +41,17 @@ export const DocSearchButton = React.forwardRef<
       {...props}
       ref={ref}
     >
-      <SearchIcon />
-      <span className="DocSearch-Button-Placeholder">Search</span>
-
-      <span className="DocSearch-Button-Key">
-        {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
-      </span>
-      <span className="DocSearch-Button-Key">K</span>
+      <div className="DocSearch-Button-Container">
+        <SearchIcon />
+        <span className="DocSearch-Button-Placeholder">Search</span>
+      </div>
+
+      <div className="DocSearch-Button-Keys">
+        <span className="DocSearch-Button-Key">
+          {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
+        </span>
+        <span className="DocSearch-Button-Key">K</span>
+      </div>
     </button>
   );
 });