feat(Search): api changes #2708

Barsnes · 2024-10-30T12:54:53Z

part of #2311

New API:

  <Search>
    <Search.Input aria-label='Søk' />
    <Search.Clear />
    <Search.Button /> /* can be removed to get a simple variant */
  </Search>

changeset-bot · 2024-10-30T12:54:57Z

🦋 Changeset detected

Latest commit: 20baf68

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

github-actions · 2024-10-30T12:55:08Z

Preview deployments for this pull request:

Storybook - 5. Nov 2024 - 13:32

github-actions · 2024-10-31T09:45:16Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	54.77%	3184 / 5813
🔵	Statements	54.77%	3184 / 5813
🔵	Functions	84.65%	171 / 202
🔵	Branches	73.96%	466 / 630

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/components/form/Search/Search.tsx	100%	100%	100%	100%
packages/react/src/components/form/Search/SearchButton.tsx	50%	100%	0%	50%	16-21
packages/react/src/components/form/Search/SearchClear.tsx	100%	40%	100%	100%
packages/react/src/components/form/Search/SearchInput.tsx	100%	100%	100%	100%

Generated in workflow #779 for commit 20baf68 by the Vitest Coverage Report Action

packages/css/search.css

packages/react/src/components/form/Search/Search.tsx

packages/react/src/components/form/Search/SearchInput.tsx

mimarz · 2024-11-04T07:53:46Z

packages/css/search.css

-  padding-right: 2.2em;
-}
+  /* The simple variant, when no submit button is present */
+  &:not(:has(button[type='submit'])) {


Should we maybe not select on type incase someone changes it to type="button"?

yeah we should probably nmot 🤔 Maybe we can select on both

&:not(:has(button:not([type='reset'])))? :D

mimarz · 2024-11-04T08:02:20Z

Whats our stance on the clear button? Do we want users to not be able to use it? I see in all our examples we use it and it could have been part of Search.Input 🤔

eirikbacker · 2024-11-04T08:43:57Z

Whats our stance on the clear button? Do we want users to not be able to use it? I see in all our examples we use it and it could have been part of Search.Input 🤔

Tobias and I discussed this too, and you could strictly say the same for

<Pagination>
  <Pagination.List>
    <Pagination.Item>
      <Pagination.Button></Pagination.Button>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Button></Pagination.Button>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Button></Pagination.Button>
    </Pagination.Item>
  </Pagination.List>
</Pagination>

vs.

<Pagination>
  <Pagination.Button></Pagination.Button>
  <Pagination.Button></Pagination.Button>
  <Pagination.Button></Pagination.Button>
</Pagination>

I suggest we keep it as a separate component, so there is 1:1 React component outputs 1 top-level HTML element consistently throughout our system. If <input> was a element that could contain children, I would agree putting clear inside though, but as it is self closing, I suggest we keep elements separated instead of returning 2 nodes in a Fragment or adding any unnecessary wrapping elements :)

Barsnes · 2024-11-04T09:06:46Z

Whats our stance on the clear button? Do we want users to not be able to use it? I see in all our examples we use it and it could have been part of Search.Input 🤔

+1 on what Eirik said, and it also makes it a lot easier to send props to for our consumers.
It's not a requirement to have it, but we reccommend it

Co-authored-by: Eirik Backer <eirik.backer@gmail.com>

packages/css/search.css

eirikbacker

👏

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/designsystemet-css@1.0.0-next.36 ### 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/designsystemet-react@1.0.0-next.36 ### 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/designsystemet@1.0.0-next.36 ### 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/designsystemet-theme@1.0.0-next.36 ### 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>

part of #2311 New API: ```tsx <Search> <Search.Input aria-label='Søk' /> <Search.Clear /> <Search.Button /> /* can be removed to get a simple variant */ </Search> ``` --------- Co-authored-by: Eirik Backer <eirik.backer@gmail.com>

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/designsystemet-css@1.0.0-next.36 ### 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/designsystemet-react@1.0.0-next.36 ### 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/designsystemet@1.0.0-next.36 ### 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/designsystemet-theme@1.0.0-next.36 ### 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(Search): api changes

7978a2b

Barsnes added 5 commits October 30, 2024 14:43

more work, start new API

735100b

use less classnames and misc

3d721a2

