Ny komponent - Checkbox#117
Conversation
There was a problem hiding this comment.
Pull request overview
Rewrites the Checkbox React component to align with the project's Field-based form components, adds matching CSS, Storybook stories, unit tests, and Norwegian documentation (including an accessibility manifest). The component now supports description/error/tooltip via Field, indeterminate state, ref forwarding, and proper native input pass-through.
Changes:
- New
CheckboxAPI (forwardRef, native input attrs, indeterminate, Field wrapper for description/error/tooltip) with updated CSS using BEM__box/__iconmarkup. - Storybook stories and Playwright allowlist entry for
Form/Checkbox, plus Vitest unit tests for the new behavior. - New docs page (
checkbox.mdx) and accessibility JSON, plus sidebar entry.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| indeks-react/lib/ui/components/form/checkbox/Checkbox.tsx | Rewritten component using forwardRef, Field wrapper, and indeterminate handling. |
| indeks-react/lib/ui/components/form/checkbox/Checkbox.test.tsx | New Vitest suite covering rendering, props, ref forwarding, and Field wrapping. |
| indeks-react/lib/ui/components/form/index.ts | Exports new CheckboxProps type. |
| indeks-css/css/components/form/checkbox.css | Rewritten styles using :where(...) selectors and BEM elements/modifiers. |
| indeks-storybook/stories/form/checkbox/Checkbox.stories.tsx | Adds multiple stories for variants of the new API. |
| indeks-storybook/tests/scanAll.dtest.ts | Adds Form/Checkbox to the allowlist for visual/a11y testing. |
| indeks-docs/docs/komponenter/skjema/checkbox.mdx | New documentation page with React + HTML examples and guidelines. |
| indeks-docs/docs/komponenter/skjema/accessibility/checkbox.json | Accessibility manifest consumed by the docs page. |
| indeks-docs/sidebars.ts | Registers the new docs page in the Skjema sidebar. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const internalRef = useRef<HTMLInputElement>(null); | ||
| const inputRef = (forwardedRef ?? internalRef) as React.RefObject<HTMLInputElement>; | ||
|
|
||
| useEffect(() => { | ||
| if (inputRef.current) { | ||
| inputRef.current.indeterminate = indeterminate ?? false; | ||
| } | ||
| }, [indeterminate, inputRef]); |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-117.westeurope.3.azurestaticapps.net |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-117.westeurope.3.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-117.westeurope.3.azurestaticapps.net |
1 similar comment
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-117.westeurope.3.azurestaticapps.net |
antidecaf
force-pushed
the
checkbox-component
branch
from
b9fbfcb to
2e1fe92
Compare
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-117.westeurope.3.azurestaticapps.net |
antidecaf
force-pushed
the
checkbox-component
branch
from
2e1fe92 to
10a30d5
Compare
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-117.westeurope.3.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-117.westeurope.3.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-117.westeurope.3.azurestaticapps.net |
Hva er endret?
Legger til ny Checkbox-komponent
Hvorfor?
Sjekkliste
pnpm build)pnpm lint)pnpm changeset) — ikke nødvendig for docs-only endringerType endring
Skjermbilder / video