Form Components #22

2025-10-14T23:34:32Z

an.di commented

2025-10-14 23:34:32 +00:00

Forms: Add and standardize new components, stories, a11y, and tests

Overview

This PR introduces a complete suite of form components with consistent styling using Tailwind design tokens, accessibility-compliant behavior, and comprehensive tests. All components are optimized (React.memo, forwardRef, stable callbacks) and disabled states were removed per product direction.

Changes

New and updated components (behavior, styling, a11y, tests, stories):
- Checkbox: interactive stories; useId fix; label/text colors aligned to tokens.
- ContextMenu (ContextMenu, ContextMenuItem, ContextMenuSection, ContextMenuDivider): correct roles (menu/menuitem); selection via aria-current; tests updated to current scope.
- Input: sizes/label variants/states unified; hover uses outward-growing effect without layout shift; label color --color-content-default-secondary; input text color --color-content-default-primary; stories/tests updated.
- RadioButton, RadioGroup: interactive stories reflecting mutual exclusivity; interaction tests corrected and awaited; useId fix.
- Select: implemented SelectDropdown (role="listbox") and SelectOption (role="option"); focus returns to button after selection; hover/focus states match Input; stories use options prop; unit/integration/a11y tests added.
- Switch: track/thumb visuals per spec; rounded focus ring around toggle; no disabled state; accessible naming via label/aria-label; tests added/updated.
- TextArea: mirrors Input with specified radii and fixed heights for each size/variant; tokenized label/text colors via Tailwind; stories and tests added.
- Toggle: default/hover/selected/focus states; hover only when off; selected outline visible without layout shift; simplified stories (States, Interactive) plus text/icon variations; tests added.
- ToggleGroup: segmented toggles; selected outline on the inside; hover background matches selected; default hamburger icon when text hidden; specified typography; stories simplified to one icon row and interactive; tests added.
Storybook and tooling:
- Storybook Inter font fix via a Storybook-only CSS import.
- Storybook interaction tests enabled and passing for new and existing components.
- Installed Storybook test runner and wired test:sb.
- Vitest config excludes Playwright e2e; Playwright tests only target Next.js app, not Storybook.
Cleanup:
- Removed Storybook e2e tests and the temporary /forms page.
- Prettier and lint adjustments; only warnings remain.

Screenshots

Notes

Disabled states removed across all form components per latest requirements.
ARIA roles corrected and separated: Select (listbox/option) vs ContextMenu (menu/menuitem).
All new components use React.memo/forwardRef/useCallback and stable class composition for performance.
CI pipeline green across unit/integration/a11y/e2e/Storybook/performance.

# Forms: Add and standardize new components, stories, a11y, and tests ## Overview This PR introduces a complete suite of form components with consistent styling using Tailwind design tokens, accessibility-compliant behavior, and comprehensive tests. All components are optimized (React.memo, forwardRef, stable callbacks) and disabled states were removed per product direction. ## Changes - New and updated components (behavior, styling, a11y, tests, stories): - Checkbox: interactive stories; `useId` fix; label/text colors aligned to tokens. - ContextMenu (ContextMenu, ContextMenuItem, ContextMenuSection, ContextMenuDivider): correct roles (`menu`/`menuitem`); selection via `aria-current`; tests updated to current scope. - Input: sizes/label variants/states unified; hover uses outward-growing effect without layout shift; label color `--color-content-default-secondary`; input text color `--color-content-default-primary`; stories/tests updated. - RadioButton, RadioGroup: interactive stories reflecting mutual exclusivity; interaction tests corrected and awaited; `useId` fix. - Select: implemented `SelectDropdown` (`role="listbox"`) and `SelectOption` (`role="option"`); focus returns to button after selection; hover/focus states match Input; stories use `options` prop; unit/integration/a11y tests added. - Switch: track/thumb visuals per spec; rounded focus ring around toggle; no disabled state; accessible naming via label/aria-label; tests added/updated. - TextArea: mirrors Input with specified radii and fixed heights for each size/variant; tokenized label/text colors via Tailwind; stories and tests added. - Toggle: default/hover/selected/focus states; hover only when off; selected outline visible without layout shift; simplified stories (States, Interactive) plus text/icon variations; tests added. - ToggleGroup: segmented toggles; selected outline on the inside; hover background matches selected; default hamburger icon when text hidden; specified typography; stories simplified to one icon row and interactive; tests added. - Storybook and tooling: - Storybook Inter font fix via a Storybook-only CSS import. - Storybook interaction tests enabled and passing for new and existing components. - Installed Storybook test runner and wired `test:sb`. - Vitest config excludes Playwright e2e; Playwright tests only target Next.js app, not Storybook. - Cleanup: - Removed Storybook e2e tests and the temporary `/forms` page. - Prettier and lint adjustments; only warnings remain. ## Screenshots <img width="543" alt="Screenshot 2025-10-15 at 1.09.14 PM.png" src="attachments/168a7f7e-5886-449a-a880-20dc3632c713"> <img width="193" alt="Screenshot 2025-10-15 at 1.09.58 PM.png" src="attachments/53bb867e-6067-4c30-bfe2-fc6ed10b5c11"> <img width="393" alt="Screenshot 2025-10-15 at 1.10.28 PM.png" src="attachments/0e2a5694-2d72-4c86-876c-1a077c16111b"> <img width="282" alt="Screenshot 2025-10-15 at 1.11.07 PM.png" src="attachments/44961415-eb50-4f61-b48d-5d542e73f81d"> ## Notes - Disabled states removed across all form components per latest requirements. - ARIA roles corrected and separated: Select (`listbox/option`) vs ContextMenu (`menu/menuitem`). - All new components use React.memo/forwardRef/useCallback and stable class composition for performance. - CI pipeline green across unit/integration/a11y/e2e/Storybook/performance.

Screenshot 2025-10-15 at 1.09.14 PM.png

92 KiB

Screenshot 2025-10-15 at 1.09.58 PM.png

34 KiB

Screenshot 2025-10-15 at 1.10.28 PM.png

48 KiB

Screenshot 2025-10-15 at 1.11.07 PM.png

20 KiB

an.di added 9 commits 2025-10-14 23:34:32 +00:00

Checkbox component with testing and storybook 0b9e918fd0

Radio button and group component with storybook and testing 04783d3f62

Input component with storybook and testing 2bc5fcdf45