feat(Field): start implementing field api #2502

eirikbacker · 2024-09-24T10:13:43Z

Fixes #1943
For now just testing creating a <Field> component, which uses a utility that works with the real DOM, making it possible to use in a future custom element <ds-field> as well. This also allows injecting any form element - not just made by us, but any native form element, any form associated custom element or third party components.

By using native DOM, there is no Context that needs to run on server, and all the wire-up is only for assistive technology - it does not effect the visual representation, meaning it can be done under the hood on the client without causing any layout shift or similar issues.

API:

<Field>
  <Label>Label text</Label>
  <Field.Description>Description</Field.Description> // Should be without Field.? :)
  <Input />
  <ValidationMessage>Validation message</ValidationMessage> // Should be Field.Validation.? :)
</Field>

More tests are needed, and moving Affix and Counter into Field is needed, but keeping this PR small so we can divide the task between us :)

changeset-bot · 2024-09-24T10:13:47Z

🦋 Changeset detected

Latest commit: c339c1b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@digdir/designsystemet-css	Patch
@digdir/designsystemet-react	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-theme	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-09-24T10:14:02Z

Preview deployments for this pull request:

Storybook - 18. Oct 2024 - 14:01

github-actions · 2024-09-24T10:14:53Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	57.83%	3624 / 6266
🔵	Statements	57.83%	3624 / 6266
🔵	Functions	83.91%	167 / 199
🔵	Branches	75.69%	514 / 679

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/react/src/components/ValidationMessage/ValidationMessage.tsx	100%	100%	100%	100%
packages/react/src/components/form/Field/Field.tsx	35.71%	100%	0%	35.71%	9-14, 16-17, 19
packages/react/src/components/form/Field/FieldDescription.tsx	66.66%	100%	0%	66.66%	10-11
packages/react/src/components/form/Field/fieldObserver.ts	84.28%	60%	87.5%	84.28%	30, 32-37, 87-90

Generated in workflow #434 for commit c339c1b by the Vitest Coverage Report Action

Barsnes · 2024-10-18T10:08:08Z

We should probably have a changeset for this

packages/css/index.css

packages/react/src/components/form/Field/Field.stories.tsx

packages/react/src/components/form/Field/fieldA11Y.ts

packages/react/src/components/form/Field/fieldObserver.ts

mimarz

Just some small stuff on code readability.

This is a good starting point for us to start using, and we'll just tweak going forward.

