Hoppa till huvudinnehåll

Release 17.17.3

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

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

PaketVersion
@midas-ds/components17.17.3
@midas-ds/layout0.2.11
@midas-ds/theme3.15.4

📦 @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>

Paketet är redo att ta i bruk — men räkna med att API, design och UX kan förändras under arbetets gång. Vi tar gärna emot feedback.

npm install @midas-ds/layout

Se dokumentationen och migrationsguiden för mer information.

Vad händer med gamla Layout?​

Layout från @midas-ds/components fortsätter att fungera, men kommer inte att få nya funktioner. Nya projekt bör använda @midas-ds/layout.

Panel​

Panel är en ny komponent i @midas-ds/layout för detaljvyer och sidopaneler. Den stöder två lägen:

  • overlay — öppnar som ett lager ovanpå innehållet
  • push — skjuter undan innehållet och tar upp plats i layouten
import { Panel, PanelContent } from '@midas-ds/layout'

<Panel id='details' title='Detaljer' variant='push'>
  <PanelContent>...</PanelContent>
</Panel>

Panel har sedan utökats med en actions-prop för att placera knappar i rubrikraden:

import { Button } from '@midas-ds/components'
import { Panel, PanelContent } from '@midas-ds/layout'

<Panel
  id='details'
  title='Detaljer'
  variant='push'
  actions={<Button variant='secondary'>Redigera</Button>}
>
  <PanelContent>...</PanelContent>
</Panel>

Sidomenyn animerar nu titeln och navigationsrubrikerna mjukt vid kollaps och expansion. Animationen är omgjord för bättre prestanda.

Övrigt i layoutpaketet​

Paketet har även fått en Header-komponent med stöd för logotyp, systemnamn och åtgärdsknappar.

🚀 Nya funktioner​

@midas-ds/components​

TimeField​

TimeField är en ny komponent för att mata in klockslag. Den delar API och stil med DateField.

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

<TimeField label='Starttid' />

Card — CardHeader och CardBody​

Card har fått CardHeader och CardBody som ersätter de gamla slot-baserade mönstren. Det gamla API:et är markerat som deprecated.

// Före
<Card heading='Rubrik'>Innehåll</Card>

// Efter
<Card>
  <CardHeader>Rubrik</CardHeader>
  <CardBody>Innehåll</CardBody>
</Card>

ColorSchemeSwitch — kontrollerat läge​

ColorSchemeSwitch stöder nu kontrollerat läge via scheme och onSchemeChange. Använd det när du vill spara valet externt, t.ex. i localStorage eller i serverstatus.

const [scheme, setScheme] = useState<ColorScheme>('light dark')

<ColorSchemeSwitch
  scheme={scheme}
  onSchemeChange={setScheme}
/>

ColorSchemeSwitchMenu — kompakt dropdown​

ColorSchemeSwitchMenu är en ny kompakt variant av ColorSchemeSwitch avsedd för att bäddas in i menyer — t.ex. i en MobileMenu eller en headeråtgärd.

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

<ColorSchemeSwitchMenu />

Övriga tillägg​

  • ContrastFilled: Nytt ikon för att signalera kontrastläge — import { ContrastFilled } from '@midas-ds/components'.
  • ComboBox: Ny prop listBoxProps för att skicka props direkt till listrutan.
  • Select: Ny prop popoverProps för att skicka props till popoverkontainern.
  • Select: SelectAll nollställer nu valideringsstatus korrekt.
  • Radio, Accordion: children kan nu vara en funktion (render prop).

🩹 Fixar​

@midas-ds/components​

  • Modal ♿ — Fokusringen visas nu korrekt på dialogen vid tangentbordsnavigering, så att det är tydligt var fokus befinner sig för tangentbordsanvändare.
  • Modal — Scrollbar-gap i dialogen är fixat — overflow-y är nu satt på dialogelementet.
  • Tag — Färgtokens har fått dedikerade primitiver i temat för bättre separation.
  • DateField, TimeField — Båda är nu wrappade i forwardRef.
  • Select — Obligatorisk validering aktiveras nu korrekt när alla valda alternativ rensas.
  • Select, ComboBox — Listrutan har nu en relativ maxhöjd och scrollar korrekt i trånga layouter.
  • SearchField — Skickar nu formuläret på Enter-tangent även utan onSubmit-prop.
  • SearchField — inputMode="search" satt som standard.
  • Card — Marginal-kollaps inuti CardBody är förhindrad.
  • Card ♿ — Rubriknivån i horisontellt läge är korrigerad för korrekt dokumentstruktur, vilket påverkar skärmläsares navigation.
  • Calendar — Chevronstorlek i CalendarHeader är satt till korrekt 20 px.
  • Grid — Flex-wrap-beteendet för kolumner är korrigerat.
  • Link ♿ — Nytt visuellt dolt label på ikonerna "öppnas i nytt fönster" och "ladda ner", så att skärmläsare får ett meningsfullt alternativ till den visuella ikonen.
  • Accordion — type-prop ignoreras nu korrekt när isContained är false.
  • Table ♿ 📱 — Sorteringsikonen visas nu vid låg opacitet på pekenheter och uppfyller WCAG 1.4.11-kravet på 3:1 kontrast för UI-element.
  • Flera komponenter 📱 — Hover- och tryckstilar är förbättrade på pekskärmar: :hover ersatt med [data-hovered] och hover-regler wrappade i @media (hover: hover), så att knappar inte fastnar i hover-tillstånd efter tryck. Berörda: Checkbox, Card, Select, Calendar, DateField, ListBox, LinkButton, Link.

@midas-ds/layout​

  • Sidebar — Kollapsa/expandera-animationen är omgjord för bättre prestanda.
  • Main — Padding på huvudinnehållet är korrigerad.
  • MobileMenu 📱 — Overlay-bakgrunden visas nu korrekt på mobil.
  • Panel 📱 — Push-varianten fungerar nu korrekt på mobil med höjdövergång.
  • Layout — Paketet exporterar nu en reset-CSS som kan importeras separat.

@midas-ds/theme​

  • Button — Opacitetstokens används nu för hover/aktiva tillstånd på sekundär- och tertiärknappar, samt för disabled-bakgrunden.
  • Icons — Värdena för icon och icon-sm storlekstokens är korrigerade — de var förväxlade.

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