1. Add leading and trailing visual

2. Change grid logic
3. Update stories and docs

Author: pksjce

src/TextInput.tsx

@@ -6,10 +6,10 @@ import TextInputWrapper from './_TextInputWrapper'
 
 type NonPassthroughProps = {
   className?: string
-  /** @deprecated Use `leadingIcon` or `trailingIcon` prop instead */
+  /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
   icon?: React.ComponentType<{className?: string}>
-  leadingIcon?: React.ComponentType<{className?: string}>
-  trailingIcon?: React.ComponentType<{className?: string}>
+  leadingVisual?: string | React.ComponentType<{className?: string}>
+  trailingVisual?: string | React.ComponentType<{className?: string}>
 } & Pick<
   ComponentProps<typeof TextInputWrapper>,
   'block' | 'contrast' | 'disabled' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'
@@ -23,8 +23,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
   (
     {
       icon: IconComponent,
-      leadingIcon: LeadingIconComponent,
-      trailingIcon: TrailingIconComponent,
+      leadingVisual: LeadingVisual,
+      trailingVisual: TrailingVisual,
       block,
       className,
       contrast,
@@ -52,18 +52,25 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
         validationStatus={validationStatus}
         contrast={contrast}
         disabled={disabled}
-        hasIcon={!!IconComponent || !!(LeadingIconComponent || TrailingIconComponent)}
         sx={sxProp}
         size={sizeProp}
         width={widthProp}
         minWidth={minWidthProp}
         maxWidth={maxWidthProp}
         variant={variantProp}
       >
-        {IconComponent && <IconComponent className="TextInput-leading-icon" />}
-        {LeadingIconComponent && <LeadingIconComponent className="TextInput-leading-icon" />}
+        {IconComponent && <IconComponent className="TextInput-icon" />}
+        {LeadingVisual && (
+          <span data-component="leadingVisual">
+            {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
+          </span>
+        )}
         <UnstyledTextInput ref={ref} disabled={disabled} {...inputProps} data-component="input" />
-        {TrailingIconComponent && <TrailingIconComponent className="TextInput-trailing-icon" />}
+        {TrailingVisual && (
+          <span data-component="leadingVisual">
+            {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+          </span>
+        )}
       </TextInputWrapper>
     )
   }

src/_TextInputWrapper.tsx

@@ -69,24 +69,27 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   cursor: text;
   padding: 6px 12px;
   display: grid;
-  grid-template-areas: 'leadingIcon input trailingIcon';
+  grid-template-columns: auto 1fr auto;
+  justify-items: end;
   & > :not(:last-child) {
     margin-right: ${get('space.2')};
   }
-  [data-component='input'] {
-    grid-area: input;
+
+  [data-component=' leadingVisual '] {
+    align-self: center;
+    color: ${get('colors.fg.muted')};
   }
 
-  .TextInput-leading-icon {
+  [data-component=' trailingVisual '] {
     align-self: center;
     color: ${get('colors.fg.muted')};
-    grid-area: leadingIcon;
   }
 
-  .TextInput-trailing-icon {
+  .TextInput-icon {
     align-self: center;
     color: ${get('colors.fg.muted')};
-    grid-area: trailingIcon;
+    margin: 0 ${get('space.2')};
+    flex-shrink: 0;
   }
 
   &:focus-within {
@@ -134,7 +137,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
       width: 100%;
     `}
   
-    // Ensures inputs don't zoom on mobile but are body-font size on desktop
+    // Ensures inputs don' t zoom on mobile but are body-font size on desktop
     @media (min-width: ${get('breakpoints.1')}) {
     font-size: ${get('fontSizes.1')};
   }

src/__tests__/TextInput.test.tsx

@@ -53,12 +53,12 @@ describe('TextInput', () => {
     expect(render(<TextInput name="zipcode" placeholder={'560076'} />)).toMatchSnapshot()
   })
 
-  it('renders leadingIcon', () => {
-    expect(render(<TextInput name="search" placeholder={'Search'} leadingIcon={SearchIcon} />)).toMatchSnapshot()
+  it('renders leadingVisual', () => {
+    expect(render(<TextInput name="search" placeholder={'Search'} leadingVisual={SearchIcon} />)).toMatchSnapshot()
   })
 
-  it('renders trailingIcon', () => {
-    expect(render(<TextInput name="search" placeholder={'Search'} trailingIcon={SearchIcon} />)).toMatchSnapshot()
+  it('renders trailingVisual', () => {
+    expect(render(<TextInput name="search" placeholder={'Search'} trailingVisual={SearchIcon} />)).toMatchSnapshot()
   })
 
   it('should call onChange prop with input value', () => {