Skip to content

feat(nve-tab-group): add nve-tab, nve-tab-group and nve-tab-panel - #593

Merged
amish1188 merged 6 commits into
mainfrom
nve-tab
Aug 28, 2025
Merged

feat(nve-tab-group): add nve-tab, nve-tab-group and nve-tab-panel#593
amish1188 merged 6 commits into
mainfrom
nve-tab

Conversation

@amish1188

@amish1188 amish1188 commented Jul 30, 2025

Copy link
Copy Markdown
Contributor

Test gjerne på mobil og.
Skal legge til vue eksempel når den er i main. Jeg må oppdatere ds versjon i sandboxen.

Er usikker om endring i fontvekt har en positiv effekt på faner. Når vekten i fanen endres ved aktivering, kan det oppleves som om noe er visuell ustabilt – dette skyldes teksten som sprer seg npr vekten endres. Kanksje vi kan ha mindre vekt forskjell mellom aktive/inaktive faner?

@github-actions

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-593.westeurope.5.azurestaticapps.net

Comment thread doc-site/components/nve-tab-group.md
@amish1188

Copy link
Copy Markdown
Contributor Author

Testet i Safari og knappene ser rart ut: image

@NVEJoel NVEJoel left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ser bra ut med koden!
Designen er jeg litt mer usikker på, liker bedre designen som eksempelvis https://mui.com/material-ui/react-tabs/
@Cat-Pango Hvis du sammenligner designet med vårt og https://mui.com/material-ui/react-tabs/, synes jeg det blir mye tydeligere på MUI når en fane er aktiv.

Spesielt i vårt eksempel med Bakgrunn, hvor vi har en gjennomsiktig bakgrunn hvis fanen er aktiv, men en grå bakgrunn på de andre fanene. Blikket trekkes mot den andre fanen fordi den skiller seg mer ut fordi den har en stor boks enn den aktive.

Så liker jeg at i MUI hvis du klikker på en fane får du en skimmereffekt.
Selv faner med venstre og høyre navigasjon ser bedre ut på MUI, synes jeg.

@amish1188

amish1188 commented Jul 31, 2025

Copy link
Copy Markdown
Contributor Author

Ser bra ut med koden! Designen er jeg litt mer usikker på, liker bedre designen som eksempelvis https://mui.com/material-ui/react-tabs/ @Cat-Pango Hvis du sammenligner designet med vårt og https://mui.com/material-ui/react-tabs/, synes jeg det blir mye tydeligere på MUI når en fane er aktiv.

Spesielt i vårt eksempel med Bakgrunn, hvor vi har en gjennomsiktig bakgrunn hvis fanen er aktiv, men en grå bakgrunn på de andre fanene. Blikket trekkes mot den andre fanen fordi den skiller seg mer ut fordi den har en stor boks enn den aktive.

Så liker jeg at i MUI hvis du klikker på en fane får du en skimmereffekt. Selv faner med venstre og høyre navigasjon ser bedre ut på MUI, synes jeg.

Jeg er enig i aktiv fanen med bakgrunn-delen. Den virker nesten som at den ikke aktive fanen er faktisk aktiv. Kanskje vi kunne forbedre det litt?

@Cat-Pango

Copy link
Copy Markdown

Fanene skal ligge over et vindu, og det er meningen at den aktive fanen har samme farge som det åpne vinduet. Inaktive faner har en mørkere farge fordi man indikerer at de ligger "bak" den åpne fanen. Når man ser fanene i sammenheng med andre komponenter så synes jeg ikke det er misvisende, og synes det fungerer bedre enn MUI.

Skimmereffekten synes jeg er forstyrrende, og ikke god UU.

@Cat-Pango

Copy link
Copy Markdown

Ellers synes jeg designet ser bra ut. Noen kommentarer:

Stor/liten fane: Det skal være forskjell i tekststørrelse på disse. Stor fane: 18 px (label medium) og liten fane: 16 px (label small)

Kontrollknapper ved flere faner: Når vi hovrer over den høyre kontrollknappen så trengs det litt padding mellom denne og siste fane. Hovereffekten har samme farge som bakgrunnsfargen til inaktiv tab, så de går ellers i ett.

Det trengs litt padding i toppen av innholdspanelet, men det vises vel bare i eksempelet her?

@NVEJoel

NVEJoel commented Jul 31, 2025

Copy link
Copy Markdown
Contributor

@Cat-Pango Jeg har sett meg litt om hva andre designsystemer har, og enigheten ser ut til å være at de brukes uten noen bakgrunn se,

Det er fint å ha to forskjellige typer avhengig av konteksten, men spørsmålet er om man trenger to forskjellige utseender og når.
Her et konkret eksempel på når vi kanskje vil ha to?
image
Når vi har en primary tabs å secondary tabs? Hvis ja, borde vi skriv i teksten når du skal bruke hvilken?

Jeg tror jeg reagerer på at det merkelige med eksemplet er at hele bakgrunnen er hvit. Hvis du sammenligner det med bildet ovenfor og hvordan faner ser ut i nettlesere der overskriften der fanene er er grå, ser det bedre ut.
image

hehe jeg synes at animasjoner kan løfte en side slik at den ser mer levende ut, men det kommer an på hvilken kontekst vi snakker om.

@Cat-Pango

Cat-Pango commented Jul 31, 2025

