From 967127df4d3646ba2dff50657c3244d3cf788e45 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 5 Dec 2024 16:42:11 -0600 Subject: [PATCH 01/10] refactor: move form control test files into folder --- .../__tests__/FormControl.test.tsx | 90 +------------------ .../useFormControlForwardedProps.test.tsx | 53 +++++++++++ 2 files changed, 55 insertions(+), 88 deletions(-) rename packages/react/src/{ => FormControl}/__tests__/FormControl.test.tsx (83%) create mode 100644 packages/react/src/FormControl/__tests__/useFormControlForwardedProps.test.tsx diff --git a/packages/react/src/__tests__/FormControl.test.tsx b/packages/react/src/FormControl/__tests__/FormControl.test.tsx similarity index 83% rename from packages/react/src/__tests__/FormControl.test.tsx rename to packages/react/src/FormControl/__tests__/FormControl.test.tsx index 3adcdfc5dda..52f4385833d 100644 --- a/packages/react/src/__tests__/FormControl.test.tsx +++ b/packages/react/src/FormControl/__tests__/FormControl.test.tsx @@ -1,19 +1,7 @@ import React from 'react' import {render} from '@testing-library/react' -import {renderHook} from '@testing-library/react-hooks' -import axe from 'axe-core' -import { - Autocomplete, - Checkbox, - CheckboxGroup, - FormControl, - Radio, - Select, - Textarea, - TextInput, - TextInputWithTokens, - useFormControlForwardedProps, -} from '..' +import {Autocomplete, Checkbox, CheckboxGroup, Radio, Select, Textarea, TextInput, TextInputWithTokens} from '../..' +import FormControl from '../../FormControl' import {MarkGithubIcon} from '@primer/octicons-react' const LABEL_TEXT = 'Form control' @@ -331,18 +319,6 @@ describe('FormControl', () => { spy.mockRestore() }) }) - - it('should have no axe violations', async () => { - const {container} = render( - - {LABEL_TEXT} - - {CAPTION_TEXT} - , - ) - const results = await axe.run(container) - expect(results).toHaveNoViolations() - }) }) describe('checkbox and radio layout', () => { @@ -440,67 +416,5 @@ describe('FormControl', () => { expect(getByTestId('checkbox-2')).not.toBeRequired() }) }) - - it('should have no axe violations', async () => { - const {container} = render( - - {LABEL_TEXT} - - {CAPTION_TEXT} - , - ) - const results = await axe.run(container) - expect(results).toHaveNoViolations() - }) - }) -}) - -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}) => ( - - Label - {children} - - ), - }) - - 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}) => ( - - Label - {children} - - ), - }) - - 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) }) }) diff --git a/packages/react/src/FormControl/__tests__/useFormControlForwardedProps.test.tsx b/packages/react/src/FormControl/__tests__/useFormControlForwardedProps.test.tsx new file mode 100644 index 00000000000..7f7883ac395 --- /dev/null +++ b/packages/react/src/FormControl/__tests__/useFormControlForwardedProps.test.tsx @@ -0,0 +1,53 @@ +import React from 'react' +import {renderHook} from '@testing-library/react-hooks' +import FormControl, {useFormControlForwardedProps} from '../../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}) => ( + + Label + {children} + + ), + }) + + 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}) => ( + + Label + {children} + + ), + }) + + 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) + }) +}) From 38adc0c5516b19fc02ff7a4278d127966a55e18e Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 5 Dec 2024 16:42:44 -0600 Subject: [PATCH 02/10] refactor(FormControl): update FormControl to use CSS Modules behind flag --- .../src/FormControl/FormControl.module.css | 56 ++++++ .../react/src/FormControl/FormControl.tsx | 185 +++++++++++++----- .../react/src/FormControl/feature-flags.ts | 1 + 3 files changed, 190 insertions(+), 52 deletions(-) create mode 100644 packages/react/src/FormControl/FormControl.module.css create mode 100644 packages/react/src/FormControl/feature-flags.ts diff --git a/packages/react/src/FormControl/FormControl.module.css b/packages/react/src/FormControl/FormControl.module.css new file mode 100644 index 00000000000..e9ff8e43fc1 --- /dev/null +++ b/packages/react/src/FormControl/FormControl.module.css @@ -0,0 +1,56 @@ +.ControlHorizontalLayout { + display: flex; + + *:where([data-has-leading-visual]) { + align-items: center; + } +} + +.ControlVerticalLayout { + display: flex; + flex-direction: column; + align-items: flex-start; + + & > *:not(label) + * { + margin-top: var(--base-size-4); + } + + &[data-has-label] > * + * { + margin-top: var(--base-size-4); + } +} + +.ControlChoiceInputs > input { + margin-left: 0; + margin-right: 0; +} + +.LabelContainer { + > * { + padding-left: var(--stack-gap-condensed); + } + + > label { + font-weight: var(--base-text-weight-normal); + } +} + +.LeadingVisual { + 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); + } +} diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index 69d4b9bf871..637394fb5ea 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -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,7 +10,6 @@ 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' @@ -20,6 +19,12 @@ 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 @@ -45,6 +50,7 @@ export type FormControlProps = { const FormControl = React.forwardRef( ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx, className}, ref) => { + const enabled = useFeatureFlag(cssModulesFlag) const [slots, childrenWithoutSlots] = useSlots(children, { caption: FormControlCaption, label: FormControlLabel, @@ -127,69 +133,61 @@ const FormControl = React.forwardRef( }} > {isChoiceInput || layout === 'horizontal' ? ( - - 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, - }, - )} + + {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), )} - - {slots.leadingVisual && ( - *': { - minWidth: slots.caption ? get('fontSizes.4') : get('fontSizes.2'), - minHeight: slots.caption ? get('fontSizes.4') : get('fontSizes.2'), - fill: 'currentColor', - }, - }} - ml={2} + + {slots.leadingVisual ? ( + {slots.leadingVisual} - - )} - *': {paddingLeft: 'var(--stack-gap-condensed)'}, - '> label': {fontWeight: 'var(--base-text-weight-normal)'}, - }} - > + + ) : null} + {slots.label} {slots.caption} - - + + ) : ( - *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}} - className={className} + data-has-label={!isLabelHidden ? '' : undefined} + className={clsx(className, { + [classes.ControlVerticalLayout]: enabled, + })} > {slots.label} {React.isValidElement(InputComponent) && @@ -215,13 +213,96 @@ const FormControl = React.forwardRef( {slots.validation} ) : null} {slots.caption} - + )} ) }, ) +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, diff --git a/packages/react/src/FormControl/feature-flags.ts b/packages/react/src/FormControl/feature-flags.ts new file mode 100644 index 00000000000..0ea24433c23 --- /dev/null +++ b/packages/react/src/FormControl/feature-flags.ts @@ -0,0 +1 @@ +export const cssModulesFlag = 'primer_react_css_modules_team' From 219f378c061aa5b8dd90f3cfd29ce067d2af00cc Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 5 Dec 2024 16:48:45 -0600 Subject: [PATCH 03/10] refactor(InputLabel): update InputLabel to use CSS Modules behind feature flag --- .../internal/components/InputLabel.module.css | 31 +++++++++++++++++++ .../src/internal/components/InputLabel.tsx | 28 +++++++++++------ 2 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 packages/react/src/internal/components/InputLabel.module.css 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..cddff230e26 --- /dev/null +++ b/packages/react/src/internal/components/InputLabel.module.css @@ -0,0 +1,31 @@ +.Label { + align-self: flex-start; + display: block; + color: var(--fgColor-default); + cursor: pointer; + font-weight: 600; + font-size: var(--text-body-size-medium); + + &: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; + } +} + +.RequiredText { + display: flex; + column-gap: var(--base-size-4); +} diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx index 9126d192086..b14f5366bfa 100644 --- a/packages/react/src/internal/components/InputLabel.tsx +++ b/packages/react/src/internal/components/InputLabel.tsx @@ -1,7 +1,10 @@ +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 @@ -39,6 +42,7 @@ function InputLabel({ className, ...props }: Props) { + const enabled = useFeatureFlag(cssModulesFlag) return ( {required || requiredText ? ( - + {children} {requiredText ?? '*'} @@ -62,18 +72,13 @@ 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: ${get('fontSizes.1')}; + font-size: var(--text-body-size-medium); &:where([data-control-disabled]) { color: var(--fgColor-muted); @@ -96,4 +101,9 @@ const StyledLabel = styled.label` ${sx} ` +const StyledRequiredText = styled.span` + display: flex; + column-gap: var(--base-size-4); +` + export {InputLabel} From feb488f2fd062e01dd6db70800c1919bcb32b2a0 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 5 Dec 2024 16:53:23 -0600 Subject: [PATCH 04/10] refactor(FormControl): update Caption to use CSS Modules behind feature flag --- .../FormControl/FormControlCaption.module.css | 9 ++++ .../src/FormControl/FormControlCaption.tsx | 50 ++++++++++++------- 2 files changed, 42 insertions(+), 17 deletions(-) create mode 100644 packages/react/src/FormControl/FormControlCaption.module.css diff --git a/packages/react/src/FormControl/FormControlCaption.module.css b/packages/react/src/FormControl/FormControlCaption.module.css new file mode 100644 index 00000000000..e3ce62a98d8 --- /dev/null +++ b/packages/react/src/FormControl/FormControlCaption.module.css @@ -0,0 +1,9 @@ +.Caption { + color: var(--fgColor-muted); + display: block; + font-size: var(--text-body-size-small); + + &:where([data-control-disabled]) { + color: var(--control-fgColor-disabled); + } +} diff --git a/packages/react/src/FormControl/FormControlCaption.tsx b/packages/react/src/FormControl/FormControlCaption.tsx index dc05e1a3bad..0b9ee2f5c64 100644 --- a/packages/react/src/FormControl/FormControlCaption.tsx +++ b/packages/react/src/FormControl/FormControlCaption.tsx @@ -1,22 +1,14 @@ +import {clsx} from 'clsx' 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 {cssModulesFlag} from './feature-flags' +import {useFeatureFlag} from '../FeatureFlags' +import Text from '../Text' 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} -` +import type {SxProp} from '../sx' +import classes from './FormControlCaption.module.css' +import {useFormControlContext} from './_FormControlContext' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' type FormControlCaptionProps = React.PropsWithChildren< { @@ -25,12 +17,36 @@ type FormControlCaptionProps = React.PropsWithChildren< > function FormControlCaption({id, children, sx}: FormControlCaptionProps) { + const enabled = useFeatureFlag(cssModulesFlag) const {captionId, disabled} = useFormControlContext() return ( - + {children} ) } +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} From 496fdd4439bffb2cfe33efa939c1c54508ef80fa Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 5 Dec 2024 17:00:03 -0600 Subject: [PATCH 05/10] refactor(InputValidation): refactor InputValidation to CSS Modules behind feature flag --- .../components/InputValidation.module.css | 30 +++++++++++++++ .../internal/components/InputValidation.tsx | 37 ++++++++++++++----- 2 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 packages/react/src/internal/components/InputValidation.module.css diff --git a/packages/react/src/internal/components/InputValidation.module.css b/packages/react/src/internal/components/InputValidation.module.css new file mode 100644 index 00000000000..bd8d10b78a7 --- /dev/null +++ b/packages/react/src/internal/components/InputValidation.module.css @@ -0,0 +1,30 @@ +.InputValidation { + color: var(--inputValidation-fgColor); + display: flex; + font-size: var(--text-body-size-small); + font-weight: 600; + + & :where(a) { + color: currentColor; + text-dectoration: underline; + } + + &:where([data-validation-status='success']) { + --inputValidation-fgColor: var(--fgColor-success); + } + + &:where([data-validation-status='error']) { + --inputValidation-fgColor: var(--fgColor-danger); + } +} + +.ValidationIcon { + align-items: center; + display: flex; + margin-inline-end: var(--base-size-4); + min-height: var(--inputValidation-iconSize); +} + +.ValidationText { + line-height: var(--inputValidation-lineHeight); +} diff --git a/packages/react/src/internal/components/InputValidation.tsx b/packages/react/src/internal/components/InputValidation.tsx index d23fe867cb5..d7224c429fa 100644 --- a/packages/react/src/internal/components/InputValidation.tsx +++ b/packages/react/src/internal/components/InputValidation.tsx @@ -1,12 +1,15 @@ 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 styled from 'styled-components' -import {get} from '../../constants' -import sx from '../../sx' +import {useFeatureFlag} from '../../FeatureFlags' +import classes from './InputValidation.module.css' type Props = { id: string @@ -22,6 +25,7 @@ const validationIconMap: Record< } const InputValidation: React.FC> = ({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 @@ -31,10 +35,19 @@ const InputValidation: React.FC> = ({children, id const iconBoxMinHeight = iconSize * captionLineHeight return ( - + {IconComponent ? ( ) : null} - + {children} @@ -54,7 +73,7 @@ const InputValidation: React.FC> = ({children, id const StyledInputValidation = styled(Text)` color: var(--inputValidation-fgColor); display: flex; - font-size: ${get('fontSizes.0')}; + font-size: var(--text-body-size-small); font-weight: 600; & :where(a) { @@ -63,11 +82,11 @@ const StyledInputValidation = styled(Text)` } &:where([data-validation-status='success']) { - --inputValidation-fgColor: ${get('colors.success.fg')}; + --inputValidation-fgColor: var(--fgColor-success); } &:where([data-validation-status='error']) { - --inputValidation-fgColor: ${get('colors.danger.fg')}; + --inputValidation-fgColor: var(--fgColor-danger); } ${sx} @@ -76,7 +95,7 @@ const StyledInputValidation = styled(Text)` const StyledValidationIcon = styled.span` align-items: center; display: flex; - margin-inline-end: ${get('space.1')}; + margin-inline-end: var(--base-size-4); min-height: var(--inputValidation-iconSize); ` From caf815bcc5c9aeac696ec2b97ed4f8c6b498b8f4 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 5 Dec 2024 17:00:50 -0600 Subject: [PATCH 06/10] chore: add changeset --- .changeset/gentle-stingrays-search.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gentle-stingrays-search.md diff --git a/.changeset/gentle-stingrays-search.md b/.changeset/gentle-stingrays-search.md new file mode 100644 index 00000000000..6ff383c37e5 --- /dev/null +++ b/.changeset/gentle-stingrays-search.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Update FormControl to use CSS Modules behind feature flag From a944165a107ccf15f39a98f96d4b291e2c26ff45 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 5 Dec 2024 18:32:20 -0600 Subject: [PATCH 07/10] Apply suggestions from code review Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> --- packages/react/src/FormControl/FormControl.module.css | 4 ++-- packages/react/src/internal/components/InputLabel.module.css | 4 ++-- .../react/src/internal/components/InputValidation.module.css | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/FormControl/FormControl.module.css b/packages/react/src/FormControl/FormControl.module.css index e9ff8e43fc1..0eaf4a1c909 100644 --- a/packages/react/src/FormControl/FormControl.module.css +++ b/packages/react/src/FormControl/FormControl.module.css @@ -36,11 +36,11 @@ } .LeadingVisual { - color: var(--fgColor-default); + color: var(--fgColor-muted); margin-left: var(--base-size-8); &:where([data-disabled]) { - color: var(--fgColor-muted); + color: var(--control-fgColor-disabled); } > * { diff --git a/packages/react/src/internal/components/InputLabel.module.css b/packages/react/src/internal/components/InputLabel.module.css index cddff230e26..fae2145c37b 100644 --- a/packages/react/src/internal/components/InputLabel.module.css +++ b/packages/react/src/internal/components/InputLabel.module.css @@ -3,11 +3,11 @@ display: block; color: var(--fgColor-default); cursor: pointer; - font-weight: 600; + font-weight: var(--base-text-weight-semibold); font-size: var(--text-body-size-medium); &:where([data-control-disabled]) { - color: var(--fgColor-muted); + color: var(--control-fgColor-disabled); cursor: not-allowed; } diff --git a/packages/react/src/internal/components/InputValidation.module.css b/packages/react/src/internal/components/InputValidation.module.css index bd8d10b78a7..82cf400cea7 100644 --- a/packages/react/src/internal/components/InputValidation.module.css +++ b/packages/react/src/internal/components/InputValidation.module.css @@ -2,7 +2,7 @@ color: var(--inputValidation-fgColor); display: flex; font-size: var(--text-body-size-small); - font-weight: 600; + font-weight: var(--base-text-weight-semibold); & :where(a) { color: currentColor; From d42b0d18d4d339a8ffc4e010bf581b76c0ba5396 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 6 Dec 2024 11:00:20 -0600 Subject: [PATCH 08/10] chore: update stylelint violations --- .../src/FormControl/FormControl.module.css | 7 ++++--- .../FormControl/FormControlCaption.module.css | 2 +- .../internal/components/InputLabel.module.css | 19 ++++++++++--------- .../components/InputValidation.module.css | 6 ++++-- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/react/src/FormControl/FormControl.module.css b/packages/react/src/FormControl/FormControl.module.css index 0eaf4a1c909..79bbb2f6870 100644 --- a/packages/react/src/FormControl/FormControl.module.css +++ b/packages/react/src/FormControl/FormControl.module.css @@ -21,12 +21,13 @@ } .ControlChoiceInputs > input { - margin-left: 0; margin-right: 0; + margin-left: 0; } .LabelContainer { > * { + /* stylelint-disable-next-line primer/spacing */ padding-left: var(--stack-gap-condensed); } @@ -36,17 +37,17 @@ } .LeadingVisual { - color: var(--fgColor-muted); margin-left: var(--base-size-8); + color: var(--fgColor-muted); &:where([data-disabled]) { color: var(--control-fgColor-disabled); } > * { - fill: currentColor; min-width: var(--text-body-size-large); min-height: var(--text-body-size-large); + fill: currentColor; } > *:where([data-has-caption]) { diff --git a/packages/react/src/FormControl/FormControlCaption.module.css b/packages/react/src/FormControl/FormControlCaption.module.css index e3ce62a98d8..b51b54b53ca 100644 --- a/packages/react/src/FormControl/FormControlCaption.module.css +++ b/packages/react/src/FormControl/FormControlCaption.module.css @@ -1,7 +1,7 @@ .Caption { - color: var(--fgColor-muted); display: block; font-size: var(--text-body-size-small); + color: var(--fgColor-muted); &:where([data-control-disabled]) { color: var(--control-fgColor-disabled); diff --git a/packages/react/src/internal/components/InputLabel.module.css b/packages/react/src/internal/components/InputLabel.module.css index fae2145c37b..25b655a8b82 100644 --- a/packages/react/src/internal/components/InputLabel.module.css +++ b/packages/react/src/internal/components/InputLabel.module.css @@ -1,10 +1,10 @@ .Label { - align-self: flex-start; display: block; + font-size: var(--text-body-size-medium); + font-weight: var(--base-text-weight-semibold); color: var(--fgColor-default); cursor: pointer; - font-weight: var(--base-text-weight-semibold); - font-size: var(--text-body-size-medium); + align-self: flex-start; &:where([data-control-disabled]) { color: var(--control-fgColor-disabled); @@ -12,16 +12,17 @@ } &:where([data-visually-hidden]) { - border: 0; - clip: rect(0 0 0 0); - clip-path: inset(50%); + position: absolute; + width: 1px; height: 1px; + padding: 0; + /* stylelint-disable-next-line primer/spacing */ margin: -1px; overflow: hidden; - padding: 0; - position: absolute; + clip: rect(0 0 0 0); white-space: nowrap; - width: 1px; + border: 0; + clip-path: inset(50%); } } diff --git a/packages/react/src/internal/components/InputValidation.module.css b/packages/react/src/internal/components/InputValidation.module.css index 82cf400cea7..97428fbb395 100644 --- a/packages/react/src/internal/components/InputValidation.module.css +++ b/packages/react/src/internal/components/InputValidation.module.css @@ -1,12 +1,13 @@ .InputValidation { - color: var(--inputValidation-fgColor); display: flex; font-size: var(--text-body-size-small); font-weight: var(--base-text-weight-semibold); + /* stylelint-disable-next-line primer/colors */ + color: var(--inputValidation-fgColor); & :where(a) { color: currentColor; - text-dectoration: underline; + text-decoration: underline; } &:where([data-validation-status='success']) { @@ -26,5 +27,6 @@ } .ValidationText { + /* stylelint-disable-next-line primer/typography */ line-height: var(--inputValidation-lineHeight); } From 775aa5654ba019888a7cecc00c25896a33e56f60 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 6 Dec 2024 11:04:33 -0600 Subject: [PATCH 09/10] fix: update selector for leading visual --- packages/react/src/FormControl/FormControl.module.css | 2 +- packages/react/src/FormControl/FormControl.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/FormControl/FormControl.module.css b/packages/react/src/FormControl/FormControl.module.css index 79bbb2f6870..911f04bbde7 100644 --- a/packages/react/src/FormControl/FormControl.module.css +++ b/packages/react/src/FormControl/FormControl.module.css @@ -1,7 +1,7 @@ .ControlHorizontalLayout { display: flex; - *:where([data-has-leading-visual]) { + &:where([data-has-leading-visual]) { align-items: center; } } diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index 637394fb5ea..3a5b9c090cd 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -226,7 +226,7 @@ const StyledHorizontalLayout = toggleStyledComponent( styled.div` display: flex; - *:where([data-has-leading-visual]) { + &:where([data-has-leading-visual]) { align-items: center; } From ab12bdea817581a1606265cce91c91d4b51a47fb Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Wed, 18 Dec 2024 21:28:19 +0000 Subject: [PATCH 10/10] add missing sx prop --- packages/react/src/FormControl/FormControl.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index 3a5b9c090cd..8315f7be97a 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -185,6 +185,7 @@ const FormControl = React.forwardRef(