I also updated #2311 CharacterCounter so we don't forget we need to figure out how to solve that.

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ # Releases ## @digdir/[email protected] ### Major Changes - Search: New compound API ([#2708](#2708)) - Radio + Checkbox: ([#2607](#2607)) - Use `label` prop instead of `children` as label text - Remove `Radio.Group` and `Checkbox.Group` and use `Fieldset` instead ### Minor Changes - React components and css now support custom colors through the `data-color` attribute. ([#2703](#2703)) **BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`. All1 css targeting `data-color` has been changed to work with all custom colors generated by the CLI. `Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`2, unless `data-color` is set directly on the element. For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element. All other components that defaulted to `"accent"`, or previously only existed in `"accent"` color, now support `data-color`. They will also inherit their color from the closest `data-color` attribute. If none is found, they use `--ds-color-accent-*`2. 1: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. 2: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`. - Implemented a more flexible system of semantic border-radius tokens. ([#2497](#2497)) ### Patch Changes - Accordion: Fix chevron abandoning parent in scroll container ([#2699](#2699)) - SkipLink: Add css variables ([#2626](#2626)) - ValidationMessage: Add icon when `error={true}` ([#2596](#2596)) - ValidationMessage: fix icon abandoning the component when scrolling ([#2646](#2646)) - Accordion: Add css variable for chevron ([#2626](#2626)) - CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context ([#2541](#2541)) - CSS: Move default background-color to `<body>` element ([#2754](#2754)) - Dropdown: Add `Dropdown.Button` for more explicit API ([#2694](#2694)) - Breadcrumbs: Add css variable for chevron ([#2626](#2626)) - Input: Sufficient color contrast for readonly ([#2621](#2621)) - Alert: fix icon abandoning the component when scrolling ([#2648](#2648)) - chip: Fix wrong font sizes ([#2595](#2595)) - Button: Fix SVG and images shrinking in flex containers ([#2612](#2612)) - Fieldset: Move to compound components `Fieldset.Legend` and `Fieldset.Description` ([#2705](#2705)) - Table: add `z-index` to stickhy header ([#2761](#2761)) - Tooltip: Add more variables ([#2626](#2626)) - Button: Use font-weight `--ds-font-weight-medium` ([#2618](#2618)) - Field: Adds `<Field>` component wrapping and connecting internal form elements for better accessibility ([#2502](#2502)) - Chip: Use correct `32px` height to align nicely with `<Tag>` ([#2683](#2683)) - Combobox: fix overflow on screens narrower than ~340px ([#2570](#2570)) - Label: Fix icon abandoning parent in scroll container ([#2699](#2699)) - Label: Use data attributes for styling ([#2588](#2588)) ValidationMessage: Use data attributes for styling - Select + Textarea: ([#2571](#2571)) - Remove `label`, `hideLabel`, `description`, `characterLimit` and `error` as these will be part of `Field` API - Pagination: Add css variable for chevron ([#2626](#2626)) - Field.Affix: ([#2793](#2793)) - Rename `Field.AffixWrapper` to `Field.Affixes` - Support inputs with `size` attribute - Remove `baseline` layer and fix layerorder for typography ([#2588](#2588)) - Modal backdrop was invisible in some browser versions. See <https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element> for affected versions. ([#2615](#2615)) - Table: Add `Table.Foot` and style caption ([#2744](#2744)) ## @digdir/[email protected] ### Major Changes - Search: New compound API ([#2708](#2708)) - Dropdown: Add `Dropdown.Button` for more explicit API ([#2694](#2694)) - Switch: Use `label` prop instead of `children` to render label ([#2773](#2773)) - Fieldset: Move to compound components `Fieldset.Legend` and `Fieldset.Description` ([#2705](#2705)) - React components and css now support custom colors through the `data-color` attribute. ([#2703](#2703)) **BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`. All1 css targeting `data-color` has been changed to work with all custom colors generated by the CLI. `Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`2, unless `data-color` is set directly on the element. For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element. All other components that defaulted to `"accent"`, or previously only existed in `"accent"` color, now support `data-color`. They will also inherit their color from the closest `data-color` attribute. If none is found, they use `--ds-color-accent-*`2. 1: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. 2: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`. - Input+Select: Use native HTML `size` prop instead of `htmlSize` ([#2697](#2697)) - Radio + Checkbox: ([#2607](#2607)) - Use `label` prop instead of `children` as label text - Remove `Radio.Group` and `Checkbox.Group` and use `Fieldset` instead ### Patch Changes - Dropdown: Rename `DropdownContext` to `DropdownTriggerContext` ([#2782](#2782)) - Textfield: Removed `htmlSize`, you can now use native `size` ([#2710](#2710)) - CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context ([#2541](#2541)) - Popover+Dropdown: Fix issue when combining controlled state with changing child elements ([#2707](#2707)) - Modal: Rename `ModalContext` to `ModalTriggerContext` ([#2782](#2782)) - Input: Sufficient color contrast for readonly ([#2621](#2621)) - Popover: Make sure arrow does not leave the popover ([#2652](#2652)) - Modal: Fix `onClose` not being called ([#2622](#2622)) - Textfield: Refactored `characterLimit` to `counter` and now use new `Field.Counter` sub-component ([#2710](#2710)) - useRadioGroup: Add hook to easily control groups of `<Radio>` components ([#2739](#2739)) - useCheckboxGroup: Add hook to easily control groups of `<Checkbox>` components ([#2739](#2739)) - Modal: Expose native close event object to onClose callback ([#2738](#2738)) - Textfield: Now works as expected with `data-size` ([#2710](#2710)) - Field: Adds `<Field>` component wrapping and connecting internal form elements for better accessibility ([#2502](#2502)) - Textfield: Added `multiline` for switching between `input` and `textarea` ([#2710](#2710)) - Tooltip: Be able to send `string` as children ([#2777](#2777)) - Textfield: Removed `hideLabel`, use `aria-label` or `aria-describedby` for "hidden" labels ([#2710](#2710)) - Avatar: Fix `aria-hidden` being wrongly added to a fragment ([#2626](#2626)) - Chip: Use correct `32px` height to align nicely with `<Tag>` ([#2683](#2683)) - Label: Use data attributes for styling ([#2588](#2588)) ValidationMessage: Use data attributes for styling - Select + Textarea: ([#2571](#2571)) - Remove `label`, `hideLabel`, `description`, `characterLimit` and `error` as these will be part of `Field` API - Field.Affix: ([#2793](#2793)) - Rename `Field.AffixWrapper` to `Field.Affixes` - Support inputs with `size` attribute - Table: Add `Table.Foot` and style caption ([#2744](#2744)) - Popover: Rename `PopoverContext` to `PopoverTriggerContext` ([#2782](#2782)) - Spinner: `aria-label` required instead of `title` prop ([#2682](#2682)) - Textfield: Update to use `Field` internally ([#2710](#2710)) ## @digdir/[email protected] ### Minor Changes - React components and css now support custom colors through the `data-color` attribute. ([#2703](#2703)) **BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`. All1 css targeting `data-color` has been changed to work with all custom colors generated by the CLI. `Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`2, unless `data-color` is set directly on the element. For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element. All other components that defaulted to `"accent"`, or previously only existed in `"accent"` color, now support `data-color`. They will also inherit their color from the closest `data-color` attribute. If none is found, they use `--ds-color-accent-*`2. 1: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. 2: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`. - CSS variables: `--ds-color-*-{1,2,...,13,contrast-1,contrast-2}`, which were generated from the `primitives` layer of design tokens, have been removed since they are always 1-to-1 with the semantic layer. Use the equivalent variables from the semantic layer instead ([#2641](#2641)) Example, for the `neutral` scale: ```css var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */ var(--ds-color-neutral-background-subtle); /* instead of: var(--ds-color-neutral-2) */ var(--ds-color-neutral-surface-default); /* instead of: var(--ds-color-neutral-3) */ var(--ds-color-neutral-surface-hover); /* instead of: var(--ds-color-neutral-4) */ var(--ds-color-neutral-surface-active); /* instead of: var(--ds-color-neutral-5) */ var(--ds-color-neutral-border-subtle); /* instead of: var(--ds-color-neutral-6) */ var(--ds-color-neutral-border-default); /* instead of: var(--ds-color-neutral-7) */ var(--ds-color-neutral-border-strong); /* instead of: var(--ds-color-neutral-8) */ var(--ds-color-neutral-base-default); /* instead of: var(--ds-color-neutral-9) */ var(--ds-color-neutral-base-hover); /* instead of: var(--ds-color-neutral-10) */ var(--ds-color-neutral-base-active); /* instead of: var(--ds-color-neutral-11) */ var(--ds-color-neutral-text-subtle); /* instead of: var(--ds-color-neutral-12) */ var(--ds-color-neutral-text-default); /* instead of: var(--ds-color-neutral-13) */ var(--ds-color-neutral-contrast-default); /* instead of: var(--ds-color-neutral-contrast-1) */ var(--ds-color-neutral-contrast-subtle); /* instead of: var(--ds-color-neutral-contrast-2) */ ``` ...and similarly for `accent`, `brand1`, `brand2` and `brand3`. - CLI now supports creating themes with 1 or more "main" colors, a neutral color, and 1 or more "support" colors. The "main" and "support" colors can have arbitrary names. There can not be more than 4 colors of each category unless you're using Figma on the Enterprise plan, due to plan-based restrictions on the number of variable modes per collection. ([#2733](#2733)) - Implemented a more flexible system of semantic border-radius tokens. ([#2497](#2497)) ### Patch Changes - Removed `init` command. Use `tokens create` instead. ([#2616](#2616)) - Update global colors ([#2662](#2662)) - chore: change default tokens build output folder ([`f8986b8316894ef5cd55f6ee232e4f6aaae6486a`](f8986b8)) ## @digdir/[email protected] ### Minor Changes - React components and css now support custom colors through the `data-color` attribute. ([#2703](#2703)) **BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`. All1 css targeting `data-color` has been changed to work with all custom colors generated by the CLI. `Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`2, unless `data-color` is set directly on the element. For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element. All other components that defaulted to `"accent"`, or previously only existed in `"accent"` color, now support `data-color`. They will also inherit their color from the closest `data-color` attribute. If none is found, they use `--ds-color-accent-*`2. 1: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. 2: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`. - CSS variables: `--ds-color-*-{1,2,...,13,contrast-1,contrast-2}`, which were generated from the `primitives` layer of design tokens, have been removed since they are always 1-to-1 with the semantic layer. Use the equivalent variables from the semantic layer instead ([#2641](#2641)) Example, for the `neutral` scale: ```css var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */ var(--ds-color-neutral-background-subtle); /* instead of: var(--ds-color-neutral-2) */ var(--ds-color-neutral-surface-default); /* instead of: var(--ds-color-neutral-3) */ var(--ds-color-neutral-surface-hover); /* instead of: var(--ds-color-neutral-4) */ var(--ds-color-neutral-surface-active); /* instead of: var(--ds-color-neutral-5) */ var(--ds-color-neutral-border-subtle); /* instead of: var(--ds-color-neutral-6) */ var(--ds-color-neutral-border-default); /* instead of: var(--ds-color-neutral-7) */ var(--ds-color-neutral-border-strong); /* instead of: var(--ds-color-neutral-8) */ var(--ds-color-neutral-base-default); /* instead of: var(--ds-color-neutral-9) */ var(--ds-color-neutral-base-hover); /* instead of: var(--ds-color-neutral-10) */ var(--ds-color-neutral-base-active); /* instead of: var(--ds-color-neutral-11) */ var(--ds-color-neutral-text-subtle); /* instead of: var(--ds-color-neutral-12) */ var(--ds-color-neutral-text-default); /* instead of: var(--ds-color-neutral-13) */ var(--ds-color-neutral-contrast-default); /* instead of: var(--ds-color-neutral-contrast-1) */ var(--ds-color-neutral-contrast-subtle); /* instead of: var(--ds-color-neutral-contrast-2) */ ``` ...and similarly for `accent`, `brand1`, `brand2` and `brand3`. - Implemented a more flexible system of semantic border-radius tokens. ([#2497](#2497)) ### Patch Changes - tokens: Removed validationmessage and label typography styles ([#2698](#2698)) - Update global colors ([#2662](#2662)) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

