Den här posten samlar det viktigaste sedan 17.10.0 — ett nytt layoutpaket, flera nya komponenter och en hel del förbättringar.

📦 @midas-ds/layout — nu i beta​

@midas-ds/layout är tillgängligt och redo att börja användas. Det är det nya sättet att bygga layouter i Midas — ett komponentbaserat API där du sätter ihop strukturen med JSX i stället för att konfigurera en enda stor komponent via props.

import {
  Layout, LayoutContent, Main,
  Header, HeaderActions, HeaderAction,
  Sidebar, Navigation, NavigationLink,
  Navbar,
} from '@midas-ds/layout'

<Layout>
  <Header>
    <HeaderActions>
      <HeaderAction icon={<User />}>Anna Andersson</HeaderAction>
    </HeaderActions>
  </Header>

  <LayoutContent>
    <Sidebar title='Min applikation'>
      <Navigation>
        <NavigationLink href='/' icon={<House />} isActive>
          Hem
        </NavigationLink>
      </Navigation>
    </Sidebar>
    <Main>{/* ditt innehåll */}</Main>
  </LayoutContent>

  <Navbar>
    <Navigation>
      <NavigationLink href='/' icon={<House />} isActive>
        Hem
      </NavigationLink>
    </Navigation>
  </Navbar>
</Layout>

Sedan v17.0.0 har vi släppt en rad förbättringar — en ny komponent, nya props, semantiska förbättringar och ett par viktiga namnbyten på design tokens. Här är det viktigaste.

🆕 Ny komponent: FileList​

FileList och FileListItem är nya komponenter för att visa uppladdade filer med stöd för borttagning. Perfekt att kombinera med FileTrigger.

import { FileList, FileListItem } from '@midas-ds/components'

<FileList>
  <FileListItem
    fileName="dokument.pdf"
    fileSize={204800}
    onDelete={() => handleDelete('dokument.pdf')}
  />
</FileList>

Den här releasen fokuserar på att rensa bort utfasad funktionalitet som har varit markerad som deprecated sedan v15.0.0. Vi har även lagt till flera förbättringar och buggfixar sedan v16.3.1. Eftersom releasen innehåller många breaking changes rekommenderar vi att avsätta tid för migreringen — men det är värt det, eftersom v17 lägger grunden för framtida funktioner och fixar.

Långlivad version — Ambitionen är att v17 ska kunna användas under en längre period. Vi planerar att undvika breaking changes så långt det är möjligt.

💥 Breaking Changes​

I den här releasen har vi tagit bort funktioner som varit markerade som deprecated i tidigare versioner:

• tooltip: Type MidasTooltipProps är borttagen. Använd TooltipProps istället.
• accordion: Type MidasAccordion är borttagen. Använd AccordionProps istället.
• menu: Type MenuItemObject är borttagen.
• text: Prop variant och type TextVariant är borttagna. Använd size prop istället.
• breadcrumbs: Interfacet BreadcrumbItem och det automatiska renderingsläget via items prop med {href, title}-objekt är borttaget. Använd det sammansatta API:et <Breadcrumbs> + <Breadcrumb> istället.
• combobox: ComboBoxItem och ComboBoxSection är borttagna. Använd ListBoxItem och ListBoxSection istället.
• list-box: Types ListBoxItemElement, ListBoxSectionElement och ListBoxOption är borttagna. name prop på ListBoxSection är borttagen — använd ListBoxHeader som children istället.
• legacy-select: Hela LegacySelect-komponenten och LegacySelectProps är borttagna. Använd Select-komponenten istället.

🔄 Migrering​

Breadcrumbs​

I linje med React Arias dokumentation erbjuder vi mer kontroll över renderingen av Breadcrumbs. Detta kräver lite mera kod.

Tidigare:

<Breadcrumbs items={[{ href: '/', title: 'Start' }]} />

Nu med en dynamisk renderingsfunktion:

<Breadcrumbs items={[{ href: '/', title: 'Start' }]}>
  {item => (
    <Breadcrumb id={item.href}>
      <Link href={item.href}>{item.title}</Link>
    </Breadcrumb>
  )}
</Breadcrumbs>

eller statiskt enligt:

