feat(web,web-react): add InputDetails component #DS-2454 by dlouhak · Pull Request #2556 · alma-oss/spirit-design-system

dlouhak · 2026-03-23T09:52:10Z

Description

Add new InputDetails component for rendering supplementary content (e.g. modal trigger links for terms and conditions, privacy policies) below form field labels of the Checkbox or Toggle component.

rename commit FieldDetails → InputDetails

Additional context

InputDetails is a shared sub-component consumed internally by Checkbox and Toggle via their new details prop. It is also exported for standalone use.

Issue reference

https://jira.almacareer.tech/browse/DS-2454

packages/web-react/src/components/FieldDetails/FieldDetails.tsx

netlify · 2026-03-23T09:53:24Z

✅ Deploy Preview for spirit-design-system-storybook ready!

Name	Link
🔨 Latest commit	`b586883`
🔍 Latest deploy log	https://app.netlify.com/projects/spirit-design-system-storybook/deploys/69c669286d501a00088b448e
😎 Deploy Preview	https://deploy-preview-2556--spirit-design-system-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

packages/web/src/scss/components/Checkbox/_Checkbox.scss

netlify · 2026-03-23T09:54:27Z

✅ Deploy Preview for spirit-design-system-docsite ready!

Name	Link
🔨 Latest commit	`b586883`
🔍 Latest deploy log	https://app.netlify.com/projects/spirit-design-system-docsite/deploys/69c669287f353e000818f779
😎 Deploy Preview	https://deploy-preview-2556--spirit-design-system-docsite.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-03-23T09:54:37Z

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	`b586883`
🔍 Latest deploy log	https://app.netlify.com/projects/spirit-design-system/deploys/69c669288ef92d0008cd479d
😎 Deploy Preview	https://deploy-preview-2556--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

Adds a new FieldDetails sub-component to Spirit (web + web-react) for rendering supplementary consent-related content (e.g. modal triggers) beneath Checkbox/Toggle labels, and wires it into Checkbox/Toggle via a new details prop.

Changes:

Introduces FieldDetails styling and documentation in packages/web, including disabled-state color handling.
Adds details prop support to Checkbox and Toggle in packages/web-react, including aria-details wiring and new demos/tests.
Exports the new component from web-react public entrypoints and adds a visual regression snapshot.

Reviewed changes

