refactor(FormControl): update InputCaption to use CSS Modules behind flag

packages/react/src/FormControl/FormControlFeatureFlags.ts

@@ -0,0 +1 @@
+export const featureFlag = 'primer_react_css_modules_team'

packages/react/src/internal/components/InputCaption.module.css

@@ -0,0 +1,9 @@
+.InputCaption {
+  color: var(--fgColor-muted);
+  display: block;
+  font-size: var(--text-caption-size);
+
+  &:where([data-disabled]) {
+    color: var(--control-fgColor-disabled);
+  }
+}

packages/react/src/internal/components/InputCaption.tsx

@@ -1,30 +1,69 @@
+import {clsx} from 'clsx'
 import React from 'react'
 import Text from '../../Text'
 import type {SxProp} from '../../sx'
+import classes from './InputCaption.module.css'
+import {useFeatureFlag} from '../../FeatureFlags'
+import {featureFlag} from '../../FormControl/FormControlFeatureFlags'
 
 type Props = {
   /**
    * The unique identifier used to associate the caption with an input
    */
   id: string
+
   /**
    * Whether the input associated with this caption is disabled
    */
   disabled?: boolean
+
+  /**
+   * Provide an optional class name applied to the outermost element
+   */
+  className?: string
 } & SxProp
 
-const InputCaption: React.FC<React.PropsWithChildren<Props>> = ({children, disabled, id, sx}) => (
-  <Text
-    id={id}
-    sx={{
-      color: disabled ? 'var(--control-fgColor-disabled)' : 'var(--fgColor-muted)',
-      display: 'block',
-      fontSize: 0,
-      ...sx,
-    }}
-  >
-    {children}
-  </Text>
-)
+const InputCaption: React.FC<React.PropsWithChildren<Props>> = ({
+  children,
+  className: customClassName,
+  disabled,
+  id,
+  sx,
+}) => {
+  const enabled = useFeatureFlag(featureFlag)
+  const className = clsx(customClassName, {
+    [classes.InputCaption]: enabled,
+  })
+
+  if (enabled) {
+    if (sx) {
+      return (
+        <Text id={id} data-disabled={disabled ? '' : undefined} className={className} sx={sx}>
+          {children}
+        </Text>
+      )
+    }
+    return (
+      <Text id={id} data-disabled={disabled ? '' : undefined} className={className}>
+        {children}
+      </Text>
+    )
+  }
+
+  return (
+    <Text
+      id={id}
+      className={className}
+      sx={{
+        color: disabled ? 'var(--control-fgColor-disabled)' : 'var(--fgColor-muted)',
+        display: 'block',
+        fontSize: 0,
+        ...sx,
+      }}
+    >
+      {children}
+    </Text>
+  )
+}
 
 export default InputCaption

packages/react/src/internal/components/InputLabel.module.css

@@ -0,0 +1,13 @@
+.InputLabel {
+  display: block;
+  font-weight: bold;
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-default);
+  cursor: pointer;
+  align-self: flex-start;
+
+  &:where([data-disabled]) {
+    color: var(--fgColor-muted);
+    cursor: not-allowed;
+  }
+}