Uppdateringar

Owned by Rebecka Näsström
Last updated: dec. 20, 2024 by Joakim Bengtson
27 min read

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

Julledighet

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!

December

Kod

  • Release av IDS 5.3

    • Kompakta formulär i admin och pro.

    • Updaterad Jämtland Härjedalen logotyp och flexiblare header knappar.

    • Bugfixar

  • Release av IDS 5.2

    • Headers för Inera och Inera admin kan ha både knappar och länkar i header

    • En hel del CSS-fixar

    • Tillgänglighetsfixar, bland annat fokuserbar headline i dialog

    • Bugfixar

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.

Resursbiblioteket
Thumbnail - Justerad bredd och höjd till Figmas nya aspect ratio.

Oktober

Kod

  • Release av IDS 5.1

    • Nya komponenter: Dropdown, Pagination, Desciptionlist

    • All relevanta komponent CSSer är nu i ids-design.

    • Refaktorering av button och link.

    • List css och mycket mer

    • Bugfixar

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

Confluence

September

Kod

  • 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

Augusti

Under augusti har fokus varit på att:

  • Fortsätta med arbetet med ids-design (IDS CSS)

  • Planera hösten

  • Onboarding av nya personer i designsystem-teamet

Confluence

Juli

I juli har IDS-teamet semester. Mellan måndag 1 juli och måndag 5 augusti har vi stängt för hantering av supportärenden. Vi återupptar supporten från och med 5/8. Du kan fortfarande:

Trevlig sommar önskar IDS-teamet!

Juni

Nya regler gällande användningstester och ersättning. INGEN ERSÄTTNING utgår till användare vid användningstester med omedelbar verkan. Vi undersöker om det kommer finnas andra sätt att ge ersättning och återkommer då. Du kan läsa mer om ersättning vid användningstester på sidan Deltagare.

IDS (kod)

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:

  • Modal

    • Ny variant "Custom" har lagts till med en placeholder slot som kan användas för annat innehåll med lokal komponent.

  • Stepper

    • Vid långa rubriker fyller texten ut på ny rad (fill).

  • Progress bar

    • Nya varianter "Empty" och "full".

  • Global alert

  • Agent (1177)

  • Preamble

  • Body text

Confluence

Kommande:

  • Sommarstädning

  • Uppdatering av information

  • Nya designriktlinjer för

    • Tabell i mobil

    • Sök i select/multiselect

    • Card i mobil

Maj

IDS (kod)

Release av 4.10.0.

  • Alert ribbons

  • Button group kontroller för breakpoint

  • Angular länk, 1177 avatar och card bugfix.

Release av 4.9.0.

  • 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.

April

IDS (kod)

Release av 4.8.0.

  • Card utan ram på mobil.

  • Textarea som växer med content.

  • Header skip-link.

  • Ikoner i länkar placeras med första rad.

Release av 4.7.0.

  • 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

Confluence

Gemensam CSS

Sista ärendet hanterat runt månadsskiftet. Det innebär att:

  • Vi numera endast hanterar buggfixar och akuta problem

  • Sista planerade release är 2 september 2024

Mars

IDS (kod)

Release av 4.6.0 som innehåller förbättringsarbetet för ids-angular.

Figma

1177

  • Befintliga Header och Footer för profession byter namn till Admin

  • Nya varianter för Header och Footer profession tillkommer i blått

  • Färgen Secondary/95 blir Accent/95. Ingen visuell skillnad.

1177 och Inera

  • Header har nu en property som visar länk "Skip to content".

  • Ikonen arrow uppdateras med ny design

  • Standardikonen för länkar ändras från chevron till arrow.

  • Komponenter där chevron ersätts med arrow:

    • Link

    • List puff

    • Fab

    • Header megamenu (desktop)

    • Footer (desktop)

Februari

Figma

  • Nya ikoner:

    • File-CSV

    • Prescription

    • Document

    • Share

    • Headphones

    • Flag

    • Alarmclock neutral

    • Alarmclock inactivity

    • Activity

    • Switch person

    • Denied

    • Hourglass

    • Hourglass start

    • Hourglass end

    • Form numbered

    • Form numbered reoccuring

    • Email sent

    • Email unread

    • Moment start

    • Moment stop

    • Archive

    • Download

     

  • Uppdaterade ikoner:

    • Attention

    • Information

    • Warning

    • Search

    • Visibility

 

  • Toggle, Label flytts till höger sida om Toggle

IDS (kod)

4.5.0
Mindre bug och stilfixar.
Loading Button
Fortsatt CSS arbete

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)

IDS (kod)

  • 4.3 är släppt!

    • Innehåller många småfixar och bugfixar som efterfrågats under december och januari.

    • Även ren CSS för Tabs, List och Notification-badge.

    • Uppdatering av alla 1177/1177-pro CSS-properties (om dessa används i era egna komponenter eller skrivs över behöver dessa uppdateras).

  • Exempelsida för IDS där komponenter presenteras och testats (kör IDS 4.2.0 i 1177-tema)

