Popover

Hjälptext, hjälpinnehåll

Storybook

React Aria

Komponent som används när användaren behöver extra information eller en liten uppsättning åtgärder utan att lämna den aktuella sidan. Till skillnad från Tooltip öppnas den vid klick och kan innehålla mer än bara en kort text, till exempel knappar, formulär eller andra interaktiva element.

import { Popover, DialogTrigger, Button, ButtonGroup, Heading, Text } from '@midas-ds/components'

<DialogTrigger>
  <Button
    variant='secondary'
    icon={Share2}
  >
    Dela
  </Button>
  <Popover>
    <Heading>Dela inköpslista</Heading>
    <Text>Välj hur du vill dela din inköpslista</Text>
    <ButtonGroup>
      <Button>Mejla</Button>
      <Button variant='secondary'>Kopiera texten</Button>
    </ButtonGroup>
  </Popover>
</DialogTrigger>

Användning

Använd Popover när informationen är relevant men inte tillräckligt viktig för att alltid visas.

Använd Popover för:

• För inställningar, förklaringar eller kompletterande åtgärder som hör till en specifik del av sidan.

Använd inte Popover för:

• Information som alltid bör vara synlig utan att användaren behöver öppna den.
• Viktig information eller kritiska åtgärder som användaren måste se eller agera på.
• Stora mängder text eller innehåll som bättre passar på en egen sida.

Exempel

Informationspopover

I de fall där det finns mer information men där informationen inte är kritisk eller viktig nog att alltid visas, kan en informationspopover användas. Då används <Info /> som trigger för att indikera att det finns mer information att ta del av. När användaren klickar på ikonen öppnas popovern med ytterligare information.

<Text>Hemkatalog</Text>
<DialogTrigger>
  <Pressable>
    <Info
      size={20}
      aria-label='Mer information om hemkatalogen'
    />
  </Pressable>
  <Popover>
    <Heading>Hemkatalog</Heading>
    <Text>
      I din hemkatalog kan du spara filer och dokument som du vill ha
      snabb åtkomst till. Det är en bra plats att organisera dina
      viktiga filer och hålla dem lättillgängliga.
    </Text>
  </Popover>
</DialogTrigger>

Hemkatalog

Tillsammans med inputkomponenter

Samtliga inmatningskomponenter har inbyggt stöd för informationspopover. Använd popover för att visa information som inte får plats i en label eller beskrivning. Detta visar en <Info /> bredvid rubriken. Innehållet i popover styrs av children och visas när användaren klickar på ikonen.

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

<TextField
  label='Mejladress'
  description='Ange din mejladress för att få nyhetsbrev.'
  popover={{
    children: 'Vi kommer att skicka nyhetsbrev till den här adressen.',
  }}
/>

Mejladress

Ange din mejladress för att få nyhetsbrev.

Popover med inställningar

För att ge användaren möjlighet att justera inställningar eller göra val utan att lämna sidan kan en popover med formulär användas.

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

  return (
    <DialogTrigger
      isOpen={isOpen}
      onOpenChange={setOpen}
    >
      <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>
        <Button
          style={{ marginTop: '1rem' }}
          onPress={() => setOpen(false)}
        >
          Spara
        </Button>
      </Popover>
    </DialogTrigger>
  )
}

Implementation

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.

Placering

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.

API

Popover

Name	Type	Default	Description
hideArrow	boolean	-
className	ClassNameOrFunction<PopoverRenderProps>	'react-aria-Popover'	The CSS className for the element. A function may be provided to compute the class based on component state.
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.
triggerRef	RefObject<Element | null>	-	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.
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.
offset	number	8	The additional offset applied along the main axis between the element and its anchor element.
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.
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.
boundaryElement	Element	document.body	Element that that serves as the positioning boundary.
arrowRef	RefObject<Element | null>	-	A ref for the popover arrow element.
scrollRef	RefObject<Element | null>	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.
isKeyboardDismissDisabled	boolean	false	Whether pressing the escape key to close the popover should be disabled. Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.
shouldCloseOnInteractOutside	((element: Element) => boolean)	-	When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the popover ref.
isOpen	boolean	-	Whether the overlay is open by default (controlled).
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).
children	ChildrenOrFunction<PopoverRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
style	StyleOrFunction<PopoverRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", PopoverRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot	string | null	-	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.

DialogTrigger