Revert "Remove the CSS modules feature flag from the FormControl component"

packages/react/src/FormControl/FormControl.tsx

@@ -20,8 +20,12 @@ import FormControlLeadingVisual from './FormControlLeadingVisual'
 import FormControlValidation from './_FormControlValidation'
 import {FormControlContextProvider} from './_FormControlContext'
 import {warning} from '../utils/warning'
+import styled from 'styled-components'
+import sx from '../sx'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {cssModulesFlag} from './feature-flags'
+import {useFeatureFlag} from '../FeatureFlags'
 import classes from './FormControl.module.css'
-import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type FormControlProps = {
   children?: React.ReactNode
@@ -47,6 +51,7 @@ export type FormControlProps = {
 
 const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
   ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx, className}, ref) => {
+    const enabled = useFeatureFlag(cssModulesFlag)
     const [slots, childrenWithoutSlots] = useSlots(children, {
       caption: FormControlCaption,
       label: FormControlLabel,
@@ -117,46 +122,6 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
     }
 
     const isLabelHidden = slots.label?.props.visuallyHidden
-    const InputChildren = (
-      <>
-        <div className={classes.ControlChoiceInputs}>
-          {React.isValidElement(InputComponent)
-            ? React.cloneElement(
-                InputComponent as React.ReactElement<{
-                  id: string
-                  disabled: boolean
-                  required: boolean
-                  ['aria-describedby']: string
-                }>,
-                {
-                  id,
-                  disabled,
-                  // allow checkboxes to be required
-                  required: required && !isRadioInput,
-                  ['aria-describedby']: captionId as string,
-                },
-              )
-            : null}
-          {childrenWithoutSlots.filter(
-            child =>
-              React.isValidElement(child) && ![Checkbox, Radio].some(inputComponent => child.type === inputComponent),
-          )}
-        </div>
-        {slots.leadingVisual ? (
-          <div
-            className={classes.LeadingVisual}
-            data-disabled={disabled ? '' : undefined}
-            data-has-caption={slots.caption ? '' : undefined}
-          >
-            {slots.leadingVisual}
-          </div>
-        ) : null}
-        <div className={classes.LabelContainer}>
-          {slots.label}
-          {slots.caption}
-        </div>
-      </>
-    )
 
     return (
       <FormControlContextProvider
@@ -169,33 +134,69 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
         }}
       >
         {isChoiceInput || layout === 'horizontal' ? (
-          sx !== defaultSxProp ? (
-            <Box
-              ref={ref}
-              data-has-leading-visual={slots.leadingVisual ? '' : undefined}
-              sx={sx}
-              className={clsx(className, classes.ControlHorizontalLayout)}
-            >
-              {InputChildren}
-            </Box>
-          ) : (
-            <div
-              ref={ref}
-              data-has-leading-visual={slots.leadingVisual ? '' : undefined}
-              className={clsx(className, classes.ControlHorizontalLayout)}
-            >
-              {InputChildren}
-            </div>
-          )
+          <StyledHorizontalLayout
+            ref={ref}
+            data-has-leading-visual={slots.leadingVisual ? '' : undefined}
+            sx={sx}
+            className={clsx(className, {
+              [classes.ControlHorizontalLayout]: enabled,
+            })}
+          >
+            <StyledChoiceInputs className={classes.ControlChoiceInputs}>
+              {React.isValidElement(InputComponent)
+                ? React.cloneElement(
+                    InputComponent as React.ReactElement<{
+                      id: string
+                      disabled: boolean
+                      required: boolean
+                      ['aria-describedby']: string
+                    }>,
+                    {
+                      id,
+                      disabled,
+                      // allow checkboxes to be required
+                      required: required && !isRadioInput,
+                      ['aria-describedby']: captionId as string,
+                    },
+                  )
+                : null}
+              {childrenWithoutSlots.filter(
+                child =>
+                  React.isValidElement(child) &&
+                  ![Checkbox, Radio].some(inputComponent => child.type === inputComponent),
+              )}
+            </StyledChoiceInputs>
+            {slots.leadingVisual ? (
+              <StyledLeadingVisual
+                className={clsx({
+                  [classes.LeadingVisual]: enabled,
+                })}
+                data-disabled={disabled ? '' : undefined}
+                data-has-caption={slots.caption ? '' : undefined}
+              >
+                {slots.leadingVisual}
+              </StyledLeadingVisual>
+            ) : null}
+            <StyledLabelContainer className={classes.LabelContainer}>
+              {slots.label}
+              {slots.caption}
+            </StyledLabelContainer>
+          </StyledHorizontalLayout>
         ) : (
           <Box
             ref={ref}
             data-has-label={!isLabelHidden ? '' : undefined}
             display="flex"
             flexDirection="column"
             alignItems="flex-start"
-            sx={sx}
-            className={clsx(className, classes.ControlVerticalLayout)}
+            sx={
+              enabled
+                ? sx
+                : {...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}
+            }
+            className={clsx(className, {
+              [classes.ControlVerticalLayout]: enabled,
+            })}
           >
             {slots.label}
             {React.isValidElement(InputComponent) &&
@@ -228,6 +229,69 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
   },
 )
 
+const StyledHorizontalLayout = toggleStyledComponent(
+  cssModulesFlag,
+  'div',
+  styled.div`
+    display: flex;
+
+    &:where([data-has-leading-visual]) {
+      align-items: center;
+    }
+
+    ${sx}
+  `,
+)
+
+const StyledChoiceInputs = toggleStyledComponent(
+  cssModulesFlag,
+  'div',
+  styled.div`
+    > input {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  `,
+)
+
+const StyledLabelContainer = toggleStyledComponent(
+  cssModulesFlag,
+  'div',
+  styled.div`
+    > * {
+      padding-left: var(--stack-gap-condensed);
+    }
+
+    > label {
+      font-weight: var(--base-text-weight-normal);
+    }
+  `,
+)
+
+const StyledLeadingVisual = toggleStyledComponent(
+  cssModulesFlag,
+  'div',
+  styled.div`
+    color: var(--fgColor-default);
+    margin-left: var(--base-size-8);
+
+    &:where([data-disabled]) {
+      color: var(--fgColor-muted);
+    }
+
+    > * {
+      fill: currentColor;
+      min-width: var(--text-body-size-large);
+      min-height: var(--text-body-size-large);
+    }
+
+    > *:where([data-has-caption]) {
+      min-width: var(--base-size-24);
+      min-height: var(--base-size-24);
+    }
+  `,
+)
+
 export default Object.assign(FormControl, {
   Caption: FormControlCaption,
   Label: FormControlLabel,

packages/react/src/FormControl/FormControlCaption.tsx

@@ -1,10 +1,14 @@
 import {clsx} from 'clsx'
 import React from 'react'
+import styled from 'styled-components'
+import {cssModulesFlag} from './feature-flags'
+import {useFeatureFlag} from '../FeatureFlags'
 import Text from '../Text'
+import sx from '../sx'
 import type {SxProp} from '../sx'
 import classes from './FormControlCaption.module.css'
 import {useFormControlContext} from './_FormControlContext'
-import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 
 type FormControlCaptionProps = React.PropsWithChildren<
   {
@@ -14,18 +18,36 @@ type FormControlCaptionProps = React.PropsWithChildren<
 >
 
 function FormControlCaption({id, children, sx, className}: FormControlCaptionProps) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   const {captionId, disabled} = useFormControlContext()
-  const Caption = toggleSxComponent(sx, Text) as React.ComponentType<FormControlCaptionProps>
-
   return (
-    <Caption
+    <StyledCaption
       id={id ?? captionId}
-      className={clsx(className, classes.Caption)}
+      className={clsx(className, {
+        [classes.Caption]: enabled,
+      })}
       data-control-disabled={disabled ? '' : undefined}
+      sx={sx}
     >
       {children}
-    </Caption>
+    </StyledCaption>
   )
 }
 
+const StyledCaption = toggleStyledComponent(
+  cssModulesFlag,
+  Text,
+  styled(Text)`
+    color: var(--fgColor-muted);
+    display: block;
+    font-size: var(--text-body-size-small);
+
+    &:where([data-control-disabled]) {
+      color: var(--control-fgColor-disabled);
+    }
+
+    ${sx}
+  `,
+)
+
 export {FormControlCaption}

packages/react/src/FormControl/feature-flags.ts

@@ -0,0 +1 @@
+export const cssModulesFlag = 'primer_react_css_modules_ga'

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

@@ -1,8 +1,11 @@
 import {clsx} from 'clsx'
 import React from 'react'
-import {type SxProp} from '../../sx'
+import styled from 'styled-components'
+import sx, {type SxProp} from '../../sx'
+import {cssModulesFlag} from '../../FormControl/feature-flags'
+import {useFeatureFlag} from '../../FeatureFlags'
 import classes from './InputLabel.module.css'
-import {toggleSxComponent} from '../utils/toggleSxComponent'
+import {toggleStyledComponent} from '../utils/toggleStyledComponent'
 
 type BaseProps = SxProp & {
   disabled?: boolean
@@ -40,26 +43,76 @@ function InputLabel({
   className,
   ...props
 }: Props) {
-  const Label = toggleSxComponent({sx}, as) as React.ComponentType<Props>
+  const enabled = useFeatureFlag(cssModulesFlag)
   return (
-    <Label
+    <StyledLabel
+      as={as}
       data-control-disabled={disabled ? '' : undefined}
       data-visually-hidden={visuallyHidden ? '' : undefined}
       htmlFor={htmlFor}
       id={id}
-      className={clsx(className, classes.Label)}
+      className={clsx(className, {
+        [classes.Label]: enabled,
+      })}
+      sx={sx}
       {...props}
     >
       {required || requiredText ? (
-        <span className={classes.RequiredText}>
+        <StyledRequiredText
+          className={clsx({
+            [classes.RequiredText]: enabled,
+          })}
+        >
           <span>{children}</span>
           <span aria-hidden={requiredIndicator ? undefined : true}>{requiredText ?? '*'}</span>
-        </span>
+        </StyledRequiredText>
       ) : (
         children
       )}
-    </Label>
+    </StyledLabel>
   )
 }
 
+const StyledLabel = toggleStyledComponent(
+  cssModulesFlag,
+  'label',
+  styled.label`
+    align-self: flex-start;
+    display: block;
+    color: var(--fgColor-default);
+    cursor: pointer;
+    font-weight: 600;
+    font-size: var(--text-body-size-medium);
+
+    &:where([data-control-disabled]) {
+      color: var(--fgColor-muted);
+      cursor: not-allowed;
+    }
+
+    &:where([data-visually-hidden]) {
+      border: 0;
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+
+    ${sx}
+  `,
+)
+
+const StyledRequiredText = toggleStyledComponent(
+  cssModulesFlag,
+  'span',
+  styled.span`
+    display: flex;
+    column-gap: var(--base-size-4);
+  `,
+)
+
 export {InputLabel}