CSS

  • Nu finns 0.19.5 av CSS bibloteket tillgängligt. Uppdateringarna innehåller:

    • Storybooks startsida för CSS biblioteket är nu uppdaterat med aktuell information gällande vad som kommer att ske med CSS biblioteket framöver.

    • CSS List är nu uppdaterad med ny aktuell design, "striped" har utgått och har där med tagits bort.

    • Mobilmeny desktop och footer är uppdaterade för både 1177 och 1177 professional temat.

    • Ikoner gällande länkar är utbytta.

    • Breakpoints uppdaterade gällande header på desktop.

    • Footer för 1177 temar har nu en böjd övre kant i både desktop och mobil.

    • Font storlek för CSS Agent / GlobalMessage är nu uppdaterade till korrekt storlek.

    • Färgerna för CSS Agent / GlobalMessage är uppdaterade till korrekta färger.

Confluence

  • Förtydligad designspecifikation och dokumentation kring Alerts

2023

December

Figma

  • Rubriknivåerna har fått nya namn för att separera dessa från semantiska H1, H2 osv.
    Heading 1 byter namn till Heading Large
    Heading 1 small byter namn till Heading Large alternative
    Heading 2 byter namn till Heading Medium
    Heading 3 byter namn till Heading Small
    Heading 4 byter namn till Heading Extra small
    Heading 5 byter namn till Subheading Medium
    Heading 6 byter namn till Subheading Small

  • Vi passar även på att samordna rubriknivåer mellan 1177 och Inera, vilket gör det mer systematiserat, smidigare att hantera samt enklare att öka antalet rubriknivåer om det skulle behövas i framtiden. (Ändringar i bold nedan)

1177 – DESKTOP

Heading Large alternative (Heading 1 small): size 36 px, lh 42 px (Letter spacing: -1 px)

Inera – DESKTOP

Heading Large alternative (Heading 1 small): size 32 px, lh 40 px
Heading Medium (Heading 2): size 24 px, lh 32 px
Heading Small (Heading 3): size 20 px, lh 26 px
Heading Extra small (Heading 4): size 16 px, lh 20 px
Subheading Medium (Heading 5): size 20 px, lh 24 px (Letter spacing: 1,5 px)
Subheading Small (Heading 6): size 14 px, lh 20 px (Letter spacing: 1,4 px)
Preamble : size 22 px, lh 36 px
Body text : size 16 px, lh 24 px

Inera – MOBILE

Heading Large (Heading 1): size 30 px, lh 38 px
Heading Large alternative (Heading 1 small): size 26 px, lh 32 px
Heading Medium (Heading 2): size 22 px, lh 28 px
Heading Small (Heading 3): size 20 px, lh 24 px
Heading Extra small (Heading 4): size 16 px, lh 20 px
Subheading Medium (Heading 5): size 20 px, lh 24 px (Letter spacing: 1,5 px)
Subheading Small (Heading 6): size 14 px, lh 20 px (Letter spacing: 1,4 px)
Preamble : size 18 px, lh 28 px
Body text : size 16 px, lh 24 px

  • Den 10-baserade skalan för avstånd byts ut till en 8-baserad skala för att följa branschstandard och göra det lättare att ta skisser vidare från design till utveckling.
    Nu går det även att använda variabler för avstånden som finns i Resurs-biblioteket.

Uppdateringar i IDS (kod):

  • Version 4.2 släppt! 🎉

    • Input och Textarea har nu en ny "hint" slot.

    • Progressbaren har blivit responsiv och finns som CSS tillsammans med Tag komponenten.

    • Utöver detta innehåller 4.2 mestadels bugfixar och mindre ändringar som inte kräver några ändringar.

November

Uppdateringar i IDS (kod):

  • Version 4.1 släppt

    • Releasen innehåller bland annat en del små stylefixar som dök upp efter vår första CSS merge.

    • Vår typografi är nu responsiv

    • Dialogkomponenten är en del av ids-design. Dialogen gömmer även scrollbar by default nu. Kan stängas av med prop keepscrollbar .

  • Version 4.0.0 släppt

    • Början på separation av kod och CSS för komponenter: Agent, Alert, Alert Global, Badge, Breadcrumbs, Button Group, Button, Card, Date-label, Expandable, Footer, Link, Mobile-menu.

    • Uppdaterade Mobilmenyer.

    • Inera legacyteman samt datepicker borttagna.

    • Samt mycket mer.

Oktober

Uppdateringar i IDS (kod):

  • Version 3.1.0 - läs mer i IDS changelog

    • Ny komponent: Navigation-Local

    • Uppdateringar som: Ramverk för länkar, Interactive Cards & List-items, responsiva buttongroups och uppdaterad multiselect label vid valda alternativ.

    • Bug och stilfixar

CSS:

