[email protected]

@navikt/ds-react

• Heading: Oppdatert med props textColor, align, visuallyHidden. (#2211)
• Label: Oppdatert med props textColor og visuallyHidden. (#2211)
• BodyLong, BodyShort, Detail: Oppdatert med props textColor,weight,align, visuallyHidden og truncated. (#2211)
• Textarea: Skjermleser-spesifikk tekst leses opp sammenhengende (#2216)
• DatePicker: Riktig skriftstørrelse på small input (#2232)
• Fix bug in monthpicker, only compare year and month for equality on date object (#2231)

@navikt/ds-css

• GuidePanel: justert design (#2227)
• Fix missing accordion bottom box-shadow on last element (when opened) (#2229)
• Typography: Oppdatert med typo-klasser for textColor, weight, align, visuallyHidden og truncated. (#2211)

[email protected]

@navikt/aksel-icons

• Ikoner: Oppdatert ikonpakke (#2197)

@navikt/ds-react

• Button: Ved bruk av as-prop vil role="button" nå bli lagt til. Native onKeyUp for Space er også implementert slik at standard button-interaksjon vil være likere uansett html-tag. (#2154)
• Combobox: Fikset bruk av useLayoutEffect med SSR-safe metode. (#2219)
• Combobox: Hover tar nå over fokus i listen under dropdown. (#2193)

@navikt/ds-css

• CSS: Popover har nå 8px border-radius. Fikset padding-bug i Select-small. (#2219)
• Font: Fikset henting av italic-font (#2220)

[email protected]

@navikt/ds-react

• ✨ Modal: mulighet for å rendre i portal (#2209)
• ✅ Modal: use polyfill in JSDOM (#2208)
• Datepicker: Input setter nå ikke aria-controls før popover åpnes (#2213)

@navikt/ds-css

• 💄 Modal: fjern kantlinje (#2210)
• Tokens: Fikset table-token (#2204)

[email protected]

Versjon 5

Du finner mer om endringene og motivasjonen bak dem bloggposten vår.

Breaking changes

• Modal er refaktorert og har nå et nytt API. Du finner alle endringene i migreringsguiden vår.
• Gråskala er oppdatert
• Action-selected farger er oppdatert
• Table er oppdatert

[email protected]

Nytt siden v4.7.2

For up-to-date oversikt over endringer finner man dem i endringsloggen vår.

Nye komponenter

• Stack
• HGrid

Features

• Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop (#2127). Takk @MarionHauffNAV 🎉
• Textfield: La til type 'time' som tilgjengelig option
• Link: La til 'variant', 'underline' og 'inlineText'-prop

Misc oppdateringer

• CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon (#2173)
• Alert: Fikset alignment av status-ikon mot tekst (#2179)
• CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon (#2173)
• List: Fikset sentrering, margins (#2168)
• Checkbox: Checkmark er nå SVG-ikon og ikke Base64 (#2171)
• Combobox: La til støtte for feilmeldinger i Combobox (#2182)
• Combobox: Kjører nå 'onChange' + 'onClear' når input blir reset programmatisk (#2183)
• Combobox: Fikset custom-options i singleselect (#2180)
• Combobox: Fjernet unødvendige 'onClear'-calls når man velger verdier (#2170)
• Combobox: Lukker nå nedtrekksmeny hvis man legger til ny option i singleselect (#2177)
• ToggleGroup: fjern semibold fra selected button (#2167)
• Border-radius: Fikset hardkodet border-radius i Datepicker, ToggleGroup og Combobox. (#2159)
• Font: La til egen font for semibold italic for bedre skalering cross-browser (#2150)
• Fixes bug where combobox list could not be closed after clicking a chip (#2155)
• Grid: Markert som deprecated. Bruk nye 'HGrid'
• Button: Fikset aria-live bug der knapp alltid ble lest opp av skjermleser ved render (#2143)
• Chips: Removable Chips submitter ikke forms ved klikk lengre (#2124)
• Oppdatert bruk av REM i komponenter for forbedret font-scaling i alle browsers (#2126)

[email protected]

Nytt siden v4.1.7

For full up-to-date oversikt over endringer finner man dem i endringsloggen vår.

• Chat er oppdatert med small-variant + oppdaterte varianter for utseende (PR)
• Helptext og Popover har nå innebygd maksbredde på mobil for å unngå at de legger seg helt i kanten (PR)
• ExpansionCard: Ved nesting av komponetene fikk man styling fra parent, dette er fikset (PR)
• Shadow-tokens er oppdatert til mer tydeligere varianter (PR)
• Datepicker-popover har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall (PR)
• Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). (PR)
• Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" (#2077)
• Textarea: Fikset i18n for counter (718b3204d)
• Alert: La til closeButton-prop (#2079)
• Button: Fikset outline-bug i tertiary-variant ved :active-state (#2079)
• Skjema: De fleste skjemakomponenter støtter nå readOnly-state (#2080)
• Timeline: Har nå egen axisLabelTemplates-prop for axixlabel formatering (#2109)
• Datepicker: Fikset bug ved bruk dynamisk oppdatering av minDate. Vist month vil nå alltid være oppdatert når datepicker åpnes (#2117)
• Stepper: Fikset hotizontal-bug når step var completed (#2116)
• Ny komponent Combobox! (#1868)

Combobox

Combobox er nå tilgjengelig for testing 🎉 🎉 Dokumentasjon finner man her. Ved feil eller mangler ønsker vi gjerne å høre mer om de gjennom issues eller kontakt på slack!

Dette er en komponent som kombinerer tekstfelt og nedtrekksliste. Den lar brukeren skrive direkte i tekstfeltet eller velge fra en liste med alternativer i nedtrekkslista. Vanlige brukstilfeller er når brukeren skal velge blant mange predefinerte alternativer, ikke kjenner alternativenes stavemåte eller ikke vet nøyaktig hvilke alternativer som finnes.

Egnet til:

• Velge blant en lang liste av alternativer
• Oppgi verdier på et standardisert format, som navn på land
• Velge én eller velge flere verdier
• Søke i store datasett

[email protected]

Nytt siden v4.1.0

• 🐛 Fikset bruk av text-subtle på skjemaelementer #2049
• 🐛 Datepicker og Monthpicker lukker nå popover ved escape #2052
• 🐛 OverridableComponent omitter nå 'as'. Kan nå brukes rett ut av boksen med styled-components og Next/link #2051
• To nye ikoner ChevronRightLast og ChevronLeftFirst #2047
• 🎨 Helptext har nå en prop forwrapperClassName, bedre maksbredde for padding mot sider #2056
• 🐛 Timeline.Period fungerer nå ved testing i JSdom 42b5af6

Søk

#2062

Aksel.nav.no har oppdatert søket sitt 🔎 Vi har valgt å teste en løsning mer lignende "command-line" med raskere respons og mer "search as you go". Målet er å gjøre søket til en effektiv måte å navigere på Aksel og et reelt alternativ til å navigere gjennom strukturen manuelt.
Vi har også gjort noen forbedringer til hvordan vi utfører spørringer, slik at resultatene også nå vil være mer relevante og sende deg til det relevante innholdet du fikk søketreff på.

[email protected]

@navikt/ds-react

Ny komponent Skeleton ✨

Skeleton brukes til å gi brukeren en midlertidig visuell tilbakemelding mens innholdet lastes eller behandles. Den er en enkel og minimalistisk versjon av det faktiske innholdet som skal vises.

Chips er oppdatert 🎉

• Toggle Chips har nå varianter: neutral og action
• Toggle Chips har nå en ny prop: checkmark som slår av/på checkmark ved selected-state

Accordion er oppdatert 🎉

• Ny prop indent som lar deg slå/på left-padding i Accordion.Content

Description-felter er oppdatert for skjema

Alle skjemakomponenter sitt description-felt bruker nå text-subtle(grayalpha-700). Vi håper dette kan være med å skape litt bedre hierarki og visuelt skille mellom label og description.

JSdoc

Alle komponenter støtter nå JSdoc for dokumentasjon 📝

@navikt/ds-tokens

CSS og token-pakke inneholder nå tokens for datavisualisering ✨
Dokumentasjon

  background-color: var(--a-data-surface-1-subtle);
  border-color: var(--a-data-1-border);

Fargeendringer

• text-subtle og icon-subtle er justert til å begge bruke grayalpha-700. Subtle-tekst vil nå være litt mer tydelig og lesbar.

[email protected]

Internal er flyttet inn i core! ds-react-internal og ds-css-internal vil ikke lengre bli forvaltet og kode er flyttet inn i ds-react og ds-css

Datepicker er også endelig ute av beta!

@navikt/ds-react

• Dropdown, Timeline og Header er flyttet inn i core.
• Header er renamet til InternalHeader

  // React
  npx @navikt/aksel codemod v4-internal-react

• Datepicker og Monthpicker har ikke lengre UNSAFE_-prefix

  npx @navikt/aksel codemod v4-date

@navikt/ds-css

• CSS for dropdown, timeline og header er flyttet inn i core
• Alle navdsi-prefikser er endret til navds
• 🐛 Fikset spesificity-problem mellom dropdown og popover
• --ac-header-token er renamet til --ac-internalheader

  // CSS
  npx @navikt/aksel codemod v4-internal-css

Tips: Sett opp stylelint med pakken vår, så plukkes feil i CSS-en under migreringen opp

Legacy-pakker

Følgende pakker har fått sin siste versjon og vil ikke lengre bli oppdatert. Siste versjon er 3.4.2

• @navikt/ds-react-internal
• @navikt/ds-css-internal
• @navikt/ds-icons
• @navikt/ds-codemods

[email protected]

Stylelint config!

Aksel har nå en egen stylelint-config! Dokumentasjon
Regler:

• aksel/design-token-exists
• aksel/design-token-no-global-override
• aksel/design-token-no-component-reference
• aksel/no-internal-tokens
• aksel/no-class-override
• aksel/no-deprecated-classes

yarn add -D @navikt/aksel-stylelint stylelint

"stylelint": {
  "extends": [
    "@navikt/aksel-stylelint/recommended"
  ],
}

@navikt/ds-react

🎉 Ny tag-variant 'moderate'