[email protected]

What's new?

Version 7 comes with some small changes to ErrorSummary, Tooltip, Icons and our Tailwind config.

• Will not affect most applications
• All potential breaking changes and how to fix them can be found on our "Migration"-page

Checklist for update

• Check that your Tooltip properly labels the element. It should be equally understandable to visual users and screen-readers even when the Tooltip is open or closed.
• If your ErrorSummary did not have a heading before, check that the new default heading still works in your context.
• If your ErrorSummary had a custom heading before, you can try removing it and just use the built in heading.
• Check that you don't have BeaconSignals, Buldings2 and Buldings3 still in use.
• If you use tailwind, check that use of sm: and max-w-screen-sm still visually works.

Tooltip

We found the use of Tooltip often leading to some degraded experiences for non mouse and visual users.

Some of the main causes to this were:

• Tooltip content were only available when visible (open)
• Dynamic content in Tooltip were often not caught by screen-readers since it depended on Tooltip being open or closed
• Wrong use of Tooltip around non-interactive elements made it non accessible to keyboard users.

To solve this, we updated Tooltip to instead of using aria-describedby, now use aria-label on the elements it surrounds.

// React
<Tooltip content="Åpne inbox">
  <Button icon={<InboxIcon />}/>
</Tooltip>

// Output
<button aria-label="Åpne inbox">
  ...
</button>

As a consequence of this, the content inside the wrapper ("button" in this case) will be ignored by screen-readers. In the case one still wants the visible text to be accessible, you can add the describesChild-prop. This replaces the aria-label with title to make the Tooltip content an additional label.

ErrorSummary

We did some analysis on how ErrorSummary were used and noticed that most of the headings were mostly similar, and with only small differences in most cases. To solve this, ErrorSummary now comes with a default heading when no heading is provided.

Icons

Around 6 months ago, a few icons were renamed and re-labeled. Since we only found ~20 instances of these still in production we decided that v7 would be an ok release to remove the old duplicates.

• BeaconSignals -> OpenSource
• Buldings2 -> Buildings2
• Buldings3 -> Buildings3

Tailwind

We now include our own breakpoints in the screens config. This allows users of our tailwind-config and Primitives to work under the same breakpoints. Our config mostly mirrors the native tailwind-config, but sm and 2xl will be different.

// Native Tailwind config
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',

// New config
'sm': '480px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1440px',

[email protected]

Breaking changes to UNSAFE-components