<Breadcrumbs>
  <Breadcrumb id='/'>
    <Link href='/'>Start</Link>
  </Breadcrumb>
</Breadcrumbs>

Combobox och Select​

Combobox och Select består delvis av samma beståndsdelar, använder du sektioner i rullgardinen behöver du justera hur du anger rubriken för sektionen

Tidigare:

<ComboBox>
  {section => (
    <ListBoxSection
      id={section.name}
      name={section.name}
    >
      <Collection items={section.children}>
        {item => {
          return <ListBoxItem id={item.id}>{item.name}</ListBoxItem>
        }}
      </Collection>
    </ListBoxSection>
  )}
</ComboBox>

Nu:

<ComboBox>
  {section => (
    <ListBoxSection id={section.name}>
      <ListBoxHeader>{section.name}</ListBoxHeader>
      <Collection items={section.children}>
        {item => {
          return <ListBoxItem id={item.id}>{item.name}</ListBoxItem>
        }}
      </Collection>
    </ListBoxSection>
  )}
</ComboBox>

🚀 Nya funktioner​

• breadcrumbs: Breadcrumbs är omstrukturerade till separata komponenter med ett sammansatt API (<Breadcrumbs> + <Breadcrumb>).
• date-field, date-picker, search-field: Ny rensa-knapp (clear button) för att tömma fält.
• button: Stöd för context props.
• tooltip: Ökad fontstorlek.
• layout: Ny navigeringslänk-variant och klickhändelse för sidopanelslänkar.
• theme: Ny invalid-state stil för formulärfält (box-shadow).

🩹 Fixar​

• toast: Synligt tangentbordsfokus (focus-visible) för toast-regionen.
• select: Chevron-ikonen roterar nu korrekt när select är öppen. Justerad horisontell padding.
• select-styles: Justerad höjd och pixelkorrigeringar för react-select-komponenten.
• date-picker: Justerad höjd för ikonknappar. Borttagen fokusindikator för föräldraelementet. Uppdaterade stilar för ikonknappar.
• date-field: Uppdaterade stilar för rensa-knappen. Korrekt invalid-kantlinje och box-shadow.
• accordion: Justerad padding för oinneslutna innehållscontainrar.
• tooltip: Använder nu CSS-variabler för styling.
• text, grid: Borttagen global CSS till förmån för CSS Modules.

Den här releasen fokuserar på tillgänglighet, förbättrad komponenthantering och nya funktioner för tabeller. Vi har lagt till stöd för React 19, förbättrat tillgänglighet med prefers-reduced-motion och forced colors, samt lagt till en ny Pagination-komponent för Tanstack Table.

🚀 Nya funktioner​

• table-styles: Ny Pagination-komponent för Tanstack Table som gör det enkelt att hantera sidnumrering i tabeller.
• components: Alla forwardRef-komponenter har nu displayName för bättre debugging i React DevTools.
• components: CSS-animationer respekterar nu användarens prefers-reduced-motion inställning för bättre tillgänglighet.
• theme, button, link-button: Sekundära knappar har fått uppdaterad bakgrundsfärg.

🩹 Fixar​

• layout: Aktiva menyalternativ visas nu korrekt även på undersidor.
• layout: Förbättrat stöd för forced colors mode (Windows High Contrast) för aktiva länkar.

🔧 Uppdateringar​

• components: Stöd för React 19 samtidigt som bakåtkompatibilitet med React 18 bibehålls.
• components: React.forwardRef behålls för att bibehålla bakåtkompatibilitet med React 18.
• components: React.FC wrapper har tagits bort för renare typning.

Den här releasen fokuserar på att rensa bort utfasad funktionalitet och göra biblioteket lättare att underhålla. Vi har även lagt till förbättringar för react-select-komponenten med en rensa-knapp och uppdaterat React Aria Components till senaste versionen.

💥 Breaking Changes​

I den här releasen har vi tagit bort funktioner som varit markerade som deprecated i tidigare versioner:

• dropdown: Hela Dropdown-komponenten är borttagen. Använd Menu-komponenten istället.
• accordion: Prop variant är borttagen. Använd isContained istället för variant="contained"
• modal: Type DialogProps är borttagen. Använd ModalProps istället.
• spinner: Prop isOnColor är borttagen. Spinnern använder nu alltid färgen icon-tertiary.

