![](https://i.imgur.com/HLJeV1R.jpg) # Objetivo Essa issue especifica um conjunto de templates para o atual componente BBBottomSheet. Eles foram baseados nos estudos e discussões que tivemos nas últimas semanas e se dividem em dois grupos: Bottom Sheets informativas e Bottom Sheets de ação. As Bottom Sheets informativas devem substituir as atuais dialogs (BBAlert). Por fornecer mais espaço para conteúdo, esse template vai nos permitir oferecer ao usuário instruções e ações mais claras nos momentos em que precisamos da sua atenção. Isso é importante porque uma das limitações conhecidas das nossas atuais dialogs é o limitado espaço para conteúdo — especialmente para os labels dos botões — o que acaba implicando em instruções pouco claras e ações ambíguas. Já as Bottom Sheets de ação oferecem uma alternativa para situações em que precisamos de uma ação pontual do usuário durante uma tarefa, como a escolha de uma data ou de uma opção numa lista. Esse template vai nos permite desenhar experiências mais simples e focadas, ao pedir dados aos usuário sem que ele perca o contexto da tarefa principal. E, por estarem fixos na base da tela, ambos os tipos de Bottom Sheets favorecem alcançabilidade, especialmente em telas maiores. ## Bottom Sheets informativas Bottom Sheets informativas são úteis em casos em que precisamos interromper o usuário com o alguma aviso importante ou erro. ![](https://i.imgur.com/pp7cwLI.jpg) ### Alerta ([Specs](https://marvelapp.com/24276j0g/screen/70368078)) - Avisos gerais, novidades ou outras informações úteis na abertura do app ou antes do uso de uma funcionalidade - Informações adicionais sobre algum dado da UI, como mais detalhadas sobre uma termo, taxa ou valor - Mensagens rápidas de sucesso, como “Seu dispositivo está liberado” ### Erros ou confirmações críticas ([Specs](https://marvelapp.com/24276j0g/screen/70857047)) - Erros gerais como senha incorreta, senha bloqueada ou saldo insuficiente - Confirmações de ações destrutivas como excluir categoria financeira ou cancelar uma operação ### Considerações - O ícone acima do título é opcional - O texto acima do título (lead) é opcional - O texto de descrição é opcional - O caption abaixo da descrição é opcional (útil para código de erros) - Os botões do rodapé podem ser dispostos em colunas ou linhas - O rodapé pode conter no máximo 2 botões --- ## Bottom Sheets de ação Para uso em situações em que precisamos de um ação ou dado pontual do usuário, como a seleção de uma data, de um item numa lista, ou avaliação de satisfação, por exemplo. ![](https://i.imgur.com/c8JhiaA.jpg) ### Lista ([Specs](https://marvelapp.com/24276j0g/screen/70368088)) Bottom Sheets com listas podem podem ser usadas para oferecer um grupo limitado de opções ao usuário. Como não há botão de confirmar nesse template, ele é adequado para seleção de opções não sensíveis, em que continuar sem confirmar não gera risco ou frustração. - Listar opções adicionais de um menu (menu overflow) - Listar formas de upload de arquivos (galeria, câmera) ### Lista com radio button ([Specs](https://marvelapp.com/24276j0g/screen/70368090)) Bottom Sheets de lista com radio buttons exigem que o usuário confirme o item selecionado tocando no botão “Confirmar”. São úteis quando precisamos que o usuário selecione uma opção sensível, e em que continuar sem confirmar pode gerar risco ou frustração. - Escolher o titular da conta - Escolher um cartão de crédito - Escolher número de parcelas ### Lista em grid ([Specs](https://marvelapp.com/24276j0g/screen/70368073)) Úteis para quando as opções oferecidas se comportam melhor no formato grid, por conta do uso de espaço e organização visual geral. - Selecionar uma categoria financeira - Selecionar um modalidade de produto - Selecionar um segmento (pessoa física, jurídica) ### Date picker ([Specs](https://marvelapp.com/24276j0g/screen/70368072)) Bottom Sheets com pickers de data exibem uma visão completa de calendário. São úteis em situações em que é preciso selecionar um range de data, ou quando mostrar visão completa de dias, meses e semanas ajuda o usuário na escolha. - Selecionar uma data para agendamento de uma transação - Adicionar um evento na agenda financeira - Selecionar datas ida de volta na compra de passagens ### Lista com busca ([Specs](https://marvelapp.com/24276j0g/screen/70368089)) Úteis para situações em que a lista de opções é muito longa e/ou é preciso buscar dados do servidor. - Encontrar uma cidade, loja ou agência - Encontrar um contato para transferência - Encontrar um lançamento no extrato ### Considerações - O ícone de fechar é obrigatório em Bottom Sheets de ação - O texto de descrição abaixo do título é opcional ([exemplo](https://marvelapp.com/24276j0g/screen/70655605)) - O ícone nos itens de lista é opcional --- ## Outras especificações - Se ainda não foi implementado, seria útil se as Bottom Sheets incluíssem uma propriedade para definir se ela deve ou não fechar quando o usuário toca no overlay - O ícone de fechar do canto superior direito é usado apenas nas Bottom Sheets de ação. Em Bottom Sheets informativas, o componente é fechado pelos botões no rodapé. O comportamento durante rolagem e outras métricas gerais estão [aqui](https://marvelapp.com/24276j0g/screen/70655287).