feat(Field): start implementing field api

6497bb8

eirikbacker self-assigned this Sep 24, 2024

eirikbacker and others added 6 commits September 25, 2024 14:11

Merge branch 'next' into fix/field-api

6e676f0

fix(Field): create a11yField utility

8d66fa6

fix(Field): better demo story

b3481c6

fix(Field): rename Field.Help to Field.Description

9b71046

chore(Field): fix typo

ffd7996

Merge branch 'next' into fix/field-api

9e4f546

eirikbacker requested a review from unekinn September 26, 2024 07:24

eirikbacker and others added 16 commits September 26, 2024 09:29

chore(ValidationMessage): remove api

38b8c20

fix(Field): use validationmessage directly

3871051

Merge branch 'next' into fix/field-api

ffcfebc

fix: moving to mutationobserver wip

e8054ef

Merge branch 'next' into fix/field-api

6cf7898

fix: continue mutationobserver implementation

58534aa

fix: testing removing

f271f37

chore: merge in next

7fcbb1e

fix: simplify

7344069

fix: simplify

5b612af

Merge branch 'next' into fix/field-api

ef0d6fc

fix: include css

f6c130e

fix: support changing attributes

2498865

Merge branch 'next' into fix/field-api

59bf6d9

fix(Field): adjustments

