Skip to content

Latest commit

 

History

History
111 lines (69 loc) · 3.47 KB

PilotMigration.mdx

File metadata and controls

111 lines (69 loc) · 3.47 KB

import { Markdown, Meta } from "@storybook/blocks";

Migration

Tokens

See tokens docs here.

CSS

  • Most of our CSS is re-written. This includes renaming all .navds-classNames to .aksel. This will affect most custom overrides targeting .navds-classes.

As we strongly recommend avoiding custom overrides where possible, we would like to encourage opening an issue if you find that you have to override our CSS to achieve something! It's these cases we want to know about so that we can fix them for everyone.

Removed component-tokens

All component-spesific tokens are no longer supported. That means all tokens like these from Button are removed:

--ac-button-primary-bg
--ac-button-primary-text
--ac-button-primary-hover-bg
--ac-button-primary-active-bg

All component-based tokens are prefixed with --ac, so a global search in your codebase should find all of them.

Tailwind CSS

Since our Tailwind CSS config is tied to our tokens, most changes made to the tokens will affect the Tailwind CSS config. We have decided to prefix all our classes with ax- in the new config, so it should be possible to use both packages at the same time. We will develop tooling to hopefuly make the migrations easier in the future.

Removed classes

z-index, maxWidth and spacing classes are removed from the new config.

React

We have made some updates to @navikt/ds-react that you should be aware of before testing.

Accordion

Props

  • variant is deprecated and will be removed in the future. We have not implemented it in the new system.
  • headingSize is deprecated and will be removed in the future. Accordion-size medium now equals small heading, and size small equals xsmall heading.

Structural changes

<Accordion.Content/> now has an extra nested div to allow for better animations. Custom CSS might break.

Datepicker

Weeknumber-button uses our own button-component, and no longer a custom button.

GuidePanel

Component got a complete overhaul. Custom overrides might break.

Popover, HelpText

arrow-prop is removed. All of our floating dialog-elements except for Tooltip now comes without arrow. If you have custom offset-values, you might have to update them to accommodate this.

Pagination

Button now uses our own button-component and `variant="tertiary-neutral".

Primitives

Given that these are closely tied to our tokens, you will most likely have to update parts of them to test the new system.

All primitives using our current spacing-tokens now has the new space-tokens. You can use the old tokens while testing, but the full release will remove them from the prop-list

{` \`\`\`diff - + \`\`\`

`}

Page

background-prop is removed. Now just uses bg-default-token.

Box

Since <Box /> is directly tied to our tokens, we now offer <Box.New /> as a temporary altenative. This component is based on our new tokens and can use the backgrounds, borders, border-radius and shadows from the new system. When the full release comes, we will update <Box /> to use the new system, and provide tooling to handle this migration.

All instances of <Box /> will break when using the new system if:

  • background-prop is used
  • shadow-prop is used
  • borderColor-prop is used