Design Refresh - Update global form fields (#20302)

client/branded/src/global-styles/GlobalStylesStory/FormFieldVariants.module.scss

@@ -0,0 +1,7 @@
+.grid {
+    display: grid;
+    grid-template-columns: repeat(4, max-content);
+    grid-auto-rows: max-content;
+    grid-gap: 1rem;
+    margin-bottom: 1rem;
+}

client/branded/src/global-styles/GlobalStylesStory/FormFieldVariants.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable react/jsx-no-bind */
+import classNames from 'classnames'
+import React from 'react'
+import 'storybook-addon-designs'
+
+import styles from './FormFieldVariants.module.scss'
+
+type FieldVariants = 'standard' | 'invalid' | 'valid' | 'disabled'
+
+interface WithVariantsProps {
+    field: React.ComponentType<{
+        className?: string
+        disabled?: boolean
+        message?: JSX.Element
+        variant: FieldVariants
+    }>
+}
+
+const FieldMessage: React.FunctionComponent<{ className?: string }> = ({ className }) => (
+    <small className={className}>Helper text</small>
+)
+
+const WithVariants: React.FunctionComponent<WithVariantsProps> = ({ field: Field }) => (
+    <>
+        <Field variant="standard" message={<FieldMessage className="field-message" />} />
+        <Field variant="invalid" className="is-invalid" message={<FieldMessage className="invalid-feedback" />} />
+        <Field variant="valid" className="is-valid" message={<FieldMessage className="valid-feedback" />} />
+        <Field variant="disabled" disabled={true} message={<FieldMessage className="field-message" />} />
+    </>
+)
+
+export const FormFieldVariants: React.FunctionComponent = () => (
+    <div className={styles.grid}>
+        <WithVariants
+            field={({ className, message, ...props }) => (
+                <fieldset className="form-group">
+                    <input
+                        type="text"
+                        placeholder="Form field"
+                        className={classNames('form-control', className)}
+                        {...props}
+                    />
+                    {message}
+                </fieldset>
+            )}
+        />
+        <WithVariants
+            field={({ className, message, ...props }) => (
+                <fieldset className="form-group">
+                    <select className={classNames('custom-select', className)} {...props}>
+                        <option>Option A</option>
+                        <option>Option B</option>
+                        <option>Option C</option>
+                    </select>
+                    {message}
+                </fieldset>
+            )}
+        />
+        <WithVariants
+            field={({ className, message, ...props }) => (
+                <fieldset className="form-group">
+                    <textarea
+                        placeholder="This is sample content in a text area that spans four lines to see how it fits."
+                        className={classNames('form-control', className)}
+                        rows={4}
+                        {...props}
+                    />
+                    {message}
+                </fieldset>
+            )}
+        />
+        <WithVariants
+            field={({ className, message, variant, ...props }) => (
+                <fieldset className="form-check">
+                    <input
+                        id={`inputFieldsetCheck - ${variant}`}
+                        type="checkbox"
+                        className={classNames('form-check-input', className)}
+                        {...props}
+                    />
+                    <label className="form-check-label" htmlFor={`inputFieldsetCheck - ${variant}`}>
+                        Checkbox
+                    </label>
+                    {message}
+                </fieldset>
+            )}
+        />
+        <WithVariants
+            field={({ className, message, variant, ...props }) => (
+                <fieldset className="form-check">
+                    <input
+                        id={`inputFieldsetRadio - ${variant}`}
+                        type="radio"
+                        className={classNames('form-check-input', className)}
+                        name={`inputFieldsetRadio - ${variant}`}
+                        {...props}
+                    />
+                    <label className="form-check-label" htmlFor={`inputFieldsetRadio - ${variant}`}>
+                        Radio button
+                    </label>
+                    {message}
+                </fieldset>
+            )}
+        />
+    </div>
+)

client/branded/src/global-styles/GlobalStylesStory/GlobalStyles.story.tsx

@@ -23,6 +23,7 @@ import { Form } from '../../components/Form'
 
 import { ButtonVariants } from './ButtonVariants'
 import { SEMANTIC_COLORS } from './constants'
+import { FormFieldVariants } from './FormFieldVariants'
 import { TextStory } from './TextStory'
 import { preventDefault } from './utils'
 
@@ -788,7 +789,7 @@ add(
                 </div>
                 <div className="form-group">
                     <label htmlFor="example-example-select">Example select</label>
-                    <select id="example-select" className="form-control">
+                    <select id="example-select" className="custom-select">
                         <option>Option A</option>
                         <option>Option B</option>
                         <option>Option C</option>
@@ -823,7 +824,7 @@ add(
                     </div>
                     <div className="form-group">
                         <label htmlFor="disabledSelect">Disabled select menu</label>
-                        <select id="disabledSelect" className="form-control">
+                        <select id="disabledSelect" className="custom-select">
                             <option>Disabled select</option>
                         </select>
                     </div>
@@ -850,25 +851,20 @@ add(
             <input className="form-control" type="text" value="I'm a readonly value" readOnly={true} />
 
             <h2 className="mt-3">Sizing</h2>
-            <p>Form controls can be made smaller or larger for rare use cases, like a select inside a dropdown menu.</p>
+            <p>Form fields can be made smaller</p>
             <div className="d-flex">
-                <div>
-                    <input className="form-control form-control-lg mb-1" type="text" placeholder="Large input" />
-                    <input className="form-control mb-1" type="text" placeholder="Default input" />
-                    <input className="form-control form-control-sm mb-1" type="text" placeholder="Small input" />
-                </div>
-                <div className="ml-2">
-                    <select className="form-control form-control-lg mb-1">
-                        <option>Large select</option>
-                    </select>
-                    <select className="form-control mb-1">
-                        <option>Default select</option>
-                    </select>
-                    <select className="form-control form-control-sm mb-1">
-                        <option>Small select</option>
-                    </select>
-                </div>
+                <fieldset>
+                    <div className="form-group">
+                        <input className="form-control form-control-sm mb-1" type="text" placeholder="Small input" />
+                        <textarea className="form-control form-control-sm mb-1" placeholder="Small textarea" />
+                        <select className="custom-select custom-select-sm mb-1">
+                            <option>Small select</option>
+                        </select>
+                    </div>
+                </fieldset>
             </div>
+            <h2 className="mt-3">Field reference</h2>
+            <FormFieldVariants />
         </>
     ),
     {

client/branded/src/global-styles/colors-redesign.scss

@@ -62,7 +62,7 @@ $theme-colors-redesign: (
     --tooltip-bg: #{$redesign-gray-08};
     // Assumption: Uses light-mode body-color, which matches current behavior
     --box-shadow: 0 0.25rem 0.5rem #{rgba($redesign-gray-08, 0.07)};
-    --btn-focus-box-shadow: 0 0 0 2px var(--primary-2);
+    --focus-box-shadow: 0 0 0 2px var(--primary-2);
     --btn-link-disabled-color: var(--primary-2);
 }
 

client/branded/src/global-styles/colors.scss

@@ -87,7 +87,7 @@ $text-muted: var(--text-muted);
     --logo-purple: #{$logo-purple};
     --tooltip-bg: #{$gray-19};
     --box-shadow: 0 0.25rem 0.5rem #{rgba($gray-19, 0.07)};
-    --btn-focus-box-shadow: 0 0 0 2px #{rgba($primary, 0.8)};
+    --focus-box-shadow: 0 0 0 2px #{rgba($primary, 0.8)};
     // Matches Bootstrap colors, using variable to easily change for redesign
     --btn-link-disabled-color: #6c757d;
 }

client/branded/src/global-styles/forms.scss

@@ -11,6 +11,11 @@
     --input-group-addon-color: var(--body-color);
     --input-group-addon-bg: var(--color-bg-4);
     --input-group-addon-border-color: var(--color-bg-4);
+    --input-focus-border-color: var(--primary);
+    --input-focus-box-shadow: 0 0 0 2px #{rgba($primary, 0.25)};
+
+    // Checkbox margins
+    --form-check-input-margin-y: 0.2rem;
 }
 
 .theme-light {
@@ -22,11 +27,14 @@
     --input-group-addon-color: var(--body-color);
     --input-group-addon-bg: var(--color-bg-4);
     --input-group-addon-border-color: var(--color-bg-4);
+    --input-focus-border-color: var(--primary);
+    --input-focus-box-shadow: 0 0 0 2px #{rgba($primary, 0.25)};
+
+    // Checkbox margins
+    --form-check-input-margin-y: 0.2rem;
 }
 
-.theme-light.theme-redesign,
-// Descendant selector is required for Storybook `addRedesignVariants` helper.
-.theme-light .theme-redesign {
+.theme-light.theme-redesign {
     --input-bg: #{$white};
     --input-disabled-bg: #{$redesign-gray-04};
     --input-border-color: #{$redesign-gray-04};
@@ -35,10 +43,14 @@
     --input-group-addon-color: #{$redesign-gray-08};
     --input-group-addon-bg: #{$redesign-gray-03};
     --input-group-addon-border-color: #{$redesign-gray-03};
+    --input-focus-border-color: var(--border-active-color);
+    --input-focus-box-shadow: var(--focus-box-shadow);
+
+    // Checkbox margins
+    --form-check-input-margin-y: 0.3rem;
 }
 
-.theme-dark.theme-redesign,
-.theme-dark .theme-redesign {
+.theme-dark.theme-redesign {
     --input-bg: #{$redesign-gray-10};
     --input-disabled-bg: #{$redesign-gray-08};
     --input-border-color: #{$redesign-gray-08};
@@ -47,6 +59,11 @@
     --input-group-addon-color: #{$redesign-gray-01};
     --input-group-addon-bg: #{$redesign-gray-08};
     --input-group-addon-border-color: #{$redesign-gray-08};
+    --input-focus-border-color: var(--border-active-color);
+    --input-focus-box-shadow: var(--focus-box-shadow);
+
+    // Checkbox margins
+    --form-check-input-margin-y: 0.3rem;
 }
 
 // Prevent Firefox's default red outline for inputs
@@ -56,3 +73,98 @@
 :not(output):-moz-ui-invalid:-moz-focusring:not(:focus) {
     box-shadow: none;
 }
+
+// Add an additional feedback class to add context to form controls without requiring a valid state
+.field-message {
+    @extend .valid-feedback;
+    display: block;
+    color: var(--text-muted);
+}
+
+.was-validated :valid.form-control,
+.was-validated :invalid.form-control,
+.is-valid.form-control,
+.is-invalid.form-control,
+.custom-select {
+    // Adjust icon padding
+    background-position: right 0.75rem center;
+
+    &-sm {
+        background-position: right 0.5rem center;
+    }
+}
+
+// Overrides
+.theme-redesign {
+    // Input feedback messages
+    .valid-feedback {
+        color: var(--text-muted);
+    }
+    .invalid-feedback {
+        color: var(--danger);
+    }
+    .form-check-input {
+        ~ .field-message,
+        ~ .valid-feedback,
+        ~ .invalid-feedback {
+            // Adjust spacing for radio/checkboxes
+            margin-top: 0;
+        }
+    }
+
+    // Valid form inputs and selects
+    .was-validated .form-control:valid,
+    .was-validated .custom-select:valid,
+    .form-control.is-valid,
+    .custom-select.is-valid {
+        border-color: var(--success);
+
+        &:focus {
+            @at-root #{selector-append('.theme-light', &)} {
+                box-shadow: 0 0 0 2px var(--success-2);
+            }
+            @at-root #{selector-append('.theme-dark', &)} {
+                box-shadow: 0 0 0 2px var(--success-3);
+            }
+        }
+    }
+
+    // Invalid form inputs and selects
+    .was-validated .form-control:invalid,
+    .was-validated .custom-select:invalid,
+    .form-control.is-invalid,
+    .custom-select.is-invalid {
+        border-color: var(--danger);
+
+        &:focus {
+            @at-root #{selector-append('.theme-light', &)} {
+                box-shadow: 0 0 0 2px var(--danger-2);
+            }
+            @at-root #{selector-append('.theme-dark', &)} {
+                box-shadow: 0 0 0 2px var(--danger-3);
+            }
+        }
+    }
+
+    // Valid Radio/checkbox labels
+    .was-validated .form-check-input:valid,
+    .form-check-input.is-valid {
+        ~ .form-check-label {
+            color: var(--success);
+        }
+    }
+
+    // Invalid Radio/checkbox labels
+    .was-validated .form-check-input:invalid,
+    .form-check-input.is-invalid {
+        ~ .form-check-label {
+            color: var(--danger);
+        }
+    }
+
+    // Remove feedback icon for <select> and <textarea>
+    select.form-control,
+    textarea.form-control {
+        background-image: none;
+    }
+}

