@arbor-education/design-system.components 0.14.0 → 0.16.0

package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx

@@ -10,6 +10,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { useState } from 'react';
 import { fn } from 'storybook/test';
+import { Icon } from 'Components/icon/Icon';
 import { RadioButtonInput } from './RadioButtonInput';
 import { RadioButtonGroup } from './RadioButtonGroup';
 
@@ -72,19 +73,26 @@ const DEVELOPER_NOTES = [
   '#### 1. `hasError` is ARIA-only — it makes zero visual difference',
   '`hasError={true}` sets `aria-invalid="true"` on the native `<input>`. There are NO CSS rules',
   'that change the appearance of the indicator circle based on `aria-invalid`.',
-  'To show a visible error state, YOU must render an error message element below the group.',
-  'See the `WithError` and `RadioGroupWithError` stories for the correct pattern.',
+  'To show a visible error state, render an error message yourself below the group using',
+  '`FormField`\'s canonical markup — `.ds-form-field__message` wrapping a `.ds-form-field__message--error`',
+  'span with a `triangle-alert` `Icon`. This keeps radio errors visually consistent with text/number/select',
+  'fields wrapped in `FormField`. (`FormField` itself does not currently support `inputType="radio"`,',
+  'so you have to hand-roll the markup.)',
+  'See the `WithError` and `RadioGroupWithError` stories for the full pattern.',
   '',
   '```tsx',
   '// WRONG — hasError alone shows no visible change',
   '<RadioButtonInput hasError name="period" value="term" label="Current term" checked onChange={() => {}} />',
   '',
-  '// CORRECT — pair hasError with a visible error message rendered by the consumer',
+  '// CORRECT — pair hasError with the canonical FormField error markup',
   '<div>',
   '  <RadioButtonInput hasError name="period" value="term" label="Current term" checked onChange={() => {}} />',
-  '  <p role="alert" style={{ color: "var(--form-field-text-error-color-error-text)" }}>',
-  '    Please select a valid report period.',
-  '  </p>',
+  '  <div className="ds-form-field__message">',
+  '    <span className="ds-form-field__message--error" role="alert">',
+  '      <Icon size={12} name="triangle-alert" />',
+  '      Please select a valid report period.',
+  '    </span>',
+  '  </div>',
   '</div>',
   '```',
   '',
@@ -395,21 +403,17 @@ const RadioGroupWithErrorTemplate = () => {
         checkedValue={method}
         onChange={e => setMethod(e.target.value)}
         options={[
-          { id: 'opt-email', value: 'email', label: 'Email', hasError: true },
-          { id: 'opt-sms', value: 'sms', label: 'SMS', hasError: true },
-          { id: 'opt-post', value: 'post', label: 'Post', hasError: true },
+          { id: 'opt-email', value: 'email', label: 'Email' },
+          { id: 'opt-sms', value: 'sms', label: 'SMS' },
+          { id: 'opt-post', value: 'post', label: 'Post' },
         ]}
       />
-      <p
-        role="alert"
-        style={{
-          margin: 'var(--spacing-small) 0 0',
-          color: 'var(--form-field-text-error-color-error-text)',
-          fontSize: 'var(--font-size-2-13)',
-        }}
-      >
-        Please select a notification method to continue.
-      </p>
+      <div className="ds-form-field__message">
+        <span className="ds-form-field__message--error" role="alert">
+          <Icon size={12} name="triangle-alert" />
+          Please select a notification method to continue.
+        </span>
+      </div>
     </div>
   );
 };
