Fix checkbox and radio input validation positioning

.changeset/loud-phones-exercise.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Updates the styling of validation messages for checkbox and radio inputs to use flex-grid to fix a bug and adds storybook examples for each scenario.

packages/react/src/forms/Checkbox/Checkbox.module.css

@@ -5,6 +5,11 @@
   position: relative;
 }
 
+[class*='FormControl'] .Checkbox-wrapper,
+[id*='FormControl'] .Checkbox-wrapper {
+  grid-row: 1;
+}
+
 .Checkbox {
   align-items: center;
   background-color: var(--brand-control-checkbox-bg-default);

packages/react/src/forms/Checkbox/Checkbox.module.css.d.ts

@@ -1,10 +1,9 @@
 declare const styles: {
-  readonly "Checkbox-wrapper": string;
-  readonly "Checkbox": string;
-  readonly "Checkbox-input": string;
-  readonly "Checkbox-checkmark": string;
-  readonly "Checkbox-checkmark-path": string;
-  readonly "Checkbox--indeterminate": string;
-};
-export = styles;
-
+  readonly 'Checkbox-wrapper': string
+  readonly Checkbox: string
+  readonly 'Checkbox-input': string
+  readonly 'Checkbox-checkmark': string
+  readonly 'Checkbox-checkmark-path': string
+  readonly 'Checkbox--indeterminate': string
+}
+export = styles

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

@@ -10,10 +10,8 @@
 }
 
 .FormControl--checkbox {
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
+  display: grid;
+  grid-template-columns: auto 1fr;
 }
 
 .FormControl--border {
@@ -116,3 +114,7 @@
     transform: translateY(0);
   }
 }
+
+.FormControl-validation-checkbox {
+  grid-column: 1 / 3;
+}

packages/react/src/forms/FormControl/FormControl.module.css.d.ts

@@ -1,22 +1,22 @@
 declare const styles: {
-  readonly "FormControl": string;
-  readonly "FormControl--fullWidth": string;
-  readonly "FormControl--checkbox": string;
-  readonly "FormControl--border": string;
-  readonly "FormControl-label": string;
-  readonly "FormControl-label--visually-hidden": string;
-  readonly "FormControl-label--medium": string;
-  readonly "FormControl-label--large": string;
-  readonly "FormControl-label--checkbox": string;
-  readonly "FormControl-control--radio": string;
-  readonly "FormControl-hint": string;
-  readonly "FormControl-validation": string;
-  readonly "FormControl-validation--success": string;
-  readonly "FormControl-validation--error": string;
-  readonly "FormControl-validation-success-icon": string;
-  readonly "FormControl-validation-error-icon": string;
-  readonly "FormControl-validation--animate-in": string;
-  readonly "FormControlValidationFadeIn": string;
-};
-export = styles;
-
+  readonly FormControl: string
+  readonly 'FormControl--fullWidth': string
+  readonly 'FormControl--checkbox': string
+  readonly 'FormControl--border': string
+  readonly 'FormControl-label': string
+  readonly 'FormControl-label--visually-hidden': string
+  readonly 'FormControl-label--medium': string
+  readonly 'FormControl-label--large': string
+  readonly 'FormControl-label--checkbox': string
+  readonly 'FormControl-control--radio': string
+  readonly 'FormControl-hint': string
+  readonly 'FormControl-validation': string
+  readonly 'FormControl-validation--success': string
+  readonly 'FormControl-validation--error': string
+  readonly 'FormControl-validation-success-icon': string
+  readonly 'FormControl-validation-error-icon': string
+  readonly 'FormControl-validation--animate-in': string
+  readonly 'FormControl-validation-checkbox': string
+  readonly FormControlValidationFadeIn: string
+}
+export = styles

packages/react/src/forms/FormControl/FormControl.stories.tsx