Copilot reviewed 48 out of 53 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
tests/e2e/demo-components-compare.spec.ts-snapshots/fielddetails-chromium-linux.png	Adds visual snapshot for FieldDetails.
packages/web/src/scss/tools/_form-fields.scss	Adds mixin to set disabled FieldDetails text color via CSS variable.
packages/web/src/scss/settings/_form-fields.scss	Adds disabled color token setting for FieldDetails.
packages/web/src/scss/components/index.scss	Exposes FieldDetails SCSS module.
packages/web/src/scss/components/Toggle/index.html	Adds Toggle consent examples using FieldDetails + modals.
packages/web/src/scss/components/Toggle/_Toggle.scss	Applies FieldDetails disabled text color variable in disabled Toggle.
packages/web/src/scss/components/Toggle/README.md	Documents consent + FieldDetails usage for Toggle (vanilla).
packages/web/src/scss/components/FieldDetails/index.scss	Exposes FieldDetails SCSS entrypoint.
packages/web/src/scss/components/FieldDetails/index.html	Adds FieldDetails demo page (vanilla).
packages/web/src/scss/components/FieldDetails/_theme.scss	Defines FieldDetails theme tokens (typography/spacing/colors).
packages/web/src/scss/components/FieldDetails/_FieldDetails.scss	Implements FieldDetails layout + color via CSS variable fallback.
packages/web/src/scss/components/FieldDetails/README.md	Documents FieldDetails usage (vanilla).
packages/web/src/scss/components/Checkbox/index.html	Adds Checkbox consent examples using FieldDetails + modals.
packages/web/src/scss/components/Checkbox/_Checkbox.scss	Applies FieldDetails disabled text color variable in disabled Checkbox.
packages/web/src/scss/components/Checkbox/README.md	Documents consent + FieldDetails usage for Checkbox (vanilla).
packages/web-react/src/types/shared/inputs.ts	Introduces shared `DetailsProps` (`details?: ReactNode`).
packages/web-react/src/types/checkbox.ts	Adds `details` prop to Checkbox types via `DetailsProps`.
packages/web-react/src/types/toggle.ts	Adds `details` prop to Toggle types via `DetailsProps`.
packages/web-react/src/hooks/useAriaDetails.tsx	Adds hook for managing `aria-details` id registration.
packages/web-react/src/hooks/index.ts	Exports `useAriaDetails`.
packages/web-react/src/components/index.ts	Exports `FieldDetails` from components barrel.
packages/web-react/src/components/Toggle/Toggle.tsx	Renders FieldDetails when `details` provided and wires `aria-details`.
packages/web-react/src/components/Toggle/tests/Toggle.test.tsx	Adds tests for details rendering + `aria-details`.
packages/web-react/src/components/Toggle/README.md	Documents new `details` prop and consent patterns.
packages/web-react/src/components/Toggle/demo/index.tsx	Adds consent demo sections for Toggle.
packages/web-react/src/components/Toggle/demo/ToggleConsentEmphasizedLabel.tsx	Adds emphasized-label consent demo (Toggle).
packages/web-react/src/components/Toggle/demo/ToggleConsentFullExample.tsx	Adds full consent demo with helper/validation + modals (Toggle).
packages/web-react/src/components/Checkbox/Checkbox.tsx	Renders FieldDetails when `details` provided and wires `aria-details`.
packages/web-react/src/components/Checkbox/tests/Checkbox.test.tsx	Adds tests for details rendering + `aria-details`.
packages/web-react/src/components/Checkbox/README.md	Documents new `details` prop and consent patterns.
packages/web-react/src/components/Checkbox/demo/index.tsx	Adds consent demo sections for Checkbox.
packages/web-react/src/components/Checkbox/demo/CheckboxConsentEmphasizedLabel.tsx	Adds emphasized-label consent demo (Checkbox).
packages/web-react/src/components/Checkbox/demo/CheckboxConsentFullExample.tsx	Adds full consent demo with helper/validation + modals (Checkbox).
packages/web-react/src/components/Field/useAriaIds.tsx	Changes `useAriaIds` to named export (no default export).
packages/web-react/src/components/Field/index.ts	Updates Field barrel exports for `useAriaIds`.
packages/web-react/src/components/Field/tests/useAriaIds.test.tsx	Updates test import to named `useAriaIds`.
packages/web-react/src/components/FieldDetails/FieldDetails.tsx	Adds new FieldDetails component with aria-details registration support.
packages/web-react/src/components/FieldDetails/types.ts	Adds FieldDetails prop types.
packages/web-react/src/components/FieldDetails/useFieldDetailsStyleProps.ts	Adds style-props hook for FieldDetails.
packages/web-react/src/components/FieldDetails/tests/FieldDetails.test.tsx	Adds FieldDetails rendering + registration tests.
packages/web-react/src/components/FieldDetails/tests/useFieldDetailsStyleProps.test.ts	Adds hook test for className prefix.
packages/web-react/src/components/FieldDetails/README.md	Documents FieldDetails (React) usage/API.
packages/web-react/src/components/FieldDetails/stories/FieldDetails.stories.tsx	Adds Storybook stories for FieldDetails.
packages/web-react/src/components/FieldDetails/index.ts	Adds FieldDetails entrypoint exports.
packages/web-react/src/components/FieldDetails/index.html	Adds web-react demo page entry for FieldDetails.
packages/web-react/src/components/FieldDetails/demo/index.tsx	Adds FieldDetails demo app entry (web-react).
packages/web-react/src/components/FieldDetails/demo/FieldDetailsDefault.tsx	Adds Checkbox-based FieldDetails demo (web-react).
packages/web-react/src/components/FieldDetails/demo/FieldDetailsWithToggle.tsx	Adds Toggle-based FieldDetails demo (web-react).
packages/web-react/package.json	Adds package export map entry for `./components/FieldDetails`.

packages/web/src/scss/components/Toggle/README.md

packages/web-react/src/hooks/useAriaDetails.tsx

packages/web-react/src/components/FieldDetails/FieldDetails.tsx

packages/web-react/src/components/Field/index.ts

packages/web/src/scss/components/Checkbox/README.md

github-actions · 2026-03-23T09:59:48Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23431329539/artifacts/6056070783

literat · 2026-03-23T14:20:41Z

Is it ok that the detail goes under the Toggle button? Shouldn't this be a different column?

literat · 2026-03-23T14:32:10Z

suggestion (non-blocking): Consider renaming FieldDetails to FieldAccessory before the feature ships publicly. The current name is technically correct, but does not communicate the interactive-content purpose clearly, and it risks being used as a catch-all supplementary text slot (duplicating helperText semantics).

