feat(TextInput): Convert TextInput (Part 3) - Update TextInputWrapper and TextInputWithTokens

.changeset/dry-seals-count.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert TextInput to CSS module behind feature flag

packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css

@@ -1,3 +1,18 @@
+.TextInputWrapper {
+  padding-top: var(--base-size-6);
+  padding-bottom: var(--base-size-6);
+  padding-left: var(--base-size-12);
+
+  &:where([data-block]) {
+    display: flex;
+    width: 100%;
+  }
+
+  &:where([data-token-wrapping]) {
+    overflow: auto;
+  }
+}
+
 .UnstyledTextInput {
   height: 100%;
 }

packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx

@@ -17,8 +17,9 @@ import TextInputWrapper from '../internal/components/TextInputWrapper'
 import UnstyledTextInput, {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from '../internal/components/UnstyledTextInput'
 import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
 import {useFeatureFlag} from '../FeatureFlags'
-
 import styles from './TextInputWithTokens.module.css'
+import {clsx} from 'clsx'
+import type {BetterSystemStyleObject} from '../sx'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyReactComponent = React.ComponentType<React.PropsWithChildren<any>>
@@ -96,6 +97,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     validationStatus,
     variant: variantProp, // deprecated. use `size` instead
     visibleTokenCount,
+    style,
     ...rest
   }: TextInputWithTokensProps<TokenComponentType | typeof Token>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
@@ -255,10 +257,49 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
 
   const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG)
 
+  const stylingProps = React.useMemo(
+    () =>
+      enabled
+        ? {
+            className: clsx(className, styles.TextInputWrapper),
+            style: maxHeight ? {maxHeight, ...style} : style,
+            sx: sxProp,
+          }
+        : {
+            className,
+            style,
+            sx: {
+              paddingLeft: '12px',
+              py: '6px',
+              ...(block
+                ? {
+                    display: 'flex',
+                    width: '100%',
+                  }
+                : {}),
+
+              ...(maxHeight
+                ? {
+                    maxHeight,
+                    overflow: 'auto',
+                  }
+                : {}),
+
+              ...(preventTokenWrapping
+                ? {
+                    overflow: 'auto',
+                  }
+                : {}),
+
+              ...sxProp,
+            } as BetterSystemStyleObject,
+          },
+    [block, className, enabled, maxHeight, preventTokenWrapping, style, sxProp],
+  )
+
   return (
     <TextInputWrapper
       block={block}
-      className={className}
       contrast={contrast}
       disabled={disabled}
       hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
@@ -270,31 +311,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       validationStatus={validationStatus}
       variant={variantProp} // deprecated. use `size` prop instead
       onClick={focusInput}
-      sx={{
-        paddingLeft: '12px',
-        py: `calc(12px / 2)`,
-        ...(block
-          ? {
-              display: 'flex',
-              width: '100%',
-            }
-          : {}),
-
-        ...(maxHeight
-          ? {
-              maxHeight,
-              overflow: 'auto',
-            }
-          : {}),
-
-        ...(preventTokenWrapping
-          ? {
-              overflow: 'auto',
-            }
-          : {}),
-
-        ...sxProp,
-      }}
+      data-token-wrapping={Boolean(preventTokenWrapping || maxHeight) || undefined}
+      {...stylingProps}
     >
       {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
       <TextInputInnerVisualSlot