Feat: add required indicators to form fields (#2815)

* feat(core): add required prop to Label component and update form elements

- Introduced a `required` prop to the Label component to indicate mandatory fields.
- Updated Input, Textarea, NumberInput, Select, Checkbox, RadioGroup, and other form components to utilize the new `required` prop for better accessibility and user experience.

* refactor(core): format required indicator in Label component for improved readability

* display optional text for form fields instead of required asterisk

* fix linting

* add internationalization and translated messages for optional text

* remove formatting from da.json file

* removed formatting from language files

* removed formatting from language files

* added changeset

* remove 'optional' field from multiple language files

* ensure required prop is passed down in form input components

* pass required prop to RadioGroupPrimitive.Root

* fix linting

* removed optional text from checkbox

* Pass field.required to CheckboxGroup and Checkbox so that optional text can be displayed

Author: jamesqquick

.changeset/tricky-hoops-hammer.md

@@ -0,0 +1,9 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Add default optional text to form input labels for inputs that are not required.
+
+## Migration
+
+The new required props are optional, so they are backwards compatible. However, this does mean that the `(optional)` text will now show up on fields that aren't explicitly marked as required by passing the required prop to the Label component.

core/messages/en.json

@@ -607,5 +607,8 @@
         }
       }
     }
+  },
+  "Form": {
+    "optional": "optional"
   }
 }

core/vibes/soul/form/button-radio-group/index.tsx

