Jämförda versioner

Gammal version 231

changes.mady.by.user Joakim Bengtson

Sparat den

jämfört med

Ny version 232

changes.mady.by.user 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..

2024

December

Figma

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

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

...

  • Uppdaterad namngivning av textstyles för att matcha IDS/Storybook (1177, Inera)

  • Texter i komponenter uppdaterade för att bli mer generiska (t ex “Här kan du skriva en text om…”)

  • Uppdaterad information och bilder för:

    • Alert: lagt till bildexempel för olika typer av alerts, bland annat nya collapsable

    • Tabs: uppdatering av utseende

  • Ny komponent för facettknapp har fått en egen sida med dokumentation och länkar: Icon button

2022

December

Uppdateringar i IDS (kod):

...

...

2021

December

  • Kod
    Nu finns en samlad ingång för vårt kodsystem dit material flyttas in, http://design.inera.se

  • Figma uppdateringar:

    • Ikoner för Inera är uppdaterade. För varje ikon finns varianter med färger, vilket kan väljas i högerpanelen i Figma. Som standard är ikonerna 40 px, men vissa ikoner exempelvis dokumentikoner och stäng-kryss har även en anpassad variant för 20 px med justerad linjetjocklek för god synlighet. Funktionella ikoner som chevrons, arrows och expandera har dock anpassade, mindre format.

...

  • Sketchbibliotek - 1177 Vårdguiden:

    • Tydligare namngivning av H1:or och H2:or för att tydliggöra att invånartjänster använder röda H1:or och H2:or samt att tjänster för professionen använder mörkgrå H1:or och H2:or

    • Tydligare struktur samt namngivning av ramverkskomponenter (sidhuvud, sidfot och menykomponenter) uppdelade efter invånartjänster respektive tjänster för professionen.

  • Uppdatering av sidorna Komponenter samt Färger - 1177 för att göra det tydligare hur röd respektive blå färg kan användas.

  • Adderat beskrivning kring vad som skiljer ett default select element mot ett custom Select

2020

December

  • https://css.inera.se och https://css.1177.se finns publicerade

  • Hur skall vi arbeta med designreviews och designrevisioner Design review

  • Nya ikoner för 1177: ombud, kamera (sätta på, stänga av samt växla kamera) samt provtagning (provrör fyllt resp. tomt) Icons

  • Komponentbiblioteket för Inera i Confluence är uppdaterat med beskrivningar av komponenter samt kodexempel. Fortsatt arbete pågår. Inera

  • Inera Sketchbibliotek (Sketchfil) finns nu i en första upplaga. Vissa komponenter ska dock uppdateras och revideras, främst med nya färger som uppfyller kontrastkrav (markerade med orange färg i Sketchfilen). Sketchbibliotek 1177

...