Jämförda versioner

Version Gammal version 219 Ny version 220
Ändringar gjorda av

Andreas Melin

Rebecka Näsström

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

Juni

...

Juli

Panel
panelIconId1f3dd
panelIcon:island:
panelIconText🏝️
bgColor#FFFAE6

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.

...

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

...

  • 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

...

  • 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

...

  • 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):

...

...

  • 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

...

  • 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: Möten med stakeholders

  • 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

...

  • 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

...

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

...

  • 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 Designförslag

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, FAQ - vanliga frågor

...

  • 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 Felsidor, 404 med flera

  • 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 Icons (ej uppdaterat ännu i Storybook eller Fontello). Utförligare beskrivning av ikonografi finns även i Sketchbiblioteket samt på Icons .

...

  • 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/Kontakt+UX+are

  • 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

  • Back to Top Button (Facette variant) - 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. Sajtfot för tjänster som riktar sig till invånare - 1177

...

...

Juli

  • Adderat sida med länkar till prototyper, testmiljöer med mera som kan vara till nytta för att se hur andra löst problem, /wiki/spaces/USI/pages/375291975

  • Små korrigeringar

...

  • UX-ramverk godkänt och testat

  • Certifiering version 1.0 klar och är därmed obligatorisk för alla UX-nära resurser Certifiering UX-strategi

Maj

...