"Accessory" implies an optional attachment that accompanies the main field content.
It distinguishes itself from helperText (instructional prose, non-interactive) and validationText (status feedback).
It is neutral about content type (link, button, plain text are all valid).
It maps well to the spirit of the ARIA pattern: aria-details targets an "accessory" of additional information.
"Details" is ambiguous: in HTML <details> means collapsible content; in ARIA aria-details is the attribute, but the element pointed to has no special semantic name. "Details" reads as a generic noun, not describing the pattern.
It is a generic name that could be reused for any supplementary content under any field, not only consent patterns. That could be a feature (reusability) or a risk (misuse for helper-text-like content that should really use helperText).

packages/web-react/src/components/InputDetails/README.md

packages/web-react/src/hooks/useAriaDetails.tsx

packages/web-react/src/components/FieldDetails/FieldDetails.tsx

packages/web-react/src/components/FieldDetails/types.ts

packages/web-react/src/components/InputDetails/README.md

packages/web-react/src/components/Checkbox/demo/index.tsx

packages/web-react/src/components/Checkbox/README.md

packages/web-react/src/components/InputDetails/__tests__/InputDetails.test.tsx

github-actions · 2026-03-24T08:59:14Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23481020650/artifacts/6076266881

github-actions · 2026-03-24T09:09:50Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23481020650/artifacts/6076438123

github-actions · 2026-03-24T09:23:52Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23481970781/artifacts/6076660818

Copilot

Pull request overview

Copilot reviewed 48 out of 53 changed files in this pull request and generated 5 comments.

packages/web-react/src/hooks/useAriaDetails.tsx

packages/web-react/src/components/Field/useAriaIds.tsx

packages/web/src/scss/components/FieldDetails/index.html

packages/web-react/src/components/Toggle/demo/index.tsx

packages/web-react/src/components/InputDetails/demo/index.tsx

github-actions · 2026-03-24T09:33:25Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23481970781/artifacts/6076821463

github-actions · 2026-03-27T09:34:02Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23639806062/artifacts/6141061168

github-actions · 2026-03-27T09:38:53Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23640002974/artifacts/6141131330

Copilot

Pull request overview

Copilot reviewed 65 out of 69 changed files in this pull request and generated no new comments.

github-actions · 2026-03-27T09:52:02Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23640449260/artifacts/6141324274

github-actions · 2026-03-27T09:55:43Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23640057594/artifacts/6141380957

Copilot

Pull request overview

Copilot reviewed 65 out of 70 changed files in this pull request and generated 3 comments.

packages/web-react/src/hooks/useAriaIdRefs.ts

packages/web-react/src/types/inputDetails.ts

packages/web-react/src/components/InputDetails/demo/InputDetailsWithToggle.tsx

github-actions · 2026-03-27T10:15:48Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23640788119/artifacts/6141689493

Copilot

Pull request overview

Copilot reviewed 64 out of 69 changed files in this pull request and generated 1 comment.

packages/web-react/src/hooks/useAriaIdRefs.ts

…iaIdRefs hook

* add ignore pattern for hook names (useXxx) to heading-capitalization rule so they are not flagged as capitalization errors

github-actions · 2026-03-27T11:31:17Z

Here is the URL of the uploaded artifact: https://github.com/alma-oss/spirit-design-system/actions/runs/23644007762/artifacts/6142844949

dlouhak requested review from a team, katerinarehorkova, literat and pavelklibani as code owners March 23, 2026 09:52

Copilot AI review requested due to automatic review settings March 23, 2026 09:52

dlouhak requested review from adamkudrna and crishpeen as code owners March 23, 2026 09:52

dlouhak self-assigned this Mar 23, 2026

dlouhak added feature New feature or request run-visual-tests Runs visual regression testing on this PR labels Mar 23, 2026

Copilot started reviewing on behalf of dlouhak March 23, 2026 09:52 View session

dlouhak commented Mar 23, 2026

View reviewed changes

packages/web-react/src/components/FieldDetails/FieldDetails.tsx Outdated Show resolved Hide resolved

dlouhak commented Mar 23, 2026

View reviewed changes

packages/web/src/scss/components/Checkbox/_Checkbox.scss Outdated Show resolved Hide resolved

Copilot AI reviewed Mar 23, 2026

View reviewed changes

literat reviewed Mar 23, 2026

View reviewed changes

pavelklibani approved these changes Mar 23, 2026

View reviewed changes

