refactor(FormControl): update existing code for sub-components to prep for migration

.changeset/soft-bananas-behave.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update FormControl sub-components to use new styled components format for migration

package.json

@@ -93,5 +93,6 @@
       "webpack": false,
       "running": false
     }
-  ]
+  ],
+  "packageManager": "[email protected]+sha512.c89530d37c4baa38afd43e76a077a84b9aa63840b986426584fd5c5a54ab0a0b21bb1595c851042b733784b0b43706d36a494b4d8ae1a086a762cb8d3f95942a"
 }

packages/react/src/FormControl/FormControl.tsx

@@ -14,9 +14,9 @@ import {get} from '../constants'
 import {useSlots} from '../hooks/useSlots'
 import type {SxProp} from '../sx'
 import {useId} from '../hooks/useId'
-import FormControlCaption from './_FormControlCaption'
-import FormControlLabel from './_FormControlLabel'
-import FormControlLeadingVisual from './_FormControlLeadingVisual'
+import {FormControlCaption} from './FormControlCaption'
+import FormControlLabel from './FormControlLabel'
+import FormControlLeadingVisual from './FormControlLeadingVisual'
 import FormControlValidation from './_FormControlValidation'
 import {FormControlContextProvider} from './_FormControlContext'
 import {warning} from '../utils/warning'

packages/react/src/FormControl/FormControlCaption.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import type {SxProp} from '../sx'
+import {useFormControlContext} from './_FormControlContext'
+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<
+  {
+    id?: string
+  } & SxProp
+>
+
+function FormControlCaption({id, children, sx}: FormControlCaptionProps) {
+  const {captionId, disabled} = useFormControlContext()
+  return (
+    <StyledCaption id={id ?? captionId} data-control-disabled={disabled ? '' : undefined} sx={sx}>
+      {children}
+    </StyledCaption>
+  )
+}
+
+export {FormControlCaption}

packages/react/src/FormControl/_FormControlLabel.tsx → packages/react/src/FormControl/FormControlLabel.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import InputLabel from '../internal/components/InputLabel'
 import type {SxProp} from '../sx'
 import {useFormControlContext} from './_FormControlContext'
+import {InputLabel} from '../internal/components/InputLabel'
 
 export type Props = {
   /**
@@ -49,6 +49,7 @@ const FormControlLabel: React.FC<
           sx,
           ...props,
         }
+
   return <InputLabel {...labelProps}>{children}</InputLabel>
 }
 

packages/react/src/FormControl/FormControlLeadingVisual.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import {get} from '../constants'
+import type {SxProp} from '../sx'
+import {useFormControlContext} from './_FormControlContext'
+import styled from 'styled-components'
+import sx from '../sx'
+
+const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp>> = ({children, sx}) => {
+  const {disabled, captionId} = useFormControlContext()
+  return (
+    <StyledLeadingVisual
+      data-control-disabled={disabled ? '' : undefined}
+      data-has-caption={captionId ? '' : undefined}
+      sx={sx}
+    >
+      {children}
+    </StyledLeadingVisual>
+  )
+}
+
+const StyledLeadingVisual = styled.div`
+  --leadingVisual-size: ${get('fontSizes.2')};
+
+  color: var(--fgColor-default);
+  margin-inline-start: ${get('space.2')};
+
+  &:where([data-control-disabled]) {
+    color: var(--fgColor-muted);
+  }
+
+  & > * {
+    min-width: var(--leadingVisual-size);
+    min-height: var(--leadingVisual-size);
+    fill: currentColor;
+  }
+
+  &:where([data-has-caption]) {
+    --leadingVisual-size: ${get('fontSizes.4')};
+  }
+
+  ${sx}
+`
+
+export default FormControlLeadingVisual

packages/react/src/experimental/SelectPanel2/SelectPanel.tsx

@@ -20,7 +20,7 @@ import {useSlots} from '../../hooks/useSlots'
 import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
 import type {OverlayProps} from '../../Overlay/Overlay'
 import {StyledOverlay, heightMap} from '../../Overlay/Overlay'
-import InputLabel from '../../internal/components/InputLabel'
+import {InputLabel} from '../../internal/components/InputLabel'
 import {invariant} from '../../utils/invariant'
 import {AriaStatus} from '../../live-region'
 import {useResponsiveValue} from '../../hooks/useResponsiveValue'

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

@@ -1,7 +1,7 @@
 import React from 'react'
-import Box from '../../Box'
-import type {SxProp} from '../../sx'
-import VisuallyHidden from '../../_VisuallyHidden'
+import styled from 'styled-components'
+import {get} from '../../constants'
+import sx, {type SxProp} from '../../sx'
 
 type BaseProps = SxProp & {
   disabled?: boolean
@@ -23,9 +23,9 @@ export type LegendOrSpanProps = BaseProps & {
   htmlFor?: undefined
 }
 
-type Props = LabelProps | LegendOrSpanProps
+type Props = React.PropsWithChildren<LabelProps | LegendOrSpanProps>
 
-const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
+function InputLabel({
   children,
   disabled,
   htmlFor,
@@ -38,37 +38,62 @@ const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
   as = 'label',
   className,
   ...props
-}) => {
+}: Props) {
   return (
-    <VisuallyHidden
-      isVisible={!visuallyHidden}
-      as={
-        as as 'label' /* This assertion is clearly wrong, but it's the only way TS will allow the htmlFor prop to be possibly defined */
-      }
+    <StyledLabel
+      as={as}
+      data-control-disabled={disabled ? '' : undefined}
+      data-visually-hidden={visuallyHidden ? '' : undefined}
       htmlFor={htmlFor}
       id={id}
       className={className}
-      sx={{
-        fontWeight: 'bold',
-        fontSize: 1,
-        display: 'block',
-        color: disabled ? 'fg.muted' : 'fg.default',
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        alignSelf: 'flex-start',
-        ...sx,
-      }}
+      sx={sx}
       {...props}
     >
       {required || requiredText ? (
-        <Box display="flex" as="span">
-          <Box mr={1}>{children}</Box>
+        <StyledRequiredText>
+          <span>{children}</span>
           <span aria-hidden={requiredIndicator ? undefined : true}>{requiredText ?? '*'}</span>
-        </Box>
+        </StyledRequiredText>
       ) : (
         children
       )}
-    </VisuallyHidden>
+    </StyledLabel>
   )
 }
 
-export default 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: ${get('fontSizes.1')};
+
+  &: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}
+`
+
+export {InputLabel}