Version 0.19.4 av CSS för 1177 (css.1177.se). Inkluderar följande förändringar:

  • Underline for links updated

  • New chevron design added

  • Alert design updated

  • Expandables updated

  • Checkbox spacing adjusted

  • Radio button spacing adjusted

  • List elements adjusted

  • Table colors updated

  • Focus elements added to Expandables

  • General list of colors for all themes updated

  • 1177 mobile menu tweaked

  • Hamburger focus fixed

  • Forms margin-top and padding fixed

  • Agent bg color change and Esc added to Tooltip

  • Tooltip Alt working

  • Tooltip Script working

  • 1177 Fixed menu text

  • Removed transitions for lines

  • Mobile menu fixed for safari

  • 1177 footer link changed

  • Notifications updated

  • Aria Label for popover updated

  • Updated Info Box - Observe border color

  • Adjusted globalMessage color and added dropshadow

 

Confluence:

September

Figma:

Vi har nu implementerat variabler i våra komponentbibliotek där det i nuläget framförallt påverkar färger. Variablerna för färger (Theme) finns i två modes:

  • Light som är dom vanliga färgerna som det ser ut idag

  • Wireframe som kan används om man vill skapa skisser i en gråskala utan varumärkets färger

Ändringarna innebär att:

  • 1177:s variabler för färger får samma namnstruktur som Inera

  • Det blir lättare för er som arbetar med båda varumärkena. Exempel: Himmel/sky-base blir Secondary/40 och Gräs/grass-base blir Success/40. Vissa färger som inte används så mycket tas bort från 1177, t.ex plommon.

När ni använder färger framöver tänk på:

  • Använd variablerna istället för styles för att modes ska fungera, detta rekommenderas även av Figma.

  • Befintliga styles backas upp av variablerna vilket gör att när man detachar en style får objektet variabeln som färg och inte en hexkod.

  • Styles för färger kommer finnas kvar under en övergångsperiod men kommer så småningom att tas bort.

Beskrivning av färgerna hittar ni:

Confluence:

Augusti

Uppdateringar i IDS (kod):

CSS:

  • Buggfixar för: button group, agent (state + färg), tooltip/popover, hamburgermeny, ikoner i footer

  • Allt är inte publicerat ännu

Figma:

  • Påbörjat arbete med hur design token/variabler kan appliceras i designsystemet

  • Cards - ny design som utgår från designmönster på 1177, mindre skugga

  • Link och rubriker i List puff har fått understreck och mörkare färg vid hover.

  • Rubriker i List puff har fått en ikon framför för att indikera att det är länkar.

Confluence:

Juni

Uppdateringar i IDS (kod):

  • IDS 3.0.5 -> 3.0.7

    • Stepper headline supportar slots.

    • Mobilemeny omarbetad, supportar nu ikoner.

    • Stilfixar.

    • Intern refaktorering.

  • IDS 3.0.3 + 3.0.4

    • Bugfixar för header

  • IDS 3.0.2

    • Bugfixar

    • Dialog, Popover, Tooltip har border.

    • Östergötland har uppdaterad logotyp.

    • Mindre designåtgärder.

CSS:

  • Buggrättning för felvalidering i forms-element (1177 & Inera)

  • Header och menyer för desktop och mobil (Inera)

Figma:

  • Följande komponenter har bytts ut för att bli enklare att arbeta med

    • Link - nu finns inte längre pil som alternativ ikon

    • Local navigation

    • Content navigation

    • Global alert

    • Agent (1177)

    • Heading - ny komponent med varianter som ersätter alla befintliga komponenter för rubriker

    • Bullet and numbered list - ny komponent som ersätter Bullet list och Numbered list vilket gör att det nu går att växla mellan dom utan att behöva skriva in texten igen

  • Följande komponenter uppdateras

    • Preamble mobile och Preamble desktop slås ihop till en komponent

    • Body text mobile och Body text desktop slås ihop till en komponent

  • Komponenterna med text har nu text properties

  • Link, Local navigation och Content navigation har nu Hover och Active states

  • Följande komponenter tas bort och finns nu istället som exempel

    • Link list

    • Navigation card

    • Article footer

    • Pagination button - använd istället sekundär knapp (Button) för pagination

Maj

Uppdateringar i IDS (kod):

  • IDS 3.0.1

    • Bugfixar

    • Interna ändringar i dialog/popover fokushantering.

    • Interna ändringar från enhet em → rem. Samt andra stiländringar.

  • IDS 3.0 är nu live, med bland annat:

    • Omarbetning av ikonbiblioteket och hur ikoner används

    • Angular delar numera property names med core och react

    • Header och footer har fått nya slots

    • En ny light property för input-element (för input på färgad bakgrund)

    • Mer om nya releasen på Storybook


CSS:

  • Nu har alla ärenden som gäller DIGG-granskningen för 1177 hanterats och publicerats på css.1177.se


