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

    2026

    Juni

    Kod

    Figma

    • Content navigation - ny design och funktionalitet med utfällbara alternativ och stöd för slot. Komponenten har ersatts av en ny med samma namn.

    • Search field - uppdaterad design och variant small tas bort. Storleken är nu alltid lika som övriga inputfält för respektive tema.

    • Message avatar - ny komponent för användning i chattar och meddelanden.

    • District selector - ny komponent som används för att anpassa innehåll baserat på område.

    • Dialog - rubrikens storlek ändrad till Heading M.

    • Horisontell padding för sidor, header, footer och komponenter med fullbredd justeras.

      • Mobile: 16px

      • Desktop: 24px

    Maj

    Kod

    Figma

    • Nya variabler för maxbredd som kan användas när texter inte ska bli för breda.

      • layout-max-width-heading-xxl till layout-max-width-heading-xs och layout-max-width-preamble

    • Navigationsfärg default ändras till neutral - påverkar följande komponenter:

      • Header items, navbar, megamenu, mobile menu, avatar menu link

      • Side menu

      • Local navigation

    • Header - 1177 och 1177-pro desktop

      • Ikoner och text för knappar/items placeras horisontellt.

      • Ikonens storlek minskas till 24px som för övriga teman.

    • Ikoner för att t.ex. stänga och expandera komponenter har fått justerad färg, storlek och hover/active-state i följande komponenter.

      • Alert

      • Global alert

      • Agent

      • Data pagination

      • Date picker

      • Dialog

      • Form label icon

      • List pagination

      • Popover

      • Search field

      • Side menu

      • Side panel

      • Tag

      • Table

    • Accordion - minskat avstånd mellan ikon och rubrik.

    • Formulär

      • Subtitle/hjälptext går nu att aktivera under label.

      • Placeholder text är nu kursiv och ljusare färg.

      • Checkbox group - ny komponent med slot.

      • Radio group - ny komponent med slot.

      • Input - ny variant “read-only”.

    • Följande komponenter har nu stöd för slots.

      • Stepper

      • Popover

    • Browser native select dropdowns flyttas från Resurser till det gemensamma biblioteket.

    April

    Kod

    • Release 9.2

      • Toolbar och accordion subtitle

      • Bugfix och tillgänglighetsförbättringar

      • Ny changelogstruktur

    Figma

    • Nytt tema “inera-general” som kommer används för målgrupp invånare inom Ineras varumärke.

    • Nytt mode “Layout” som fungerar som övriga modes och kan styras på vyer, sektioner eller sidor och gör det möjligt att designa vyer med:

      • Fixed - centrerat innehåll med maxbredd.

      • Fluid - flytande innehåll som använder hela skärmens bredd.

    • Header - förbättringar för Wireframe, 1177-admin, inera och inera-admin som gör det möjligt att byta mellan dessa teman utan att texter och länkar återställs.

    • Footer - förbättringar som gör det möjligt att byta mellan alla teman utan att texter och länkar återställs.

    • Thumbnail för filer flyttas från Resurser till Inera design system.

    • Agent - länk för avbryt ombudsläge är nu en knapp.

    • Toolbar - ny komponent som kan används i admin-gränssnitt under header.

    • Accordion - möjlighet att ha en text under rubriken och har nu slot för expanderat innehåll.

    • Side panel - nu finns statiska varianter utan skugga.

    • Data pagination - nu finns variant med fältet för antal rader som light.

    • Stepper - label under rubriken byter namn till subtitle (breaking change).

    • Följande komponenter har nu stöd för slots.

      • Footer

      • Accordion

      • Card

      • Focus card

      • Side panel

      • Side menu

    Mars

    Kod

    9.0.x Patchar & 9.1.0 Release

    • Tillgänglighetsfixar

    • Bugfixar

    • Internt:

      • Nytt Figma script

      • Ny Parsning av react

    Figma

    • 1177 komponentbibliotek expanderas med teman för Inera och Inera admin samt byter namn till “Inera design system”. Inera komponentbibliotek arkiveras. För att fortsätta designa med ineras teman behöver komponenter bytas ut till det gemensamma biblioteket. Det finns en funktion för att byta ut komponenter.

      • Wireframe är nu ett tema istället för ett mode och är nu det förvalda temat innan något annat tema har valts.

        • Fonten för Wireframe har ändrats.

      • Samtliga teman byter namn för att fungera tillsammans i biblioteket och för att synka med namnen i kod.

        • Citizen → 1177

        • Profession → 1177-pro

        • Admin → 1177-admin

        • Inera.se → inera

        • Admin → inera-admin

    • Header - varianter för teman ersätts med modes.

    • Footer - varianter för teman ersätts med modes.

    • Figma lanserar ny funktionalitet “Slots” som gör det möjligt att förbättra flera komponenter. Dialog och Tabs blir först ut i IDS med slots.

      • Modal - byter namn till Dialog.

        • Samtliga varianter ersätts med slot.

        • Variant för Profession ersätts med mode.

      • Tab ersätts av Tabs som innehåller alla flikar i en komponent.

    • Button group - ny komponent.

    • Description list - justerad bakgrundsfärg för column.

    • Stepper - kan nu ha en label.

    • Hörnradier har justerats för samtliga komponenter och teman.

      • Ny skala med nya storlekar: Small, Medium och Large.

    • Ikoner - genomgående uppdatering för att ikonerna ska vara mer enhetliga och med brytpunkts-skalbart utseende.

      • Nya ikoner för Map och Language.

    • Grafer - uppdaterade färger som nu även finns för dark mode. Färgerna flyttats från biblioteket Resurser till det gemensamma biblioteket och byter namn från “Statistics/Color 1-10” till “Color/chart/1-10”.

    Februari

    Kod

    • IDS 9.0

      • React SSR

      • Native Angular-komponenter

      • Bugfixar m.m

    Figma

    • Data table - minskad fontstorlek i celler.

    • Modal - krysset för att stänga tar nu upp mindre plats.

    • Button

      • Medium - minskad horisontell padding.

      • Small - minskad horisontell padding och ökad vertikal padding.

      • Justerade storlekar på ikoner.

    • Spinner - har nu varumärkesfärg, i Loading button har den samma färg som innan.

    • Nya ikoner - “More” och “Language”.

    Januari

    Kod

    Figma

    • Feedback-färger - nya färgskalor som är gemensam för 1177 och Inera.

      • Information 40/50/95

      • Success 40/50/95

      • Attention 40/50/95

      • Error 40/50/95

    • Card - minskad padding för 1177 admin och inera admin.

    • Input, select och textarea - minskad padding för 1177 admin och inera admin.

    • Invalid message - Text i felmeddelande för formulärelement ändras från röd till grå.

    • Icon button - dropdown går nu att aktivera.

    • Borders i light mode är nu ljusare och påverkar:

      • Divider

      • Puff list

      • Accordion

      • Stepper

      • Tabeller

    • Footer - 1177 admin och inera admin i light mode har fått mörkare bakgrund och en topplinje för att bryta av mot innehållsytan när beige bakgrund används.

    • Nya riktlinjer för filtrering av listor https://inera.atlassian.net/wiki/x/LICCQQE

    2025

    December

    Kod

    • Release av 8.2

      • Ny komponent Action link

      • Ny date-picker för react (3e part)

      • Mindre stylefixar

    Figma

    • Disabled buttons - uppdaterat utseende.

    • Disabled forms - uppdaterat utseende.

    • Texter och rubriker har fått en lite mörkare nyans i dark mode.

    • Heading M får samma färg som S och XS - gäller 1177 invånare och Inera.

    • Justerade primary-färger för 1177.

    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

    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