Hoppa till huvudinnehåll

Release 13

· 3 min att läsa

Nedan är en sammanfattning av nyheterna i release 13.

Nya instruktioner för er som använder Remix​

Vi har skrivit om grunden för hur komponenterna bundlas. Detta kommer lösa ett problem som upplevts av att komponenterna får sin styling "försent" eller att de "glitchar" lite när sidan laddas. För att använda komponenterna från designsystemet i Remix krävs ett litet tillägg i config för att CSS ska ladda korrekt. Instruktionerna finns också under Kom igång för utvecklare.

Remix med Vite​

vite.config.ts
export default defineConfig({
  ssr: {
    noExternal: [/^@midas-ds\/.+/],
  }
})

Äldre Remix - Classic Remix Compiler​

Följ detta: CSS Bundling och CSS Imports

root.tsx
import { cssBundleHref } from '@remix-run/css-bundle'
import type { LinksFunction } from '@remix-run/node'

// ...

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
  // ...
]
remix.config.js
// ...
export default {
  // ...
  serverDependenciesToBundle: [/^@midas-ds\/.+/],
}

Ikoner på knappar​

Våra knappar kan nu ha en ikon till vänster om texten. Använd icon för att slå på det.

Validera personnummer​

Vi har skapat en förlåtande validering för personnummer baserat på Försäkringskassans referensimplementation. Den tillåter de flesta varianterna av ett personnummer så länge det är 10 eller 12 siffror. Använd validationType="ssn" på Textfield för att slå på den. Läs mer om det här. Fler valideringsmönster kommer tillkomma framöver. Det går även att lägga in en egen RegExp i validationType.

Table​

Dokumentationen för <Table /> har tillkommit samt en ny design striped går att aktivera på tabellen.

UI-kit finns nu på Docwebben​

Vårt UI-kit till XD finns nu att ladda ner här på docwebben. UI-kitet uppdateras löpande!

Mindre justeringar​

  • I förra releasen fick flertalet komponenter lite väl många dependencies. Det är nu åtgärdat.
  • FlexItem och GridItem accepterar nu samtliga egenskaper som en vanlig div, främst efterfrågat är såklart className.
  • Chevronikonen på Select och ComboBox animeras nu när man öppnar dem