Align Search component with Figma specs

element-hq · Sep 27, 2023 · 8d5d60f · 8d5d60f
1 parent 6d510f1
commit 8d5d60f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/src/components/Search/Search.module.css b/src/components/Search/Search.module.css
@@ -20,15 +20,17 @@ limitations under the License.
   height: 36px;
   box-sizing: border-box;
   color: var(--cpd-color-text-primary);
-  display: inline-flex;
+  display: flex;
+  flex-direction: row;
   gap: var(--cpd-space-2x);
   align-items: center;
   padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
-  overflow: hidden;
 }
 
-.search:hover {
-  border-color: var(--cpd-color-border-interactive-hovered);
+@media (hover) {
+  .search:hover {
+    border-color: var(--cpd-color-border-interactive-hovered);
+  }
 }
 
 .search:focus-within {
@@ -37,16 +39,19 @@ limitations under the License.
 
 .icon {
   color: var(--cpd-color-icon-secondary);
-  height: 100%;
-  aspect-ratio: 1 / 1;
   flex-shrink: 0;
 }
 
-.search:hover .icon,
-.search:focus-within .icon {
+.search:hover .icon {
   color: var(--cpd-color-icon-primary);
 }
 
+@media (hover) {
+  .search:hover .icon {
+    color: var(--cpd-color-icon-primary);
+  }
+}
+
 .input {
   border: 0;
   outline: 0;
@@ -58,7 +63,12 @@ limitations under the License.
   color: var(--cpd-color-text-placeholder);
 }
 
-.input:focus::placeholder,
-.search:hover .input::placeholder {
+.input:focus::placeholder {
   color: var(--cpd-color-text-secondary);
 }
+
+@media (hover) {
+  .search:hover .input::placeholder {
+    color: var(--cpd-color-text-secondary);
+  }
+}
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import classnames from "classnames";
-import React from "react";
+import React, { useId } from "react";
 import styles from "./Search.module.css";
 import { Field, Label } from "../Form";
 
@@ -54,13 +54,17 @@ export const Search = ({
   // TODO: i18n needs to be setup
   placeholder = "Search…",
   disabled,
+  name,
 }: SearchProps) => {
   const classes = classnames(styles.search, className);
+  const id = useId();
   return (
-    <Field name="search">
-      <Label className={classes}>
-        <SearchIcon className={styles.icon} />
+    <Field name={name} asChild>
+      <Label className={classes} htmlFor={id}>
+        <SearchIcon className={styles.icon} width={20} height={20} />
         <input
+          id={id}
+          name={name}
           type="search"
           placeholder={placeholder}
           onChange={onChange}