@@ -608,16 +612,12 @@ export const WithError: Story = withDescription(
           onChange={fn()}
           label="Full academic year"
         />
-        <p
-          role="alert"
-          style={{
-            margin: 0,
-            color: 'var(--form-field-text-error-color-error-text)',
-            fontSize: 'var(--font-size-2-13)',
-          }}
-        >
-          Please select a report period to continue.
-        </p>
+        <div className="ds-form-field__message">
+          <span className="ds-form-field__message--error" role="alert">
+            <Icon size={12} name="triangle-alert" />
+            Please select a report period to continue.
+          </span>
+        </div>
       </div>
     ),
     parameters: {
@@ -625,12 +625,14 @@ export const WithError: Story = withDescription(
         source: {
           language: 'tsx',
           code: `
-import { RadioButtonInput } from '@arbor-education/design-system.components';
+import { Icon, RadioButtonInput } from '@arbor-education/design-system.components';
 
 function WithErrorExample() {
-  // IMPORTANT: hasError sets aria-invalid="true" on the <input> but makes
-  // NO visual change to the indicator circle — there are zero CSS rules for
-  // the error state. You MUST render the error message yourself.
+  // hasError sets aria-invalid="true" on the <input> but makes NO visual change
+  // to the indicator circle — there are zero CSS rules for the error state.
+  // Render the error message yourself using FormField's canonical markup so the
+  // look matches text/number/select fields:
+  //   .ds-form-field__message > .ds-form-field__message--error + triangle-alert Icon
   return (
     <div>
       <RadioButtonInput
@@ -660,10 +662,12 @@ function WithErrorExample() {
         onChange={() => {}}
         label="Full academic year"
       />
-      {/* Consumer-rendered error message — hasError alone shows nothing visually */}
-      <p role="alert" style={{ color: 'var(--form-field-text-error-color-error-text)' }}>
-        Please select a report period to continue.
-      </p>
+      <div className="ds-form-field__message">
+        <span className="ds-form-field__message--error" role="alert">
+          <Icon size={12} name="triangle-alert" />
+          Please select a report period to continue.
+        </span>
+      </div>
     </div>
   );
 }
@@ -678,8 +682,11 @@ export default WithErrorExample;
     '**Important:** `hasError={true}` sets `aria-invalid="true"` on the native `<input>` — this is',
     'ARIA-only and makes zero visual difference to the indicator circle.',
     'There are no CSS rules in the design system that change the indicator\'s appearance based on `aria-invalid`.',
-    'To communicate the error visually, you must render your own error message below the group (shown here',
-    'with `role="alert"` so screen readers announce it automatically).',
+    'To communicate the error visually, render your own message below the group using `FormField`\'s',
+    'canonical error markup — a `.ds-form-field__message` wrapper with a `.ds-form-field__message--error`',
+    'span containing a `triangle-alert` `Icon` and the error text (with `role="alert"` so screen readers',
+    'announce it automatically). Reusing this markup keeps radio errors visually consistent with',
+    'text/number/select fields wrapped in `FormField`.',
     'Error validation should always be at the field level, not per-option.',
   ].join(' '),
 );
@@ -938,15 +945,16 @@ export const RadioGroupWithError: Story = withDescription(
           language: 'tsx',
           code: `
 import { useState } from 'react';
-import { RadioButtonGroup } from '@arbor-education/design-system.components';
+import { Icon, RadioButtonGroup } from '@arbor-education/design-system.components';
 
 function NotificationMethodWithErrorExample() {
   const [method, setMethod] = useState('');
 
-  // hasError in each option sets aria-invalid="true" on each <input>.
-  // This makes ZERO visual difference to the indicator circles — there are
-  // no CSS rules for the aria-invalid error state. The visible error message
-  // below is the only thing that communicates the error to sighted users.
+  // RadioButtonGroup has no per-option hasError API — its option type is
+  // { id, value, label } only. Communicate validation at the field level by
+  // rendering an error message below the group, matching FormField's canonical
+  // markup (.ds-form-field__message--error + triangle-alert Icon) so the look
+  // is consistent with the rest of the design system.
   return (
     <div>
       <RadioButtonGroup
@@ -955,15 +963,17 @@ function NotificationMethodWithErrorExample() {
         checkedValue={method}
         onChange={(e) => setMethod(e.target.value)}
         options={[
-          { id: 'opt-email', value: 'email', label: 'Email', hasError: true },
-          { id: 'opt-sms', value: 'sms', label: 'SMS', hasError: true },
-          { id: 'opt-post', value: 'post', label: 'Post', hasError: true },
+          { id: 'opt-email', value: 'email', label: 'Email' },
+          { id: 'opt-sms', value: 'sms', label: 'SMS' },
+          { id: 'opt-post', value: 'post', label: 'Post' },
         ]}
       />
-      {/* Consumer-rendered error message — hasError alone shows nothing visually */}
-      <p role="alert" style={{ color: 'var(--form-field-text-error-color-error-text)' }}>
-        Please select a notification method to continue.
-      </p>
+      <div className="ds-form-field__message">
+        <span className="ds-form-field__message--error" role="alert">
+          <Icon size={12} name="triangle-alert" />
+          Please select a notification method to continue.
+        </span>
+      </div>
     </div>
   );
 }
@@ -975,13 +985,15 @@ export default NotificationMethodWithErrorExample;
     },
   },
   [
-    '**Field-level validation** — error state is shown at the group level, not per option.',
-    '`hasError` is passed to each option in the `options` array, which sets `aria-invalid="true"`',
-    'on each native `<input>`. Screen readers will announce each option as invalid.',
-    '**However, `hasError` makes ZERO visual change to the indicator circles** — there are no CSS rules',
-    'for the error state. The visible error message rendered below the group (with `role="alert"`) is',
-    'the only thing that communicates the error to sighted users.',
-    'Start with no option selected and note how the error message is present — select any option to',
-    'resolve the validation in a real implementation.',
+    '**Field-level validation.** `RadioButtonGroup`\'s option type is `{ id, value, label }` only —',
+    'there is no per-option `hasError` and no group-level error prop.',
+    'To communicate an error, render your own message below the group using the same canonical markup',
+    '`FormField` produces: a `.ds-form-field__message` wrapper containing a `.ds-form-field__message--error`',
+    'span with a `triangle-alert` `Icon` and the error text. This keeps radio errors visually consistent',
+    'with text/number/select fields wrapped in `FormField`.',
+    'Note: `FormField` itself does not currently support `inputType="radio"`, so this hand-rolled',
+    'pattern is the recommended approach.',
+    'Start with no option selected — the error message is present; select any option to resolve the',
+    'validation in a real implementation.',
   ].join(' '),
 );