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": "npm@10.9.1+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}