Figma:

  • Popover

    • Uppdaterad kantlinje med ökad kontrast för tillgänglighet

    • Bredd ändrad till 280px

    • Hörnradien ändras för Inera till 3px.

  • Tooltip

    • Uppdaterad kantlinje med ökad kontrast för tillgänglighet.

  • Modal

    • Uppdaterad kantlinje med ökad kontrast för tillgänglighet.

    • Bredd ändrad till 280px för mobil.

    • Bakomliggande transprent yta (blanket) kan nu aktiveras på komponenten.

  • Expandable

    • Strecket i utfällda expandables flyttas från under rubriken till under innehållet som fälls ut.

    • Status active tillkommer.

  • List puff

    • Det är nu enklarare att lägga till och ta bort olika delar som datum och extra textfält för att passa det behov man har

    • List puff flyttas till Navigation.

  • Icon button och Fab

    • Facette byts ut till två separata komponenter, Icon button och Fab.

    • Båda knapparna får nya states: hover och active.

    • Varianten Secondary för Icon button byter färg för hover och active states till Sky-dark/Accent30.

    • Storek på pilen i Fab button justerad till 24px för både 1177 och Inera.

  • Pagination - numbers

    • Uppdaterad med nya Icon button

  • Badge

    • Variant Main byter namn till Primary

    • Ineras variant Primary byter färg från error till primary.

  • Breadcrumbs

    • Brödsmulorna för mobile och desktop blir en komponent istället för två separata.

    • Det går nu att växla mellan mobile och desktop.

April

Uppdateringar i IDS (kod):

  • Nu är 2.6 releasad!

    • Ny toggle-knapp

    • En mer flexibel footer

    • En hel del ändringar i formulärstates

    • Förbättrad tillgänglighet i datepickern och breadcrumbs

    • Samt bugfixar

Confluence:

-

CSS:

Nu har css.inera.se och css.1177.se uppdaterats. Uppdateringarna gäller DIGG-ärenden:

  • Lagt till understrykning på länkar i header

  • Buttons, åtgärdat fokusramar som låg för nära knapparna

  • Footer, åtgärdat dålig kontrast på fokusram

  • Mobilmeny - Fokusramar i Header

 

Figma:

Omarbetning av buttons:

  • Varianter för Pagination, Search och filter lyfts ut till separata komponenter.

  • Button kan nu ha ikon.

  • Pagination button - ny komponent (tidigare variant av Button)

  • Search button - ny komponent (tidigare variant av Button)

  • Filter button - ny komponent (tidigare variant av Button)

  • Hover state och fokusmarkering tillkommer för alla knappar.

Select

  • Varianter för Time, Date och Select multiple lyfts ut till separata komponenter.

Select multiple

  • Ny komponent (tidigare variant av Select)

  • Nu finns Select multiple med motsvarande varianter som Select: Default, Active, Disabled och Invalid.

  • Select multiple har även varianter för hopfälld och utfälld dropdown.

Time

  • Ny komponent (tidigare variant av Select)

  • Time har nu varianter för Empty och Filled content.

Date

  • Ny komponent (tidigare variant av Select)

  • Date har nu varianter för Empty och Filled content.

  • Komponenten Datepicker ersätts av komponentnen Date.

  • Ny komponent för Datepicker tillkommer som endast är den utfällda datumväljaren som fälls ut i kombination med Date.

Search field

  • Uppdaterat utseende för disabled state.

Felmeddelanden

  • Har uppdaterats för formulärselementens invalid state. Dessa har nu en ikon och tydligare kantmarkering.

  • Ineras felmeddelanden ligger nu i en pratbubbla som det redan gjort för 1177.

Mars

Uppdateringar i IDS (kod):

  • 2.5.0
    Detta är en stor release som innehåller många ändringar, efterfrågade features och bugfixar. Ni som använder Web Components och React kommer behöva göra en del ändringar för att era projekt ska vara kompatibla med denna release. Se mer under Changed i changeloggen.

  • 2.4.0

    • Stepper-komponenten.

    • Går nu att göra Logotyp och text i headern till länk.

    • Nya ikoner (Image, Clipboard, Clipboard with cross, Clipboard with text, Office building, Organization, Doctors bag, Visibility, Visibility off)

Confluence:

Figma:

  • Toggle switch

    • Ny komponent

    • Toggle switch låter användaren växla mellan två lägen, på eller av. Den används när effekten är direkt och ingen ytterligare bekräftelse görs.

  • Input och Textarea

    • Nu går det att slå på max antal tecken för att visa att fältet har en begränsning av antal tecken.

  • Tab

    • Notification badge kan nu aktiveras i tab.

  • Footer

    • Möjlighet att ha en eller två länkkolumner istället för tre som är standard.

Februari

Uppdateringar i IDS (kod):

  • 2.3.0

    • Karusell & Tag komponent. Notification Badge + Tab kombination.

    • Checkboxgrupper supportar ett mer kompakt läge.

    • Select-multiple supportar max höjd.

    • Notification-badge har en ny outlined variant.

    • Omarbete där alla ikoner är lite fetare.

    • Footerns underrubrik (h2) är nu del av huvudrubriken (h1).

    • Utilklasserna går nu på root font-sizen.

