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

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.