refactor(inputsearch): remove default clear icon and add a xMark icon…

… as end adornment to input
chanzuckerberg · Sep 21, 2023 · 0197fed · 0197fed
1 parent 58e8be7
commit 0197fed
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 21 deletions.
diff --git a/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
         Search by label
       </label>
       <div
-        class="MuiFormControl-root MuiTextField-root css-1yyp8n-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root css-csl8fy-MuiFormControl-root-MuiTextField-root"
       >
         <div
           class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root"
@@ -39,9 +39,11 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             value=""
           />
           <div
-            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
+            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-g8kzra-MuiInputAdornment-root"
           >
+            
             <button
+              aria-label="search-button"
               class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1fqpm4w-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"

diff --git a/packages/components/src/core/Autocomplete/index.tsx b/packages/components/src/core/Autocomplete/index.tsx
@@ -3,14 +3,14 @@ import {
   AutocompleteInputChangeReason,
   AutocompleteRenderInputParams,
   AutocompleteRenderOptionState,
-  InputAdornment,
   AutocompleteProps as MuiAutocompleteProps,
 } from "@mui/material";
 import React, { ReactNode, SyntheticEvent, useState } from "react";
 import { noop } from "src/common/utils";
 import ButtonIcon from "../ButtonIcon";
 import { IconProps } from "../Icon";
 import { InputSearchProps } from "../InputSearch";
+import { StyledInputAdornment } from "../InputSearch/style";
 import MenuItem, { IconNameToSmallSizes } from "../MenuItem";
 import {
   InputBaseWrapper,
@@ -147,13 +147,27 @@ const Autocomplete = <
                */
               ...params.InputProps.ref,
               endAdornment: (
-                <InputAdornment position="end">
+                <StyledInputAdornment position="end">
+                  {inputValue && (
+                    <ButtonIcon
+                      aria-label="clear-button"
+                      className="input-search-clear-icon"
+                      onClick={clearInput}
+                      sdsType="primary"
+                      sdsSize="small"
+                      sdsIconProps={{
+                        sdsType: "iconButton",
+                      }}
+                      sdsIcon="xMark"
+                    />
+                  )}
                   <ButtonIcon
+                    aria-label="search-button"
                     sdsType="secondary"
                     sdsSize="small"
                     sdsIcon="search"
                   />
-                </InputAdornment>
+                </StyledInputAdornment>
               ),
               inputProps: params.inputProps,
             }}
@@ -193,6 +207,10 @@ const Autocomplete = <
     />
   );
 
+  function clearInput() {
+    setInputValue("");
+  }
+
   function defaultGetOptionLabel(
     option: T | AutocompleteFreeSoloValueMapping<FreeSolo>
   ): string {

diff --git a/packages/components/src/core/InputSearch/index.tsx b/packages/components/src/core/InputSearch/index.tsx
@@ -1,10 +1,12 @@
-import {
-  InputAdornment,
-  TextFieldProps as RawTextFieldSearchProps,
-} from "@mui/material";
+import { TextFieldProps as RawTextFieldSearchProps } from "@mui/material";
 import React, { forwardRef, useState } from "react";
 import ButtonIcon from "../ButtonIcon";
-import { InputSearchExtraProps, StyledLabel, StyledSearchBase } from "./style";
+import {
+  InputSearchExtraProps,
+  StyledInputAdornment,
+  StyledLabel,
+  StyledSearchBase,
+} from "./style";
 
 export interface AccessibleInputSearchProps {
   label: string;
@@ -50,6 +52,11 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
       if (onChange) onChange(event);
     };
 
+    const clearInput = () => {
+      setValue("");
+      setHasValue(false);
+    };
+
     const localHandleSubmit = () => {
       if (handleSubmit) handleSubmit(value);
     };
@@ -77,7 +84,20 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
           // passed to mui Input
           InputProps={{
             endAdornment: (
-              <InputAdornment position="end">
+              <StyledInputAdornment position="end">
+                {value && (
+                  <ButtonIcon
+                    aria-label="clear-button"
+                    className="input-search-clear-icon"
+                    onClick={clearInput}
+                    sdsType="primary"
+                    sdsSize="small"
+                    sdsIconProps={{
+                      sdsType: "iconButton",
+                    }}
+                    sdsIcon="xMark"
+                  />
+                )}
                 <ButtonIcon
                   aria-label="search-button"
                   onClick={localHandleSubmit}
@@ -88,7 +108,7 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
                   }}
                   sdsIcon="search"
                 />
-              </InputAdornment>
+              </StyledInputAdornment>
             ),
           }}
           type="search"

diff --git a/packages/components/src/core/InputSearch/style.ts b/packages/components/src/core/InputSearch/style.ts
@@ -1,12 +1,12 @@
 import { css, SerializedStyles } from "@emotion/react";
 import {
+  InputAdornment,
   inputAdornmentClasses,
   inputBaseClasses,
   outlinedInputClasses,
   TextField,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import xMark from "../../common/svgs/IconXMarkSmall.svg";
 import {
   CommonThemeProps,
   fontBodyM,
@@ -120,23 +120,27 @@ export const StyledSearchBase = styled(TextField, {
       [type="search"]::-webkit-search-cancel-button {
         -webkit-appearance: none;
         appearance: none;
-        height: 14px;
-        width: 14px;
-        background-color: ${colors?.primary[400]};
-        -webkit-mask-image: url(${xMark});
-        mask-image: url(${xMark});
-        background-size: 14px 14px;
-        cursor: pointer;
+      }
+
+      & .input-search-clear-icon {
+        display: none;
+        position: absolute;
+        right: 20px;
       }
 
       .${outlinedInputClasses.root} {
         .${outlinedInputClasses.notchedOutline} {
           border: ${borders?.gray[400]};
         }
+
+        &:hover .input-search-clear-icon,
+        &:focus-within .input-search-clear-icon {
+          display: inline-flex;
+        }
       }
 
       .${inputBaseClasses.inputSizeSmall} {
-        padding: ${spacings?.xs}px 0 ${spacings?.xs}px ${spacings?.l}px;
+        padding: ${spacings?.xs}px ${spacings?.l}px;
         height: 34px;
         box-sizing: border-box;
         background-color: #fff;
@@ -164,3 +168,7 @@ export const StyledSearchBase = styled(TextField, {
     `;
   }}
 `;
+
+export const StyledInputAdornment = styled(InputAdornment)`
+  position: relative;
+`;