style(inputsearch): change default html clear icon #607

masoudmanson · 2023-09-21T03:45:37Z

Summary

InputSearch
Github issue: #606

When text is entered into the InputSearch component, you may have noticed the default HTML clear icon. However, this default icon doesn't align with our SDS iconography. To improve consistency and visual coherence, we need to replace the default clear icon with the SDS xMark icon.

Current InputSearch:

Desired Result:

Live demo:
https://616981d9028812003ade73f3-jouthyttmu.chromatic.com/?path=/story/inputs-inputsearch--default

Checklist

Default Story in Storybook
LivePreview Story in Storybook
Test Story in Storybook
Tests written
Variables from defaultTheme.ts used wherever possible
If updating an existing component, depreciate flag has been used where necessary
Chromatic build verified by @chanzuckerberg/sds-design

…eyPress with onKeyDown

tihuan

code LGTM! Will wait for @clarsen-czi on design 👍 Thanks all!

clarsen-czi

Looks great @masoudmanson ! Is there a way to make the xMark icon a primary ButtonIcon so that it has hover and pressed effects? Thanks!

masoudmanson · 2023-09-21T17:07:09Z

Looks great @masoudmanson ! Is there a way to make the xMark icon a primary ButtonIcon so that it has hover and pressed effects? Thanks!

I'm not sure. I've changed the default HTML clean icon for the search inputs. Let me see if I can add hover and pressed effects. 😯

… as end adornment to input

masoudmanson · 2023-09-21T21:02:28Z

packages/components/src/core/Autocomplete/index.tsx

@@ -147,13 +147,27 @@ const Autocomplete = <
               */
              ...params.InputProps.ref,
              endAdornment: (
-                <InputAdornment position="end">
+                <StyledInputAdornment position="end">


Because the Autocomplete component overrides the InputSearch's endAdornment, we must also include the clear IconButton here.

feels like it's worth adding this comment in the code!

Ahh, sure :D

masoudmanson · 2023-09-21T21:03:33Z

packages/components/src/core/Autocomplete/index.tsx

@@ -193,6 +207,16 @@ const Autocomplete = <
    />
  );