packages/web-react/src/components/Checkbox/demo/index.tsx Outdated Show resolved Hide resolved

packages/web-react/src/components/Checkbox/README.md Outdated Show resolved Hide resolved

packages/web-react/src/components/InputDetails/__tests__/InputDetails.test.tsx Show resolved Hide resolved

Copilot AI review requested due to automatic review settings March 24, 2026 09:19

Copilot started reviewing on behalf of dlouhak March 24, 2026 09:19 View session

Copilot AI reviewed Mar 24, 2026

View reviewed changes

dlouhak changed the title ~~feat(web,web-react): add FieldDetails component #DS-2454~~ feat(web,web-react): add InputDetails component #DS-2454 Mar 24, 2026

literat force-pushed the feat/ds-2454-accessible-consent-checkbox branch from 4f69156 to 81b09a7 Compare March 27, 2026 09:29

Copilot AI review requested due to automatic review settings March 27, 2026 09:34

Copilot started reviewing on behalf of literat March 27, 2026 09:34 View session

literat force-pushed the feat/ds-2454-accessible-consent-checkbox branch from d8643c5 to 800c8ed Compare March 27, 2026 09:36

Copilot AI reviewed Mar 27, 2026

View reviewed changes

literat force-pushed the feat/ds-2454-accessible-consent-checkbox branch from 800c8ed to eb0a2d0 Compare March 27, 2026 09:46

Copilot AI review requested due to automatic review settings March 27, 2026 09:54

Copilot started reviewing on behalf of literat March 27, 2026 09:55 View session

literat force-pushed the feat/ds-2454-accessible-consent-checkbox branch from 26e58fa to c41efae Compare March 27, 2026 09:56

Copilot AI reviewed Mar 27, 2026

View reviewed changes

packages/web-react/src/hooks/useAriaIdRefs.ts Show resolved Hide resolved

packages/web-react/src/types/inputDetails.ts Show resolved Hide resolved

packages/web-react/src/components/InputDetails/demo/InputDetailsWithToggle.tsx Outdated Show resolved Hide resolved

literat force-pushed the feat/ds-2454-accessible-consent-checkbox branch 2 times, most recently from 7799ddd to 01a37d9 Compare March 27, 2026 10:55

literat and others added 3 commits March 27, 2026 11:58

feat(web): add FieldDetails component #DS-2454

568a79a

feat(web-react): add FieldDetails component #DS-2454

a4c7b2e

test(e2e): update visual snapshot tests #DS-2454

23c0cc0

Copilot AI review requested due to automatic review settings March 27, 2026 10:58

literat force-pushed the feat/ds-2454-accessible-consent-checkbox branch from 01a37d9 to c63868c Compare March 27, 2026 10:58

Copilot started reviewing on behalf of literat March 27, 2026 10:58 View session

Copilot AI reviewed Mar 27, 2026

View reviewed changes

packages/web-react/src/hooks/useAriaIdRefs.ts Outdated Show resolved Hide resolved

literat added 2 commits March 27, 2026 12:25

refactor(web-react): unify approach to aria id references using useAr…

112f22a

…iaIdRefs hook

style(repo): allow React hook names in markdown headings

b586883

* add ignore pattern for hook names (useXxx) to heading-capitalization rule so they are not flagged as capitalization errors

literat force-pushed the feat/ds-2454-accessible-consent-checkbox branch from c63868c to b586883 Compare March 27, 2026 11:25

literat merged commit d2a144e into main Mar 27, 2026
41 of 42 checks passed

literat deleted the feat/ds-2454-accessible-consent-checkbox branch March 27, 2026 11:52

Conversation

dlouhak commented Mar 23, 2026 • edited by literat Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Additional context

Issue reference

Uh oh!

Uh oh!

netlify bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for spirit-design-system-storybook ready!

Uh oh!

Uh oh!

netlify bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for spirit-design-system-docsite ready!

Uh oh!

netlify bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for spirit-design-system ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 23, 2026

Uh oh!

literat commented Mar 23, 2026

Uh oh!

literat commented Mar 23, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 24, 2026

Uh oh!

github-actions bot commented Mar 24, 2026

Uh oh!

github-actions bot commented Mar 24, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 24, 2026

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

dlouhak commented Mar 23, 2026 •

edited by literat

Loading

netlify bot commented Mar 23, 2026 •

edited

Loading

netlify bot commented Mar 23, 2026 •

edited

Loading

netlify bot commented Mar 23, 2026 •

edited

Loading