Hopp til hovedinnhold
Meny

lmfaole.party / designsystem / Guider / Overlegg

  • Forside
  • Turer
  • Økonomi
  • Slides
    •

    Overlegg: dialog, popover og tooltip

    Modal eller ikke? Velg mellom <dialog> og popover

    Designsystemet bruker to native overleggs-mekanismer, valgt etter om innholdet skal blokkere resten av siden eller ikke. Begge legger seg i nettleserens «top layer» - ingen av dem trenger håndrullet z-index:

    Behov Mekanisme Brukes av
    Blokkerer resten av siden til brukeren svarer (skjema, bekreftelse)Native <dialog> med showModal()<lm-dialog>, <lm-confirm-dialog>
    Skal kunne vises samtidig med (over) en allerede åpen dialog: varsel, undermeny, forslagslistepopover="manual", styrt fra JS med showPopover()/hidePopover()<lm-toast>, <lm-menu-button>
    Hover-/fokus-utløst hjelpetekst, uten å stjele fokus fra det den beskriverinterestfor koblet mot et popover-element (med native-title-reserve der støtte mangler)<lm-tooltip>

    Tommelfingerregel: spør «må brukeren svare på dette før de kan gjøre noe annet på siden?». Ja -> <dialog>. Nei, men det må likevel kunne vises oppå en åpen dialog -> popover.

    Hvorfor popover - ikke position: fixed + z-index

    Et element med popover-attributtet flyttes automatisk til «top layer» - det samme laget nettleseren selv bruker til <dialog> og fullskjerm-video. Det gir tre ting gratis, som ellers må bygges for hånd med position: fixed og et stadig økende z-index-tall:

    • Garantert øverst - uansett hvilken stabling/transform/overflow: hidden resten av siden har, siden top layer ligger utenfor det vanlige dokument-treet.
    • Native light-dismiss - klikk utenfor eller Escape lukker et popover="auto"-element uten egen click-utenfor-lytter. Komponentene over bruker bevisst popover="manual" når de trenger å styre lukking selv (f.eks. <lm-toast> som skal bli stående til den utløper), men arver fortsatt top layer-plasseringen.
    • Ingen z-index-krig - et <lm-toast>-varsel skal vises over en åpen <lm-dialog>, noe et vanlig z-index aldri kan garantere siden en åpen <dialog> alltid ligger i sitt eget top layer-lag uansett hvor høyt tallet er.

    Lag-rekkefølge når flere overlegg er åpne samtidig

    Vanlige, ikke-top-layer-elementer (en fastplassert sidepanel-kant, en badge oppå et kort) bruker de to trinnene i designsystem/tokens/lagrekkefolge/: --z-overlay for vanlige flytende kontroller, --z-overlay-top for varsler som eksplisitt skal ligge over andre overlegg. Bruk disse fremfor et nytt, tilfeldig tall - og legg aldri et nytt z-index-nivå til uten å diskutere om det faktisk trengs.

    Ekte topp-lag-elementer (<dialog>/popover) trenger ikke disse tokenene i det hele tatt - rekkefølgen mellom dem styres i stedet av åpningsrekkefølge (sist åpnet ligger øverst), som er nøyaktig oppførselen <lm-toast> er avhengig av for å kunne vises over en allerede åpen dialog.