• Popover: Ny komponent, se dokumentation för Popover

Fixar 💉​

• Combobox: Markerar föregående värde vid musklick
• Storybook: Felaktiga tillgänglighetsbrister rapporteras inte längre i dark mode

Se alla förändringar i detalj på changelog.

• Skeleton: har en ny prop isOnLayer01 för användning på alternativ bakgrund.
  • Vi påbörjar utfasning av tokens fieldSkeleton och buttonBackgroundSkeleton, vad god använd skeleton01 istället.
• Grid: Grid har ett nytt API med bland annat responsiva brytpunkter, läs mer under dokumentation för Grid.
  • Vi påbörjar utfasning av fluid, vad god använd isContained istället.
  • Vi påbörjar utfasning av Flex, vad god använd Grid istället.
  • Vi påbörjar utfasning av col propen för GridItem, vad god använd size istället.
  • Vi påbörjar utfasning av FlexItem, vad god använd GridItem istället.
• Table: har en ny prop size
  • Vi påbörjar utfasning av narrow, vad god använd size istället.
• Calendar: har nu stöd för disabled state
• bundle: Vi delar nu upp vår bundle i mindre "chunks" för att reducera storleken på appar som använder enstaka Midaskomponenter.

Fixar 💉​

• Radio, Calendar Vi hanterar nu css syntax errors for media queries
• Calendar Felaktig färg för dag-knapp åtgärdad
• TextField: Radera height:100%

Kosmetika 🎨​

• LinkButton: Byter ut Chevron-ikon till Arrow-ikon
• Table: Uppdaterar marginaler och utfyllnad

Se alla förändringar i detalj på changelog.

• Felaktig token som orsakade fel vid hover av Button är ersatt.
• Prestandaproblem vid stora datamängder i ComboBox är åtgärdat.
• Tillgänglighetsproblem vid användning av sektioner i ComboBox och Select är åtgärdat.
• Visuell bugg åtgärdad i DatePicker.
• Link visar nu ikoner vid användning av target="_blank" och download
• LinkButton har nu stöd för size="medium".

Se alla förändringar i detalj på changelog.

• Accordion har en ny prop hasBackground
• Select använder Virtualizer för förbättrad prestanda när det finns många val. Select tillåter numera att id är Key alltså string | number. Delvis ny style eftersom select nu använder checkbox från Midas.
• Tag exporteras som en separat komponent

Fixar 💉​

• RadioGroup tillåter nu bara klick på label, inte utanför.
• Skeleton tillåter att className skrivs över.
• LinkButton har nu korrekt styles för isDisabled.

Se alla förändringar i detalj på changelog.

I och med version 10.0 introducerar vi en ny storlek på en rad komponenter, medium. Komponenter som berörs och numera kan användas i både size='large' och size='medium' är:

• Button
• TextField
• SearchField
• ComboBox
• DatePicker
• DateField
• Select

Default size är 'large' i samtliga fall. large innebär att inputfältet är 48px högt medan medium är 40px, för ett mer kompakt utseende.

Migrera från 9.x.x till 10.0.0​

En del funktioner har varit deprecated sen 8.x.x eller tidigare och därför tar Midas tillfället i akt att rensa ut gammal kod och överflödiga props/funktioner.

Accordion​

Accordion har inte längre stöd för prop type för att ha flera AccordionItems öppna samtidigt. Använd allowsMultipleExpanded istället.

- <Accordion type='multiple'>/* items */</Accordion>
+ <Accordion allowsMultipleExpanded>/* items */</Accordion>

Button​

Button har inte längre stöd för size='small'. Däremot introduceras storleken medium och det går att välja mellan 'large' och 'medium', där large är default.

-   <Button size='small'></Button> // this is no longer valid
+   <Button size='medium'></Button>

Modal, DialogTrigger​

Varianten med ModalTrigger och Dialog är nu utfasad och istället ska DialogTrigger och Modal användas. En aning förvirrande men principen är liknande och den uppdaterade versionen innehåller många förbättringar. Se dokumentationen för modal för hur DialogTrigger används.

- import {Dialog, ModalTrigger} from '@midas-ds/components' // no longer works
+ import {DialogTrigger, Modal} from '@midas-ds/components'

Spinner​

Från och med 10.0.0 går det inte längre att använda prop dark, använd ìsOnColor istället.

- <Spinner dark/>
+ <Spinner isOnColor/>

Tabs​

Använd defaultSelectedKey istället för defaultSelected.

- <Tabs defaultSelected={1}> /* tab content */ </Tabs>
+ <Tabs defaultSelectedKey={1}> /* tab content */ </Tabs>

Tokens​

Tokens borderInvalid ersätts med supportBorderWarning och textInvalid ersätts med textWarning.

