Revert #5370, #5349 due to visual regressions (#5434)

* Revert "refactor(FormControl): update to CSS Modules behind feature flag (#5370)"

This reverts commit 204ded0.

* Revert "refactor(Table): update to CSS Modules (#5349)"

This reverts commit 2c79798.

* Create healthy-eggs-pretend.md

Author: francinelucca

.changeset/gentle-stingrays-search.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Revert "refactor(FormControl): update to CSS Modules behind feature flag" & "refactor(Table): update to CSS Modules"

.changeset/healthy-eggs-pretend.md

@@ -1,6 +1,6 @@
-import {clsx} from 'clsx'
 import React, {useContext} from 'react'
 import Autocomplete from '../Autocomplete'
+import Box from '../Box'
 import Checkbox from '../Checkbox'
 import Radio from '../Radio'
 import Select from '../Select/Select'
@@ -10,6 +10,7 @@ import TextInputWithTokens from '../TextInputWithTokens'
 import Textarea from '../Textarea'
 import {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup'
 import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer'
+import {get} from '../constants'
 import {useSlots} from '../hooks/useSlots'
 import type {SxProp} from '../sx'
 import {useId} from '../hooks/useId'
@@ -19,12 +20,6 @@ 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'
 
 export type FormControlProps = {
   children?: React.ReactNode
@@ -50,7 +45,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,
@@ -133,61 +127,69 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
         }}
       >
         {isChoiceInput || layout === 'horizontal' ? (
-          <StyledHorizontalLayout
+          <Box
             ref={ref}
-            data-has-leading-visual={slots.leadingVisual ? '' : undefined}
+            display="flex"
+            alignItems={slots.leadingVisual ? 'center' : undefined}
             sx={sx}
-            className={clsx(className, {
-              [classes.ControlHorizontalLayout]: enabled,
-            })}
+            className={className}
           >
-            <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}
+            <Box sx={{'> input': {marginLeft: 0, marginRight: 0}}}>
+              {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,
+                  },
+                )}
               {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}
+            </Box>
+            {slots.leadingVisual && (
+              <Box
+                color={disabled ? 'fg.muted' : 'fg.default'}
+                sx={{
+                  '> *': {
+                    minWidth: slots.caption ? get('fontSizes.4') : get('fontSizes.2'),
+                    minHeight: slots.caption ? get('fontSizes.4') : get('fontSizes.2'),
+                    fill: 'currentColor',
+                  },
+                }}
+                ml={2}
               >
                 {slots.leadingVisual}
-              </StyledLeadingVisual>
-            ) : null}
-            <StyledLabelContainer className={classes.LabelContainer}>
+              </Box>
+            )}
+            <Box
+              sx={{
+                '> *': {paddingLeft: 'var(--stack-gap-condensed)'},
+                '> label': {fontWeight: 'var(--base-text-weight-normal)'},
+              }}
+            >
               {slots.label}
               {slots.caption}
-            </StyledLabelContainer>
-          </StyledHorizontalLayout>
+            </Box>
+          </Box>
         ) : (
-          <StyledVerticalLayout
+          <Box
             ref={ref}
-            data-has-label={!isLabelHidden ? '' : undefined}
-            className={clsx(className, {
-              [classes.ControlVerticalLayout]: enabled,
-            })}
+            display="flex"
+            flexDirection="column"
+            alignItems="flex-start"
+            sx={{...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}}
+            className={className}
           >
             {slots.label}
             {React.isValidElement(InputComponent) &&
@@ -213,96 +215,13 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
               <ValidationAnimationContainer show>{slots.validation}</ValidationAnimationContainer>
             ) : null}
             {slots.caption}
-          </StyledVerticalLayout>
+          </Box>
         )}
       </FormControlContextProvider>
     )
   },
 )
 
