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

chanzuckerberg · Oct 1, 2024 · 3ee8760 · 3ee8760
1 parent c1b736c
commit 3ee8760
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 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
@@ -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/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/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
@@ -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
@@ -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} {