Hoppa till huvudinnehåll

Release 17.32.0

· 5 min att läsa
Midas
Midas
Midas Core Team

Sedan 17.26.0 har Modal fått ny design och en sticky footer, Stack har tillkommit, FileList visar uppladdningsförlopp och Calendar har fått en månads- och årsväljare.

PaketVersion
@midas-ds/components17.32.0
@midas-ds/layout0.2.54
@midas-ds/theme3.17.8

🆕 Ny komponent: Stack​

Stack placerar children i en riktning, med standardavstånd från Midas semantiska space-tokens. En förenklad flexbox helt enkelt!

import { Stack, Button } from '@midas-ds/components'

;<Stack
  direction='row'
  spacing='medium'
  justifyContent='end'
>
  <Button variant='secondary'>Avbryt</Button>
  <Button>Spara</Button>
</Stack>

spacing tar xsmall–xlarge (standard small). Med elementType väljer du vilket element som renderas, t.ex. ul för en lista. Se dokumentationen för fler exempel.

🚀 Nya funktioner​

Modal har fått ny design: stängknappen visar bara en ikon (med aria-label), headern har ny bakgrundsfärg och paddingen är justerad. Med nya footer-propen hamnar handlingarna i en footer som alltid är synlig, även när innehållet är långt.

<DialogTrigger>
  <Button>Öppna modal</Button>
  <Modal
    title='Rubrik'
    footer={<Button slot='close'>Bekräfta</Button>}
  >
    Innehåll i modal
  </Modal>
</DialogTrigger>

Se riktlinjerna för var handlingar ska placeras.

FileList: uppladdningsförlopp​

FileListItem har fått status (idle, uploading, success, error), progress och errorMessage för att visa var i uppladdningsflödet en fil befinner sig.

<FileListItem
  fileName='video.mp4'
  fileSize='128 MB'
  status='uploading'
  progress={40}
  onCancel={handleCancel}
/>

Se dokumentationen.

ProgressBar: cirkulär variant​

ProgressBar kan nu renderas som en ring med shape='circular', och med small blir den 20px, lika stor som en liten Spinner.

Calendar: månads- och årsväljare​

Calendar och RangeCalendar kan visa månad och år som dropdown-väljare i headern med showMonthYearPicker, så att användaren kan hoppa direkt till en annan månad eller ett annat år.

<Calendar
  aria-label='Kalender'
  showMonthYearPicker
/>

Accordion: contentBackground​

AccordionItem har fått contentBackground (neutral eller inherit). hasBackground är deprecated, hasBackground={false} motsvarar contentBackground='inherit'.

lucide-react är nu ett beroende​

@midas-ds/components och @midas-ds/layout bundlar inte längre egna kopior av lucide-react, utan deklarerar det som beroende. Använder du själv Lucide delar ni nu på samma kopia, och typer som icon?: LucideIcon på Button och Link fungerar utan att du installerar paketet själv.

🩹 Fixar​

@midas-ds/components​

  • TextField: Texten är nu nedtonad i disabled-tillstånd.
  • Checkbox, Radio: data-*-attribut hamnar återigen på knappen, inte på fältet runt. Det hade ändrats sedan de började bygga på CheckboxField/RadioField.
  • RangeCalendar: Använder nu commitBehavior='reset' som standard, så att ett påbörjat val inte försvinner.
  • Calendar: Fixat en regression i commitBehavior och specificiteten i kalenderns style-reset.
  • Typer: Publicerade typer importerar inte längre odeklarerade paket. clsx är nu ett deklarerat beroende, @react-types/shared används inte längre och .stories.d.ts-filer publiceras inte. Tidigare kunde du få any eller fel med pnpm eller skipLibCheck: false.
  • Beroenden: React Aria och React Spectrum är uppdaterade.

@midas-ds/layout​

  • Typer: Publicerade typer importerar nu från @midas-ds/components i stället för sökvägar som inte finns i node_modules. Tidigare saknade bl.a. PanelTitle, NavigationHeader, MobileMenu och HeaderAction typer från components.
  • useMediaQuery: Bygger nu på useSyncExternalStore i stället för @react-spectrum/utils, så paketet bundlar inte längre en egen kopia av React Arias SSR-kontext.

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