-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 StyledVerticalLayout = toggleStyledComponent(
-  cssModulesFlag,
-  'div',
-  styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    & > *:not(label) + * {
-      margin-top: var(--base-size-4);
-    }
-
-    &:where([data-has-label]) > * + * {
-      margin-top: var(--base-size-4);
-    }
-
-    ${sx}
-  `,
-)
-
-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,

.changeset/selfish-flowers-approve.md

@@ -1,14 +1,22 @@
-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 Text from '../Text'
+import styled from 'styled-components'
+import {get} from '../constants'
+import sx from '../sx'
+
+const StyledCaption = styled(Text)`
+  color: var(--fgColor-muted);
+  display: block;
+  font-size: ${get('fontSizes.0')};
+
+  &:where([data-control-disabled]) {
+    color: var(--control-fgColor-disabled);
+  }
+
+  ${sx}
+`
 
 type FormControlCaptionProps = React.PropsWithChildren<
   {
@@ -17,36 +25,12 @@ type FormControlCaptionProps = React.PropsWithChildren<
 >
 
 function FormControlCaption({id, children, sx}: FormControlCaptionProps) {
-  const enabled = useFeatureFlag(cssModulesFlag)
   const {captionId, disabled} = useFormControlContext()
   return (
-    <StyledCaption
-      id={id ?? captionId}
-      className={clsx({
-        [classes.Caption]: enabled,
-      })}
-      data-control-disabled={disabled ? '' : undefined}
-      sx={sx}
-    >
+    <StyledCaption id={id ?? captionId} data-control-disabled={disabled ? '' : undefined} sx={sx}>
       {children}
     </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/DataTable/Table.module.css

@@ -1,5 +1,6 @@
 import React from 'react'
 import {render} from '@testing-library/react'
+import {renderHook} from '@testing-library/react-hooks'
 import axe from 'axe-core'
 import {
   Autocomplete,
@@ -11,7 +12,8 @@ import {
   Textarea,
   TextInput,
   TextInputWithTokens,
-} from '../..'
+  useFormControlForwardedProps,
+} from '..'
 import {MarkGithubIcon} from '@primer/octicons-react'
 
 const LABEL_TEXT = 'Form control'
@@ -452,3 +454,53 @@ describe('FormControl', () => {
     })
   })
 })
+
+describe('useFormControlForwardedProps', () => {
+  describe('when used outside FormControl', () => {
+    test('returns empty object when no props object passed', () => {
+      const result = renderHook(() => useFormControlForwardedProps({}))
+      expect(result.result.current).toEqual({})
+    })
+
+    test('returns passed props object instance when passed', () => {
+      const props = {id: 'test-id'}
+      const result = renderHook(() => useFormControlForwardedProps(props))
+      expect(result.result.current).toBe(props)
+    })
+  })
+
+  test('provides context value when no props object is passed', () => {
+    const id = 'test-id'
+
+    const {result} = renderHook(() => useFormControlForwardedProps({}), {
+      wrapper: ({children}: {children: React.ReactNode}) => (
+        <FormControl id={id} disabled required>
+          <FormControl.Label>Label</FormControl.Label>
+          {children}
+        </FormControl>
+      ),
+    })
+
+    expect(result.current.disabled).toBe(true)
+    expect(result.current.id).toBe(id)
+    expect(result.current.required).toBe(true)
+  })
+
+  test('merges with props object, overriding to prioritize props when conflicting', () => {
+    const props = {id: 'override-id', xyz: 'someValue'}
+
+    const {result} = renderHook(() => useFormControlForwardedProps(props), {
+      wrapper: ({children}: {children: React.ReactNode}) => (
+        <FormControl id="form-control-id" disabled>
+          <FormControl.Label>Label</FormControl.Label>
+          {children}
+        </FormControl>
+      ),
+    })
+
+    expect(result.current.disabled).toBe(true)
+    expect(result.current.id).toBe(props.id)
+    expect(result.current.required).toBeFalsy()
+    expect(result.current.xyz).toBe(props.xyz)
+  })
+})

packages/react/src/DataTable/Table.tsx

@@ -1,10 +1,7 @@
-import {clsx} from 'clsx'
 import React from 'react'
 import styled from 'styled-components'
+import {get} from '../../constants'
 import sx, {type SxProp} from '../../sx'
-import {cssModulesFlag} from '../../FormControl/feature-flags'
-import {useFeatureFlag} from '../../FeatureFlags'
-import classes from './InputLabel.module.css'
 
 type BaseProps = SxProp & {
   disabled?: boolean
@@ -42,26 +39,19 @@ function InputLabel({
   className,
   ...props
 }: Props) {
-  const enabled = useFeatureFlag(cssModulesFlag)
   return (
     <StyledLabel
       as={as}
       data-control-disabled={disabled ? '' : undefined}
       data-visually-hidden={visuallyHidden ? '' : undefined}
       htmlFor={htmlFor}
       id={id}
-      className={clsx(className, {
-        [classes.Label]: enabled,
-      })}
+      className={className}
       sx={sx}
       {...props}
     >
       {required || requiredText ? (
-        <StyledRequiredText
-          className={clsx({
-            [classes.RequiredText]: enabled,
-          })}
-        >
+        <StyledRequiredText>
           <span>{children}</span>
           <span aria-hidden={requiredIndicator ? undefined : true}>{requiredText ?? '*'}</span>
         </StyledRequiredText>
@@ -72,13 +62,18 @@ function InputLabel({
   )
 }
 
+const StyledRequiredText = styled.span`
+  display: flex;
+  column-gap: ${get('space.1')};
+`
+
 const StyledLabel = styled.label`
   align-self: flex-start;
   display: block;
   color: var(--fgColor-default);
   cursor: pointer;
   font-weight: 600;
-  font-size: var(--text-body-size-medium);
+  font-size: ${get('fontSizes.1')};
 
   &:where([data-control-disabled]) {
     color: var(--fgColor-muted);
@@ -101,9 +96,4 @@ const StyledLabel = styled.label`
   ${sx}
 `
 
-const StyledRequiredText = styled.span`
-  display: flex;
-  column-gap: var(--base-size-4);
-`
-
 export {InputLabel}

packages/react/src/FormControl/FormControl.module.css

@@ -1,15 +1,12 @@
 import type {IconProps} from '@primer/octicons-react'
 import {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'
-import {clsx} from 'clsx'
 import React from 'react'
-import styled from 'styled-components'
 import Text from '../../Text'
-import sx from '../../sx'
 import type {SxProp} from '../../sx'
-import {cssModulesFlag} from '../../FormControl/feature-flags'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
-import {useFeatureFlag} from '../../FeatureFlags'
-import classes from './InputValidation.module.css'
+import styled from 'styled-components'
+import {get} from '../../constants'
+import sx from '../../sx'
 
 type Props = {
   id: string
@@ -25,7 +22,6 @@ const validationIconMap: Record<
 }
 
 const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id, validationStatus, sx}) => {
-  const enabled = useFeatureFlag(cssModulesFlag)
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
 
   // TODO: use `text-caption-lineHeight` token as a custom property when it's available
@@ -35,19 +31,10 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id
   const iconBoxMinHeight = iconSize * captionLineHeight
 
   return (
-    <StyledInputValidation
-      className={clsx({
-        [classes.InputValidation]: enabled,
-      })}
-      data-validation-status={validationStatus}
-      sx={sx}
-    >
+    <StyledInputValidation data-validation-status={validationStatus} sx={sx}>
       {IconComponent ? (
         <StyledValidationIcon
           aria-hidden="true"
-          className={clsx({
-            [classes.ValidationIcon]: enabled,
-          })}
           style={
             {
               '--inputValidation-iconSize': iconBoxMinHeight,
@@ -57,13 +44,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id
           <IconComponent size={iconSize} fill="currentColor" />
         </StyledValidationIcon>
       ) : null}
-      <StyledValidationText
-        id={id}
-        className={clsx({
-          [classes.ValidationText]: enabled,
-        })}
-        style={{'--inputValidation-lineHeight': captionLineHeight} as React.CSSProperties}
-      >
+      <StyledValidationText id={id} style={{'--inputValidation-lineHeight': captionLineHeight} as React.CSSProperties}>
         {children}
       </StyledValidationText>
     </StyledInputValidation>
@@ -73,7 +54,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id
 const StyledInputValidation = styled(Text)`
   color: var(--inputValidation-fgColor);
   display: flex;
-  font-size: var(--text-body-size-small);
+  font-size: ${get('fontSizes.0')};
   font-weight: 600;
 
   & :where(a) {
@@ -82,11 +63,11 @@ const StyledInputValidation = styled(Text)`
   }
 
   &:where([data-validation-status='success']) {
-    --inputValidation-fgColor: var(--fgColor-success);
+    --inputValidation-fgColor: ${get('colors.success.fg')};
   }
 
   &:where([data-validation-status='error']) {
-    --inputValidation-fgColor: var(--fgColor-danger);
+    --inputValidation-fgColor: ${get('colors.danger.fg')};
   }
 
   ${sx}
@@ -95,7 +76,7 @@ const StyledInputValidation = styled(Text)`
 const StyledValidationIcon = styled.span`
   align-items: center;
   display: flex;
-  margin-inline-end: var(--base-size-4);
+  margin-inline-end: ${get('space.1')};
   min-height: var(--inputValidation-iconSize);
 `