🚀 Nya funktioner​

• select-styles: React-select har nu en clear indicator (rensa-knapp) med Lucide X-ikon som matchar designsystemets stil.
• select-styles: Dropdown-indikatorn visar nu rätt musmarkör (cursor: pointer) vid hover.

🩹 Fixar​

• tooltip: Utökad definition av children prop för utökad kontroll av komponenten.
• search-field: isRequired prop är nu tillgänglig för att markera fältet som obligatoriskt.

🔧 Uppdateringar​

• components: React Aria Components har uppdaterats från v1.13.0 till v1.14.0 för förbättrad prestanda och nya funktioner.

I den här releasen har vi gjort stora förbättringar av byggstrukturen som ger mindre bundle-storlekar och bättre prestanda. Du kan nu välja att importera enskilda komponenter för ännu mindre bundles. Vi har också lagt till nya typografitokens och förbättrat ett antal komponenter.

🚀 Nya funktioner​

• theme: Två nya typografitokens, body och body-small, gör det enklare att styla brödtext konsekvent.
• theme: Nu kan du generera Tailwind-tema direkt från Midas tokens för smidig integration med Tailwind CSS.
• theme: En ny orange-100 färg finns tillgänglig i färgpaletten.
• tabs: Tabs kan nu renderas i en contained stil för tydligare avgränsning.
• layout: Sidebaren ligger nu på en högre z-index så den inte täcks av annat innehåll.
• table: Sorteringsikonerna i tabeller har fått rätt visuella ikoner och reagerar nu snyggare på hover.
• table-styles: Hover-effekter och transitions för sorterings- och drag-and-drop-ikoner i tabeller.

🩹 Fixar​

• calendar: Datumcellerna i kalendern är nu perfekt centrerade vertikalt.
• calendar: Förenklad implementation för att markera dagens datum.

🔧 Refactor​

• components: Helt omgjord byggstruktur med stöd för tree-shaking och flera importsätt. Du kan nu välja att importera allt (import { Button } from '@midas-ds/components') eller enskilda komponenter (import { Button } from '@midas-ds/components/button') för mindre bundles.
• calendar: Calendar och RangeCalendar delar nu samma implementation för mer konsekvent beteende.
• theme: Bättre exporthantering med fallbacks för ökad kompatibilitet med olika bundlers.
• theme: Subtila färgjusteringar för borders och varningar.

Den här releasen innehåller stöd för read-only state i ett stort antal komponenter. Detta gör det lättare att visa formulärfält som är synliga men inte redigerbara, med tydlig visuell indikation.

🚀 Nya funktioner​

• theme: Nya färgtokens för read-only state har lagts till i temat.
• read-only state: Stöd för read-only state med anpassad styling har lagts till i följande komponenter: textfield, combobox, radio, checkbox, date-field, date-picker, calendar, text och label.

🩹 Fixar​

• checkbox: Korrekt ikon för indeterminate state och refaktorerad styling.

🔧 Refactor​

• textfield: Data-attribut har flyttats från template till CSS.
• date-field: Data-attribut har flyttats från template till CSS.
• theme: Read-only border color token har justerats.

Den här releasen innehåller en helt ny select-komponent, baserad på React Aria Components. Vi har även passat på att göra en hel del mindre justeringar och buggfixar. Vi har släppt ett par mindre versioner sedan senaste major-versionen, men dessa release notes reflekterar allt som har hänt sedan dess.

🚀 Ny select-komponent​

Vi har ersatt vår gamla select-komponent med en helt ny, baserad på React Aria Components (RAC). Detta ger oss en mer robust och tillgänglig komponent, med bättre prestanda och fler funktioner. Den nya komponenten har stöd för sektioner, sökning, och multi-select med taggar.

💥 Breaking Changes​

• select: Vår select-komponent är helt omskriven och baserad på React Aria Components. Detta innebär ett helt nytt API. Se dokumentationen för mer information om hur du använder den nya komponenten.

🔄 Migrering​

