Popovers are small overlays that open on demand and provide additional information and actions.

Overview

Resources

Install

yarn add @camp/popover

Upgrading to Next Gen

🎨 Updated color palette and style refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

💡 Simpler, more performant DX: The new Popover uses less code and requires less code to implement, speeding up developer efficiency all around.

👷 Updated tooling under the hood: We moved to using Floating UI under the hood, gaining functional, performance, and accessibility improvements.

🛠️ Accessibility improvements: The new Popover now follows the industry best practices of keyboard navigation while keeping all of the old Popover’s functionality intact via props. See implementation details below.

Previous implementation

The previous Popover didn’t manage its own state, instead making the engineer handle state on their end. It also required a Popover.Anchor element as well as a Popover element.

import Popover from '@activecampaign/camp-components-popover';
import Button from '@activecampaign/camp-components-button';
 
export default function () {
  const [hasPopover, setHasPopover] = useState(false);
 
  return (
    <Popover.Anchor onDismiss={() => setHasPopover(false)}>
      <Button onClick={() => setHasPopover(true)}>Toggle Popover</Button>
      {hasPopover && <Popover placement="bottom">🍿</Popover>}
    </Popover.Anchor>
  );
}

New implementation

The new Popover manages state internally by default (but it can also be controlled externally - see examples below). It also opts only for one Popover element around your trigger element. See below for the simplified code providing the same experience.

import { Popover } from '@camp/popover';
import Button from '@camp/button';
 
export default function () {
  return (
    <Popover content="🍿">
      <Button>Click to Open the Popover</Button>
    </Popover>
  );
}

Migration steps

1. Update import statements: replace import Popover from @activecampaign/camp-components-popover with import { Popover } from @camp/popover
2. Replace Popover.Anchor with Popover: The anchor that used to surround your trigger element is now just the Popover component.
3. Move the contents of your Popover to the content prop: The content prop accepts strings and JSX Elements (anything that can be passed into React.ReactNode).
4. Change any other necessary props: Many props remained the same (e.g., placement and offset), but others related to accessibility and focus have changed. Pay close attention to the autofocus and focusTrap props if they are needed for your situation.

Variations

Default Popover - Placement

Using the new DX described above, you can still add custom placement to the Popover component. See below for some possible placements:

And here is an example of how to add a custom placement:

<Popover content="🍿" placement="top-start">
  <Button>Click to Open the Popover</Button>
</Popover>

Custom Offset

You can customize the offset as well (add the number that represents pixels).

<Popover placement="right" offset={20} content="🍿">
  <Link as="button">Custom Offset Popover</Link>
</Popover>

Custom Max-Height

You can also set a custom max-height for your popover (defaults to 240px).

<Popover
  content={
    <div style={{ padding: '10px' }}>
      <Text type="body" as="p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </Text>
      <Text type="body" as="p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </Text>
      <Text type="body" as="p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </Text>
    </div>
  }
  maxHeight={100}
>
  <Link as="button">Custom Max-Height Popover</Link>
</Popover>

Autofocus

By default, the Popover follows best practices when it comes to accessibility and keyboard navigation. When the new Popover is opened, the tab focus does not change. The user can then tab into it and keep tabbing through the page. However, we offer a couple of props to change this experience. The first is autofocus, which will allow the first tab-able element in the Popover to be focused.

<Popover
  placement="right"
  content={
    <div style={{ padding: '20px' }}>
      <button>Should Be Focused</button>
    </div>
  }
  autofocus
>
  <Link as="button">Autofocus Popover</Link>
</Popover>

Focus Trapping

When it is helpful for the user to be only tabbing through the contents of the Popover as you would a modal, you can opt in to this experience by using the focusTrap prop.

Note: this is not best practice except when you are reducing the cognitive overhead of the user to a subset of decisions to be made in the Popover. If you choose this, you should add a button to be able to close the Popover. Otherwise, the user will have to know to press the Escape key.

<Popover
  placement="right"
  content={
    <div style={{ padding: '20px' }}>
      <button>Should Be Focused</button>
    </div>
  }
  focusTrap
>
  <Link as="button">Autofocus Popover</Link>
</Popover>

Controlled Popover

You can also manage the state of the popover from the outside.

const [isOpen, setIsOpen] = React.useState(false);
 
<Popover
  className="paddedPopover"
  open={isOpen}
  onOpenChange={setIsOpen}
  content={
    <>
      <Button onClick={() => setIsOpen(!isOpen)}>{'Closes Popover'}</Button>
    </>
  }
>
  <Button onClick={() => setIsOpen(!isOpen)}>Toggle Popover</Button>
</Popover>;

Accessibility

Keyboard support

• Move focus to the Popover contents using the tab key
• If autofocus is enabled, the user will be automatically focused on the first tab-able element inside the Popover.
• By default, the user can tab out of the Popover to the rest of the page.
• You can choose to focusTrap the user (see above), but you should add a Button to be able to close it. The user can also press the Escape key to close it.