Update documentation and css layout

Author: pksjce

docs/content/TextInput.mdx

@@ -14,7 +14,7 @@ TextInput is a form component to add default styling to the native text input.
 <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
 ```
 
-## Text Input with Icons
+## Text Input with icons
 
 ```jsx live
 <>
@@ -27,7 +27,6 @@ TextInput is a form component to add default styling to the native text input.
   />
 
   <TextInput
-    sx={{mt: 3}}
     trailingVisual={SearchIcon}
     aria-label="Zipcode"
     name="zipcode"
@@ -37,23 +36,17 @@ TextInput is a form component to add default styling to the native text input.
 </>
 ```
 
-## Text Input with Text visuals
+## Text Input with text visuals
 
 ```jsx live
 <>
   <TextInput leadingVisual="$" aria-label="Cost of the thing" name="cost" placeholder="23.45" />
 
-  <TextInput
-    sx={{mt: 3, width: '150px'}}
-    trailingVisual="minutes"
-    aria-label="Time in minutes"
-    name="time"
-    placeholder="25"
-  />
+  <TextInput sx={{width: '150px'}} trailingVisual="minutes" aria-label="Time in minutes" name="time" placeholder="25" />
 </>
 ```
 
-## Text Input with Error and warning states
+## Text Input with error and warning states
 
 ```jsx live
 <>
@@ -66,7 +59,6 @@ TextInput is a form component to add default styling to the native text input.
   />
 
   <TextInput
-    sx={{mt: 3}}
     validationStatus="warning"
     aria-label="Zipcode"
     name="zipcode"
@@ -86,6 +78,7 @@ TextInput is a form component to add default styling to the native text input.
 
 ```jsx live
 <TextInput contrast aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
+```
 
 ## Props
 
@@ -99,7 +92,7 @@ TextInput is a form component to add default styling to the native text input.
     defaultValue="false"
     description={
       <>
-        Adds <InlineCode>display: block</InlineCode> to element
+        Creates a full width input element
       </>
     }
   />
@@ -109,19 +102,36 @@ TextInput is a form component to add default styling to the native text input.
     defaultValue="false"
     description="Changes background color to a higher contrast color"
   />
-  <PropsTableRow
-    name="variant"
-    type="'small' | 'large'"
-    description="Creates a smaller or larger input than the default."
-  />
+  <PropsTableRow name='size' type="'small' | 'medium' | 'large'"     description="Creates a smaller or larger input than the default." />
+
+<PropsTableRow
+  name="leadingVisual"
+  type={<>string | React.ComponentType</>}
+  description="Visual positioned on the left edge inside the input"
+/>
+<PropsTableRow
+  name="trailingVisual"
+  type={<>string | React.ComponentType</>}
+  description="Visual positioned on the right edge inside the input"
+/>
+<PropsTableRow name="validationStatus" type="'warning' | 'error'" description="Style the input to match the status" />
+
+<PropsTableRow
+  name="variant"
+  type="'small' | 'medium' | 'large'"
+  description="(Use size) Creates a smaller or larger input than the default."
+  deprecated
+/>
+
   <PropsTableRow
     name="width"
     type={
       <>
         string | number | <Link href="https://styled-system.com/guides/array-props">Array&lt;string | number&gt;</Link>
       </>
     }
-    description="Set the width of the input"
+    description="(Use sx prop) Set the width of the input"
+    deprecated
   />
   <PropsTableRow
     name="maxWidth"
@@ -130,7 +140,8 @@ TextInput is a form component to add default styling to the native text input.
         string | number | <Link href="https://styled-system.com/guides/array-props">Array&lt;string | number&gt;</Link>
       </>
     }
-    description="Set the maximum width of the input"
+    description="(Use sx prop) Set the maximum width of the input"
+    deprecated
   />
   <PropsTableRow
     name="minWidth"
@@ -139,12 +150,14 @@ TextInput is a form component to add default styling to the native text input.
         string | number | <Link href="https://styled-system.com/guides/array-props">Array&lt;string | number&gt;</Link>
       </>
     }
-    description="Set the minimum width of the input"
+    description="(Use sx prop) Set the minimum width of the input"
+    deprecated
   />
   <PropsTableRow
     name="icon"
     type="React.ComponentType"
-    description="An Octicon React component. To be used inside of input. Positioned on the left edge."
+    description="(Use leadingVisual or trailingVisual) An Octicon React component. To be used inside of input. Positioned on the left edge."
+    deprecated
   />
   <PropsTableSxRow />
   <PropsTableRefRow
@@ -170,8 +183,8 @@ TextInput is a form component to add default styling to the native text input.
     adaptsToScreenSizes: true,
     fullTestCoverage: false,
     usedInProduction: true,
-    usageExamplesDocumented: false,
-    hasStorybookStories: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: true,
     designReviewed: false,
     a11yReviewed: false,
     stableApi: false,
@@ -180,4 +193,3 @@ TextInput is a form component to add default styling to the native text input.
     hasFigmaComponent: false
   }}
 />
-```

src/TextInput.tsx

@@ -61,13 +61,13 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
       >
         {IconComponent && <IconComponent className="TextInput-icon" />}
         {LeadingVisual && (
-          <span data-component="leadingVisual">
+          <span className="TextInput-icon">
             {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
           </span>
         )}
         <UnstyledTextInput ref={ref} disabled={disabled} {...inputProps} data-component="input" />
         {TrailingVisual && (
-          <span data-component="leadingVisual">
+          <span className="TextInput-icon">
             {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
           </span>
         )}

src/_TextInputWrapper.tsx

@@ -53,7 +53,6 @@ type StyledWrapperProps = {
   SxProp
 
 const TextInputWrapper = styled.span<StyledWrapperProps>`
-  width: max-content;
   min-height: 34px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
@@ -68,27 +67,15 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   box-shadow: ${get('shadows.primer.shadow.inset')};
   cursor: text;
   padding: 6px 12px;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  justify-items: end;
+  display: inline-flex;
+  align-items: stretch;
   & > :not(:last-child) {
     margin-right: ${get('space.2')};
   }
 
-  [data-component=' leadingVisual '] {
-    align-self: center;
-    color: ${get('colors.fg.muted')};
-  }
-
-  [data-component=' trailingVisual '] {
-    align-self: center;
-    color: ${get('colors.fg.muted')};
-  }
-
   .TextInput-icon {
     align-self: center;
     color: ${get('colors.fg.muted')};
-    margin: 0 ${get('space.2')};
     flex-shrink: 0;
   }