@@ -48,15 +48,24 @@ export const ButtonRadioGroup = React.forwardRef<
   }
 >(
   (
-    { label, options, errors, className, onOptionMouseEnter, colorScheme = 'light', ...rest },
+    {
+      label,
+      options,
+      errors,
+      className,
+      onOptionMouseEnter,
+      colorScheme = 'light',
+      required,
+      ...rest
+    },
     ref,
   ) => {
     const id = React.useId();
 
     return (
       <div className={clsx('button-radio-group space-y-2', className)}>
         {label !== undefined && label !== '' && (
-          <Label colorScheme={colorScheme} id={id}>
+          <Label colorScheme={colorScheme} id={id} required={required}>
             {label}
           </Label>
         )}
@@ -65,6 +74,7 @@ export const ButtonRadioGroup = React.forwardRef<
           aria-labelledby={id}
           className="flex flex-wrap gap-2"
           ref={ref}
+          required={required}
         >
           {options.map((option) => (
             <RadioGroupPrimitive.Item

core/vibes/soul/form/card-radio-group/index.tsx

@@ -50,19 +50,34 @@ export const CardRadioGroup = React.forwardRef<
   }
 >(
   (
-    { label, options, errors, className, onOptionMouseEnter, colorScheme = 'light', ...rest },
+    {
+      label,
+      options,
+      errors,
+      className,
+      onOptionMouseEnter,
+      colorScheme = 'light',
+      required,
+      ...rest
+    },
     ref,
   ) => {
     const id = React.useId();
 
     return (
       <div className={clsx('space-y-2', className)}>
         {label !== undefined && label !== '' && (
-          <Label colorScheme={colorScheme} id={id}>
+          <Label colorScheme={colorScheme} id={id} required={required}>
             {label}
           </Label>
         )}
-        <RadioGroupPrimitive.Root {...rest} aria-labelledby={id} className="space-y-2" ref={ref}>
+        <RadioGroupPrimitive.Root
+          {...rest}
+          aria-labelledby={id}
+          className="space-y-2"
+          ref={ref}
+          required={required}
+        >
           {options.map((option) => (
             <RadioGroupPrimitive.Item
               aria-label={option.label}

core/vibes/soul/form/checkbox-group/index.tsx

@@ -21,6 +21,7 @@ interface Props {
   value: string[];
   onValueChange: (value: string[]) => void;
   colorScheme?: 'light' | 'dark';
+  required?: boolean;
 }
 
 export function CheckboxGroup({
@@ -32,13 +33,14 @@ export function CheckboxGroup({
   value,
   onValueChange,
   colorScheme,
+  required,
 }: Props) {
   const id = React.useId();
 
   return (
     <div className={clsx('space-y-2', className)}>
       {label !== undefined && label !== '' && (
-        <Label colorScheme={colorScheme} id={id}>
+        <Label colorScheme={colorScheme} id={id} required={required}>
           {label}
         </Label>
       )}

core/vibes/soul/form/dynamic-form/index.tsx

@@ -276,7 +276,7 @@ function DynamicFormField({
           onBlur={controls.blur}
           onCheckedChange={(value) => controls.change(String(value))}
           onFocus={controls.focus}
-          required={formField.required}
+          required={field.required}
           value={controls.value}
         />
       );
@@ -290,6 +290,7 @@ function DynamicFormField({
           name={formField.name}
           onValueChange={controls.change}
           options={field.options}
+          required={field.required}
           value={Array.isArray(controls.value) ? controls.value : []}
         />
       );

core/vibes/soul/form/input/index.tsx

@@ -39,7 +39,7 @@ export const Input = React.forwardRef<
   return (
     <div className={clsx('w-full space-y-2', className)}>
       {label != null && label !== '' && (
-        <Label colorScheme={colorScheme} htmlFor={id ?? generatedId}>
+        <Label colorScheme={colorScheme} htmlFor={id ?? generatedId} required={required}>
           {label}
         </Label>
       )}
@@ -81,6 +81,7 @@ export const Input = React.forwardRef<
           )}
           id={id ?? generatedId}
           ref={ref}
+          required={required}
         />
       </div>
       {errors?.map((error) => (

core/vibes/soul/form/label/index.tsx

@@ -1,5 +1,8 @@
+'use client';
+
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { clsx } from 'clsx';
+import { useTranslations } from 'next-intl';
 import { ComponentPropsWithoutRef } from 'react';
 
 // eslint-disable-next-line valid-jsdoc
@@ -17,8 +20,15 @@ import { ComponentPropsWithoutRef } from 'react';
 export function Label({
   className,
   colorScheme = 'light',
+  required,
+  children,
   ...rest
-}: ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { colorScheme?: 'light' | 'dark' }) {
+}: ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+  colorScheme?: 'light' | 'dark';
+  required?: boolean;
+}) {
+  const t = useTranslations('Form');
+
   return (
     <LabelPrimitive.Root
       {...rest}
@@ -30,6 +40,9 @@ export function Label({
         }[colorScheme],
         className,
       )}
-    />
+    >
+      {children}
+      {!required && <span className="ml-1 normal-case">({t('optional')})</span>}
+    </LabelPrimitive.Root>
   );
 }

core/vibes/soul/form/number-input/index.tsx

@@ -62,7 +62,7 @@ export const NumberInput = React.forwardRef<
     return (
       <div className={clsx('space-y-2', className)}>
         {label != null && label !== '' && (
-          <Label colorScheme={colorScheme} htmlFor={id}>
+          <Label colorScheme={colorScheme} htmlFor={id} required={required}>
             {label}
           </Label>
         )}
@@ -130,6 +130,7 @@ export const NumberInput = React.forwardRef<
             disabled={disabled}
             id={id}
             ref={ref}
+            required={required}
             type="number"
           />
           <button

core/vibes/soul/form/radio-group/index.tsx

@@ -23,15 +23,34 @@ export const RadioGroup = React.forwardRef<
   }
 >(
   (
-    { label, options, errors, className, onOptionMouseEnter, colorScheme = 'light', ...rest },
+    {
+      label,
+      options,
+      errors,
+      className,
+      onOptionMouseEnter,
+      colorScheme = 'light',
+      required,
+      ...rest
+    },
     ref,
   ) => {
     const id = React.useId();
 
     return (
       <div className={clsx('space-y-2', className)}>
-        {label !== undefined && label !== '' && <Label id={id}>{label}</Label>}
-        <RadioGroupPrimitive.Root {...rest} aria-labelledby={id} className="space-y-2" ref={ref}>
+        {label !== undefined && label !== '' && (
+          <Label colorScheme={colorScheme} id={id} required={required}>
+            {label}
+          </Label>
+        )}
+        <RadioGroupPrimitive.Root
+          {...rest}
+          aria-labelledby={id}
+          className="space-y-2"
+          ref={ref}
+          required={required}
+        >
           {options.map((option, index) => (
             <RadioGroupItem
               colorScheme={colorScheme}