Jämförda versioner

Gammal version 224

changes.mady.by.user Patrik Hobring

Sparat den

jämfört med

Ny version 225

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

Oktober

Figma

  • Pagination byter namn till List pagination.

  • Data table pagination byter namn till Data pagination.

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

...

Det finns nu beskrivning kring “Riktlinjer för att designa/jobba med infographics” på Confluence: Riktlinjer för att designa/jobba med infographics

Januari

Uppdateringar i IDS (kod):

...

  • 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

...

...

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

Oktober

...

Oktober

  • Ny komponent för etikett Badge

  • Ny komponent för positiv feecback

...