Figma:

Mallsidor/exempel (1177 och Inera)

  • Felsidor

  • Till inloggning

Nya ikoner (1177 och Inera): image, clipboard, clipboard with cross, clipboard with text, office, organization, functions, folder, doctors bag, visibility, visibility off.

https://inera.atlassian.net/wiki/spaces/USI/pages/3083174082 (1177 och Inera):

  • Stepper visar var användaren befinner sig i ett numrerat flöde. Den visar även vad som är klart, om något saknas och vilka steg som är kvar att göra för att slutföra flödet.

Tag (1177 och Inera)

  • Tag-komponenten representerar specifika ord som hjälper till att märka, organisera och kategorisera innehåll. En tag kan vara både statisk, interaktiv och flera taggar visas ofta tillsammans i grupp.

Formulärselement (Inera)

  • Flera forumulärselement har ändrats (input, textarea, select, checkbox och radio button).

  • Textfield byter namn till Input.

  • Fokusmarkering för active state läggs till.

  • Möjlighet att ha ikon i label.

  • Nytt utseende för disabled state som nu får grå bakgrund med streckad kantlinje.

  • Checkbox och radio button kan nu vara vald/selected med alla statusar. T.ex. default selected och active selected.

Tillgänglighet

Det finns nu beskrivning kring “Riktlinjer för att designa/jobba med infographics” på Confluence: https://inera.atlassian.net/wiki/spaces/USI/pages/3075080310

Januari

Uppdateringar i IDS (kod):

  • 2.2.0 - Två nya knapptyper (fab/facettknapp, ikon). Expanderbar/kollapsbar Alert.

  • 2.1.2 - Förbättrar kompatibiliteten mellan IDS komponenter och Angulars lazy loading.

  • 2.1.1 - Uppdatering utav typografi för samtliga teman:
    Vi skiljer nu på styling och semantik i typografin. Detta betyder att det finns mer flexibilitet designmässigt. Exempelvis kan en H1 ha samma stil som en H3 men fortfarande vara semantiskt korrekt.

CSS:

  • Det skapade förvirring över vilka element i Gemensam CSS hade uppdaterats. Därför är den gamla versionen av Inera tillfälligt tillbaka. Det arbetas på en liknande lösning för uppdateringar som i IDS.

  • Under tiden så kan ni se uppdateringarna i testmiljön https://css-dev.netlify.app

  • Ny logotyp för Inera finns nu i CSS

Figma:

2022

December

Uppdateringar i IDS (kod):

  • Release av 2.0.x. Nu supportas Ineras nya grafiska profil. design.inera.se

CSS:

  • Inter UI som är en gammal fontutgåva av familjen har bytts ut till den nya Inter-familjen.

  • H1 small (mindre storlek av H1) finns nu även i CSS

  • Header 1177 Profession: vi har tightat till marginaler och whitespace för att den ska ta upp mindre pixelyta på skärmen. Den är nu uppdaterad så den är den samma som finns i webcomponents.

  • Nu är Inera 2.0 live i Gemensam CSS.

    • Logotypen och typografin har uppdaterats.

    • Arbete på Header har påbörjats.

Confluence:

Figma:

  • Header Inera admin och 1177 pro är uppdaterade med ej inloggat läge. Menylänkar har enhetligt fått benämningen Länk.

  • Alert (1177 och Inera)

    • Nu finns det varianter för att fälla ut och fälla ihop en alert: Collapsed/Expanded

    • Det går nu att växla mellan status och mobil/desktop utan att rubrik och text återställs

    • Mobil variant är nu 280px bred som övriga komponenter (den var tidigare 300px)

    • Nu finns det även tydligare instruktioner för användning av alert i Figma.

  • Tab (1177 och Inera)

    • Nytt uppdaterat utseende

    • Det går nu att växla mellan varianter utan att rubriken återställs

    • För att få en linje som täcker sidan i bredd bredvid tabarna görs nu detta enkelt genom att göra den tab längst till höger bredare t.ex. med fill content.

  • För att använda nya Alert och Tab behöver man lyfta in dem från biblioteket igen eftersom dessa inte kommer att uppdateras för befintliga instanser i skisser. Detta för att undvika att befintliga komponenter återställs och att texter försvinner.

  • Var man hittar komponenter i biblioteket (1177)

    • Nu har alla komponenter i 1177 bibliotek flyttat till sina respektive sidor för att gör det lättare att hitta.

    • Arbetet med att göra motsvarande för Inera har påbörjats.

