popover
Popover é utilizado para mostrar mais informações na página.
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
trigger | The trigger method to display the Popover | false | click | clickhover |
variation | The variation of the Popover. | false | neutral | neutralprimaryinfosuccessnoticedanger |
active | If Popover is displayed | false | false | boolean |
content | Content of the Popover | true | undefined | ReactNode |
delay | Delay time to close the Popover | false | 300 | number |
disableClickAway | If click away of the Popover is disabled | false | false | boolean |
hasCloseButton | If Popover has close button | false | false | boolean |
onClose | Callback to be called when Popover has been closed | false | undefined | () => void |
onOpen | Callback to be called when Popover has been opened | false | undefined | () => void |
placement | Popover placement | false | bottom | leftbottomrighttopbottomLeftbottomRightleftBottomleftToprightBottomrightToptopLefttopRight |
title | Popover title | false | undefined | string |
overline | Popover overline | false | undefined | string |
children | Trigger of the Popover | true | undefined | ReactNode |
*valores gerados automaticamente.
propriedades para estilização (styled props)
Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:
guia de design
- Tem guia de uso.
- Tem guia de conteúdo.
- Usa os design tokens.
- Tem símbolo no Figma.
- Possui motion.
- Possui versão web.
- Possui versão responsiva.
- Possui versão mobile.
- É acessível via leitor de tela.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).
Migração do United para Olist Design System
Propriedades
| United | Olist Design System |
|---|---|
| placement | placement |
| title | title |
| content | content |
| size | size |
| trigger | trigger |
| variation | variation |
| noBorder | ❌ |
| disableClickAway | disableClickAway |
| hasCloseIcon | hasCloseButton |
| active | active |
| onClose | onClose |
| onOpen | onOpen |
| delay | delay |
| ❌ | overline |
Variações Existentes
| United | Olist Design System |
|---|---|
| primary | primary |
| danger | danger |
| alternate | success |
| accent | info |
| warning | notice |
| ❌ | neutral |