@devseed-ui/dropdown

Create a dropdown using a tethered element, to ensure that it is always displayed correctly. If there's not enough space it will automatically change the opening direction.

Example

---
<DevseedUiThemeProvider>
  <CollecticonsGlobalStyle /  >
  <Dropdown
    alignment="center"
    direction="down"
    triggerElement={props => (
      <Button
        variation="base-raised-light"
        useIcon={['chevron-down--small', 'after']}
        title="Open dropdown"
        {...props}
      >
        Dropdown
      </Button>
    )}
  >
    <React.Fragment>
      <DropTitle>Drop Title</DropTitle>
      <DropMenu>
        <li>
          <DropMenuItem>Menu item 1</DropMenuItem>
          <DropMenuItem>Menu item 2</DropMenuItem>
        </li>
      </DropMenu>
      <DropInset>
        <p>Inset Text</p>
      </DropInset>
    </React.Fragment>
  </Dropdown>
</DevseedUiThemeProvider>

Properties

rows:
  - Prop name: "id"
    Type: "string"
    Description: "An id for the dropdown"
    Default value: "n/a"
  - Prop name: "triggerElement"
    Type: "function"
    Description: "A function that returns a trigger element. The passed props must be attached to the trigger element, which can be anything."
    Default value: "n/a"
  - Prop name: "direction"
    Type: "oneOf ['up', 'down', 'left', 'right']"
    Description: "Sets opening direction of the dropdown"
    Default value: "down"
  - Prop name: "alignment"
    Type: "oneOf ['left', 'center', 'right', 'top', 'middle', 'bottom']"
    Description: "Sets the alignment of the dropdown box. ['left', 'center', 'right'] can only be used with ['up', 'down'] directions. ['top', 'middle', 'bottom'] can only be used with ['left', 'right'] directions."
    Default value: "center"
  - Prop name: "className"
    Type: "string"
    Description: "Additional classnames for the dropdown content box"
    Default value: "n/a"
  - Prop name: "children"
    Type: "node"
    Description: "Content for the dropdown"
    Default value: "n/a"

Structure

Besides the Dropdown component, the module also makes available a series of styles components to be used inside the dropdown.

rows:
  - Component: "DropTitle"
    Tag: "h6"
  - Component: "DropMenu"
    Tag: "ul"
  - Component: "DropMenuItem"
    Tag: "a"
  - Component: "DropInset"
    Tag: "div"

DropMenu

The DropMenu has properties to control how its items are displayed:

rows:
  - Prop name: "iconified"
    Type: "boolean"
    Description: "Adds space for the items to receive a collecticon on the left side"
    Default value: "false"
  - Prop name: "selectable"
    Type: "boolean"
    Description: "Adds space for the items to receive a tick mark on the right side"
    Default value: "false"

---
<DevseedUiThemeProvider>
  <CollecticonsGlobalStyle />
  <Dropdown
    alignment="center"
    direction="down"
    triggerElement={props => (
      <Button
        variation="base-raised-light"
        useIcon={['chevron-down--small', 'after']}
        title="Open dropdown"
        {...props}
      >
        Dropdown
      </Button>
    )}
  >
    <DropMenu iconified>
      <li>
        <DropMenuItem useIcon='brand-development-seed'>Iconified 1</DropMenuItem>
        <DropMenuItem useIcon='brand-development-seed-2'>Iconified 2</DropMenuItem>
      </li>
    </DropMenu>
    <DropMenu selectable>
      <li>
        <DropMenuItem active>Selected</DropMenuItem>
        <DropMenuItem>Not selected</DropMenuItem>
      </li>
    </DropMenu>
  </Dropdown>
</DevseedUiThemeProvider>

DropMenuItem

Element to be used with DropMenu to display menu items. If the DropMenu is set as selectable, an active property can be passed which will display a tick mark.