/
Uppdateringar

Uppdateringar

  • In progress

    • Ineras UX-ramverk utvecklas löpande. Denna sida visar nya komponenter och större förändringar i UX-ramverket samt direktlänkar till relaterade sidor.

    2025

    November

    Kod

    Figma

    • Som en del i att modernisera utseendet har vi tagit bort skuggor från flertalet komponenter. Skuggor finns nu kvar som dekorativ feedback i tre nivåer, för en ny modernare design.

    • Den neutrala (grå) färgskalan har uppdaterats med nya färger och är nu gemensam för 1177 och Inera.

    • Stepper - uppdaterad design som ger mer plats åt innehåll i mobil.

    • Box link - Justerade states för Hover och Active.

    • Action link - Ny komponent.

    • Illustrationer - Ett nytt bibliotek med tvåfärgade nya komponenter som används i bland annat Action link.

    • List pagination - Nu finns Hover och Active state för siffrorna.

    • Ny ikon - Attachment.

    • Uppdaterad ikon - Edit.

    • Grids har uppdaterats för att följa systemet för bas 8.

    • Modes byter för att använda samma termer som i kod.

      • Theme → Mode

      • Brand → Theme

    • Nya maxvärden för layout

      • Layout/content-max-width - används i breda gränssnitt (fluid) för att begränsa innehållets bredd.

      • Layout/text-max-width - används på texter för att göra det lättare att läsa.

    Oktober

    Kod

    Figma

    • Interaktiva komponenter

      • Flera komponenter har fått Hover state och justerat Active state.

      • Knappar och länkar har nu en mörkare färg för Active state i light mode och nya färger för Hover och Active state i dark mode.

    • Formulärkomponenter

      • Inner shadow har tagits bort i Active state från samtliga komponenter.

      • Hover state finns nu för samtliga komponenter.

    • Header - Skuggor runt header är ersatt med en streck i nederkant.

    • Footer - Ny propery “Mode toggle” som används för att växla mellan dark och light mode.

    • Global alert - Texten visa/dölj meddelande som visats i desktop tas bort.

    • Agent (1177) - Texten visa mer/mindre som visats i desktop tas bort.

    • Side menu (Inera) - Menyalternativens text och kantlinje byter färg från primary till accent.

    • Data pagination - nu går det att navigera till den första och sista sidan i tabeller.

    • Nya ikoner - bland annat CE-märkning.

    • Date label - Det går nu att lägga till ett slutdatum.

    • Puff list - Rubrikens storlek ändras från medium till small.

    • Linjefärg ändrad på mobile menu och local navitagion.

    • Färger som byter namn

      • 1177: Primary 30 → Primary 20, Primary 35 → Primary 30

      • Inera: Primary 90 → Primary 70, Accent 90 → Accent 70

    • Nya färger

      • 1177: Primary 50, Primary 70, Accent 20, Accent 60, Accent 70

      • Inera: Primary 20, Accent 20, Accent 50, Accent 60

    • Justerade färger

      • 1177: Accent 50, Accent 90, Accent 95

    September

    Kod

    • Release 7.2 (Länkar till Storybook)

      • Inkluderar tokens från kommande 8.0.

      • Logotyp supportas nu i inera-admin headern.

      • Bugfixar

    Figma

    Augusti

    Kod

    • Release 7.1 (Länkar till Storybook)

      • Mindre kosmetiska ändringar

      • Bugfixar

    Figma

    • Icon button

      • Nya storlekar Large, Medium och Small som motsvarar vanlig Button.

      • Ny variant tertiär.

      • Bredd/höjd är nu hug content som gör det möjligt för användning direkt i andra komponenter.

    • Link - Ikon i navigation-länkar för 1177 är nu primary 40 som övriga motsvarande länkar.

    • Skrollbar - Nedtonad färg och storlek för att vara mer subtil.

    • Färg error 99 för Inera har fått en ljusare nyans för att klara alla kontrastvärden.

    Juli

    Inga uppdateringar sker annat än beställda hot-fix.

    Ny instruktion för att anmäla sig till olika UX-möten och få access till Figma och Slack:
    Ny inom UX på Inera | Accessförfrågan

    Juni

    Kod

    • Release 7.0 (Länkar till Storybook)

      • Ids-react-paketet nu fullständigt react

      • Större namnändringar och strukturella ändringar

      • Bugfixar

    Figma

    • Header - Ny design inloggat läge i mobil för 1177 profession, 1177 admin och inera admin.

    • Tab - Uppdaterad design.

    • Notification badge - nya varianter för information, success, attention och error.

    Maj

    Kod

    • Release 6.2 (Länkar till Storybook)

      • Liten patch med mindre förbättringar och bugfixar


    Figma

    • Dark mode 

      • Alla komponenter är kompatibla med dark mode. 

      • 1177 mode för Brand Profession/Admin bryts isär, befintligt mode byter namn till Admin, ett nytt mode för Profession läggs till. 

      • Nya semantiska namn på färger. 

        • Color/surface - bakgrundsfärger 

          • background-40 byter namn till surface-default 

          • on-background-40 byter namn till on-surface-default 

          • Ny bakgrund för surface-alternative (beige) som kan användas i admintjänster. 

        • Color/brand - varumärkesbärande färger. 

        • Color/navigation - används t.ex. för menyer och Header. 

        • Color/interactive - används t.ex. för länkar och knappar. 

        • Color/feedback - används t.ex. för Alert och Badge. 

      • Heading - nya färger för respektive rubrikstorlek. 

      • Befintliga färger finns kvar men byter namn till Palette/.. – OBS! Dessa färger är inte kompatibla med dark mode. 

        • Palette/primary 

        • Palette/secondary 

        • Palette/accent 

        • Palette/neutral 

        • Palette/success 

        • Palette/attention 

        • Palette/error 

      • Nya färger 

        • Palette/primary/60 

        • Palette/primary/90 (Inera) 

        • Palette/accent/50 (1177) 

        • Palette/accent/60 (1177) 

        • Palette/neutral/10 

        • Palette/neutral/15 

        • Palette/error/60 (Inera)

    • Ikoner 

      • Många nya ikoner har lagts till. 

      • Uppdatering av alla befintliga ikoner. 

      • 1177 har nu enfärgade ikoner och har därför inte längre varianter för färger. 

      • Förinställda storlekar har ändrats - det går fortsatt bra att använda andra storlekar. 

        • Large minskas från 40x40px till 20x20px 

        • Small minskas från 20x20px till 16x16px 

      • Vissa ikoner har fått en anpassad design i små varianter för att synas bättre. 

      • Arrow, Chevron och Swap bryts isär till komponenter för respektive riktning istället för varianter. 

      • Ny ikonfont som innehåller samtliga ikoner - Inera design icons 

        • Instruktioner för användning av ikonfonten finns på sidan Icons i komponentbiblioteken.

    • Header 

      • Uppdaterad design för 1177. 

      • Uppdaterad design av länkar för 1177 Profession/Admin desktop. 

      • Ny ombudsfunktion inbyggd i Header för 1177. 

      • Ökat antal länkar i inloggade användarens meny. 

    • Footer 

      • Uppdaterad design för 1177 citizen/profession/admin. 

    • Patient header - ny komponent 

    • Accordion 

      • Använder nu rubrikstorlekar. 

      • Hover state tillagt. 

    • Link -  variant för dokument-ikoner är borttagen. 

    • Search field - label tillagt. 

    • Range - uppdaterad design. 

    • Date label - använder nu mode istället för varianter. 

    • Bullet list använder nu mode för brand. 

    • Description list använder nu mode för brand. 

    • Badge 

      • variant “Primary” byter namn till “Notification”. 

      • variant “Secondary” byter namn till “Subtle”. 

    • Notification badge - har nu en variant istället för två för antal tecken. 

    • Card 

      • 1177 - variant med röd kantlinje finns nu endast för invånare och variant med blå kantlinje finns nu endast för profession/admin. 

      • Variabler för padding går nu att använda för Card så att paddingen anpassas för mobil/desktop. 

        • Card/padding-horizontal 

        • Card/padding-vertical 

    • Focus card 

      • Uppdaterad design för 1177. 

      • Nu finns motsvarande komponent även för Inera. 

    • Survey card - tas bort, använd istället Focus card. 

    • Tables - Justerad design för samtliga tabeller. 

    • Scrollbar - Justerad nedtonad design. 

    April

    • Vi utökar återanvändbara sidor så som felsidor tar fram exempel på hur dessa ska se ut. Felsidor - 1177 & Inera

    Kod

    • Release 6.1 (Länkar till Storybook)

      • Förbättring tillgänglighet

      • Flera ikoner till fonten

      • Bugfixar

    Figma

    Figma uppdateras inte i samma utsträckning under det arbete som pågår med att skapa förutsättningarna för Dark Mode. Vi kommer därför i maj månad komma med en betydligt större uppdatering av våra komponenter där vi också kommer informera om nya arbetssätt för färger och färghantering.

    Mars

    Kod

    • Release 6.0 (Länkar till Storybook)

      • Ikonfont

      • Många breaking changes

      • Test av renodlade React-komponenter

    Figma

    Arbetet med att förbereda Dark Mode i Figma (kommer i release 7.0 19 juni) innebär att vi inte kan släppa uppdateringar i Figma just nu. Vi kommer återkomma i april med uppdateringar och förbättringar i Figma.

    Februari

    Kod

    • Release 5.5 (Länkar till Storybook)

      • Linkbox

      • Bugfixar

    • Påbörjat dark-mode branch.

    • Test för native-komponenter.

    • Påbörjad implementation av ikonfont.

    Figma

    • Accordion

      • Nytt namn, tidigare “Expandable”

      • Ikoner (chevron och plus/minus) har flyttats till vänster om rubriken

      • Icon buttons med plus och minus har bytts ut till motsvarande ikoner

      • Padding kring divider har ändrats

      • Två nya varianter har lagts till, Small och Extra small, den nuvarande varianten har fått namnet Medium.

    • Badge - Variant Neutral för Inera får uppdaterat utseende.

    Januari

    Kod

    • Release 5.4 (Länkar till Storybook)

      • Sidomeny och sidopanel

      • Uppdaterad mobilmeny

      • Mindre komponentfeatures

      • Bugfixar

    Figma

    • Side menu container - ny komponent

    • Side menu option - ny komponent

    • Side panel - ny komponent

    • Box link - ny komponent

    • Check button

      • Nytt namn, tidigare “Filter button”

      • Justerad design med check-ikon för valda

    • Breadcrumbs

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

      • Varianter för Device har ersatts med mode.

    • Alert global - bytt namn från Global alert

    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