# Système de design Elastic UI ## Aperçu de l’interface du système de design Elastic UI Filtrez le flux d’événements par message ou par gravité, enregistrez des événements individuellement, effacez un résultat vide et basculez entre les modes clair et sombre. ## Référence de conception du système de design Elastic UI Elastic UI 123.0.0 avec le thème Borealis 8.1.0 et React 18.3.1. Les tableaux reprennent les noms du fichier JSON de thème publié ; il s’agit de clés d’exportation, et non de chemins littéraux dans l’objet useEuiTheme. L’aperçu réel utilise le thème API natif de React. ### Couleurs sémantiques Borealis | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | euiColorPrimary | light: #0B64DD; dark: #61A2FF | Noms publiés dans l’exportation du thème. Dans React, utilisez le rôle sémantique correspondant via useEuiTheme au lieu de coder ces valeurs en dur. | | euiColorSuccess | light: #008A5E; dark: #24C292 | Noms publiés dans l’exportation du thème. Dans React, utilisez le rôle sémantique correspondant via useEuiTheme au lieu de coder ces valeurs en dur. | | euiColorWarning | light: #FACB3D; dark: #FACB3D | Noms publiés dans l’exportation du thème. Dans React, utilisez le rôle sémantique correspondant via useEuiTheme au lieu de coder ces valeurs en dur. | | euiColorDanger | light: #C61E25; dark: #F6726A | Noms publiés dans l’exportation du thème. Dans React, utilisez le rôle sémantique correspondant via useEuiTheme au lieu de coder ces valeurs en dur. | | euiColorEmptyShade | light: #FFFFFF; dark: #111C2C | Noms publiés dans l’exportation du thème. Dans React, utilisez le rôle sémantique correspondant via useEuiTheme au lieu de coder ces valeurs en dur. | | euiColorFullShade | light: #07101F; dark: #FFFFFF | Noms publiés dans l’exportation du thème. Dans React, utilisez le rôle sémantique correspondant via useEuiTheme au lieu de coder ces valeurs en dur. | | euiPageBackgroundColor | light: #ECF1F9; dark: #07101F | Noms publiés dans l’exportation du thème. Dans React, utilisez le rôle sémantique correspondant via useEuiTheme au lieu de coder ces valeurs en dur. | | euiTextColor | light: #384861; dark: #B4C1D5 | Noms publiés dans l’exportation du thème. Dans React, utilisez le rôle sémantique correspondant via useEuiTheme au lieu de coder ces valeurs en dur. | | euiTextSubduedColor | light: #516381; dark: #98A8C3 | Noms publiés dans l’exportation du thème. Dans React, utilisez le rôle sémantique correspondant via useEuiTheme au lieu de coder ces valeurs en dur. | ### Échelle d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | euiSizeXS | 4px | Utilisez des tailles EuiSpacer/FlexGroup correspondantes pour rythmer la mise en page ; dans cet export de thème, la base est de 16px. | | euiSizeS | 8px | Utilisez des tailles EuiSpacer/FlexGroup correspondantes pour rythmer la mise en page ; dans cet export de thème, la base est de 16px. | | euiSizeM | 12px | Utilisez des tailles EuiSpacer/FlexGroup correspondantes pour rythmer la mise en page ; dans cet export de thème, la base est de 16px. | | euiSize | 16px | Utilisez des tailles EuiSpacer/FlexGroup correspondantes pour rythmer la mise en page ; dans cet export de thème, la base est de 16px. | | euiSizeL | 24px | Utilisez des tailles EuiSpacer/FlexGroup correspondantes pour rythmer la mise en page ; dans cet export de thème, la base est de 16px. | | euiSizeXL | 32px | Utilisez des tailles EuiSpacer/FlexGroup correspondantes pour rythmer la mise en page ; dans cet export de thème, la base est de 16px. | | euiSizeXXL | 40px | Utilisez des tailles EuiSpacer/FlexGroup correspondantes pour rythmer la mise en page ; dans cet export de thème, la base est de 16px. | ### Typographie | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | euiFontSizeXS | 12px | Référence typographique publiée. Utilisez les variantes EuiText/EuiTitle pour définir la hiérarchie des composants. | | euiFontSizeS | 14px | Référence typographique publiée. Utilisez les variantes EuiText/EuiTitle pour définir la hiérarchie des composants. | | euiFontSize | 14px | Référence typographique publiée. Utilisez les variantes EuiText/EuiTitle pour définir la hiérarchie des composants. | | euiFontSizeM | 16px | Référence typographique publiée. Utilisez les variantes EuiText/EuiTitle pour définir la hiérarchie des composants. | | euiFontSizeL | 20px | Référence typographique publiée. Utilisez les variantes EuiText/EuiTitle pour définir la hiérarchie des composants. | | euiFontSizeXL | 24px | Référence typographique publiée. Utilisez les variantes EuiText/EuiTitle pour définir la hiérarchie des composants. | | euiFontSizeXXL | 30px | Référence typographique publiée. Utilisez les variantes EuiText/EuiTitle pour définir la hiérarchie des composants. | | euiLineHeight | 1.5 | Référence typographique publiée. Utilisez les variantes EuiText/EuiTitle pour définir la hiérarchie des composants. | ### Bordures et formes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | euiBorderWidthThin | 1px | Distinguez les formes en ligne, des contrôles, des panneaux et du cadre ; un rayon d’angle unique et universel effacerait cette hiérarchie. | | euiBorderWidthThick | 2px | Distinguez les formes en ligne, des contrôles, des panneaux et du cadre ; un rayon d’angle unique et universel effacerait cette hiérarchie. | | euiBorderColor | #E3E8F2 | Distinguez les formes en ligne, des contrôles, des panneaux et du cadre ; un rayon d’angle unique et universel effacerait cette hiérarchie. | | euiBorderRadiusInline | 4px | Distinguez les formes en ligne, des contrôles, des panneaux et du cadre ; un rayon d’angle unique et universel effacerait cette hiérarchie. | | euiBorderRadiusControl | 8px | Distinguez les formes en ligne, des contrôles, des panneaux et du cadre ; un rayon d’angle unique et universel effacerait cette hiérarchie. | | euiBorderRadiusPanel | 12px | Distinguez les formes en ligne, des contrôles, des panneaux et du cadre ; un rayon d’angle unique et universel effacerait cette hiérarchie. | | euiBorderRadiusFrame | 16px | Distinguez les formes en ligne, des contrôles, des panneaux et du cadre ; un rayon d’angle unique et universel effacerait cette hiérarchie. | ### Focus et mouvement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | euiFocusRingSize | 2px | Conservez le comportement natif du focus et des animations au lieu de remplacer les sélecteurs internes .eui. | | euiFocusBackgroundColor | #ECF1F9 | Conservez le comportement natif du focus et des animations au lieu de remplacer les sélecteurs internes .eui. | | euiAnimSpeedExtraFast | 90ms | Conservez le comportement natif du focus et des animations au lieu de remplacer les sélecteurs internes .eui. | | euiAnimSpeedFast | 150ms | Conservez le comportement natif du focus et des animations au lieu de remplacer les sélecteurs internes .eui. | | euiAnimSpeedNormal | 250ms | Conservez le comportement natif du focus et des animations au lieu de remplacer les sélecteurs internes .eui. | | euiAnimSpeedSlow | 350ms | Conservez le comportement natif du focus et des animations au lieu de remplacer les sélecteurs internes .eui. | ### Contrat natif de API dans cet explorateur | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | EuiProvider | colorMode="light" \| "dark" | Fournit le contexte de thème et les styles Emotion. | | useEuiTheme | { euiTheme } | Résout les couleurs sémantiques pour les éléments personnalisés et EuiHealth. | | EuiBasicTable | items · itemId · columns | Affiche la collection visible contrôlée à l’aide d’identifiants stables. | | EuiFieldSearch | value · onChange · incremental | L’application filtre une collection locale de six événements. | | EuiButtonGroup | options · idSelected · onChange | Filtre de gravité contrôlé avec légende visible. | | EuiHealth | color + readable child label | Le point d’état complète le libellé de gravité, sans le remplacer. | ## Guide complet du système de design Elastic UI Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Structure de l’explorateur du système de design Elastic UI ### Un espace d’investigation plutôt qu’un tableau de bord générique > L’exemple comprend trois statistiques récapitulatives compactes et un seul flux d’événements. Un champ de recherche et un groupe de gravité permettent de filtrer ce flux ; chaque ligne propose une action d’enregistrement indépendante. Placer l’action à côté de l’événement permet de recueillir des éléments sans quitter le contexte filtré. Le résumé indique explicitement le nombre d’événements d’exemple au lieu de prétendre afficher le trafic en temps réel. ### Utilisez la frontière de thème actuelle Cet exemple associe EUI 123.0.0 à Borealis 8.1.0. Les valeurs de référence proviennent de ce thème publié, et non d’une ancienne capture d’écran Amsterdam. EuiProvider gère le mode visuel et le contexte de styles. L’état de l’application reste indépendant de tout calcul de thème : modifier l’apparence ne réinitialise donc ni les événements enregistrés ni la requête en cours. ## Elastic UI Rôles sémantiques des couleurs du système de conception ### Associez les niveaux de gravité à des rôles pertinents Dans cette application, Info utilise le rôle principal, Warning le rôle d’avertissement et Error le rôle de danger. EuiHealth affiche le niveau de gravité sous forme de texte à côté du point. Cette correspondance relève des règles de l’application ; elle ne signifie pas que tout élément de couleur principale indique un niveau de gravité informatif. Les nombres d’erreurs et les libellés d’événements doivent rester lisibles. ### Récupérez les couleurs depuis le thème actif Screen appelle useEuiTheme et utilise les couleurs obtenues pour son fond, son texte et ses indicateurs de santé. Les tableaux d’exportation présentent les valeurs claires et sombres côte à côte pour rendre la différence visible. Ne réutilisez pas une valeur hexadécimale dans les deux modes et ne ciblez pas les noms de classes Emotion générés pour forcer une correspondance. ## Elastic UI Typographie et hiérarchie numérique du système de conception ### Présentez le contexte des statistiques avant de mettre les chiffres en évidence EuiStat associe les 6 événements d’exemple, l’événement en erreur et le nombre d’éléments enregistrés à des descriptions. Le nombre seul serait ambigu. EuiTitle introduit l’investigation, tandis qu’EuiText précise la période et indique qu’il s’agit de données d’exemple. L’en-tête du flux utilise un titre de niveau inférieur plutôt qu’un second titre de page. ### Gardez les textes des journaux lisibles malgré leur densité Borealis utilise une base exportée de 14px et une hauteur de ligne de référence de 1.5, ainsi qu’une échelle typographique de 12/16/20/24/30px. Les horodatages et les noms de services occupent des colonnes prévisibles, tandis que le message de l’événement dispose d’une largeur flexible. L’exemple utilise les polices système disponibles dans la pile native et ne prétend pas charger une ressource Inter à distance. ## Elastic UI Tableau de base et filtres contrôlés du système de conception ### Séparez la présentation du filtrage EuiBasicTable reçoit les éléments déjà filtrés. Les colonnes définissent un champ ou un moteur de rendu personnalisé, et itemId utilise l’ID stable de l’événement. EuiFieldSearch met à jour l’état de la requête ; EuiButtonGroup met à jour l’ID du niveau de gravité sélectionné. L’application combine les deux critères avant de transmettre à la table la collection à afficher. 1. Saisissez un nom de service ou un fragment de message. 2. Choisissez Error ou Warning pour appliquer un critère de gravité. 3. Enregistrez un événement correspondant à l’aide de l’action de sa ligne. 4. Effacez les filtres et vérifiez que l’événement enregistré est toujours marqué comme tel. ### Enregistrez les événements par identité, pas par position de ligne L’action Enregistrer l’événement ajoute ou retire un ID d’un ensemble local. Le tri ou le filtrage ne doit jamais faire pointer un signet vers un autre événement à cause d’un changement de position dans le tableau. Dans cet exemple, le message indique Enregistré localement et l’action devient Annuler l’enregistrement, ce qui rend le résultat explicite et réversible. ## Elastic UI Espacement et données adaptatives du système de conception ### Utilisez l’échelle native d’espacement entre les groupes Les tailles publiées sont 4, 8, 12, 16, 24, 32 et 40px. EuiSpacer et EuiFlexGroup assurent l’espacement entre les statistiques récapitulatives, les filtres et le tableau des événements. EuiPanel fournit la forme du conteneur ; le thème distingue son rayon de panneau de 12px des rayons de 8px des contrôles et de 16px du cadre. ### Gardez la page dans les limites de la fenêtre d’affichage mobile Les groupes de statistiques et de filtres se réorganisent grâce au comportement natif de FlexGroup. Le tableau se trouve dans une zone de défilement horizontal délimitée, avec une largeur minimale de 640px pour l’application. Les liens entre l’horodatage, le message et l’action sont ainsi préservés, sans débordement de toute la page. Pour un tableau de production, vous pouvez choisir les options de tableau adaptatif documentées en fonction des colonnes utilisées. ## Elastic UI Recherche et états vide et enregistré du système de conception ### Une recherche sans résultat propose une action directe pour rétablir les résultats Une requête sans résultat affiche Aucun événement ne correspond aux filtres actuels et propose l’action Effacer les filtres. La réinitialisation de la requête et du niveau de gravité rétablit les six événements d’exemple sans modifier les ID enregistrés. Le nombre affiché au-dessus du tableau annonce le total d’événements correspondants dans une région de mise à jour polie. ### Un enregistrement local ne constitue pas un flux de gestion des incidents L’enregistrement d’un événement modifie le libellé de sa ligne et la statistique des éléments enregistrés. Il ne contacte pas Elasticsearch, ne crée pas d’incident et ne conserve pas les données après actualisation. Un véritable produit d’investigation devrait ajouter un point de terminaison de persistance documenté et signaler les réponses en attente ou en échec avant d’affirmer que la collection enregistrée est conservée durablement. ## Elastic UI Actions de tableau accessibles du système de conception ### Nommez les filtres indépendamment de leurs textes indicatifs La recherche possède un nom accessible et le groupe de boutons fournit une légende pour le niveau de gravité. Les colonnes du tableau ont des en-têtes descriptifs ; chaque action de ligne est un EuiButtonEmpty natif. EuiHealth inclut du texte : la couleur du statut n’est donc jamais le seul moyen de transmettre l’information. Préservez ces principes lorsque vous remplacez les données d’exemple. - Indiquez le niveau de gravité avec des mots visibles. - Conservez la légende du tableau et les noms des colonnes. - Associez l’état enregistré à l’ID stable de l’événement. ### Maintenez la cohérence entre l’état clavier et l’état visuel Les utilisateurs peuvent placer le focus dans la recherche, sélectionner un filtre de gravité, accéder aux actions de ligne et modifier le réglage d’apparence. L’anneau de focus de 2px fait partie de la référence du thème. Testez un ensemble filtré après avoir enregistré une ligne, puis après avoir effacé le filtre ; le libellé de l’action et la statistique des éléments enregistrés doivent rester cohérents. ## Elastic UI Configuration et intégration du thème du système de conception ### Installez les dépendances homologues documentées Le guide officiel de configuration utilise Yarn et répertorie Borealis, Emotion, datemath et moment avec EUI. Cet exemple utilise React 18 et n’encapsule pas l’arbre dans StrictMode. La configuration ci-dessous explicite ces contraintes au lieu d’hériter silencieusement de React 19 d’une application nouvellement générée. ### Considérez le fichier d’entrée complet comme l’implémentation L’exemple ci-dessous contient le fournisseur, le jeu de données, l’état contrôlé, les moteurs de rendu des colonnes, les contrôles de filtre et le point d’entrée createRoot. Le modèle Vite fournit index.html. Cet exemple natif a été regroupé avec esbuild et vérifié dans un navigateur ; le guide officiel de configuration documente les réserves concernant Vite et les autres outils de compilation qui ne sont pas Webpack. Testez séparément l’outil de compilation de votre environnement de production. ## Elastic UI Exemples de composants du système de conception ### main.jsx — explorateur de journaux natif complet EuiProvider et Borealis prennent en charge un tableau d’événements contrôlé avec filtrage par gravité et recherche, ainsi que l’enregistrement local des événements. ``` 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(); ``` Référence du code - Enregistrez le fichier sous src/main.jsx dans le squelette React. Ce point d’entrée n’active volontairement pas StrictMode. - La largeur maximale de 640 px du tableau est propre à l’application CSS ; tous les éléments visuels des composants proviennent d’EUI. ### Note personnalisée adaptée au thème Utilisez le thème actif dans un fournisseur plutôt que de coupler le balisage personnalisé aux classes générées par les composants. ``` import React from 'react'; import { useEuiTheme } from '@elastic/eui'; export function InvestigationNote({ children }) { const { euiTheme } = useEuiTheme(); return ; } ``` Référence du code - Affichez InvestigationNote dans EuiProvider. La note hérite du mode visuel sélectionné. ## Agent du système de design Elastic UI ### Point de départ de l’implémentation Le guide officiel d’EUI documente l’installation avec Yarn et la prise en charge de React 18. Les bundlers autres que Webpack font l’objet de réserves documentées ; cet exemple natif a été compilé avec esbuild et testé dans un navigateur. Utilisez une version de Node.js prise en charge par votre squelette. ``` 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 ``` ### Un prompt pour votre projet ``` Créez un écran d’analyse des journaux avec Elastic UI 123.0.0, Borealis 8.1.0 et React 18. Consultez l’export du thème et le code source natif fournis. Utilisez EuiProvider, un EuiBasicTable contrôlé, ainsi que des filtres de recherche et de gravité accessibles. Enregistrez les événements à l’aide de leur ID stable, conservez les signets lors du filtrage et distinguez l’état local de l’interface d’une véritable requête Elasticsearch ou d’une réponse de persistance. Veillez à ce que le tableau reste contenu sur mobile. ``` ## Sources et périmètre du système de design Elastic UI Guide rédigé avec OpenDesign et explorateur local fictif des journaux utilisant Elastic UI 123.0.0 natif avec Borealis 8.1.0. Les événements d’exemple ne sont pas des données de télémétrie en temps réel et l’action d’enregistrement ne conserve les données qu’en mémoire. EUI est soumis à ses propres choix de licence Elastic/SSPL ; consultez la licence officielle du paquet pour votre distribution. - Configuration officielle Fournisseur, installation, dépendances homologues et prise en charge des environnements. - Tableau de base API Définitions des colonnes, fonctions de rendu et comportement natif du tableau. - Export du thème clair Borealis Valeurs versionnées utilisées dans cette référence. - Code source et licence d’EUI Informations sur l’implémentation native et les licences. ## Ressources associées au système de design Elastic UI ### Emplifi Soul Découvrez le contrat de tableau de données de Soul, son espacement de six pixels, ses rôles de couleurs en couches et sa typographie Inter compacte. Comparez la sélection multiple, la représentation des données manquantes et les lignes de synthèse, puis examinez les points d’entrée vérifiés du paquet privé React. ### Esri Calcite Une référence pratique à Calcite pour les outils spatiaux qui exigent de la précision : surfaces sémantiques, actions bleues, panneaux d’inspection compacts, véritables API de saisie et exemple complet d’examen local d’un site. ### GitLab Pajamas Un guide Pajamas pour les flux de travail techniques : véritables jetons sémantiques, typographie et espacement fluides, inspecteur de pipeline par étapes, affichage lisible des erreurs et simulation explicite d’une nouvelle tentative locale. - [Référence de mise en œuvre](https://eui.elastic.co/docs/components/tables/basic/) - [Source](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [Source](https://eui.elastic.co/docs/components/tables/basic/) - [Référence du code](https://eui.elastic.co/docs/components/tables/basic/) - [Référence du code](https://eui.elastic.co/docs/getting-started/setup/) - [Configuration officielle Fournisseur, installation, dépendances homologues et prise en charge des environnements.](https://eui.elastic.co/docs/getting-started/setup/) - [Tableau de base API Définitions des colonnes, fonctions de rendu et comportement natif du tableau.](https://eui.elastic.co/docs/components/tables/basic/) - [Export du thème clair Borealis Valeurs versionnées utilisées dans cette référence.](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [Code source et licence d’EUI Informations sur l’implémentation native et les licences.](https://github.com/elastic/eui)