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.
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.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
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
useIdfix; label/text colors aligned to tokens.menu/menuitem); selection viaaria-current; tests updated to current scope.--color-content-default-secondary; input text color--color-content-default-primary; stories/tests updated.useIdfix.SelectDropdown(role="listbox") andSelectOption(role="option"); focus returns to button after selection; hover/focus states match Input; stories useoptionsprop; unit/integration/a11y tests added.test:sb./formspage.Screenshots
Notes
listbox/option) vs ContextMenu (menu/menuitem).adilallo/component/FormComponentsto Form Components