@@ -296,12 +296,24 @@ export const CheckboxPlayground = args => {
 
 CheckboxPlayground.storyName = 'w/ Checkbox - Playground'
 
-export const RadioPlayground = () => (
+export const RadioPlayground = args => (
   <>
     <Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="condensed" padding="condensed">
-      <FormControl>
+      <FormControl
+        required={args.required}
+        validationStatus={args.validationStatus}
+        fullWidth={args.fullWidth}
+        size={args.size}
+      >
         <FormControl.Label>Radio One</FormControl.Label>
         <Radio name="radio-group" value="radio one" />
+        {args.validationStatus && args.validationStatus === 'error' && (
+          // eslint-disable-next-line i18n-text/no-en
+          <FormControl.Validation>{args.validationText || 'This is an error message'}</FormControl.Validation>
+        )}
+        {args.validationStatus && args.validationStatus === 'success' && (
+          <FormControl.Validation>{args.validationText || 'Great! It worked.'}</FormControl.Validation>
+        )}
       </FormControl>
       <FormControl>
         <FormControl.Label>Radio Two</FormControl.Label>
@@ -334,3 +346,17 @@ export const ErrorValidation = () => {
   )
 }
 ErrorValidation.storyName = 'w/ Error Validation - Playground'
+
+export const ErrorValidationWithCheckbox = args => <CheckboxPlayground {...args} />
+ErrorValidationWithCheckbox.storyName = 'w/ Error Validation with Checkbox - Playground'
+ErrorValidationWithCheckbox.args = {
+  validationStatus: 'error',
+  validationText: 'This is an error message',
+}
+
+export const ErrorValidationWithRadio = args => <RadioPlayground {...args} />
+ErrorValidationWithRadio.storyName = 'w/ Error Validation with Radio - Playground'
+ErrorValidationWithRadio.args = {
+  validationStatus: 'error',
+  validationText: 'This is an error message',
+}

packages/react/src/forms/FormControl/FormControl.tsx

@@ -144,6 +144,7 @@ const Root = ({
              * Validation
              */
             return React.cloneElement(child as React.ReactElement, {
+              className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], child.props.className),
               validationStatus,
             })
           } else {
@@ -213,13 +214,14 @@ type FormControlValidationProps = {
   validationStatus?: FormValidationStatus
 } & BaseProps<HTMLSpanElement>
 
-const FormControlValidation = ({children, validationStatus}: FormControlValidationProps) => {
+const FormControlValidation = ({children, validationStatus, className}: FormControlValidationProps) => {
   return (
     <span
       className={clsx(
         styles['FormControl-validation'],
         validationStatus && styles['FormControl-validation--animate-in'],
         validationStatus && styles[`FormControl-validation--${validationStatus}`],
+        className,
       )}
     >
       {validationStatus === 'error' && (

packages/react/src/forms/FormControl/FormControl.visual.spec.ts

@@ -69,4 +69,22 @@ test.describe('Visual Comparison: FormControl', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
+
+  test('FormControl / w/ Error Validation with Checkbox - Playground', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-forms-formcontrol--error-validation-with-checkbox&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
+
+  test('FormControl / w/ Error Validation with Radio - Playground', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-forms-formcontrol--error-validation-with-radio&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
 })

packages/react/src/forms/Radio/Radio.module.css

@@ -10,6 +10,11 @@
   cursor: pointer;
 }
 
+[class*='FormControl'] .Radio-wrapper,
+[id*='FormControl'] .Radio-wrapper {
+  grid-row: 1;
+}
+
 .Radio {
   align-items: center;
   background-color: var(--brand-control-radio-bg-default);

packages/react/src/forms/Radio/Radio.module.css.d.ts

@@ -1,8 +1,7 @@
 declare const styles: {
-  readonly "Radio-wrapper": string;
-  readonly "Radio": string;
-  readonly "Radio-input": string;
-  readonly "Radio-dot": string;
-};
-export = styles;
-
+  readonly 'Radio-wrapper': string
+  readonly Radio: string
+  readonly 'Radio-input': string
+  readonly 'Radio-dot': string
+}
+export = styles