Copy link
Copy Markdown
Skjermbilde 2025-07-31 kl  14 05 20

Designet bygger videre på et tab-oppsett som Knut etablerte i fjor, og som nå er innarbeidet i alt design på varsom.no. Vi har gått mange runder med fagsiden (H) på hvorvidt vi skal benytte faner på varsom overhodet, med eller uten bakgrunn, og de aksepterte ny struktur på varslene med faneinndeling under forutsetning av at fanene skilles tydelig ifra hverandre med ulike bakgrunner. Altså at vi valgte det alternativet som hadde bakgrunner.

Jeg skal ikke være fremmed for revurdere, men vi må isåfall se det helhetlige behovet på tvers av ulike løsninger, diskutere skissene sammen og konsekvensene det får for pågående prosjekter. Jeg kan kalle inn til et møte hvor vi diskuterer skissene nærmere.

@NVEJoel

NVEJoel commented Jul 31, 2025

Copy link
Copy Markdown
Contributor

Det hadde vært bra med et møte, for her er et konkret eksempel på hvor tydelige vi bør være i designsystemets dokumentasjon og hvordan man skal bruke komponenten.

  • Kan du bruke begge versjonene av faner slik du ønsker?
  • Bør vi bare bruke faner uten bakgrunn kun på toppnivået (main header) og faner med bakgrunn for undernivåer?
  • Bør det fremgå av dokumentasjonen hvordan det skal fungere, eller bør vi henvise til en lenke for mønstre?
  • Eller bør det utelukkende være designerens ansvar å kjenne til retningslinjene for hvordan komponentene skal brukes i skisser?

@Cat-Pango

Copy link
Copy Markdown

Supert, @NVEJoel - det er gode punkter å diskutere. Jeg kaller inn til et lite arbeidsmøte på dette i første omgang også kan vi ta det videre i fux.

På stående fot tenker jeg det er naturlig for designere å bruke faner uten bakgrunn på toppnivå, også kan det variere avhengig av kontekst, om vi skal ha bakgrunn eller ikke på undernivå. For varsom.no skisset vi med begge alternativer og diskuterte med både utviklingsteamet og med fagsiden. Jeg mener det er designers ansvar, men i realiteten har vi ikke alltid en designsressurs på løsningen. Så det er fornuftig å dokumentere nærmere!

@amish1188

Copy link
Copy Markdown
Contributor Author

Ellers synes jeg designet ser bra ut. Noen kommentarer:

Stor/liten fane: Det skal være forskjell i tekststørrelse på disse. Stor fane: 18 px (label medium) og liten fane: 16 px (label small)

Kontrollknapper ved flere faner: Når vi hovrer over den høyre kontrollknappen så trengs det litt padding mellom denne og siste fane. Hovereffekten har samme farge som bakgrunnsfargen til inaktiv tab, så de går ellers i ett.

Det trengs litt padding i toppen av innholdspanelet, men det vises vel bare i eksempelet her?

Jeg tenkte ikke å inkludere padding i toppen av innholdspanelet fordi det er opp til designere/utviklere hvor mye mellomrom de vil ha der. Hvis du mener at vi burde ha en standard padding i panelet - så kan jeg gjerne legge den til @Cat-Pango :)

@github-actions

github-actions Bot commented Aug 4, 2025

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-593.westeurope.5.azurestaticapps.net

@amish1188

Copy link
Copy Markdown
Contributor Author

image
image

@github-actions

github-actions Bot commented Aug 5, 2025

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-593.westeurope.5.azurestaticapps.net

@github-actions

github-actions Bot commented Aug 5, 2025

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-593.westeurope.5.azurestaticapps.net

@amish1188 amish1188 linked an issue Aug 5, 2025 that may be closed by this pull request
@github-actions

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-593.westeurope.5.azurestaticapps.net

@gruble gruble left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Godt arbeide med dokumentasjon. Jeg likte spesielt alt du har skrevet om UU.
Noen språkfeil og uklarheter, som jeg har kommentert spesielt.

Comment thread doc-site/components/nve-tab-group.md Outdated
Comment thread doc-site/components/nve-tab-group.md Outdated
Comment thread doc-site/components/nve-tab-group.md Outdated
Comment thread doc-site/components/nve-tab-group.md Outdated
Comment thread doc-site/components/nve-tab-group.md Outdated
Comment thread doc-site/components/nve-tab-group.md Outdated
Comment thread doc-site/components/nve-tab-group.md Outdated
Comment thread doc-site/components/nve-tab-group.md Outdated
Comment thread doc-site/components/nve-tab-group.md
Comment thread src/components/nve-tab-panel/nve-tab-panel.component.ts
@github-actions

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-593.westeurope.5.azurestaticapps.net

@amish1188
amish1188 merged commit 51d85e6 into main Aug 28, 2025
6 checks passed
@amish1188
amish1188 deleted the nve-tab branch August 28, 2025 07:25
github-actions Bot pushed a commit that referenced this pull request Aug 28, 2025
# [2.10.0](v2.9.1...v2.10.0) (2025-08-28)

### Features

* **nve-tab-group:** add nve-tab, nve-tab-group and nve-tab-panel ([#593](#593)) ([51d85e6](51d85e6))
@designsystem-releaser

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 2.10.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@designsystem-releaser designsystem-releaser Bot added the released Publisert label Aug 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

released Publisert

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Lage nve-tabs komponent

4 participants