4 inlägg taggade me "v17"

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.

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.