Modal

Modal, Dialog, Dialogruta

Storybook

React Aria

Komponent som dyker upp som ett lager ovanpå tjänsten/webbplatsen. Modalen hindrar åtkomst till det underliggande lagret, så användaren måste interagera med modalen innan den kan gå vidare. Modaler används främst när det krävs ett aktivt svar från användaren.

Installation och användning

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { DialogTrigger, Modal } from '@midas-ds/components'

Exempelkod

<DialogTrigger>
  <Button>Öppna modal</Button>
  <Modal title='Rubrik'>Innehåll i modal</Modal>
</DialogTrigger>

Bekräftelsemodal

För att undvika oönskade fel kan en modal användas för att bekräfta en handling som har konsekvenser för användaren.

Varianter

För att stänga modal via klick utanför modalens yta, använd isDismissable på modalen.

Dismissable

<DialogTrigger>
  <Button>Open</Button>
  <Modal
    isDismissable
    title={'Modal Title'}
  >
    /* Modal content */
  </Modal>
</DialogTrigger>

Uncontrolled

Alla varianter av <Button> samt alla övriga pressable element kan användas för att öppna modalen. För att stänga modalen med en knapp innanför modalen, använd slot={'close'}.

Uncontrolled Modal

<DialogTrigger>
  <Button>Open</Button>
  <Modal title={'Modal Title'}>
    <Button slot={'close'}>Close</Button>
  </Modal>
</DialogTrigger>

Controlled

Använd isOpen och onOpenChange() för att via state kontrollera om modalen är öppen eller stängd.

Controlled Modal

/* imports and rest of app */
const [open, setOpen] = React.useState<boolean>(false)
/* trigger modal from anywhere */
<Button onPress={() => setOpen(true))}>Open</Button>
<DialogTrigger isOpen={open} onOpenChange={setOpen}>
  <Modal
    title={'Modal Title'}
  >
    /* Modal content */
  </Modal>
</DialogTrigger>

Avancerat innehåll

Modaler kan även innehålla mer avancerat innehåll som ett formulär. Använd då autoFocus på första element för att användarens fokus ska flyttas dit när modalen öppnas.

<DialogTrigger>
  <Button>Open</Button>
  <Modal title={'Modal Title'}>
    <TextField label={'Name'} autoFocus>
  </Modal>
</DialogTrigger>

Riktlinjer

Användning

Använd modaler sparsamt och endast när det är nödvändigt då de skapar avbrott i användarens flöde.

Använd modal för:

• Att låta användaren bekräfta att den vill utföra en handling som kan få stor påverkan och som inte kan ångras.
• Enklare formulär

Undvik att använda modal för:

• Varningar. Använd istället Toast eller InfoBanner
• Situationer där användaren behöver kunna ta del av den underliggande sidans innehåll för att kunna ta ett beslut.
• Långa formulär

Knapparnas placering och ordning

Knapparna ska placeras i modalens nedre vänster kant. Jakande, accepterande knappar, placeras längst till vänster i knappgruppen, se riktlinjer för Knappar

API

DialogTrigger

Name	Type	Default	Description
isOpen	boolean	-	Whether the overlay is open by default (controlled).
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).

Modal

Name	Type	Default	Description
isDismissable	boolean	false	Whether to close the modal when the user interacts outside it.
isKeyboardDismissDisabled	boolean	false	Whether pressing the escape key to close the modal should be disabled.
shouldCloseOnInteractOutside	(element: Element) => boolean	-	When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.
title	ReactNode	-	An optional title for the dialog. If omitted, please provide an aria-label for accessibility.
role	"alertdialog" | "dialog"	'dialog'	The accessibility role for the dialog.
id	string	-	The element's unique identifier. See MDN.