November

  • Nu finns ett nytt komponentbibliotek i Figma med uppdaterad design efter Ineras nya varumärkesplattform https://www.figma.com/file/TUpmxR3MeCVPsxxOp6JXeJ/Inera-Komponentbibliotek-2.0?node-id=0%3A197

  • Uppdateringar i IDS (kod):
    Ny Instruktionsvideo.

  • Ikoner i Figma:

    • Ikoner för 1177 finns nu publicerade i Figma, både nya versioner av alla redan existerande ikoner samt de tio nya ikonerna (lightbulb, shield locked/shield locked filled, double arrow, star/star filled, reload, reply, call/call active)

    • Både ikoner för Inera och 1177 finns i två storlekar, small och large, och det går att växla mellan storlekarna med component properties i högerpanelen

    • Ikoner går att färga om till egen färg vid behov (t ex om vit ikon behövs). I 1177:s designsystem använder du ikonfärgen “custom” i högerpanelen när ikon behöver färgas om. En bugg i Figma gör att vissa delar av ikonerna annars inte går att ändra färg på (röd eller blå).

    • Vissa chevrons kan se skeva ut:
      förut hade ikonen chevron inte samma bredd som höjd vilket gjorde den svårt att arbeta med när man byter mellan ikoner eller roterar den. Nu har den samma bredd som höjd, precis som övriga ikoner. Ser din chevron skev ut kan det åtgärdas genom att högerklicka på ikonen och välja “reset all changes”.

  • CSS:

    • Header för Inera döljer nu alternativen “logged in” och “logged in with mobile menu”.

    • css.1177.se och css.inera.se visar nu den senaste versionen av CSS, med de senaste ändringarna från dev-miljön.

    • H1 och H2-rubriker för 1177 Profession har nu rätt färg (svart istället för röd).

  • Figma:

    • Paddingen på sidorna av tertiary button är borttagna så de kan aligna med andra saker i design.

  • Confluence - utökad information med exempel och riktlinjer för:

Oktober

September

Augusti

  • Kodkomponenter:
    Tabs
    Breadcrumbs
    Checkbox (error state)
    h1 Small
    Mer info finns i changelog (1.6.0->1.7.1)

  • Följande komponenter har acceptanstestats samt tillgänglighetsgranskats: Breadcrumbs, Truncated Breadcrumbs, Table, samt H1 small och Error state för radioknapp/checkbox.

  • Tillgänglighetskrav har tagit fram för Content navigation, Tool tip och Scroll back to top komponenterna.

Juli

Juni

  • Kodkomponenter:
    Tabs

  • Figma uppdateringar:

    • Expandables (1177, Inera) - ny komponent. Tidigare komponent "Expanderbara ytor" utgår och finns nu istället som exempel som byggs ihop av Expandables och Cards.

    • Article footer (1177, Inera) - modifierad komponent med desktop och mobil som varianter i samma komponent

    • Alerts (1177, Inera) - justering av marginal i mobil

    • Mobilmeny (1177, Inera) - justeringar med markering för active state nivå 1

    • Badge (1177, Inera) - ny komponent som ersätter labels. Finns nu fler färger att välja på.

    • Bullet list (1177, Inera) - uppdatering med fler (dolda) punkter. 

    • Numbered list (1177, Inera) - uppdatering med fler (dolda) punkter. 

    • Popover (1177, Inera) - ny komponent som ersätter Pop up-tip

    • Tooltip (1177, Inera) - liten justering av marginaler

    • Table cell, Table header, Table example (1177, Inera) - komponenter som ersätter tidigare tabell

    • Search (1177, Inera)- ny komponent som ersätter tidigare Sökfält i Forms

    • Nya effect styles (1177, Inera): Inner shadow default, Drop shadow default

    • Header (1177-profession) - uppdaterad med plats för extra rubrik ovan eller under tjänstens namn.

    • Progress bar (1177, Inera) - ny komponent som ersätter tidigare Progress bar.

    • Carousel (Inera) - ny komponent som ersätter Slideshow.


      Dessa komponenter har tagits bort från biblioteket i Figma och finns nu istället som exempel i ”Exempel på sidor"

    • Panel 

    • A-Ö lista

    • Puffar

    • Filtreringslist

    • Faktaruta (Inera)