- semantic.borderInvalid
+ semantic.supportBorderWarning
- semantic.textInvalid
+ semantic.textWarning

Tokens blue140 (#25607F) byter namn till blue130 samt blue170 (#143C50) byter namn till blue150, purple140 byter namn till purple110.

- blue140
+ blue130
- blue170
+ blue150
- purple140
+ purple110

useMessageFormatter​

useMessageFormatter försvinner till förmån för useLocalizedStringFormatter eftersom den är deprecated hos React Aria.

- useMessageFormatter()
+ useLocalizedStringFormatter()

Label​

Label variant försvinner i version 10.0.0, det går alltså inte längre att använda variant='label-01' eller label-02. Default är numera label-02 och för att uppnå variant label-01, använd komponent Text med slot='description'.

- <Label variant='label-01'>Label</Label>
+ <Text slot='description'>Label</Label>

Skeleton​

Namnfix på prop rectangular som numera heter rectangle för en mer konsekvent semantik. Animering är numera endast en boolean, isAnimated=true|false.

- <Skeleton variant='rectangular' animation='wave'/>
+ <Skeleton variant='rectangle' isAnimated />

Se alla förändringar i detalj på changelog

Card​

I version 8.3.0 introducerade vi ett nytt och mera modulärt API för Card. Komponenten som tidigare accepterade samtliga props är numera en kortyta som måste kompletteras med ett urval från komponenterna CardContent, CardTitle, CardActions, CardImage, CardActionArea och CardLink.

För mer information läs hur du använder Card.

Tokens​

Strukturen på tokens för lineHeight och size under typography har ändrats. Importerar du dessa värden behöver du justera din kod enligt:

lineHeight​

import { typography } from '@midas-ds/components/theme'

-   typography.lineHeight01
+   typography.lineHeight10
-   typography.lineHeight02
+   typography.lineHeight20
-   typography.lineHeight03
+   typography.lineHeight30
-   typography.lineHeight04
+   typography.lineHeight40
-   typography.lineHeight05
+   typography.lineHeight50
-   typography.lineHeight06
+   typography.lineHeight60
-   typography.lineHeight07
+   typography.lineHeight70
-   typography.lineHeight08
+   typography.lineHeight80
-   typography.lineHeight09
+   typography.lineHeight90
-   typography.lineHeight10
+   typography.lineHeight100

size​

import { typography } from '@midas-ds/components/theme'

-   typography.size01
+   typography.fontSize10
-   typography.size02
+   typography.fontSize20
-   typography.size03
+   typography.fontSize30
-   typography.size04
+   typography.fontSize40
-   typography.size05
+   typography.fontSize50
-   typography.size06
+   typography.fontSize60
-   typography.size07
+   typography.fontSize70
-   typography.size08
+   typography.fontSize80
-   typography.size09
+   typography.fontSize90
-   typography.size10
+   typography.fontSize100

Se alla förändringar i detalj på changelog.

Migrera från 7.x.x till 8.0.0​

Select​

Värdet i callbacken onSelectionChange för komponenten Select har ändrats. Numera skickas valda nycklar med en Selection type ("all" | Set<string | number>) när användaren justerar sitt val.

-   onSelectionChange?: ((value: Selection | Key | Key[]) => void) | undefined
+   onSelectionChange?: ((keys: Selection) => void) | undefined

Detta innebär att du behöver hantera om användaren klickar på "Välj alla" manuellt:

const handleSelectionChange = (keys: Selection) => {
  if (keys === 'all') {
    return setSelection(new Set(options.map(({ id }) => id)))
  }
  return setSelection(keys)
}

För mer information, läs instruktioner för Select och kontrollerade val

Se alla förändringar i detalj på changelog.

TextField stödjer inte längre validationType.

pattern​

Om du vill använda HTML native constraint validation, använd egenskapen pattern. Läs mer om pattern på MDN

validate​

För anpassad validering med tillhörande felmeddelande, använd validate. Läs mer om egenskapen under vår dokumentation för TextField

Se alla förändringar i detalj på changelog.

Se alla förändringar i detalj på changelog.

Se alla förändringar i detalj på changelog.

Select​

MultiSelect ersätts av Select, vänligen använd selectionMode för en flerväljare:

<Select selectionMode='multiple' />

Se mer information om hur du använder Select

Se alla förändringar i detalj på changelog.

SearchField​

SearchField stödjer inte längre isRequired. Beteendet kan efterliknas med hjälp av validate

<SearchField validate={v => !!v.length || 'Var god ange åtminstone ett tecken' />

Se mer information om hur du använder SearchField

Se alla förändringar i detalj på changelog.

TextField, TextArea​

maxCharacters byter namn till maxLength för enhetlighet

Se alla förändringar i detalj på changelog.