Combobox: onChange now receive only value as argument, instead of ChangeEvent (#2974)

// before
onChange: ChangeEventHandler<HTMLInputElement>;

// after
onChange: (newValue: string) => void;

@navikt/ds-tokens

• Tokens: Adjusted Green 400 to comply with AA 3.00 contrast. (#3091)
• Fonts: Added built-in support for cyrillic, cyrillic-ext and latin-ext (#3044)

@navikt/ds-react

• Table: Corrected the type of onSortChange (#3103)
• Combobox: Placeholder goes away when an option is selected (#3101)
• Table: Fixed background-clipping when using ExpandableRow. (#3095)
• Primitives: Added gridColumn-prop for more grid alignment control. (#3082)
• Combobox: Can no longer remove options with backspace when shouldShowSelectedOptions is false (#3076)
• Refactored Combobox FilteredOptions (#3073)
• Improved search in Combobox - find hits anywhere in the label (#2974)
• Tabs, ToggleGroup: Rovingfocus now respects shift, alt, ctrl and meta-keys when navigating. (#3041)
• Prevent NullPointer when adding a new/custom option in Combobox single-select (#3054)
• Combobox: Entering an already selected option and pressing enter no longer removes it (#3061)
• Combobox: Description is now connected to the input field via aria-describedby (#3065)
• Prevent Escape in open Combobox from closing Modals (#3053)

@navikt/ds-css

• Table: Fixed background-clipping when using ExpandableRow. (#3095)
• Primitives: Added gridColumn-prop for more grid alignment control. (#3082)
• FormSummary: Added background color (#3093)
• Modal: Added scroll shadows (#3083)
• Fonts: Added built-in support for cyrillic, cyrillic-ext and latin-ext (#3044)

@navikt/aksel

• Aksel-CLI: Bump jscodeshift-add-imports to 1.0.11. (#3099)

@navikt/aksel-icons

• Icons: New icon-series for 'SplitHorizontal' and 'SplitVertical' (#3072)

[email protected]

@navikt/ds-react

• FileUpload: Added description-prop for Item. (#2975)
• Pagination: Added prop for hidden heading. (#2976)
• ToggleGroup: Added props icon and label as a replacement for children. Children is marked as deprecated and will be removed in a future major-version. (#2929)
• List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.5rem. (#2979)
• Page: Removed surface-subtle from background-prop (#2987)
• Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. (#3003)
  ToggleGroup: Selecting already selected value now avoids sending extra event (#3012)
  Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon. (#3007)
• Modal: New prop placement for anchoring the modal to the top of the viewport. (#3033)

@navikt/ds-css

• CopyButton: Icon is now 20px for size small and xsmall. (#2977)
• Button: Updated icon size for size="small" to 1.25rem. (#2984)
• List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.5rem. (#2979)
• Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. (#3003)
  Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon. (#3007)
• Modal: New prop placement for anchoring the modal to the top of the viewport. (#3033)

@navikt/aksel-icons

• Icons: New icon ChildHairEyes (#3020)
• Icons: FigureCombination icon adjusted (#3031)

[email protected]

@navikt/ds-css

• 💄 Remove bottom margin on last item in Stepper and adjust FormProgress accordingly (#2971)
• ✨ Modal: add small version (#2909)

@navikt/ds-react

✨ Modal: add small version (#2909)

@navikt/aksel-icons

• Icons: Added back support for sourcemapping. (#2978)

[email protected]

@navikt/ds-css

• Increased padding size for contentBlockPadding on the Page primitive to 4 rem to reflect docs/Figma (#2876)
• Fixed Combobox small sizing to align with other form fields (#2801)

@navikt/ds-react

• 🐛 Modal: Fix issue where polyfill-classname was not applied when using SSR (Next.js) (#2954)
• Combobox: Improved performance when parsing 1k or more options. (#2937)
• Stepper: Removed unsafe_index prop. (#2926)
• Added options row-reverse and column-reverse to direction prop on Stack. (#2876)

@navikt/aksel-icons

• Icons: New icons for geometric shapes (#2927)

[email protected]

New component <FormProgress /> 🎉

Documentation

@navikt/ds-react

• Stepper.Step: Set aria-current to step instead of true (#2920)

@navikt/ds-css

• HGrid: refactored CSS. (#2917)

[email protected]

New component <ProgressBar /> 🎉

Documentation

@navikt/ds-react

• Combobox: Remove 'Ingen søketreff' when custom options allowed (#2895)
• Datepicker, MonthPicker: Rekkefølgen på årstall i Select er reversert slik at siste år er øverst. Dette er endret for å være bedre tilpasset ekspertsystemer der de mest relevante årene ble vist lengst unna musepeker ved klikk. (#2882)

@navikt/ds-css

• Checkbox, Radio: Erstatter :focus-visible med :focus for bedre UX brukt sammen med ErrorSummary. (#2893)
• 💄 tweak CSS for timeline pins. (#2889)

[email protected]

Ny komponent FormSummary 🎉

Dokumentasjon

FormSummary brukes til å vise en oppsummering av et utfylt skjema før brukeren sender det inn.

@navikt/ds-react

• ✨ Ny komponent FormSummary (#2802)
• Combobox: Prevents "Enter" while Combobox is focused from submitting form. (#2861)

@navikt/ds-css

• ✨ Ny komponent FormSummary (#2802)

@navikt/aksel

• Aksel CLI: Fjernet deprecated komponenter fra css oversikt. (#2860)

[email protected]

@navikt/ds-react

• Tabs: Ny prop lazy som rendrer innhold i TabPanel selv når panel er skjult (har fortsatt display:none) (#2621).
• ToggleGroup: Erstattet bruk av dependency @radix-ui/react-toggle-group med egen implementasjon. (#2620)
• Tabs: La til ny prop fill som lar Tabs.Tab-elementer strekke seg over tilgjengelig bredde. (#2621). Demo.
• Tabs: Erstattet bruk av dependency @radix-ui/react-tabs med egen implementasjon. (#2621)
• DatePicker/MonthPicker: Valgte datoer får nå aria-pressed for å bedre indikere valg for skjermleser. (#2838)
• DatePicker/MonthPicker: required-prop stoppet ikke de-select av allerede valgt dato. (#2838)
• ToggleGroup: La til ny prop fill som strekker ToggleGroup til å ta opp all tilgjengelig bredde. (#2620). Demo.
• FileUpload.Item: 💥 Endret API og støtte for å sette ID på knappen (#2824)

navikt/ds-css

• FileUpload: Item-illustrasjon har nå border-radius: 9999px (#2834)

Aksel @6.3.0

@navikt/ds-react

• Allow Combobox options as objects to support separate display text and value (#2716)

Ny komponent FileUpload 🎉

https://aksel.nav.no/komponenter/core/fileupload

Håndterer opplasting av filer, Dropzone og fil-visning (#2504)