# Sistema de design Elastic UI ## Elastic UI Prévia da interface do sistema de design Filtre o fluxo de eventos por mensagem ou gravidade, salve eventos individuais, limpe um resultado vazio e alterne entre a aparência clara e a escura. ## Elastic UI Referência de design do sistema de design Elastic UI 123.0.0 com tema Borealis 8.1.0 e React 18.3.1. As tabelas usam nomes do JSON do tema publicado; são chaves de exportação, não caminhos literais de objetos useEuiTheme. A prévia usa o tema nativo de React API. ### Cores semânticas do Borealis | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | euiColorPrimary | light: #0B64DD; dark: #61A2FF | Nomes publicados na exportação do tema. Em React, use a função semântica correspondente por meio de useEuiTheme, em vez de fixar esses valores no código. | | euiColorSuccess | light: #008A5E; dark: #24C292 | Nomes publicados na exportação do tema. Em React, use a função semântica correspondente por meio de useEuiTheme, em vez de fixar esses valores no código. | | euiColorWarning | light: #FACB3D; dark: #FACB3D | Nomes publicados na exportação do tema. Em React, use a função semântica correspondente por meio de useEuiTheme, em vez de fixar esses valores no código. | | euiColorDanger | light: #C61E25; dark: #F6726A | Nomes publicados na exportação do tema. Em React, use a função semântica correspondente por meio de useEuiTheme, em vez de fixar esses valores no código. | | euiColorEmptyShade | light: #FFFFFF; dark: #111C2C | Nomes publicados na exportação do tema. Em React, use a função semântica correspondente por meio de useEuiTheme, em vez de fixar esses valores no código. | | euiColorFullShade | light: #07101F; dark: #FFFFFF | Nomes publicados na exportação do tema. Em React, use a função semântica correspondente por meio de useEuiTheme, em vez de fixar esses valores no código. | | euiPageBackgroundColor | light: #ECF1F9; dark: #07101F | Nomes publicados na exportação do tema. Em React, use a função semântica correspondente por meio de useEuiTheme, em vez de fixar esses valores no código. | | euiTextColor | light: #384861; dark: #B4C1D5 | Nomes publicados na exportação do tema. Em React, use a função semântica correspondente por meio de useEuiTheme, em vez de fixar esses valores no código. | | euiTextSubduedColor | light: #516381; dark: #98A8C3 | Nomes publicados na exportação do tema. Em React, use a função semântica correspondente por meio de useEuiTheme, em vez de fixar esses valores no código. | ### Escala de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | euiSizeXS | 4px | Use tamanhos correspondentes de EuiSpacer/FlexGroup para manter o ritmo do layout; na exportação deste tema, a base é 16px. | | euiSizeS | 8px | Use tamanhos correspondentes de EuiSpacer/FlexGroup para manter o ritmo do layout; na exportação deste tema, a base é 16px. | | euiSizeM | 12px | Use tamanhos correspondentes de EuiSpacer/FlexGroup para manter o ritmo do layout; na exportação deste tema, a base é 16px. | | euiSize | 16px | Use tamanhos correspondentes de EuiSpacer/FlexGroup para manter o ritmo do layout; na exportação deste tema, a base é 16px. | | euiSizeL | 24px | Use tamanhos correspondentes de EuiSpacer/FlexGroup para manter o ritmo do layout; na exportação deste tema, a base é 16px. | | euiSizeXL | 32px | Use tamanhos correspondentes de EuiSpacer/FlexGroup para manter o ritmo do layout; na exportação deste tema, a base é 16px. | | euiSizeXXL | 40px | Use tamanhos correspondentes de EuiSpacer/FlexGroup para manter o ritmo do layout; na exportação deste tema, a base é 16px. | ### Tipografia | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | euiFontSizeXS | 12px | Referência tipográfica publicada. Use as variantes de EuiText/EuiTitle para estabelecer a hierarquia dos componentes. | | euiFontSizeS | 14px | Referência tipográfica publicada. Use as variantes de EuiText/EuiTitle para estabelecer a hierarquia dos componentes. | | euiFontSize | 14px | Referência tipográfica publicada. Use as variantes de EuiText/EuiTitle para estabelecer a hierarquia dos componentes. | | euiFontSizeM | 16px | Referência tipográfica publicada. Use as variantes de EuiText/EuiTitle para estabelecer a hierarquia dos componentes. | | euiFontSizeL | 20px | Referência tipográfica publicada. Use as variantes de EuiText/EuiTitle para estabelecer a hierarquia dos componentes. | | euiFontSizeXL | 24px | Referência tipográfica publicada. Use as variantes de EuiText/EuiTitle para estabelecer a hierarquia dos componentes. | | euiFontSizeXXL | 30px | Referência tipográfica publicada. Use as variantes de EuiText/EuiTitle para estabelecer a hierarquia dos componentes. | | euiLineHeight | 1.5 | Referência tipográfica publicada. Use as variantes de EuiText/EuiTitle para estabelecer a hierarquia dos componentes. | ### Bordas e formas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | euiBorderWidthThin | 1px | Diferencie formas em linha, de controles, de painéis e de molduras; um único raio de canto universal apagaria essa hierarquia. | | euiBorderWidthThick | 2px | Diferencie formas em linha, de controles, de painéis e de molduras; um único raio de canto universal apagaria essa hierarquia. | | euiBorderColor | #E3E8F2 | Diferencie formas em linha, de controles, de painéis e de molduras; um único raio de canto universal apagaria essa hierarquia. | | euiBorderRadiusInline | 4px | Diferencie formas em linha, de controles, de painéis e de molduras; um único raio de canto universal apagaria essa hierarquia. | | euiBorderRadiusControl | 8px | Diferencie formas em linha, de controles, de painéis e de molduras; um único raio de canto universal apagaria essa hierarquia. | | euiBorderRadiusPanel | 12px | Diferencie formas em linha, de controles, de painéis e de molduras; um único raio de canto universal apagaria essa hierarquia. | | euiBorderRadiusFrame | 16px | Diferencie formas em linha, de controles, de painéis e de molduras; um único raio de canto universal apagaria essa hierarquia. | ### Foco e movimento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | euiFocusRingSize | 2px | Mantenha o comportamento nativo de foco e movimento, sem substituir os seletores internos .eui. | | euiFocusBackgroundColor | #ECF1F9 | Mantenha o comportamento nativo de foco e movimento, sem substituir os seletores internos .eui. | | euiAnimSpeedExtraFast | 90ms | Mantenha o comportamento nativo de foco e movimento, sem substituir os seletores internos .eui. | | euiAnimSpeedFast | 150ms | Mantenha o comportamento nativo de foco e movimento, sem substituir os seletores internos .eui. | | euiAnimSpeedNormal | 250ms | Mantenha o comportamento nativo de foco e movimento, sem substituir os seletores internos .eui. | | euiAnimSpeedSlow | 350ms | Mantenha o comportamento nativo de foco e movimento, sem substituir os seletores internos .eui. | ### Contrato nativo de API neste explorador | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | EuiProvider | colorMode="light" \| "dark" | Fornece o contexto do tema e os estilos Emotion. | | useEuiTheme | { euiTheme } | Resolve cores semânticas para elementos personalizados e EuiHealth. | | EuiBasicTable | items · itemId · columns | Renderiza a coleção visível controlada usando IDs estáveis. | | EuiFieldSearch | value · onChange · incremental | A aplicação filtra uma coleção local de seis eventos. | | EuiButtonGroup | options · idSelected · onChange | Filtro de gravidade controlado com legenda visível. | | EuiHealth | color + readable child label | Um ponto de status complementa a indicação textual da gravidade, mas não a substitui. | ## Elastic UI Guia completo do sistema de design Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Elastic UI Estrutura do explorador do sistema de design ### Um espaço de investigação, não um painel genérico > O exemplo contém três estatísticas compactas de resumo e um único fluxo de eventos. Um campo de pesquisa e um grupo de gravidade filtram esse fluxo; cada linha oferece uma ação independente para salvar. Manter a ação junto ao evento permite que o leitor reúna evidências sem sair do contexto filtrado. O resumo informa explicitamente a contagem de eventos de exemplo, sem alegar que se trate de tráfego em tempo real. ### Use o limite atual do tema Este exemplo combina EUI 123.0.0 com Borealis 8.1.0. Os valores de referência vêm desse tema publicado, não de uma captura de tela antiga de Amsterdam. EuiProvider gerencia o modo visual e o contexto de estilos. O estado da aplicação permanece fora de qualquer cálculo do tema; assim, mudar a aparência não redefine os eventos salvos nem a consulta atual. ## Elastic UI Funções semânticas de cor do sistema de design ### Use a gravidade como uma relação significativa Neste aplicativo, Info usa a função primária, Warning usa a função de aviso e Error usa a função de perigo. EuiHealth exibe a palavra que indica a gravidade ao lado do ponto. Esse mapeamento é uma política do aplicativo; isso não significa que todo elemento com a cor primária represente uma gravidade informativa. As contagens de erros e os rótulos de eventos ainda precisam de texto legível. ### Resolva as cores a partir do tema ativo Screen chama useEuiTheme e usa as cores resolvidas no plano de fundo, no texto do corpo e nos indicadores de status. As tabelas de exportação incluem valores correspondentes para os temas claro e escuro, para que a diferença fique visível. Não copie um valor hexadecimal para os dois modos nem direcione os nomes de classes Emotion gerados para forçar uma correspondência. ## Elastic UI Hierarquia tipográfica e numérica do sistema de design ### Dê contexto às estatísticas antes de destacar os números EuiStat associa os 6 eventos de amostra, o 1 evento de erro e a contagem de itens salvos a descrições. Sem contexto, os números seriam ambíguos. EuiTitle apresenta a investigação, enquanto EuiText informa o período e esclarece que os dados são de amostra. O cabeçalho do fluxo usa um título menor, em vez de um segundo título de página. ### Mantenha o texto dos registros legível em uma apresentação compacta Borealis usa uma fonte base de 14px para exportação, com uma referência de entrelinha de 1.5 e tamanhos tipográficos de 12/16/20/24/30px. Os carimbos de data e hora e os nomes dos serviços ficam em colunas previsíveis, enquanto a mensagem do evento recebe largura flexível. O exemplo usa fontes de sistema disponíveis por meio da pilha nativa e não afirma carregar um recurso Inter remotamente. ## Elastic UI Tabela básica e filtros controlados do sistema de design ### Separe a apresentação da filtragem EuiBasicTable recebe os itens já filtrados. As colunas definem um campo ou um renderizador personalizado, e itemId usa o ID estável do evento. EuiFieldSearch atualiza o estado da consulta; EuiButtonGroup atualiza o ID da gravidade selecionada. O aplicativo combina os dois critérios antes de fornecer a coleção visível à tabela. 1. Digite o nome de um serviço ou um trecho da mensagem. 2. Selecione Error ou Warning para combinar um critério de gravidade. 3. Salve um evento correspondente usando a ação da linha. 4. Limpe os filtros e confirme que o evento salvo continua marcado. ### Salve usando a identidade do evento, não a posição da linha A ação Save event alterna um ID em um conjunto local. A ordenação ou a filtragem nunca deve fazer um marcador apontar para outro evento porque a posição dele no array mudou. O exemplo exibe Saved locally na mensagem e altera a ação para Unsave, deixando claro que a operação pode ser revertida. ## Elastic UI Espaçamento e dados responsivos do sistema de design ### Use a escala nativa de espaçamento entre os grupos Os tamanhos publicados são 4, 8, 12, 16, 24, 32 e 40px. EuiSpacer e EuiFlexGroup definem o espaço entre as estatísticas resumidas, os filtros e a tabela de eventos. EuiPanel fornece o formato do contêiner; o tema diferencia o raio de 12px do painel dos raios de 8px dos controles e 16px do quadro. ### Mantenha a página dentro da largura da tela móvel Os grupos de resumo e de filtros se reorganizam usando o comportamento nativo de FlexGroup. A tabela fica em uma área delimitada com rolagem horizontal e largura mínima de 640px para o aplicativo, preservando a relação entre o carimbo de data e hora, a mensagem e a ação, sem causar rolagem horizontal na página inteira. Em produção, uma tabela pode usar as opções documentadas de tabela responsiva adequadas ao conjunto real de colunas. ## Elastic UI Pesquisa e estados vazio e salvo do sistema de design ### Uma pesquisa sem resultados oferece uma ação direta para retomar Uma consulta sem resultados exibe No events match the current filters e a ação Clear filters. A redefinição da consulta e da gravidade restaura os seis eventos de amostra sem alterar os IDs salvos. A contagem acima da tabela anuncia o total de eventos correspondentes por meio de uma região dinâmica não intrusiva. ### Salvar localmente não é um fluxo de trabalho de incidentes Salvar um evento altera o rótulo visível da linha e a estatística de itens salvos. A ação não se comunica com Elasticsearch, não cria um incidente nem persiste após a atualização da página. Um produto de investigação real deve adicionar um endpoint de persistência documentado e informar respostas pendentes ou com falha antes de afirmar que a coleção salva é permanente. ## Elastic UI Ações acessíveis da tabela do sistema de design ### Dê nomes aos filtros sem depender dos textos de placeholder A pesquisa tem um nome acessível, e o grupo de botões fornece uma legenda para a gravidade. As colunas da tabela têm cabeçalhos descritivos; a ação de cada linha é um EuiButtonEmpty nativo. EuiHealth inclui texto, para que a cor do status nunca seja a única informação. Preserve esses requisitos ao substituir os dados de amostra. - Use palavras visíveis para indicar a gravidade. - Mantenha a legenda da tabela e os nomes das colunas. - Mantenha o estado salvo associado ao ID estável do evento. ### Mantenha os estados de teclado e visuais sincronizados Os usuários podem focar a pesquisa, selecionar um filtro de gravidade, acessar as ações das linhas e alternar a configuração de aparência. O anel de foco de 2px faz parte da referência do tema. Teste um conjunto filtrado após salvar uma linha e depois de limpar o filtro; o rótulo da ação e a estatística de itens salvos devem continuar correspondendo. ## Elastic UI Configuração e integração do tema do sistema de design ### Instale as dependências peer documentadas O guia oficial de configuração usa Yarn e lista Borealis, Emotion, datemath e moment junto com EUI. Este exemplo usa React 18 e não envolve a árvore em StrictMode. As instruções abaixo deixam essas restrições explícitas, em vez de herdarem silenciosamente React 19 de um aplicativo recém-gerado. ### Considere o arquivo de entrada completo como a implementação O exemplo abaixo inclui o provider, o conjunto de dados, o estado controlado, os renderizadores de colunas, os controles de filtro e a entrada createRoot. O scaffold do Vite fornece index.html. Este exemplo nativo foi empacotado com esbuild e verificado no navegador; o guia oficial de configuração documenta as ressalvas para o Vite e outros empacotadores que não sejam Webpack. Teste o empacotador de produção de forma independente. ## Elastic UI Exemplos de componentes do sistema de design ### main.jsx — explorador de registros nativo completo EuiProvider e Borealis dão suporte a uma tabela de eventos controlada, com filtros de gravidade e pesquisa, além do estado local dos eventos salvos. ``` import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { EuiProvider, EuiPanel, EuiTitle, EuiText, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiButtonGroup, EuiButtonEmpty, EuiBasicTable, EuiHealth, EuiStat, EuiSwitch, EuiCallOut, useEuiTheme, } from "@elastic/eui"; const logs = [ { id: 1, time: "09:42:18", service: "gateway", message: "Request completed", level: "Info", duration: 42, }, { id: 2, time: "09:42:21", service: "worker", message: "Retry queued after timeout", level: "Warning", duration: 1200, }, { id: 3, time: "09:42:24", service: "gateway", message: "Upstream connection refused", level: "Error", duration: 800, }, { id: 4, time: "09:42:29", service: "indexer", message: "Batch indexed", level: "Info", duration: 180, }, { id: 5, time: "09:42:32", service: "worker", message: "Job completed", level: "Info", duration: 94, }, { id: 6, time: "09:42:36", service: "gateway", message: "Upstream connection restored", level: "Info", duration: 51, }, ]; function Screen({ dark, setDark }) { const { euiTheme } = useEuiTheme(); const [query, setQuery] = useState(""), [level, setLevel] = useState("all"), [saved, setSaved] = useState([]); const visible = logs.filter( (x) => (level === "all" || x.level === level) && (x.service + " " + x.message).toLowerCase().includes(query.toLowerCase()), ); const colors = { Info: euiTheme.colors.primary, Warning: euiTheme.colors.warning, Error: euiTheme.colors.danger, }; const columns = [ { field: "time", name: "Time", width: "105px" }, { field: "service", name: "Service", width: "105px" }, { field: "message", name: "Event", render: (value, item) => ( {value} {saved.includes(item.id) ? " · Saved locally" : ""} ), }, { field: "level", name: "Level", width: "110px", render: (value) => {value}, }, { name: "Action", width: "110px", render: (item) => ( setSaved((v) => v.includes(item.id) ? v.filter((id) => id !== item.id) : [...v, item.id], ) } > {saved.includes(item.id) ? "Unsave" : "Save event"} ), }, ]; return (