Maj

  • Kodkomponenter:
    @inera/ids-core 1.2.1 → 1.3.0 (Webcomponents)
    @inera/ids-angular 1.1.0 → 1.3.0 (Angular)
    @inera/ids-react 1.1.0 → 1.3.0 (React)
    Dokumentation uppdaterad (Webcomponents, Angular, React)
    Release inkluderar:

    • Nytt 1177-proffessions-tema.

    • Nytt inera-admin-tema.

    • Release av Header, med subkomponenter:
      Header-avatar
      Header-item
      Header-navigation
      Header-navigation-mobile-item
      Header-mobile-menu

    • Footer, Link, Notification-badge

    • Mobile-meny, med subkomponenter:
      Mobile-menu-item
      Mobile-menu-avatar

    • Utökning av ikonutbut, Bug fixar m.m.

  • Ny rekommendation gällande möten: https://inera.atlassian.net/wiki/spaces/USI/pages/2806743191

  • Nu finns även den nya logotypen för 1177 utan friyta här: Logotyper och favikoner - 1177

  • Ny logotyp för 1177
    1177 Vårdguiden har bytt namn till 1177 och i samband med detta har Figma och Confluence uppdaterats. Vi bör så skyndsamt det går byta ut loggor i produktion. Det kommer inte gå att samordna så alla tjänster gör detta så snart det går. Hitta filer här: Logotyper och favikoner - 1177

  • Figma uppdateringar:

    • Agent (1177) - ny färg (grå) för att skilja ut agent banner mot globala meddelanden

    • Grid (1177, Inera) - Ny grid för admin/verktyg “Desktop wide”

    • Header 1177 profession - uppdaterad header för 1177 profession med minskad höjd och därmed justerad storlek på textlänkar och ikoner

    • Tabs (1177, Inera) - ny komponent som ersätter Flikar

    • Tables (1177,Inera) - ny komponent som ersätter gamla tabeller, nya är skapade för skalbarhet samt blivit modulär så man kan skapa tabeller efter de behoven man har i sitt projekt

April

  • Figma uppdateringar (1177, Inera):

    • Nya ikoner: Copy-file samt Id-card locked

    • Datepicker - ny komponent med utfälld datepicker

    • Link - ny komponent för länkar med ikon

    • Link list - ny/uppdaterad komponent som ersätter tidigare länklista

    • Header Inera - ändrad så att header för Inera admin blir default istället för Inera.se

Mars

  • Kodkomponenter:

  • Koddokumentation:

  • Design: Vi har sett över listkomponenter för 1177 (sökträffar, eventlistning och nyhetslistning) och valt att ta bort den ljusblå pyjamasrandningen. Istället kommer vi framöver att använda linjer som avdelare mellan listpuffarna. Detta ger bättre och tydligare design för korta listor, samt bättre kontrast på avgränsning mellan olika listpuffar.

  • Figma uppdateringar:

    • List puff (1177, Inera) - ersätter tidigare listkomponenter: Sökträff, Eventlistning samt Nyhetslistning

    • Checkbox och radio button (1177, Inera) - Error state har tillkommit

    • Breadcrumb (1177, Inera) - uppdaterad komponent

    • Modal (1177, Inera)- ny komponent som ersätter tidigare modaler

    • Button (1177, Inera) - Ändrad resizing för Default - Desktop vilket gör att knappen följer knapptextens bredd.

Februari

Januari

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.

November

  • Figma uppdateringar:

    • Ikoner för 1177 ä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.

    • Komponenter i Forms är uppdaterade för 1177 och Inera:

      • Button

      • Checkbox

      • Dropdown

      • Radio button

      • Range

      • Spinner

      • Textarea

      • Textfield

    För varje komponent finns olika varianter som kan väljas/ställas in i högerpanelen. Exempelvis Button kan ställas in efter device (mobile, desktop), type (default, pagination, filter, search), color (default, secondary) respektive state (default, pressed, sent, disabled) i de fall där det är tillämpligt.



  • Mall för godkännande om avsteg från användning av UX-ramverk skapad: https://inera.atlassian.net/wiki/spaces/USI/pages/2643657208

  • Ni har väl inte missat uppdaterade Favikoner https://inera.atlassian.net/wiki/spaces/USI/pages/228066143

 

Uppdateringar från tillgänglighet och test:

  • Första komponenten av web components har gått igenom och godkänts i acceptanstester inklusive tillgänglighetstester. Och flera komponenter är på väg till acceptanstest.

  • Det har lagts till några riktlinjer och råd hur man ska tänka kring tillgänglighet i diverse scenarier samt information om WCAG. Detta är ett arbete som pågår för att underlätta beslut och återkommande frågetecken som kan uppstå. Nyligen har dessa ämnen lagts till:

    • Avstånd mellan klickytor

    • Obligatoriska fält

Sidan hittar ni här: https://inera.atlassian.net/wiki/spaces/USI/pages/528843061/WCAG

Oktober

September

  • Instruktion för utvecklare Angular, Patrik H

  • Ikonbiblioteket för Inera är uppdaterat och använder nu samma grundikoner som 1177 Vårdguidens ikonbibliotek, men med egen färgsättning utefter Ineras grafiska profil. Detta ger nu ett mer enhetligt designmanér samt ökat antal ikoner. Finns för användning i Figma- respektive Sketchbiblioteket samt zipfil med ikoner i svg-format på sidan https://inera.atlassian.net/wiki/spaces/USI/pages/455968258 . (Ej uppdaterat ännu i css eller Fontello).

Augusti

Juli

I Juli är större delen av oss som arbetar med UX-ramverket på semester så förvänta er inga större uppdateringar

  • Våra designsystem har flyttat in i Figma och arbetet kan påbörjas med migrering till den plattformen. Rekommendation för hur arbetet skall bedrivas framöver kommer.

