Jämförda versioner

Version Gammal version 238 Ny version Aktuell
Ändringar gjorda av

Joakim Bengtson

Joakim Bengtson

Sparat den

Nyckel

  • Dessa rader lades till.
  • Denna rad togs bort.
  • Formateringen ändrades.

...

Ineras UX-ramverk (instruktioner, designsystem och komponenter) utvecklas löpande. Denna sida visar nya komponenter och större förändringar i UX-ramverket samt direktlänkar till sidorna..

2025

Januari

Figma

  • Breadcrumbs

    • Ikonen i mobil har ändrats från chevron till arrow.

    • Varianter för Device har ersatts med mode.

2024

Julledighet

Panel
panelIconId1f384
panelIcon:christmas_tree:
panelIconText🎄
bgColor#FFEBE6

I jul har många i IDS-teamet semester, från och med måndagen den 23 december. Elin Karasalo finns på plats för att svara på kodrelaterade frågor på arbetsdagarna under december och januari. Vi återupptar supporten som vanligt 7 januari 2025.

Du kan fortfarande:

God jul och gott nytt år önskar IDS-teamet! 🎁

...

Läs mer om uppdateringarna i vår changelog.

Figma

  • Nytt mode introducerat vid namn "Brand" som används för att sätta tema (gäller endast formulär för nu).

    • 1177: Citizen och Pro/Admin.

    • Inera: Inera.se och Admin.

  • Button, Loading button, Spinner och Search button - Justerade storlekar.

  • Search button - Varianter för Device har ersatts med mode.

  • Formulär

    • Kompakta formulär för Admin och Pro (mode: Brand - Pro/Admin).

    • Varianter för light som används på mörkare bakgrunder (Color style: Light).

    • Justerade storlekar.

    • Uppdaterad design för Disabled och Invalid.

  • Search field

    • Nu finns motsvarande varianter som övriga formulärskomponenter.

    • Varianter för Size: Small som har samma storlekar som vanlig Input.

    • Varianter för Device har ersatts med mode.

  • Select multiple - Varianter för Expanded har ersatts med booleaner.

  • Header (1177) - Ökad fontstorlek för tjänstens namn i mobilläge för profession och admin.

  • Header (Inera) - Puff med text finns nu för megamenyn i desktop.

November

Figma

  • Badge - Ikon kan nu aktiveras i properties.

  • Description list

    • Variant med linjer byter namn till Column.

    • Ny variant för invånare med linjer för 1177.

  • Scrollbar

    • Justerad bredd och padding.

    • Nya varianter för Hover och Active states.

  • Popover - Justerad Scrollbar.

  • Textarea - Justerad Scrollbar.

  • Search field - Kryss för att rensa Search field är borttaget.

...

Läs mer om uppdateringarna i vår changelog.

Figma

  • Pagination byter namn till List pagination.

  • Data table pagination byter namn till Data pagination.

  • Typografi

    • En rubriknivå har lagts till

    • Rubriknivåerna har fått nya namn

    • Fonten har bytts ut i wireframe mode

    • Rubriker och texter som komponenter har tagits bort

...

  • Release av IDS 5.0

    • Footer CSS.

    • Header CSS (1177, 1177-admin, 1177-pro)

    • Temaspecifika header/footer komponenter baserade på ids-design.

    • Datatabell CSS

    • Popover CSS

    • Bugfixar

Figma

  • Data table - justerad och minskad padding

  • Tag

    • Inera: Minskad padding

    • 1177: Minskad padding, vit bg-färg, högre kontrast på konturlinje och justerad border radius

...

Ingenting nytt - du kan se det vi arbetar på just nu under Pågående arbete.

Figma

Text styles
Nu styrs även text styles med modes. Text styles som tidigare var uppdelade i mobile och desktop har ersatts med nya text styles med variabler. Det blir enklare att välja rätt text style och antalet text styles i listan halveras.
Exempel: Istället för att välja "Mobile/Heading large" eller "Desktop/Heading large" väljer du bara "Heading large". Följande komponenter har uppdaterats med modes som ersätter varianter för device:

...

  • 1177-pro har bytt till blått (första steget mot 1177-admin)

  • Intervaller för range

  • Nya card

Figma

  • Versalrubriker i Expandable har tagits bort, komponenten använder nu modes för device.

  • Versalrubriker i komponenten Heading har tagits bort, komponenten använder nu modes för device.

...

  • Nya och uppdaterade ikoner.

  • All formulär CSS är nu migrerad till design.

  • Bugfixar och prestandaförbättring (borttagning av gamla ikonbiblioteket, mindre CSS-redundans i formulären).

  • Total omskrivning av formulär-element hantering. IDS formulärelement kan nu integreras mycket enklare med manuell validering.

  • Agent och Alerts har nu öppna headline slots för egna h-taggar.

Figma

  • Ikon “double arrow” (dubbelriktade pilar) byter namn till “swap” för att matcha IDS

  • Komponenter med versaltext - beslut tagna, ej genomförda ännu

    • Versalrubriker utgår, påverkar alla komponenter som använder dessa, t ex expandables och cards med versalrubriker

    • Badges blir versalgemena (inledande stor bokstav, följt av små)

    • Knappar fortsatt versala

  • Alert ombyggda för att utgå från nya 8-baserade avstånden och använder nu också layer modes (desktop/mobil)

  • Alert ribbon - ny variant: en mer slim och stängbar variant av alert utan rubrik, med mindre ikon

  • Description list - ny komponent: visar listor med innehåll där varje informationspost har en beskrivande term/rubrik

...

4.4.0 release:
Angular tree shaking support.
Första formulär CSSen
Med mera

CSS

Confluence

Januari

Figma

  • Uppdaterad hörnradie för Inera Alert (från 10px till 3px)

...

Det finns nu beskrivning kring “Riktlinjer för att designa/jobba med infographics” på Confluence: Infographics

Januari

Uppdateringar i IDS (kod):

...

...

Januari

...