Modal

Tipo: Core

• DesignersFigma ↗Design System 2.0
• Devs · HTML/CSSmds-styles ↗Storybook com classes e exemplos
• Devs · Angularmds-angular ↗Storybook com inputs e outputs

Definição Funcional

A Modal é uma janela centralizada que interrompe o fluxo do usuário para exigir uma ação ou fornecer informações detalhadas. Ela bloqueia a interação com a página principal até que seja fechada ou confirmada.

Diretrizes de Comportamento

• Uso: Visualização de detalhes de carga, alertas críticos, diálogos de confirmação ou mensagens de erro.
• Título: Deve ser curto e direto. Se for uma pergunta, use pontuação final.
  • Exemplo: Excluir rota?
• Uso de Reticências (…): Se o botão que abre a modal for, por exemplo, “Configurar…”, a modal deve ter o título “Configurações”.
• Hierarquia: Coloque a informação mais importante no início do texto.

Sugestão padronização

Adotar os nomes Modal e Drawer como componentes distintos no Design System, unificando o “FloatPanel” do Angular sob essas duas categorias.

• Drawer (Painel Lateral): Focado em fluxos de trabalho. Ideal para formulários de cadastro ou edição. Por abrir na lateral, ele permite que o usuário ainda veja parte da tabela ou mapa ao fundo, mantendo o contexto.
• Modal (Diálogo Central): Focado em interrupção ou detalhamento. Ideal para confirmações críticas (Excluir), alertas ou visualização de dados que ocupam muito espaço e exigem foco total.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Modal do Storybook:

<div id="mds-overlay" class="mds-overlay mds-overlay--primary  mds-overlay--center"" style="z-index: 100; position: fixed; inset: 0; background: rgba(0,0,0,0.5);">
  <section role="dialog" class="mds-float-panel mds-float-panel--modal mds-float-panel--md  style="display: flex; flex-direction: column;">
    <header class="mds-float-panel__header">
      <button class="mds-btn mds-btn--control mds-btn--sm mds-float-panel__back">
        <span class="mds-btn__icon"><i data-lucide="arrow-left"></i></span>
      </button>
      <h2 class="title" id="floatPanel__title">Edição de Cadastro</h2>
      <div class="mds-float-panel__header__actions">
        <button class="mds-btn mds-btn--control mds-btn--icon-only mds-btn--sm mds-float-panel__close--modal">
          <span class="mds-btn__icon"><i data-lucide="x" class="mds-icon--mds mds-icon--sm"></i></span>
        </button>
      </div>
    </header>
    <div class="mds-float-panel__body padding--md" style="flex: 1; overflow-y: auto;">
      <p>Mussum Ipsum, cacilds vidis litro abertis. Delegadis gente finis, bibendum egestas augue arcu ut est.</p>
    </div>
    <footer class="mds-float-panel__actions">
      <button class="mds-btn mds-btn--primary mds-btn--outline">
        <span class="mds-btn__label">Cancelar</span>
      </button>
      <button class="mds-btn mds-btn--primary">
        <span class="mds-btn__label">Salvar</span>
      </button>
    </footer>
  </section>
</div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
type	modal drawer	modal
size	xs sm md lg xl xxxl	md
justify	center right left	center
isOpen	true · false	true

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	.mds-float-panel .mds-overlay
Elementos	.mds-float-panel__actions .mds-float-panel__back .mds-float-panel__body .mds-float-panel__close .mds-float-panel__header .mds-float-panel__header__actions .mds-float-panel__header__options
Modificadores	.mds-float-panel__close--drawer .mds-float-panel__close--modal .mds-float-panel--bordered .mds-float-panel--drawer .mds-float-panel--full-height .mds-float-panel--fullscreen .mds-float-panel--modal .mds-nav-tabs__item--active .mds-overlay--center .mds-overlay--hide .mds-overlay--left .mds-overlay--primary .mds-overlay--right

Angular (mds-angular)

Seletor

mds-float-panel

O FloatPanel (Painel Flutuante) exibe o conteúdo que requer interação do usuário, em uma camada acima da página.

Inputs

Input	Tipo	Padrão	Descrição
className	string	''	Classe CSS customizada adicionada ao host
panelOpened ⇄	boolean	false	Abre o painel
fullscreen ⇄	boolean	false	Painel em tela cheia
fullscreenTogglable	boolean	true	Permite alternar para tela-cheia
forceFullscreen	boolean	false	Força ficar em tela cheia
bodyPadding	boolean	true	Exibe o padding padrão no body
bodyAdditionalClass	string	''	Classe adicional para o body
bodyScrollDisabled	boolean	false	Desativa o scroll no body
showHeader	boolean	true	Exibe o header do painel
showFooter	boolean	true	Exibe o footer do painel
loading	boolean	false	Exibe loading do painel
closeOnEsc	boolean	true	Permite fechar o painel no ESC
size	MdsSizesFloatPanel	'md'	Tamanho do painel
label	string	''	Titulo da modal
type	MdsFloatPanelTypes	'modal'	Tipo do painel
drawerPosition	MdsFloatPanelDrawerPositions	'right'	Posição do drawer
preventClose	boolean	false	Exibe alerta para prevenir o fechamento da modal
preventCloseText	string	Existem dados não salvos que serão perdidos, deseja fechar…	Texto exibido no alerta para prevenir o fechamento da modal
bordered	boolean	false	Modo do float panel com bordas internas e cor de fundo no body
forceMobile	boolean	false	Força o comportamento de mobile

⇄ = binding bidirecional ([(input)]).

Outputs

Output	Payload	Descrição
onClose	void	Eventos
onEscape	void	—
onOpen	void	—

Slots

Conteúdo projetado com o atributo data-position:

• data-position="before-header"
• data-position="panel-subtitle"
• data-position="after-title"
• data-position="actions"
• data-position="before-content"
• data-position="after-content"
• data-position="footer"
• data-position="content"

Visão ao vivo

Figma

Modal — Figma (Design System 2.0) ↗

HTML/CSS

Storybook mds-styles (HTML/CSS) — components-floatpanel ↗

Angular

Storybook mds-angular — components-floatpanel ↗

Componentes relacionados

• Drawer