Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Radio+Checkbox): use input component #2607

Merged
merged 33 commits into from
Oct 24, 2024
Merged

Conversation

eirikbacker
Copy link
Contributor

@eirikbacker eirikbacker commented Oct 11, 2024

@eirikbacker eirikbacker self-assigned this Oct 11, 2024
Copy link

changeset-bot bot commented Oct 11, 2024

🦋 Changeset detected

Latest commit: 773f24c

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 Major
@digdir/designsystemet-react Major
@digdir/designsystemet Major
@digdir/designsystemet-theme Major

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

Copy link
Contributor

github-actions bot commented Oct 11, 2024

Preview deployments for this pull request:

Storybook - 24. Oct 2024 - 14:14

Theme - 24. Oct 2024 - 14:15

Copy link
Contributor

github-actions bot commented Oct 11, 2024

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 55.9% 3352 / 5996
🔵 Statements 55.9% 3352 / 5996
🔵 Functions 84.84% 168 / 198
🔵 Branches 75% 486 / 648
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
packages/react/src/components/form/useFormField.ts 100% 100% 100% 100%
packages/react/src/components/form/Checkbox/Checkbox.tsx 100% 66.66% 100% 100%
packages/react/src/components/form/Checkbox/useCheckbox.ts 0% 100% 100% 0% 2-4
packages/react/src/components/form/Fieldset/Fieldset.tsx 100% 87.5% 100% 100%
packages/react/src/components/form/Fieldset/FieldsetContext.ts 100% 100% 100% 100%
packages/react/src/components/form/Input/Input.tsx 100% 100% 100% 100%
packages/react/src/components/form/Radio/Radio.tsx 100% 75% 100% 100%
packages/react/src/components/form/Switch/useSwitch.ts 80% 50% 100% 80% 44-46, 51-53
Generated in workflow #565 for commit 773f24c by the Vitest Coverage Report Action

@eirikbacker eirikbacker changed the title fix(Radio): use input component fix(Radio+Checkbox): use input component Oct 18, 2024
packages/css/field.css Outdated Show resolved Hide resolved
@eirikbacker eirikbacker marked this pull request as ready for review October 23, 2024 11:17
@eirikbacker eirikbacker requested a review from mimarz October 23, 2024 13:33
@eirikbacker eirikbacker merged commit 7520547 into next Oct 24, 2024
10 of 11 checks passed
@eirikbacker eirikbacker deleted the fix/radio-use-input branch October 24, 2024 12:19
Barsnes added a commit that referenced this pull request Oct 28, 2024
commit ce23f32
Author: Eirik Backer <[email protected]>
Date:   Mon Oct 28 10:31:21 2024 +0100

    fix(Chip): use input component (#2683)

    - Fixes #2669
    - Fixes wrong height implemented (now correctly `32px`)
    - Implements simplified states after dialogue with Marianne
    - Fixes better alignment of label vs. radio/checkbox
    - Implements logic so elements with the `ds-focus--visible` class
    automatically hides focus ring on children (no need for confusing,
    nested focus rings)

commit d5e0ba1
Author: Lasse Febakke Straum <[email protected]>
Date:   Fri Oct 25 15:08:14 2024 +0200

    refactor(tokens): changed spacing and sizing type to dimension (#2688)

    Co-authored-by: Tobias Barsnes <[email protected]>
    Co-authored-by: Michael Marszalek <[email protected]>

commit 6c1f99d
Author: Eirik Backer <[email protected]>
Date:   Fri Oct 25 13:52:51 2024 +0200

    chore: remove tmp field styling in testing story (#2687)

    - Since field styling is now merged, `testing.stories.tsx` no longer
    needs to fake it

commit f4f76d3
Author: Eirik Backer <[email protected]>
Date:   Fri Oct 25 13:41:36 2024 +0200

    fix(Heading+Label+ValidationMessage): clean up css styles (#2677)

    Figma task is added as #2676

commit d2fc6b9
Author: Tobias Barsnes <[email protected]>
Date:   Fri Oct 25 13:16:17 2024 +0200

    feat: rename `size` prop to `data-size` (#2680)

    resolves #2673

commit acef771
Author: Eirik Backer <[email protected]>
Date:   Fri Oct 25 10:24:19 2024 +0200

    fix(Input): inherit line-height (#2685)

    As pointed out by hawk-eye @mimarz 💪 🙏 🦅
    https://designsystemet.slack.com/archives/C07K7NEKXEW/p1729843841118129

commit d3c58b0
Author: Eirik Backer <[email protected]>
Date:   Fri Oct 25 10:04:16 2024 +0200

    fix(Spinner): use forwardRef and aria-label for consistency (#2682)

    - Use `aria-label` for accessible spinner label to be consistent with
    other components
    - Use `forwardRef` on Spinner

    ---------

    Co-authored-by: Tobias Barsnes <[email protected]>

commit 326671a
Author: Une Sofie Kinn Ekroll <[email protected]>
Date:   Fri Oct 25 08:26:49 2024 +0200

    feat(tokens): add modes for semantic color categories main & support (#2643)

    Co-authored-by: Lasse Febakke Straum <[email protected]>

commit 7520547
Author: Eirik Backer <[email protected]>
Date:   Thu Oct 24 14:19:33 2024 +0200

    fix(Radio+Checkbox): use input component (#2607)

    - Part of #2311
    - Fieldset at compound components moved to task #2666
    - Fixes #2459

commit f96289a
Author: Tobias Barsnes <[email protected]>
Date:   Thu Oct 24 11:17:42 2024 +0200

    chore: enable `noUnusedImports` biome rule (#2675)

    enables https://biomejs.dev/linter/rules/no-unused-imports/

commit a452813
Author: Une Sofie Kinn Ekroll <[email protected]>
Date:   Thu Oct 24 10:38:59 2024 +0200

    feat(cli,theme): don't output underlying primitives for semantic color variables (#2641)
mimarz pushed a commit that referenced this pull request Nov 20, 2024
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`.

All<sup>1</sup> 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-*`<sup>2</sup>, 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-*`<sup>2</sup>.

<sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`,
`danger` and `success` colors.
<sup>2</sup>: 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`.

All<sup>1</sup> 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-*`<sup>2</sup>, 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-*`<sup>2</sup>.

<sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`,
`danger` and `success` colors.
<sup>2</sup>: 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`.

All<sup>1</sup> 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-*`<sup>2</sup>, 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-*`<sup>2</sup>.

<sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`,
`danger` and `success` colors.
<sup>2</sup>: 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`.

All<sup>1</sup> 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-*`<sup>2</sup>, 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-*`<sup>2</sup>.

<sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`,
`danger` and `success` colors.
<sup>2</sup>: 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

Topp align checkbox and radio
3 participants