+  function clearInput() {
+    setInputValue("");
+    if (onInputChange)


Because we are manually firing this event, we must build a onChange event to transmit the updated value to onChange listeners.

let's add this context comment in the code too please 🙏

masoudmanson · 2023-09-21T21:04:27Z

packages/components/src/core/InputSearch/index.tsx

@@ -77,7 +92,20 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
          // passed to mui Input
          InputProps={{
            endAdornment: (
-              <InputAdornment position="end">
+              <StyledInputAdornment position="end">
+                {value && (


I replaced the default HTML clear icon for search inputs with an SDS xMark icon as an input adornment at the end of the input.

masoudmanson · 2023-09-21T21:06:19Z

packages/components/src/core/InputSearch/index.tsx

+
+      if (handleSubmit) handleSubmit("");
+
+      if (onChange) {


Same as the Autocomplete component, Because we are manually firing this event, we must build a onChange event to transmit the updated value to onChange listeners.

masoudmanson · 2023-09-21T21:07:04Z

packages/components/src/core/InputSearch/index.tsx

@@ -100,8 +128,9 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
          sdsStyle={sdsStyle}
          sdsStage={hasValue ? "userInput" : "default"}
          onChange={handleChange}
-          onKeyPress={handleKeyPress}
+          onKeyDown={handleKeyPress}


The onKeyPress event has been deprecated and replaced by the newer onKeyDown event.

masoudmanson · 2023-09-21T21:08:45Z

packages/components/src/core/InputSearch/index.tsx

          intent={intent}
+          autoComplete="off"


This prevents the browser's default auto completion menu from being displayed for the InputSearch.

Let's add this comment in the code too for context!

masoudmanson · 2023-09-21T21:09:06Z

packages/components/src/core/InputSearch/style.ts

@@ -116,14 +117,30 @@ export const StyledSearchBase = styled(TextField, {
      min-width: 120px;
      display: block;

+      [type="search"]::-webkit-search-cancel-button {


This part hides the default HTML clear icon.

… into 606-replace-inputsearchs-clear-icon-with-sds-xmark-icon

clarsen-czi

For some reason the hover effect on the new xmark icon button doesn't look like it's working; when I hover over it no color change occurs.

masoudmanson · 2023-09-21T22:30:51Z

For some reason the hover effect on the new xmark icon button doesn't look like it's working; when I hover over it no color change occurs.

Hmm, 🤔
It must be because of the position: absolute;
I'll fix it 😊

clarsen-czi

LGTM! Thanks @masoudmanson !

style(inputsearch): change default html clear icon

c4096a8

masoudmanson linked an issue Sep 21, 2023 that may be closed by this pull request

Replace InputSearch's Clear Icon with SDS xMark Icon #606

Closed

masoudmanson requested review from tihuan and clarsen-czi September 21, 2023 03:48

masoudmanson self-assigned this Sep 21, 2023

masoudmanson added the Ready for review This PR is ready for review label Sep 21, 2023

refactor(inputsearch): turn autocomplete off + replace deprecated onK…

58e8be7

…eyPress with onKeyDown

tihuan approved these changes Sep 21, 2023

View reviewed changes

clarsen-czi requested changes Sep 21, 2023

View reviewed changes

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

0197fed

… as end adornment to input

masoudmanson requested a review from clarsen-czi September 21, 2023 18:35

fix(inputsearch): add onchange events for the new inputClear icon

d1dcf20

masoudmanson commented Sep 21, 2023

View reviewed changes

masoudmanson added 2 commits September 21, 2023 17:42

docs(inputsearch): add comments for context

cbfab43

Merge branch 'main' of https://github.com/chanzuckerberg/sci-components…

2ec4550

… into 606-replace-inputsearchs-clear-icon-with-sds-xmark-icon

clarsen-czi requested changes Sep 21, 2023

View reviewed changes

fix(inputsearch): fix clear icon hover state

2c12150

masoudmanson requested a review from clarsen-czi September 22, 2023 00:11

fix(autocomplete): update test snapshots

e8b456d

clarsen-czi approved these changes Sep 22, 2023

View reviewed changes

style(dropdown): fix popper width

0dad97c

masoudmanson merged commit dddcd34 into main Sep 22, 2023
7 checks passed

masoudmanson deleted the 606-replace-inputsearchs-clear-icon-with-sds-xmark-icon branch September 22, 2023 18:40

masoudmanson added Released and removed Ready for review This PR is ready for review labels Oct 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style(inputsearch): change default html clear icon #607

style(inputsearch): change default html clear icon #607

masoudmanson commented Sep 21, 2023 •

edited

Loading

tihuan left a comment

clarsen-czi left a comment

masoudmanson commented Sep 21, 2023

masoudmanson Sep 21, 2023 •

edited

Loading

tihuan Sep 21, 2023

masoudmanson Sep 21, 2023

masoudmanson Sep 21, 2023

tihuan Sep 21, 2023

masoudmanson Sep 21, 2023

masoudmanson Sep 21, 2023

masoudmanson Sep 21, 2023

masoudmanson Sep 21, 2023

tihuan Sep 21, 2023

masoudmanson Sep 21, 2023

clarsen-czi left a comment

masoudmanson commented Sep 21, 2023

clarsen-czi left a comment

style(inputsearch): change default html clear icon #607

style(inputsearch): change default html clear icon #607

Conversation

masoudmanson commented Sep 21, 2023 • edited Loading

Summary

Checklist

tihuan left a comment

Choose a reason for hiding this comment

clarsen-czi left a comment

Choose a reason for hiding this comment

masoudmanson commented Sep 21, 2023

masoudmanson Sep 21, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clarsen-czi left a comment

Choose a reason for hiding this comment

masoudmanson commented Sep 21, 2023

clarsen-czi left a comment

Choose a reason for hiding this comment

masoudmanson commented Sep 21, 2023 •

edited

Loading

masoudmanson Sep 21, 2023 •

edited

Loading