⚠️ Traduction non officielle - Cette documentation est une traduction communautaire non officielle de Docker.

Meilleures pratiques MUI

Table des matières

Cet article suppose que vous suivez notre pratique recommandée en utilisant notre thème Material UI. Suivre les étapes ci-dessous maximise la compatibilité avec Docker Desktop et minimise le travail que vous devez faire en tant qu'auteur d'extension. Elles doivent être considérées comme complémentaires aux directives non spécifiques à MUI trouvées dans la vue d'ensemble du style UI.

Supposer que le thème peut changer à tout moment

Résistez à la tentation d'ajuster votre interface utilisateur avec des couleurs précises, des décalages et des tailles de police pour la rendre aussi attrayante que possible. Toute spécialisation que vous faites aujourd'hui sera relative au thème MUI actuel, et peut sembler pire lorsque le thème change. N'importe quelle partie du thème pourrait changer sans avertissement, incluant (mais sans s'y limiter) :

  • La police, ou les tailles de police
  • L'épaisseur ou les styles de bordures
  • Les couleurs :
    • Nos membres de palette (ex. red-100) pourraient changer leurs valeurs RGB
    • Les couleurs sémantiques (ex. error, primary, textPrimary, etc.) pourraient être changées pour utiliser un membre différent de notre palette
    • Les couleurs d'arrière-plan (ex. celles de la page, ou des dialogues) pourraient changer
  • Les espacements :
    • La taille de l'unité de base d'espacement (exposée via theme.spacing. Par exemple, nous pouvons permettre aux utilisateurs de personnaliser la densité de l'interface utilisateur
    • L'espacement par défaut entre les paragraphes ou les éléments de grille

La meilleure façon de construire votre interface utilisateur, pour qu'elle soit robuste contre les futurs changements de thème, est de :

  • Surcharger le style par défaut aussi peu que possible.
  • Utiliser la typographie sémantique. ex. utiliser des Typography ou des Link avec des variant appropriées au lieu d'utiliser des éléments HTML typographiques (<a>, <p>, <h1>, etc.) directement.
  • Utiliser des tailles prédéfinies. ex. utiliser size="small" sur les boutons, ou fontSize="small" sur les icônes, au lieu de spécifier des tailles en pixels.
  • Préférer les couleurs sémantiques. ex. utiliser error ou primary plutôt que des codes de couleur explicites.
  • Écrire le moins de CSS possible. Écrire du balisage sémantique à la place. Par exemple, si vous voulez espacer des paragraphes de texte, utilisez la propriété paragraph sur vos instances Typography. Si vous voulez espacer autre chose, utilisez un Stack ou Grid avec l'espacement par défaut.
  • Utiliser des idiomes visuels que vous avez vus dans l'interface utilisateur Docker Desktop, car ce sont ceux-ci que nous testerons principalement pour tout changement de thème.

Quand vous personnalisez, centralisez-le

Parfois, vous aurez besoin d'un élément d'interface utilisateur qui n'existe pas dans notre système de conception. Si c'est le cas, nous recommandons de nous contacter en premier. Nous pouvons déjà avoir quelque chose dans notre système de conception interne, ou nous pouvons être en mesure d'étendre notre système de conception pour accommoder votre cas d'usage.

Si vous décidez toujours de le construire vous-même après nous avoir contactés, essayez de définir la nouvelle interface utilisateur de façon réutilisable. Si vous définissez votre interface utilisateur personnalisée à un seul endroit, cela facilitera les changements futurs si notre thème principal change. Vous pourriez utiliser :

  • Une nouvelle variant d'un composant existant - voir documentation MUI
  • Un mixin MUI (un ensemble libre de règles de style réutilisables définies à l'intérieur d'un thème)
  • Un nouveau composant réutilisable

Certaines des options ci-dessus nécessitent d'étendre notre thème MUI. Voir la documentation MUI sur la composition de thème.

Et maintenant ?