Om du använder vår Select-komponent i ditt projekt, finns det två vägar att gå vid uppgradering till v15.0.0:

1. Uppdatera till den nya komponenten (rekommenderas): Vi rekommenderar att du uppdaterar din implementation för att använda den nya, React Aria Components-baserade Select-komponenten. Detta ger dig tillgång till den senaste funktionaliteten, bättre prestanda och förbättrad tillgänglighet. Se dokumentationen för mer information om hur du använder den nya komponenten.

2. Använd den gamla komponenten: Om du inte har möjlighet att uppdatera din implementation just nu, kan du fortsätta använda den gamla komponenten genom att byta importen från Select till LegacySelect. Din befintliga kod kommer då att fungera som tidigare.

   import { LegacySelect } from '@midas-ds/components'
   

✨ Select-komponenten​

Den nya select-komponenten, baserad på React Aria Components, har nu stöd för samma funktioner som den tidigare versionen. Detta inkluderar:

• Stöd för sektioner med rubriker.
• Förbättrad styling för multi-select med taggar.
• Möjlighet att visa valda värden som taggar.
• Bättre hantering av fokus och tangentbordsnavigering.
• Stöd för att visa en popover med mer information om ett val.

🚀 Nya funktioner​

• spinner: Färgen på en spinner är nu som standard icon-tertiary. Property isOnColor är deprecated.
• accordion: Förbättrat stöd för animationer i samtliga webbläsare.
• datepicker-styles: Förbättrad styling av pilar för att byta månad.
• date-picker: En rad förbättringar av vår datepicker:
  • Stöd för "forced colors" i Windows.
  • Medium-storlek.
  • Dagar utanför aktuell månad är nu dolda.
  • Hover-effekter.

🩹 Fixar​

• tabs: Visningen av horisontella och vertikala tabbar är korrigerad.
• list-box: Justeringar av styling för sektionsrubriker.
• tag: Synligt tangentbordsfokus för alla taggar.
• field-error: Marginaler för ARIA-dolda syskon är borttagna.
• theme: Enheter har lagts till för panel-övergångar, vilket löser en bugg med trasiga animationer.
• calendar: Korrekt styling för dagar utanför aktuell månad.
• textfield: Dubletter av prop-definitioner har tagits bort.
• select: Justering av styling för "select all".

📖 Dokumentation​

• select: Dokumentationen för select-komponenten är helt omskriven för att matcha den nya komponenten.
• spinner: Dokumentationen för spinner är uppdaterad med nya props.
• date-picker: En rad förbättringar av dokumentationen för datepicker.
• generellt: En rad mindre justeringar och förbättringar av dokumentationen.

Den här releasen innehåller mestadels mindre justeringar och buggfixar. Vi har även passat på att introducera ett nytt paket för styling av datumväljare.

💅 Nytt CSS-paket för react-datepicker​

Vi introducerar ett nytt paket, @midas-ds/datepicker-styles, för att hjälpa till med styling av react-datepicker. Detta är ett renodlat CSS-paket och är i ett tidigt beta-stadie. Vi uppmuntrar er att testa det och ge oss feedback.

♿️ Tillgänglighet​

Vi har gjort en större genomgång av hur våra komponenter presenteras i Windows högkontrastläge (CSS forced-colors). Detta innebär att komponenterna nu ska ha ett betydligt bättre utseende och vara mer användbara för personer som använder detta läge.

💥 Breaking Changes​

• theme: Vår token för transition har bytt namn från transitions till transition för att vara mer konsekvent.

🚀 Nya funktioner​

• theme: Vi har uppdaterat vårt tema för att följa den nya Design Token Community Group (DTCG) standarden, vilket gör det enklare att återanvända våra design tokens.
• button: Knappar har fått ett utökat :not-condition för att bättre hantera pressed state.
• button: Vi har förhindrat att bakgrunden på en knapp ändras när den är nedtryckt och har aria-expanded, vilket ger en mer konsekvent användarupplevelse.
• heading: Nu kan du använda en flagga för att styra om en rubrik ska ha inbyggda marginaler eller inte.
• theme: Vi har lagt till nya variabler för spacing för att ge mer flexibilitet i layouten.
• modal: Det är nu möjligt att dölja stängningsknappen i en modal.
• modal: Du kan nu skicka med en egen className till en modal för att anpassa stilen.
• datepicker-styles: Vi har skapat ett nytt paket, @midas-ds/datepicker-styles, för att enkelt kunna styla react-datepicker.