ELASTIC UI · LOG EXPLORER

Investigate gateway events

 setDark(e.target.checked)} />

Event stream

09:42:18–09:42:36 · fictional data · no live telemetry

 setQuery(e.target.value)} incremental /> setLevel(id)} />

{visible.length} matching events
{!visible.length && ( { setLevel("all"); setQuery(""); }} > Clear filters )} Saving an event only changes this preview. No query is sent to Elasticsearch and no incident is created.

Native Elastic UI 123.0.0 · Borealis 8.1.0 theme · controlled filters and table actions.

); } function App() { const [dark, setDark] = useState(false); return ( ); } createRoot(document.getElementById("root")).render(); ``` Referência de código - Salve como src/main.jsx no scaffold React. Esta entrada não ativa StrictMode intencionalmente. - A largura delimitada de 640px da tabela é definida pelo aplicativo CSS; todos os elementos visuais dos componentes vêm de EUI. ### Nota personalizada que respeita o tema Use o tema ativo dentro de um provider, em vez de vincular a marcação personalizada às classes geradas pelos componentes. ``` import React from 'react'; import { useEuiTheme } from '@elastic/eui'; export function InvestigationNote({ children }) { const { euiTheme } = useEuiTheme(); return ; } ``` Referência de código - Renderize InvestigationNote dentro de EuiProvider. A nota herda o modo visual selecionado. ## Configuração do agente do sistema de design Elastic UI ### Ponto de partida para implementação O guia oficial do EUI documenta a instalação com Yarn e o suporte à versão React 18. Há ressalvas documentadas para bundlers que não sejam Webpack; este exemplo nativo específico foi empacotado com esbuild e testado no navegador. Use uma versão do Node.js compatível com seu scaffold. ``` yarn create vite elastic-investigation --template react cd elastic-investigation yarn add react@18.3.1 react-dom@18.3.1 @elastic/eui@123.0.0 @elastic/eui-theme-borealis@8.1.0 @elastic/datemath @emotion/react @emotion/css moment # Replace src/main.jsx with the complete example above. yarn dev ``` ### Um prompt para seu projeto ``` Crie uma tela para investigar logs com Elastic UI 123.0.0, Borealis 8.1.0 e React 18. Leia a exportação de tema e o código-fonte nativo fornecidos. Use EuiProvider, um EuiBasicTable controlado e filtros acessíveis para pesquisa e gravidade. Salve usando o ID estável do evento, preserve os favoritos ao filtrar e diferencie o estado local da interface de uma consulta real ao Elasticsearch ou de uma resposta de persistência. Mantenha a tabela contida em dispositivos móveis. ``` ## Fontes e escopo do sistema de design Elastic UI Guia criado com OpenDesign e explorador de logs local fictício, executado nativamente com Elastic UI 123.0.0 e Borealis 8.1.0. Os eventos de exemplo não são dados de telemetria em tempo real, e a ação de salvar mantém os dados apenas na memória. O EUI tem suas próprias opções de licenciamento Elastic/SSPL; consulte a licença oficial do pacote para saber como distribuí-lo. - Configuração oficial Provider, instalação, dependências peer e suporte a ambientes. - EuiBasicTable API Definições de colunas, renderizadores e comportamento nativo da tabela. - Exportação do tema Borealis claro Valores versionados usados nesta referência. - Código-fonte e licença do EUI Implementação nativa e informações de licenciamento. ## Recursos relacionados ao sistema de design Elastic UI ### Emplifi Soul Conheça o contrato de tabela de dados do Soul junto com seu espaçamento de seis pixels, funções de cores em camadas e tipografia compacta Inter. Compare a seleção em lote, a notação de dados ausentes e as linhas de resumo; depois, examine os pontos de entrada verificados do pacote privado React. ### Esri Calcite Uma referência prática do Calcite para ferramentas espaciais com foco: superfícies semânticas e ações azuis, painéis compactos de inspeção, APIs reais de entrada e um exemplo completo de revisão local de site. ### GitLab Pajamas Um guia Pajamas para fluxos de trabalho técnicos: tokens semânticos reais, tipografia e espaçamento fluidos, um inspetor de pipeline em etapas, saída de falhas legível e uma simulação de nova tentativa explicitamente local. - [Referência de implementação](https://eui.elastic.co/docs/components/tables/basic/) - [Fonte](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [Fonte](https://eui.elastic.co/docs/components/tables/basic/) - [Referência de código](https://eui.elastic.co/docs/components/tables/basic/) - [Referência de código](https://eui.elastic.co/docs/getting-started/setup/) - [Configuração oficial Provider, instalação, dependências peer e suporte a ambientes.](https://eui.elastic.co/docs/getting-started/setup/) - [EuiBasicTable API Definições de colunas, renderizadores e comportamento nativo da tabela.](https://eui.elastic.co/docs/components/tables/basic/) - [Exportação do tema Borealis claro Valores versionados usados nesta referência.](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [Código-fonte e licença do EUI Implementação nativa e informações de licenciamento.](https://github.com/elastic/eui)