Designsystemoversikt

Message

Message viser tydelig status eller viktig informasjon i flyten uten å bryte brukeren ut i en ny side eller dialog.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

Message er Jøkul sin avgrensede status- og informasjonsflate for innhold som må synes tydelig, men fortsatt leve inne i den vanlige siden.

Komponenten er tett knyttet til Jøkul sine statusikoner, og `FormErrorMessage` bygger videre på samme mønster for å samle skjema-feil.

Playgrounden under fokuserer på den dokumenterte rotkontrakten: variant, full bredde og valgfri avvising.

Eksempel

Props

    • Message

    variant="info" · fullWidth=false · dismissAction=false · dismissed=false

    Dokumentasjonen for dette mønsteret er oppdatert med nye referanser og lokale notater.

    FormErrorMessage

    errors=three · isSubmitted=true · isValid=false · messageProps=default

    Feil og mangler i skjemaet

    • Beskrivelsen mangler.
    • Minst ett skjermbilde må lastes opp.
    • Velg ansvarlig team før publisering.

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/icon/icon.min.css";
import "@fremtind/jokul/styles/fonts/webfonts.min.css";
import "@fremtind/jokul/styles/components/message/message.min.css";
import { Message } from "@fremtind/jokul/message";

export function Example() {
    return (
        <Message>
            Dokumentasjonen for dette mønsteret er oppdatert med nye referanser og lokale notater.
        </Message>
    );
}
    FormErrorMessage · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/icon/icon.min.css";
import "@fremtind/jokul/styles/fonts/webfonts.min.css";
import "@fremtind/jokul/styles/components/list/list.min.css";
import "@fremtind/jokul/styles/components/message/message.min.css";
import { FormErrorMessage } from "@fremtind/jokul/message";

export function Example() {
    return (
        <FormErrorMessage
            errors={[
                "Beskrivelsen mangler.",
                "Minst ett skjermbilde må lastes opp.",
                "Velg ansvarlig team før publisering."
            ]}
            isSubmitted
        />
    );
}

    Props

    Disse prop-tabellene gjelder rotelementet Message.

    Jøkul-props

    Message sine egne props for statusvariant, bredde og eventuell avvising.

    Prop Type Standard Beskrivelse
    dismissAction { handleDismiss: () => void; buttonTitle?: string; } ingen Legger til en avvis-knapp og callback når meldingen kan lukkes av brukeren.
    dismissed boolean false Setter meldingen i avvist tilstand etter at den er lukket.
    fullWidth boolean false Lar meldingen fylle hele tilgjengelig bredde i stedet for å stoppe ved standard maksvidde.
    variant "info" | "error" | "success" | "warning" "info" Velger statusvariant og tilhørende ikon/fargefamilie for meldingen.

    Delkomponenter

    FormErrorMessage

    API: FormErrorMessage · Selektor: .jkl-form-error-message

    Valideringsoppsummering som bygger på Message og samler flere skjema-feil på ett sted.

    Jøkul-props

    FormErrorMessage sin egen kontrakt for når og hvordan feiloppsummeringen skal vises.

    Prop Type Standard Beskrivelse
    errors (string | undefined)[] påkrevd Listen over valideringsfeil som skal oppsummeres på skjema-nivå.
    isSubmitted boolean false Styrer om komponenten skal begynne å vise feiloppsummeringen etter innsending.
    isValid boolean false Brukes sammen med `isSubmitted` for å avgjøre om feiloppsummeringen faktisk skal være synlig.
    messageProps Partial<MessageProps> { title: "Feil og mangler i skjemaet" } Lar deg overstyre props som sendes videre til den underliggende `Message`-komponenten.

    React-props

    React-props på wrapperen rundt den samlede valideringsmeldingen.

    Prop Type Standard Beskrivelse
    className string ingen Ekstra klasse på wrapperen rundt valideringsoppsummeringen.

    Native HTML-props

    Native attributter som kan brukes på rotelementet til feiloppsummeringen.

    Prop Type Standard Beskrivelse
    id string ingen Lar deg koble formfeilmeldingen til omkringliggende layout eller hjelpeverktøy via et eksplisitt id-attributt.

    Når du skal bruke Message

    Bruk Message når brukeren trenger tydelig status, forklaring eller advarsel knyttet til et bestemt område eller steg i grensesnittet.

    Hvis brukeren må stanse og ta stilling før noe annet kan skje, er modal eller annen mer blokkende mekanikk ofte mer riktig enn en passiv melding.

    Tilgjengelighet

    Statusmeldinger må stå i riktig kontekst og være skrevet slik at brukeren forstår konsekvensen uten å tolke ikon eller farge alene.

    Hvis meldingen kan lukkes må knappen være enkel å nå med tastatur og tydelig nok for skjermlesere.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Påkrevd
    Dekket API-props
    10
    Playground-kontroller
    8
    Delkomponenter
    1
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/list/list.min.css
    • @fremtind/jokul/styles/components/message/message.min.css
    • @fremtind/jokul/styles/components/icon/icon.min.css
    • @fremtind/jokul/styles/fonts/webfonts.min.css

    Ikonkontrakt

    Bruk: Påkrevd

    Stilimport: @fremtind/jokul/styles/components/icon/icon.min.css

    Fontimport: @fremtind/jokul/styles/fonts/webfonts.min.css

    • Message bruker Jøkul-ikoner internt for statusvariantene og den valgfrie avvis-knappen.
    • Ikon- og fontstilene må derfor følge med selv om forbrukeren ikke importerer noe direkte fra `@fremtind/jokul/icon`.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • Message · MessageProps · @fremtind/jokul/message · 4 props
    • FormErrorMessage · FormErrorMessageProps · @fremtind/jokul/message · 6 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: Message har ingen egen tastaturadferd før du legger til `dismissAction`. Da må avvis-knappen kunne nås og aktiveres med tastatur som en vanlig knapp.

    Semantikk som kreves

    • Bruk Message til avgrenset status eller viktig informasjon i en flyt, ikke som erstatning for full sidefeedback eller modal blokkering.
    • Velg variant ut fra alvorlighetsgrad og forventet handling, ikke bare ut fra hvilken farge som ser best ut visuelt.
    • FormErrorMessage passer når flere feil må samles på skjema-nivå i tillegg til feltspesifikke meldinger.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at meldingen faktisk tilhører innholdet rundt, og ikke burde vært løst med lokal hjelpetekst nærmere det konkrete problemet.
    • Bekreft at avvisbare meldinger ikke skjuler kritisk informasjon brukeren fortsatt trenger senere i oppgaven.

    Ytelse

    • Message er lett, men er avhengig av ikon- og webfont-stiler for å vise variantikonene riktig.
    • FormErrorMessage kan samle mange feil; hold teksten kort og konkret så oppsummeringen ikke blir en tung blokk som er vanskelig å skanne.

    Relatert