🩹 Fixar​

• core: Vi har förbättrat hur våra komponenter ser ut i forced-colors-mode för bättre tillgänglighet.
• info-banner: Vi har åtgärdat en bugg som gjorde att useEffect kördes två gånger i strict mode.
• theme: Vi har justerat storleken på line-height-100 och font-size-70 för att vara mer konsekventa.
• storybook: Vi har fixat ett stavfel i en bakgrundsväljare i Storybook.
• core: Vi har lagt till en clsx-wrapper för att bättre hantera klassnamn från React Aria.
• modal: En modal kan nu hantera open-state som en kontrollerad komponent.
• progress-bar: Skärmläsare kan nu läsa av valueLabels för en progress-bar.
• accordion-item: Vi har löst en bugg som påverkade tangentbordsfokus, animeringar och hover-effekter i accordion-item.
• accordion: Vi har ökat specificiteten i CSS för knappar i ett accordion för att undvika stilkonflikter.
• menu: Vi har exporterat MenuTrigger så att den kan användas direkt.
• list-box: Rubriken i en list-box-sektion har nu rätt färg.
• popover: Vi har justerat storleken på popovers för att de ska se bättre ut.
• theme: README- och CHANGELOG-filerna inkluderas nu korrekt i vårt tema-paket.
• popover: Vi har förhindrat att texten i en popover bryts för tidigt.
• table-styles: Vi har tagit bort onödiga release-inställningar för table-styles.
• table-styles: Vi har uppdaterat Vite-konfigurationen för table-styles för att inkludera readme och tspaths.

🏭 Refactoring​

• theme: Vi har brutit ut knapp-specifika design tokens från object-values.json till en egen fil för bättre struktur.

Den här releasen innehåller en del större förändringar under huven. Vi har separerat vårt tema/css från komponenterna för att göra det mer flexibelt och för att kunna erbjuda fler anpassningsmöjligheter i framtiden.

💥 Breaking Changes​

CSS/Styles är nu tillgängliga från import '@midas-ds/components/default.css' eller via @midas-ds/theme-paketet. Läs mer på instruktioner för att komma igång.

⬆️ Migrationsguide​

För att uppgradera från version 12 till 13 behöver du uppdatera hur du importerar CSS-filerna.

Tidigare importerades CSS direkt från komponentpaketet. Nu måste du istället importera en global stilmall.

Gör så här:

1. Ta bort alla CSS-importer från @midas-ds/components som du har i din applikation.
2. Lägg till en ny import i din huvudsakliga App komponent eller motsvarande:

import '@midas-ds/components/default.css'

Denna import innehåller allt du behöver för att komma igång. Om du istället vill importera olika delar av Midas stilar kan du använda @midas-ds/theme:

npm install @midas-ds/theme

import '@midas-ds/theme/fonts.css'
import '@midas-ds/theme/variables.css'
import '@midas-ds/theme/color-scheme.css'

🚀 Nya funktioner​

• components: Ikonfärgen för feedback-status har ändrats till --midas-icon-primary.
• theme: Signal-färgerna har uppdaterats.

🩹 Fixar​

• textfield: Inbyggda (native) attribut har lagts till för textfield och textarea.
• table: Korrekt bakgrundsfärg används nu för rader i tabellen.
• layout: Hash har tagits bort från main role querySelector.

🏭 Refactoring​

• Temat har helt separerats från komponentprojektet och ligger nu i ett eget paket.
• Style dictionary build-skriptet har refaktorerats till en nx executor.

🐣 Support för Tanstack Table​

Vi introducerar ett nytt paket @midas-ds/table-styles för att hjälpa till med styling för utvecklare som använder Tanstack Table. Läs mer på instruktioner för Tanstack Table. Det är en css-fil i tidig version som vi hoppas kunna bygga mer på som ett stöd för de utvecklare som vill komma åt mer avancerade tabellfunktioner än vad som ingår i Midas-table.