From 0efb03c1b1e1f68036146d9406f5fae1c5b7ca29 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Wed, 2 Oct 2024 16:26:54 -0400
Subject: [PATCH] fix(inputtext): remove min-width from InputText and
 InputSearch (#858)

* fix(inputtext): removed min-width from InputText and InputSearch

* refactor(inputsearch): fix design review bugs
---
 .../__tests__/__snapshots__/index.test.tsx.snap        |  8 ++++----
 .../src/core/Icon/__storybook__/stories/iconBank.tsx   |  1 +
 .../core/InputSearch/__storybook__/stories/default.tsx |  1 +
 .../core/InputSearch/__storybook__/stories/test.tsx    |  2 ++
 packages/components/src/core/InputSearch/style.ts      | 10 ++++++++++
 .../core/InputText/__storybook__/stories/default.tsx   |  1 +
 packages/components/src/core/InputText/style.ts        |  6 +++++-
 7 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
index 3134aae34..f00aeed5f 100644
--- a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
       Search by label
     </label>
     <div
-      class="MuiFormControl-root MuiTextField-root css-1p7z5as-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-1dk6d19-MuiFormControl-root-MuiTextField-root"
     >
       <div
         class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
@@ -141,7 +141,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-1o2qh3k-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-undfwx-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
@@ -556,7 +556,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-1o2qh3k-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-undfwx-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
@@ -982,7 +982,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
       <div
         aria-hidden="false"
         aria-label="Search Input"
-        class="MuiFormControl-root MuiTextField-root css-1vdkloj-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root css-hmaycg-MuiFormControl-root-MuiTextField-root"
         tabindex="0"
       >
         <div
diff --git a/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
index ee113144e..e30c8c15c 100644
--- a/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
+++ b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
@@ -223,6 +223,7 @@ export const IconBankDemo = (props: Args): JSX.Element => {
         placeholder="Search icons"
         name="square-input-search"
         onChange={searchIconHandler}
+        sx={{ width: "210px" }}
       />
       {icons.length ? (
         <IconBankWrapper>
diff --git a/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx b/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx
index 14de6ffd9..2c4aee1fe 100644
--- a/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx
@@ -17,6 +17,7 @@ export const InputSearch = (props: Args): JSX.Element => {
       intent={intent}
       handleSubmit={handleSubmit}
       name="input-search-name"
+      sx={{ width: "200px" }}
     />
   );
 };
diff --git a/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx b/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx
index c5929e7f2..10ccb32ee 100644
--- a/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx
+++ b/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx
@@ -13,6 +13,7 @@ export const TestDemo = (props: Args): JSX.Element => {
         data-testid="inputSearchRound"
         handleSubmit={action("onSubmit")}
         name="round-search"
+        sx={{ width: "200px" }}
         {...props}
       />
       <RawInputSearch
@@ -23,6 +24,7 @@ export const TestDemo = (props: Args): JSX.Element => {
         data-testid="inputSearchSquare"
         handleSubmit={action("onSubmit")}
         name="square-search"
+        sx={{ width: "200px" }}
         {...props}
       />
       {/* @ts-expect-error testing fail state */}
diff --git a/packages/components/src/core/InputSearch/style.ts b/packages/components/src/core/InputSearch/style.ts
index 8b2c42504..4f5319b26 100644
--- a/packages/components/src/core/InputSearch/style.ts
+++ b/packages/components/src/core/InputSearch/style.ts
@@ -156,6 +156,16 @@ export const StyledSearchBase = styled(TextField, {
       .${outlinedInputClasses.root} {
         padding: 0 ${spaces?.m}px;
         background-color: ${semanticColors?.base?.surfacePrimary};
+        width: 100%;
+
+        .${outlinedInputClasses.input} {
+          padding-right: ${spaces?.l}px;
+        }
+
+        .MuiInputAdornment-positionEnd {
+          position: absolute;
+          right: ${spaces?.m}px;
+        }
 
         .${outlinedInputClasses.notchedOutline} {
           border: 1px solid ${semanticColors?.base?.border};
diff --git a/packages/components/src/core/InputText/__storybook__/stories/default.tsx b/packages/components/src/core/InputText/__storybook__/stories/default.tsx
index dd1e2e8ae..c071d1bc8 100644
--- a/packages/components/src/core/InputText/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/InputText/__storybook__/stories/default.tsx
@@ -15,6 +15,7 @@ export const InputText = (props: Args): JSX.Element => {
       disabled={disabled}
       name="input-text-name"
       autoComplete="off"
+      sx={{ width: "200px" }}
     />
   );
 };
diff --git a/packages/components/src/core/InputText/style.ts b/packages/components/src/core/InputText/style.ts
index 8eeab6d30..8bfe48c03 100644
--- a/packages/components/src/core/InputText/style.ts
+++ b/packages/components/src/core/InputText/style.ts
@@ -125,9 +125,12 @@ export const StyledInputBase = styled(TextField, {
     return css`
       margin-bottom: ${spaces?.l}px;
       margin-right: ${spaces?.m}px;
-      min-width: 160px;
       display: block;
 
+      .${outlinedInputClasses.root} {
+        width: 100%;
+      }
+
       .${outlinedInputClasses.inputSizeSmall} {
         ${fontBodyXs(props)}
         padding: ${spaces?.xs}px ${spaces?.m}px;
@@ -144,6 +147,7 @@ export const StyledInputBase = styled(TextField, {
       .${outlinedInputClasses.input} {
         outline: none;
         border-radius: 4px;
+        width: 100%;
       }
 
       &.user-is-tabbing .${outlinedInputClasses.input} {