chnageevent

f17016f

only one css class

9509d13

tests, last css

878446a

Barsnes added 8 commits October 31, 2024 10:56

css var clean

e21c9fa

less js checks

139b533

lets not omit size..

c6bc083

Merge branch 'next' into form/search

18cc755

more cleaning

3047f8c

docs, misc, etc

75c108e

brand new shiny api

f5577f6

remove dummy story

77014dd

Barsnes self-assigned this Nov 1, 2024

Barsnes added 6 commits November 1, 2024 10:36

Merge branch 'next' into form/search

97aa7af

cleaning

bfbdec3

some docs

58a9ad4

fix showcase

13a473c

jsdoc

d9a73f7

Create few-squids-speak.md

c79763c

Barsnes marked this pull request as ready for review November 1, 2024 10:59

Barsnes requested review from mimarz, eirikbacker and unekinn as code owners November 1, 2024 10:59

eirikbacker reviewed Nov 1, 2024

View reviewed changes

a lot of misc

b294978

correct y spacing

72ba1dd

mimarz reviewed Nov 1, 2024

View reviewed changes

packages/react/src/components/form/Search/SearchInput.tsx Outdated Show resolved Hide resolved

eirikbacker mentioned this pull request Nov 1, 2024

FormField components #2311

Closed

Barsnes added 3 commits November 4, 2024 08:16

double rest and classname

f2d3935

Merge branch 'next' into form/search

8c2f1ee

misc props and send className

9431de0

mimarz reviewed Nov 4, 2024

View reviewed changes

Barsnes and others added 3 commits November 4, 2024 12:20

changes from #2723

a9d8cb1

Co-authored-by: Eirik Backer <eirik.backer@gmail.com>

target both submit and button

2a11f9b

jsdoc

1634693

mimarz mentioned this pull request Nov 4, 2024

Should Search become part of Input component with type=search? #2388

Closed

Barsnes added 3 commits November 4, 2024 13:47

dont require aria label, but till in docs

10ace87

css

9c022f3

remove id

2f144aa

eirikbacker reviewed Nov 5, 2024

View reviewed changes

packages/css/search.css Outdated Show resolved Hide resolved

eirikbacker reviewed Nov 5, 2024

View reviewed changes

packages/css/search.css Show resolved Hide resolved

Barsnes added 2 commits November 5, 2024 09:51

css

f16b7a5

selectors, again

ce2587c

eirikbacker approved these changes Nov 5, 2024

View reviewed changes

Merge branch 'next' into form/search

20baf68

Barsnes merged commit bbf2994 into next Nov 5, 2024
5 checks passed

Barsnes deleted the form/search branch November 5, 2024 12:30

This was referenced Nov 5, 2024

chore: new release candidate (next) #2592

Merged

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

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Search): api changes #2708

feat(Search): api changes #2708

Barsnes commented Oct 30, 2024 •

edited

Loading

changeset-bot bot commented Oct 30, 2024 •

edited

Loading

github-actions bot commented Oct 30, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

mimarz Nov 4, 2024

Barsnes Nov 4, 2024

eirikbacker Nov 4, 2024

mimarz commented Nov 4, 2024

eirikbacker commented Nov 4, 2024 •

edited

Loading

Barsnes commented Nov 4, 2024

eirikbacker left a comment

feat(Search): api changes #2708

feat(Search): api changes #2708

Conversation

Barsnes commented Oct 30, 2024 • edited Loading

changeset-bot bot commented Oct 30, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Oct 30, 2024 • edited Loading

github-actions bot commented Oct 31, 2024 • edited Loading

Coverage Report

mimarz Nov 4, 2024

Choose a reason for hiding this comment

Barsnes Nov 4, 2024

Choose a reason for hiding this comment

eirikbacker Nov 4, 2024

Choose a reason for hiding this comment

mimarz commented Nov 4, 2024

eirikbacker commented Nov 4, 2024 • edited Loading

Barsnes commented Nov 4, 2024

eirikbacker left a comment

Choose a reason for hiding this comment

Barsnes commented Oct 30, 2024 •

edited

Loading

changeset-bot bot commented Oct 30, 2024 •

edited

Loading

github-actions bot commented Oct 30, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

eirikbacker commented Nov 4, 2024 •

edited

Loading