2884b18

Merge branch 'next' into fix/field-api

017646e

eirikbacker marked this pull request as ready for review October 18, 2024 09:59

eirikbacker requested a review from mimarz as a code owner October 18, 2024 09:59

eirikbacker requested a review from Barsnes as a code owner October 18, 2024 09:59

chore(Field): lint

f5176f2

Barsnes reviewed Oct 18, 2024

View reviewed changes

mimarz reviewed Oct 18, 2024

View reviewed changes

packages/react/src/components/form/Field/fieldA11Y.ts Outdated Show resolved Hide resolved

eirikbacker and others added 4 commits October 18, 2024 12:53

fix(Field): PR comments

c68eeac

fix(Field): isFormAssociated

2c65b87

chore: lint

6e38e9f

Merge branch 'next' into fix/field-api

71f285c

eirikbacker requested review from Barsnes and mimarz October 18, 2024 11:08

eirikbacker and others added 3 commits October 18, 2024 13:12

Create plenty-singers-matter.md

30c4d6d

fix(Field): early return in for of loop

a32cd1b

fix: typo

fd946ae

mimarz reviewed Oct 18, 2024

View reviewed changes

packages/react/src/components/form/Field/fieldObserver.ts Outdated Show resolved Hide resolved

mimarz reviewed Oct 18, 2024

View reviewed changes

packages/react/src/components/form/Field/fieldObserver.ts Outdated Show resolved Hide resolved

mimarz approved these changes Oct 18, 2024

View reviewed changes

chore: readability

c339c1b

eirikbacker merged commit 50efed2 into next Oct 18, 2024
9 checks passed

eirikbacker deleted the fix/field-api branch October 18, 2024 12:02

This was referenced Oct 18, 2024

chore: new release candidate (next) #2592

Merged

chore: new release candidate (next) linus-jansson/designsystemet#6

Open

github-actions bot mentioned this pull request Oct 31, 2024

chore: new release candidate (next) elaffen/designsystemet-digdir#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Field): start implementing field api #2502

feat(Field): start implementing field api #2502

eirikbacker commented Sep 24, 2024 •

edited

Loading

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading

Barsnes commented Oct 18, 2024

mimarz left a comment

feat(Field): start implementing field api #2502

feat(Field): start implementing field api #2502

Conversation

eirikbacker commented Sep 24, 2024 • edited Loading

changeset-bot bot commented Sep 24, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Sep 24, 2024 • edited Loading

github-actions bot commented Sep 24, 2024 • edited Loading

Coverage Report

Barsnes commented Oct 18, 2024

mimarz left a comment

Choose a reason for hiding this comment

eirikbacker commented Sep 24, 2024 •

edited

Loading

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading