Remove the CSS modules feature flag from the FormControl component

.changeset/hungry-pumas-poke.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Removes feature flag for FormControl

packages/react/src/FormControl/FormControl.tsx

@@ -20,12 +20,8 @@ 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
@@ -51,7 +47,6 @@ 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,
@@ -122,6 +117,46 @@ 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
@@ -134,69 +169,33 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
         }}
       >
         {isChoiceInput || layout === 'horizontal' ? (
-          <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>
+          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>
+          )
         ) : (
           <Box
             ref={ref}
             data-has-label={!isLabelHidden ? '' : undefined}
             display="flex"
             flexDirection="column"
             alignItems="flex-start"
-            sx={
-              enabled
-                ? sx
-                : {...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}
-            }
-            className={clsx(className, {
-              [classes.ControlVerticalLayout]: enabled,
-            })}
+            sx={sx}
+            className={clsx(className, classes.ControlVerticalLayout)}
           >
             {slots.label}
             {React.isValidElement(InputComponent) &&
@@ -229,69 +228,6 @@ 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,14 +1,10 @@
 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 {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
 
 type FormControlCaptionProps = React.PropsWithChildren<
   {
@@ -17,37 +13,21 @@ type FormControlCaptionProps = React.PropsWithChildren<
   } & SxProp
 >
 
+const Caption = toggleSxComponent({}, Text) as React.ComponentType<FormControlCaptionProps>
+
 function FormControlCaption({id, children, sx, className}: FormControlCaptionProps) {
-  const enabled = useFeatureFlag(cssModulesFlag)
   const {captionId, disabled} = useFormControlContext()
+
   return (
-    <StyledCaption
+    <Caption
       id={id ?? captionId}
-      className={clsx(className, {
-        [classes.Caption]: enabled,
-      })}
+      className={clsx(className, classes.Caption)}
       data-control-disabled={disabled ? '' : undefined}
       sx={sx}
     >
       {children}
-    </StyledCaption>
+    </Caption>
   )
 }
 
-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/__tests__/FormControl.test.tsx

@@ -12,13 +12,25 @@ import {
   TextInput,
   TextInputWithTokens,
 } from '../..'
+import {behavesAsComponent} from '../../utils/testing'
 import {MarkGithubIcon} from '@primer/octicons-react'
 
 const LABEL_TEXT = 'Form control'
 const CAPTION_TEXT = 'Hint text'
 const ERROR_TEXT = 'This field is invalid'
 
 describe('FormControl', () => {
+  behavesAsComponent({
+    Component: FormControl,
+    options: {skipAs: true, skipDisplayName: true},
+    toRender: () => (
+      <FormControl>
+        <FormControl.Label>{LABEL_TEXT}</FormControl.Label>
+        <TextInput />
+      </FormControl>
+    ),
+  })
+
   describe('vertically stacked layout (default)', () => {
     describe('rendering', () => {
       it('renders with a hidden label', () => {