Hoppa till huvudinnehåll

Release 17.26.0

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

Sedan 17.17.3 har DropZone blivit en Midas-komponent med egna tillstånd, fält väljer automatiskt rätt token utifrån lager, och Checkbox/Radio har fått nya byggstenar.

PaketVersion
@midas-ds/components17.26.0
@midas-ds/layout0.2.39
@midas-ds/theme3.17.1

🆕 Ny komponent: DropZone​

DropZone är nu en Midas-komponent med visuell representation för samtliga tillstånd.

import { DropZone, FileTrigger, Button, Text } from '@midas-ds/components'
import { Upload } from 'lucide-react'

<DropZone
  onDrop={handleDrop}
  aria-label='Dra och släpp filer här'
>
  <Text slot='label'>Dra och släpp filer här</Text>
  <FileTrigger onSelect={handleSelect}>
    <Button variant='secondary'>
      <Upload aria-hidden size={20} />
      Välj filer
    </Button>
  </FileTrigger>
</DropZone>

Sätt alltid aria-label på DropZone för att hålla den tillgänglig. Se dokumentationen för fler exempel, bland annat validering och filtypsbegränsning.

🚀 Nya funktioner​

Fält väljer rätt token utifrån lager​

Select, ComboBox, DateField m.fl. väljer nu field-01 eller field-02 automatiskt, beroende på om fältet ligger direkt på bakgrunden eller inuti en Card/Accordion. Disabled-tillståndet följer med. Tidigare fick fält fel färg i Card.

Checkbox och Radio: nya byggstenar​

RAC har fasat ut Checkbox/Radio till förmån för CheckboxButton/CheckboxField och RadioButton/RadioField. Midas Checkbox och Radio bygger nu på dem internt och exporteras även separat om du vill bygga eget. API:et är oförändrat.

import { CheckboxButton, CheckboxField } from '@midas-ds/components'

SearchField: etikett och beskrivning​

SearchField stöder nu label och description, precis som övriga fält.

ListBox: opt-out från virtualisering​

ListBox (och därmed Select/ComboBox) kan nu välja bort virtualisering med virtualized={false} via listBoxProps. Användbart om du testar utanför en riktig webbläsare, eller om du av andra skäl vill stänga av den. Standardbeteendet är oförändrat.

Select: pressed state​

Select har nu ett synligt pressed state på trigger.

🩹 Fixar​

@midas-ds/components​

  • DatePicker, DateRangePicker: Kraschade tidigare med "Invalid slot 'errorMessage'" så fort en egen validate-funktion gjorde fältet ogiltigt. Orsaken var ett fel uppströms i RAC 1.20, löst genom att ta bort en onödig Dialog-wrapper runt kalender-popover.
  • Select, ComboBox, DatePicker, SearchField: Knappen i hjälp-popover fungerar nu korrekt igen.
  • ListBox, Select, ComboBox: Rubriker har inte längre en fast höjd, så längre texter klipps inte.
  • Select: Popover täcker inte längre nedre kanten på trigger.
  • Select: "Välj alla" rör inte längre disabled-alternativ och räknar bara riktiga alternativ.
  • Checkbox: "Välj alla" i CheckboxGroup följer nu samma disabled-regel som övriga alternativ.
  • Badge: Stannar nu i ikonets hörn oavsett hur smala containrar är.
  • Table: Valbara rader visar nu cursor: pointer.
  • Tabs: Animerar inte längre när de används inuti en dialog.
  • Calendar: Nu generisk över selectionMode, vilket öppnar för selectionMode='multiple' längre fram. Kräver RAC 1.20.
  • Label (InfoPopover): Fokusringen klipps inte längre av efterföljande fält.
  • Link: RouterProvider exporteras nu explicit, så den överlever tree-shaking.
  • Popover: Använder nu rätt field-02-tokens.
  • ProgressBar: Bakgrundsfärger använder nu semantiska tokens i stället för hårdkodade.

@midas-ds/layout​

  • Navbar: Döljs nu på desktop med CSS. Tidigare fick varje konsument skriva sin egen useMediaQuery.
  • Sidebar, Navbar, Panel: Har nu en enhetlig mobilbrytpunkt (640px) över hela paketet.
  • Sidebar: Bredden kan nu styras via CSS custom properties.
  • Main: Fungerar nu som en positioneringskontext för fixed/absolut positionerat innehåll.
  • NavigationLink: Text och ikon är nu nedtonade i disabled-tillstånd.
  • Navigation: Fixat ett typecheck-fel orsakat av en inkompatibel @react-aria/collections-version.

@midas-ds/theme​

  • Layer accent: layer-accent-02 har nu samma värden som layer-accent-01.

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