Popover

Hjälptext, hjälpinnehåll

Storybook

React Aria

Popover kan användas för att förklara en knapp eller annan interaktion när det inte går att få plats med informationen i knappen. Tillskillnad från Tooltip så triggas Popover på klick istället för hover och är öppen tills användare klickar bort från den. Popover kan även fyllas med vad som helst tillskillnad från Popover som bara tar en kort hjälptext.

import { Popover, DialogTrigger, Button } from '@midas-ds/components'
import { Save } from 'lucide-react'

<DialogTrigger>
  <Button
    variant='icon'
    aria-label='Spara'
  >
    <Save />
  </Button>
  <Popover>Spara</Popover>
</DialogTrigger>

Funktioner

Popover är byggd på React Aria Popover och med det följer inbyggd tillgänglighet som till exempel sammankoppling mellan trigger och popover. För mer detaljerad dokumentation hänvisas till React Aria.

Layout

Till skillad från Tooltip så kan Popover innehålla mer än bara en kort text. Innehållet kan t.ex förtydligas med rubriknivåer, bekräftelseknappar eller andra interaktiva komponenter.

<DialogTrigger>
  <Button
    variant='icon'
    aria-label='Din dator'
  >
    <Laptop />
  </Button>
  <Popover>
    <Heading>Hårddiskutrymme</Heading>
    <Text>Din dator har 150gb kvar i hemkatalogen.</Text>
  </Popover>
</DialogTrigger>

<DialogTrigger>
  <Button
    variant='icon'
    aria-label='Tillgänglighetsinställningar'
  >
    <UserCog />
  </Button>
  <Popover>
    <CheckboxGroup
      description='Justera inställningar för att förbättra din användarupplevelse.'
      label='Tillgänglighetsinställningar'
    >
      <Checkbox value='compact'>Kompakt läge</Checkbox>
      <Checkbox value='animations'>Animationer</Checkbox>
      <Checkbox value='contrast'>Högkontrastläge</Checkbox>
      <Checkbox value='dark-mode'>Mörkt läge</Checkbox>
    </CheckboxGroup>
  </Popover>
</DialogTrigger>

Placement

Placering av Popover i förhållande till dess trigger-element kan justeras med placement (i mån av plats).

<DialogTrigger>
  <Button>
    <ArrowLeft />
  </Button>
  <Popover placement='left'>
    Popover visas till vänster om trigger-elementet
  </Popover>
</DialogTrigger>
<DialogTrigger>
  <Button>
    <ArrowUp />
  </Button>
  <Popover placement='top'>
    Popover visas på ovansidan av trigger-elementet
  </Popover>
</DialogTrigger>

Controlled state

export const ControlledPopover = () => {
  const [isOpen, setOpen] = React.useState(false)

  return (
    <>
      <DialogTrigger
        isOpen={isOpen}
        onOpenChange={setOpen}
        delay={500}
      >
        <Button>Klicka på mig</Button>
        <Popover>Meddelande</Popover>
      </DialogTrigger>
      <pre>Popover {isOpen ? 'visas' : 'visas inte'}</pre>
    </>
  )
}

Popover visas inte

Valfritt element som Trigger

DialogTrigger fungerar direkt med alla focusable React Aria-komponenter (t.ex. Button, Link, etc.). Anpassade trigger-element, såsom tredjepartskomponenter och andra DOM-element, stöds också genom att de omsluts med <Pressable>-komponenten.

import { Pressable } from 'react-aria-components'

<DialogTrigger>
  <Pressable>
    <span role='button'>Trigger</span>
  </Pressable>
  <Popover>Med hjälp av Pressable kan vilket element som helst bli en trigger!</Popover>
</DialogTrigger>

Trigger

Observera att element under <Pressable> måste ha en ARIA-roll eller använda ett lämpligt semantiskt HTML-element så att skärmläsare kan läsa upp innehållet i verktygstipset. Detta gäller bara element som inte redan är focusable eller pressable. Se React Aria Popover Custom trigger för referens.

Med inputfält

Popover är inbyggt i samtliga inputfält i Midas. Det innebär att du kan använda Popover för att ge mer information om vad går att göra med label eller description. Använd propertyn popoverContent på inputfältet för att visa en Popover med mer information på ett enhetligt sätt.

import { TextField } from '@midas-ds/components'

<TextField
  label='E-post'
  description='Ange din e-postadress för att få nyhetsbrev.'
  popoverContent='Vi skickar ut nyhetsbrev med information om nya funktioner, uppdateringar och tips.'
/>

E-post

Ange din e-postadress för att få nyhetsbrev.

Riktlinjer

• I första hand skall elementet vara tydligt nog så användaren förstår innebörden. Popover är till för en design där detta inte är möjligt och vi måste gömma undan informationen.
• Popover kan också användas för att berätta mer information än vad som framkommer visuellt på knappen.
• Eftersom Popover kan husera vilka komponenter som helst kan det vara ett bra alternativ till Modal när det inte är mer komplext än t.ex en bekräftelseruta för fortsätt eller avbryt.

API

Popover

Name	Type	Default	Description
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
style	CSSProperties | ((values: DisclosureGroupRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	The inline style for the element. A function may be provided to compute the style based on component state.
className	string | ((values: DisclosureGroupRenderProps & { defaultClassName: string; }) => string)	-	The CSS className for the element. A function may be provided to compute the class based on component state.
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).
isOpen	boolean	-	Whether the overlay is open by default (controlled).
shouldFlip	boolean	true	Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
trigger	string	-	The name of the component that triggered the popover. This is reflected on the element as the data-trigger attribute, and can be used to provide specific styles for the popover depending on which element triggered it.
offset	number	4	The additional offset applied along the main axis between the element and its anchor element.
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.
isKeyboardDismissDisabled	boolean	false	Whether pressing the escape key to close the modal should be disabled.
placement	Placement	'bottom'	The placement of the element with respect to its anchor element.
containerPadding	number	12	The placement padding that should be applied between the element and its surrounding container.
crossOffset	number	0	The additional offset applied along the cross axis between the element and its anchor element.
triggerRef	RefObject<Element>	-	The ref for the element which the popover positions itself with respect to. When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.
boundaryElement	Element	document.body	Element that that serves as the positioning boundary.
scrollRef	RefObject<Element>	overlayRef	A ref for the scrollable region within the overlay.
shouldUpdatePosition	boolean	true	Whether the overlay should update its position automatically.
maxHeight	number	-	The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
arrowBoundaryOffset	number	0	The minimum distance the arrow's edge should be from the edge of the overlay element.
isNonModal	boolean	-	Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
isEntering	boolean	-	Whether the popover is currently performing an entry animation.
isExiting	boolean	-	Whether the popover is currently performing an exit animation.
UNSTABLE_portalContainer	Element	document.body	The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.

DialogTrigger