diff --git a/packages/react/src/FormControl/FormControlFeatureFlags.ts b/packages/react/src/FormControl/FormControlFeatureFlags.ts new file mode 100644 index 00000000000..5ab1ca4c692 --- /dev/null +++ b/packages/react/src/FormControl/FormControlFeatureFlags.ts @@ -0,0 +1 @@ +export const featureFlag = 'primer_react_css_modules_team' diff --git a/packages/react/src/internal/components/InputCaption.module.css b/packages/react/src/internal/components/InputCaption.module.css new file mode 100644 index 00000000000..2692c6ee51e --- /dev/null +++ b/packages/react/src/internal/components/InputCaption.module.css @@ -0,0 +1,9 @@ +.InputCaption { + color: var(--fgColor-muted); + display: block; + font-size: var(--text-caption-size); + + &:where([data-disabled]) { + color: var(--control-fgColor-disabled); + } +} diff --git a/packages/react/src/internal/components/InputCaption.tsx b/packages/react/src/internal/components/InputCaption.tsx index 03fbb184be9..2de1fcd03b8 100644 --- a/packages/react/src/internal/components/InputCaption.tsx +++ b/packages/react/src/internal/components/InputCaption.tsx @@ -1,30 +1,69 @@ +import {clsx} from 'clsx' import React from 'react' import Text from '../../Text' import type {SxProp} from '../../sx' +import classes from './InputCaption.module.css' +import {useFeatureFlag} from '../../FeatureFlags' +import {featureFlag} from '../../FormControl/FormControlFeatureFlags' type Props = { /** * The unique identifier used to associate the caption with an input */ id: string + /** * Whether the input associated with this caption is disabled */ disabled?: boolean + + /** + * Provide an optional class name applied to the outermost element + */ + className?: string } & SxProp -const InputCaption: React.FC> = ({children, disabled, id, sx}) => ( - - {children} - -) +const InputCaption: React.FC> = ({ + children, + className: customClassName, + disabled, + id, + sx, +}) => { + const enabled = useFeatureFlag(featureFlag) + const className = clsx(customClassName, { + [classes.InputCaption]: enabled, + }) + + if (enabled) { + if (sx) { + return ( + + {children} + + ) + } + return ( + + {children} + + ) + } + + return ( + + {children} + + ) +} export default InputCaption diff --git a/packages/react/src/internal/components/InputLabel.module.css b/packages/react/src/internal/components/InputLabel.module.css new file mode 100644 index 00000000000..ab061e1dfbf --- /dev/null +++ b/packages/react/src/internal/components/InputLabel.module.css @@ -0,0 +1,13 @@ +.InputLabel { + display: block; + font-weight: bold; + font-size: var(--text-body-size-medium); + color: var(--fgColor-default); + cursor: pointer; + align-self: flex-start; + + &:where([data-disabled]) { + color: var(--fgColor-muted); + cursor: not-allowed; + } +}