Skip to content

v1.24.0

Latest

Choose a tag to compare

@github-actions github-actions released this 09 Nov 12:13
b04c1e0

@digdir/designsystemet@1.24.0

Minor Changes

  • New types output for generating TypeScript declarations for your theme's colors (types.d.ts). The css output no longer creates type declarations by default, so add "types" to output to get them. (#5444)

  • CLI: New output field for choosing what the CLI creates. It defaults to ["css"]. Each output is saved in a default folder, which you can change with dir: (#5416)

    • "css": CSS, in designsystemet
    • "types": type declarations, in designsystemet
    • "design-tokens": design tokens, in designsystemet/design-tokens
  • CLI: Set cleanDir to true on an output in the new output field to delete the files in its dir before generating files. cleanDir is false by default, like clean. Design tokens that are built from (tokensDir), and folders of outputs with cleanDir: false, are kept when they are inside a cleaned folder. Before deleting anything, the CLI stops with an error if a cleaned folder contains the config file, is one of those folders, is a symlink, or has a symlink on the way to one of them or to another output. (#5416)

  • New tailwind option on the css output. Set this to the desired Tailwind version to generate <theme>.tailwind.css. Defaults to false, which does not generate a Tailwind file. (#5438)

    • "v3" generates the same file as before.
    • "v4" uses @theme inline, so Tailwind utilities reference the --ds-* variables directly and data-color, data-color-scheme and data-size also apply to them, at any depth in the DOM.

Patch Changes

  • Fix <theme>.tailwind.css missing variables --text-sm, --text-md and --text-lg, mapped to the body font sizes. Generate a new theme file to get the updated fixed file. (#5451)

  • Deprecated: Commands token create and token build. Use designsystemet with new output field in designsystemet.config.json to configure outputs. (#5416)

  • Deprecated unused design token link.color.visited, CSS custom property --ds-link-color-visited and config option overrides.linkVisited. To style visited links, style .ds-link:visited instead. (#5574)

  • Replace fast-glob with Node's built-in fs.glob in CSS migrations. Thanks @wfeiring (#5505)

  • Update npm non-major dependencies (#5506)

  • Update npm non-major dependencies (#5479)

  • Update npm non-major dependencies (#5553)

  • Update npm non-major dependencies (#5588)

  • Update npm non-major dependencies (#5521)

  • Deprecated: outDir and clean are deprecated in the Config schema, and replaced by output[].dir and output[].cleanDir for the respective output type. (#5416)

  • CLI: The config file (designsystemet.config.json), including typography, is no longer experimental. Future changes to the config schema follow semver and come with automatic migrations. (#5597)

  • Tailwind: Sets CSS @layer in <theme>.tailwind.css for easier usage (#5570)

  • Add banner about usage to generated CSS theme and tailwind files. (#5570)

@digdir/designsystemet-css@1.24.0

Minor Changes

  • New ds-focus--within helper class that adds the focus ring when the element or any of its descendants have focus (:focus-within). (#5569)

  • CSS: Ensure utility classes such as .ds-focus and .ds-icon always take precedence over component by assigning them to a new CSS layer ds.utils, ordered after ds.components. For example ds-sr-only will now correctly take precedence over ds-label. (#5594)

Patch Changes

  • Fix <theme>.tailwind.css missing variables --text-sm, --text-md and --text-lg, mapped to the body font sizes. Generate a new theme file to get the updated fixed file. (#5451)

  • Link: Deprecated CSS custom property --dsc-link-color--visited. Style .ds-link:visited instead. (#5574)

  • Deprecated unused design token link.color.visited, CSS custom property --ds-link-color-visited and config option overrides.linkVisited. To style visited links, style .ds-link:visited instead. (#5574)

  • Update npm non-major dependencies (#5506)

  • data-color: Sets color to --ds-color-text-default so text color updates when the color mode changes. (#5419)

  • Suggestion: No longer counts the hidden empty option in the screen reader hit count when other options are shown (#5457)

  • Breadcrumbs, Chip, Dialog, Pagination, Suggestion: Added English translations of the default labels set in CSS custom properties. (#5501)

  • Table: No longer causes sort buttons to overflow border-radius (thanks @ericbstie) (#5441)

  • Alert, Error summary, Table: Revert border-radius from --ds-border-radius-lg to --ds-border-radius-md to harmonize with sibling elements (#5440)

  • Update npm non-major dependencies (#5479)

  • Table: Applies hover and sorted background to th[aria-sort] instead of nested <button> (#5441)

  • Update npm non-major dependencies (#5588)

  • Update npm non-major dependencies (#5521)

  • Dialog: Added a default label through the CSS custom property --dsc-dialog-close-label for the close button. (#5501)

  • Combobox: Use inline SVGs for icons (#5514)

@digdir/designsystemet-react@1.24.0

Patch Changes

  • Dialog: Deprecates TriggerContext and Trigger, which will be removed in the next major version. Use native Invokers Commands API on Button with command="show-modal" (or command="--show-non-modal") and commandfor set to the dialog's id. (#5580)

  • Dropdown, Popover: Deprecates TriggerContext and Trigger, which will be removed in the next major version. Use native Popover API on Button with popovertarget set to the popover's or dropdown's id. (#5580)

  • Search: Deprecates Search, Search.Input, Search.Clear and Search.Button, which will be removed in the next major version. Read Search is being removed, what should you do? for how to add a search button, search icon or clear button. (#5579)

  • Update npm non-major dependencies (#5506)

  • Combobox: Removed inline SVGs, now using inline CSS icons (#5514)

  • Update npm non-major dependencies (#5479)

  • Dialog: Fixed accessible name warning when heading is present (#5473)

  • ToggleGroup: Now allows overwriting data-variant on ToggleGroup.Item (#5455)

  • Update npm non-major dependencies (#5553)

  • Remove @navikt/aksel-icons as a dependency (#5514)

  • AvatarStack: Now stable, please switch from EXPERIMENTAL_AvatarStack to AvatarStack (#5496)

  • Popover, Dropdown: Now stay in sync when opened or closed with the native Popover API, such as showPopover(), hidePopover() or togglePopover(), when not using open. Before, the next click on the trigger could do nothing, and Esc or a click outside would not close it. (#5582)

  • Update npm non-major dependencies (#5588)

  • Update npm non-major dependencies (#5521)

  • Dialog: Automatically uses the first heading as its accessible name if one is missing, and warns when neither is provided. (#5447)

  • Textarea: Fixed hydration warning (#5473)

@digdir/designsystemet-types@1.24.0

No changes in this release.

@digdir/designsystemet-web@1.24.0

Patch Changes

  • Suggestion: No longer counts the hidden empty option in the screen reader hit count when other options are shown (#5457)

  • Update npm non-major dependencies (#5479)

  • Dialog: Fixed accessible name warning when heading is present (#5473)

  • Update npm non-major dependencies (#5553)

  • Update npm non-major dependencies (#5521)

  • Automatically load relevant helpers when using isolated component files (dialog loads invokers, field loads readonly, togglegroup loads readonly and focusgroup) (#5447)

  • Dialog: Automatically uses the first heading as its accessible name if one is missing, and warns when neither is provided. (#5447)

figma-ui-kit@1.24.0

Patch Changes