Migrate from DropdownMenu to Dropdown

This is a guide to help you migrate from the deprecated component DropdownMenu, to the component Dropdown.

Steps to migrate

Step 1 - Change the component import

From

import { DropdownMenu } from '@resultadosdigitais/tangram-components';

To

import { Dropdown } from '@resultadosdigitais/tangram-components';

Step 2 - Change the declarations

From

<DropdownMenu id="dropdownBase">
  <DropdownMenu.Trigger>Click here</DropdownMenu.Trigger>
  <DropdownMenu.List>
    <Dropdown.Header>
      <Search />
    </Dropdown.Header>
    <DropdownMenu.Item>Item 01</DropdownMenu.Item>
    <DropdownMenu.Item>Item 02</DropdownMenu.Item>
    <DropdownMenu.Item>Item 03</DropdownMenu.Item>
    <DropdownMenu.Item>Item 04</DropdownMenu.Item>
    <Dropdown.Footer>
      <Button kind={Button.kinds.secondary} fluid>
        Action
      </Button>
    </Dropdown.Footer>
  </DropdownMenu.List>
</DropdownMenu>

To

<Dropdown>
  <Dropdown.Trigger>Click here</Dropdown.Trigger>
  <Dropdown.List>
    <Dropdown.Header>
      <Search />
    </Dropdown.Header>
    <Dropdown.Item>Item 01</Dropdown.Item>
    <Dropdown.Item>Item 02</Dropdown.Item>
    <Dropdown.Item>Item 03</Dropdown.Item>
    <Dropdown.Item>Item 04</Dropdown.Item>
    <Dropdown.Footer>
      <Button kind={Button.kinds.secondary} fluid>
        Action
      </Button>
    </Dropdown.Footer>
  </Dropdown.List>
</Dropdown>

Step 3 - Change the trigger

From

<Dropdown>
  <Dropdown.Trigger>Click here</Dropdown.Trigger>
  <Dropdown.List>
    <Dropdown.Header>
      <Search />
    </Dropdown.Header>
    <Dropdown.Item>Item 01</Dropdown.Item>
    <Dropdown.Item>Item 02</Dropdown.Item>
    <Dropdown.Item>Item 03</Dropdown.Item>
    <Dropdown.Item>Item 04</Dropdown.Item>
    <Dropdown.Footer>
      <Button kind={Button.kinds.secondary} fluid>
        Action
      </Button>
    </Dropdown.Footer>
  </Dropdown.List>
</Dropdown>

To

<Dropdown
  renderAnchor={({ anchorRef, toggle }) => (
    <Button onClick={toggle} ref={anchorRef} kind={Button.kinds.secondary}>
      Click here
    </Button>
  )}
>
  <Dropdown.List>
    <Dropdown.Header>
      <Search />
    </Dropdown.Header>
    <Dropdown.Item>Item 01</Dropdown.Item>
    <Dropdown.Item>Item 02</Dropdown.Item>
    <Dropdown.Item>Item 03</Dropdown.Item>
    <Dropdown.Item>Item 04</Dropdown.Item>
    <Dropdown.Footer>
      <Button kind={Button.kinds.secondary} fluid>
        Action
      </Button>
    </Dropdown.Footer>
  </Dropdown.List>
</Dropdown>

Step 4 - Change the subcompoents

From

<Dropdown
  renderAnchor={({ anchorRef, toggle }) => (
    <Button onClick={toggle} ref={anchorRef} kind={Button.kinds.secondary}>
      Click here
    </Button>
  )}
>
  <Dropdown.List>
    <Dropdown.Header>
      <Search />
    </Dropdown.Header>
    <Dropdown.Item>Item 01</Dropdown.Item>
    <Dropdown.Item>Item 02</Dropdown.Item>
    <Dropdown.Item>Item 03</Dropdown.Item>
    <Dropdown.Item>Item 04</Dropdown.Item>
    <Dropdown.Footer>
      <Button kind={Button.kinds.secondary} fluid>
        Action
      </Button>
    </Dropdown.Footer>
  </Dropdown.List>
</Dropdown>

To

<Dropdown
  renderAnchor={({ anchorRef, toggle }) => (
    <Button onClick={toggle} ref={anchorRef} kind={Button.kinds.secondary}>
      Click here
    </Button>
  )}
>
  <Dropdown.Header>
    <Search />
  </Dropdown.Header>
  <Dropdown.Container>
    <Dropdown.Item label="Item 01" />
    <Dropdown.Item label="Item 02" />
    <Dropdown.Item label="Item 03" />
    <Dropdown.Item label="Item 04" />
  </Dropdown.Container>
  <Dropdown.Footer>
    <Button kind={Button.kinds.secondary} fluid>
      Action
    </Button>
  </Dropdown.Footer>
</Dropdown>

Subcomponents migration

Subcomponents migration

DropdownMenu	Dropdown
DropdownMenu.Divider	Dropdown.Divider
Dropdown.Header	Dropdown.Header
Dropdown.Footer	Dropdown.Footer
DropdownMenu.Item	Dropdown.Item
DropdownMenu.Title	Dropdown.Title
DropdownMenu.List	Deprecated
DropdownMenu.Trigger	Deprecated

Feedback