popover

import { Popover } from "woly";

Popover is based on Surface and opens on click on element or custom logic.

For example, Select can be created using InputContainer, Popover and List. Also, DateSelect can be created with Calendar, InputContainer and Popover.

Example

You can set the top or the bottom position of Popover. If you scroll to the bottom of page and there is no place for Popover to show it will be automatically positioned to the top of triggered element.

Hello! This is Popover!
This is top Popover!
<Playground>
  <div style={{ padding: '150px 0', display: 'flex' }}>
    <div style={{ padding: '0 10px' }}>
      <Popover isOpen={false} content={<div style={{ padding: 12 }}>Hello! This is Popover!</div>}>
        <Button text="Open Popover" onClick={() => {}} priority="primary" />
      </Popover>
    </div>
    <Popover
      isOpen={false}
      position="top"
      content={<div style={{ padding: 12 }}>This is top Popover!</div>}
    >
      <ButtonIcon icon={<IconSearch />} onClick={() => {}} priority="primary" />
    </Popover>
  </div>
</Playground>

Menu List

<Playground>
  <block.L>
    <div style={{ padding: '0 0 200px', display: 'flex' }}>
      <Popover
        isOpen={false}
        content={
          <ListContainer priority="primary" style={{ width: '100%' }} as="ul">
            {links.map(({ id, content, disabled }) => (
              <ListItem
                as="a"
                disabled={disabled}
                href={`#${id}`}
                iconLeft={<IconInfo />}
                iconRight={<IconInfo />}
                key={id}
                text={content}
                priority="primary"
              />
            ))}
          </ListContainer>
        }
      >
        <Button text="Toggle menu" onClick={() => {}} priority="primary" />
      </Popover>
    </div>
  </block.L>
</Playground>

Focusable menu

<Playground>
  <block.L>
    <div style={{ padding: '0 0 100px', display: 'flex' }}>
      <Popover
        isOpen={false}
        content={
          <ul style={{ listStyleType: 'none' }}>
            <li>
              <a href="">Home</a>
            </li>
            <li>
              <a href="">Shop</a>
            </li>
            <li>
              <a href="">About</a>
            </li>
          </ul>
        }
      >
        <Button text="Toggle menu" onClick={() => console.log('wow')} priority="primary" />
      </Popover>
    </div>
  </block.L>
</Playground>

Props

NameTypeDefaultDescription
childrenReact.ReactNodeTrigger element of Popover
contentReact.ReactNodeContent of Popover
isOpenboolean'false'Whether the component is visible or not
positiontop or bottom'bottom'Initial position of Popover
prioritystring'secondary'Priority prop to style Popover component