Migrar do DropdownMenu para o Dropdown

Este é um guia para te ajudar a migrar do componente DropdownMenu descontinuado, para o componente Dropdown.

Passos para migrar

Passo 1 - Mudar o import

De

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

Para

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

Passo 2 - Mudar as declarações

De

<DropdownMenu id="dropdownBase">
  <DropdownMenu.Trigger>Clique aqui</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>
        Ação
      </Button>
    </Dropdown.Footer>
  </DropdownMenu.List>
</DropdownMenu>

Para

<Dropdown>
  <Dropdown.Trigger>Clique aqui</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>
        Ação
      </Button>
    </Dropdown.Footer>
  </Dropdown.List>
</Dropdown>

Passo 3 - Mude o trigger

De

<Dropdown>
  <Dropdown.Trigger>Clique aqui</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>
        Ação
      </Button>
    </Dropdown.Footer>
  </Dropdown.List>
</Dropdown>

Para

<Dropdown
  renderAnchor={({ anchorRef, toggle }) => (
    <Button onClick={toggle} ref={anchorRef} kind={Button.kinds.secondary}>
      Clique aqui
    </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>
        Ação
      </Button>
    </Dropdown.Footer>
  </Dropdown.List>
</Dropdown>

Passo 4 - Mude os subcomponentes

De

<Dropdown
  renderAnchor={({ anchorRef, toggle }) => (
    <Button onClick={toggle} ref={anchorRef} kind={Button.kinds.secondary}>
      Clique aqui
    </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>
        Ação
      </Button>
    </Dropdown.Footer>
  </Dropdown.List>
</Dropdown>

Para

<Dropdown
  renderAnchor={({ anchorRef, toggle }) => (
    <Button onClick={toggle} ref={anchorRef} kind={Button.kinds.secondary}>
      Clique aqui
    </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>
      Ação
    </Button>
  </Dropdown.Footer>
</Dropdown>

Migração dos subcomponentes

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