Juni

  • Designhistorik

  • Sketchbibliotek - 1177:

    • Uppdaterad design på modaler med vänsterjusterad rubrik och text, samt centrerade knappar.

    • Design på tillbakalänk i mobil.

  • Sketchbibliotek - Inera:

    • Uppdaterad design på expandables (accordions) för Inera.

    • Ändrad färg på ramlinje i textfält och sökfält till #7C7C7C

    • Ändrad färg på “avdelare” (linje) till color-muted #A1958A

    • Uppdaterad design på modaler med vänsterjusterad rubrik och text, samt centrerade knappar.

    • Design på tillbakalänk i mobil.

  • Ny release 0.16.0

    • BREAKING: Expandables are now using the <details> element.

    • Padding changed back to 20px for consistency with values in default.scss.

    • Added csupport for logged in mobile menu.

    • Layout fix for Inera checkboxes.

    • Layout fixes for radio buttons (Inera theme). Changed labels for button examples to use Primary/Secondary wording.

  • Designförslag för hur Ineras varumärken kan samordnas framöver https://inera.atlassian.net/wiki/spaces/USI/pages/2378892823

Maj

  • Justerat färg på H Underrubrik Versal Stor till muted-dark #5F5F5F för att uppfylla tillgänglighetskrav på godkända kontrastvärden (Sketch samt uppdaterat spec i Confluence)

  • Sketchbibliotek - Inera:

    • Uppdaterad design på checkboxar och radioknappar.

    • Disabled state för checkboxar och radioknappar tillagt.

    • Uppdaterad design (färger) på knappar. Success-button tillagt.

  • Sketchbibliotek - 1177:

    • Disabled state för checkboxar och radioknappar tillagt.

  • FAQ med vanliga frågor påbörjad, https://inera.atlassian.net/wiki/spaces/USI/pages/2373288041

April

  • HTML/CSS-komponenter: Ny release 0.15.0

    • Removed use of multiple ULs for desktop navigation.

    • Edited to default alignment of tooltip arrow.

    • Code is now valid with validator.w3.org/nu.

    • Added styles for expanded top level navigation link.

  • Sidan med Felsidor är uppdaterad med fler felvarianter som 500-fel och 300-fel utöver 404-fel, se https://inera.atlassian.net/wiki/spaces/USI/pages/2253424521

  • Ikoner beställda av Journalen (graf, lista, analys provtagning, logg, logg låst) finns även nu i ikonbiblioteket.

  • Ikoner för 1177 Vårdguiden är uppdaterade och justerade med enhetligt designmanér gällande storlek, ramlinje, hörnrundning och färgsättning. Finns för användning i Sketchbibliotek - 1177 Vårdguiden samt zipfil med ikoner i svg-format på sidan https://inera.atlassian.net/wiki/spaces/USI/pages/228066143 (ej uppdaterat ännu i Storybook eller Fontello). Utförligare beskrivning av ikonografi finns även i Sketchbiblioteket samt på https://inera.atlassian.net/wiki/spaces/USI/pages/228066143 .

Mars

  • npm-paket för angularkomponenter publicerat.

  • Komponentbibliotek för angular påbörjat.

  • Inera Design System (gemensam css): Ny release ute (0.14.0):

    • Change name of $breakpoints to $core-breakpoints, avoiding foundation-sites collission. Add $base parameter to rem-calc(), maintaining use compatibility with foundation-sites.

    • Changed breakpoint lg (large) 1024px (from 1025px).

    • Removed the use of divs inside of spans on buttons.

    • Updated aria attributes for modals.

  • Kontakt UX:are, uppdaterad med nya namn och projekt, https://inera.atlassian.net/wiki/spaces/USI/pages/212671454

  • Gemensam CSS: Ny version (0.13.0) av ramverket ligger i master nu. Inkluderar namnändring av breakpoint mixin samt förändringar i globala navigationen.

  • Uppdaterat sidan Deltagare med information om att det nu finns en användarpanel för både 1177.se och UMO/Youmo.

  • Sketchbibliotek - 1177 Vårdguiden uppdaterat med:

    • Design för felsida 404 - 1177.

    • Design för sajthuvud och huvudnavigation för tjänster som riktar sig till invånare, inloggat läge/e-tjänster - 1177

  • https://inera.atlassian.net/wiki/spaces/USI/pages/2255421523 - ny komponent. Sketchbibliotek samt Confluence uppdaterat.

  • Sajtfot 1177: Samma komponent ska framöver användas för öppna sidor och inloggat läge/e-tjänster. Särskild design för inloggat läge/e-tjänster utgår alltså. Sketchbibliotek samt Confluence uppdaterat. https://inera.atlassian.net/wiki/spaces/USI/pages/230064556

Februari

  • 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 https://inera.atlassian.net/wiki/spaces/USI/pages/233024095

2020

December

November

Oktober

September

Juli

Juni

Maj

April

Mars