Jämförda versioner

Gammal version 230

changes.mady.by.user Andreas Melin

Sparat den

jämfört med

Ny version Aktuell

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

Julledighet

Panel
panelIconId1f384
panelIcon:christmas_tree:
panelIconText🎄
bgColor#FFEBE6

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

...

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

...

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

...

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

...

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

...

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

...

...

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: Godkända avsteg - Design Authority

  • Ni har väl inte missat uppdaterade Favikoner Icons

...

  • 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

November

...