client/branded/src/global-styles/index.scss

@@ -51,13 +51,13 @@ $tooltip-bg: var(--tooltip-bg);
 
 // Forms
 
-$form-check-input-margin-y: 0.2em;
+$form-check-input-margin-y: var(--form-check-input-margin-y);
+$form-feedback-font-size: 0.75rem;
 $input-btn-focus-width: 2px;
-$input-focus-border-color: $primary;
 // The default focus ring for buttons is very hard to see, raise opacity.
 // We only show the focus ring when using the keyboard, when the focus ring
 // should be clearly visible.
-$btn-focus-box-shadow: var(--btn-focus-box-shadow);
+$btn-focus-box-shadow: var(--focus-box-shadow);
 $btn-link-disabled-color: var(--btn-link-disabled-color);
 
 // Forms don't manipulate the colors at compile time,
@@ -72,6 +72,17 @@ $input-placeholder-color: var(--input-placeholder-color);
 $input-group-addon-color: var(--input-group-addon-color);
 $input-group-addon-bg: var(--input-group-addon-bg);
 $input-group-addon-border-color: var(--input-group-addon-border-color);
+$input-focus-border-color: var(--input-focus-border-color);
+$input-focus-box-shadow: var(--input-focus-box-shadow);
+
+// Custom Selects
+$custom-select-bg-size: 16px 16px;
+$custom-select-disabled-bg: var(--input-disabled-bg);
+$custom-select-focus-box-shadow: var(--input-focus-box-shadow);
+// Icon: mdi-react/ChevronDownIcon
+$custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$redesign-gray-06}' viewBox='0 0 24 24'><path d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z'/></svg>");
+// Hide feedback icon for custom-select
+$custom-select-feedback-icon-size: 0;
 
 // Dropdown
 $dropdown-bg: var(--dropdown-bg);
@@ -102,6 +113,9 @@ $collapsible-expand-btn-width: 1.25rem;
 $hr-border-color: var(--border-color);
 $hr-margin-y: 0.25rem;
 
+// Disable transitions
+$input-transition: none;
+
 // './breakpoints' defines $grid-breakpoints for global CSS and exposes breakpoints mixins to CSS modules
 @import './breakpoints';
 @import 'bootstrap/scss/functions';
@@ -153,9 +167,13 @@ $hr-margin-y: 0.25rem;
 }
 :focus-visible {
     outline: 0;
-    box-shadow: $btn-focus-box-shadow;
+    box-shadow: var(--focus-box-shadow);
 }
 
-.cursor-pointer {
-    cursor: pointer;
+.cursor-pointer,
+input[type='radio'],
+input[type='checkbox'] {
+    &:not(:disabled) {
+        cursor: pointer;
+    }
 }

client/branded/src/global-styles/typography-redesign.scss

@@ -57,7 +57,9 @@
 
     // Input / Small
     .form-control-sm,
-    %form-control-sm {
+    %form-control-sm,
+    .custom-select-sm,
+    %custom-select-sm {
         font-size: (11/14) + em;
     }