wpds ui kit

UI -Kit von WPDS

Das UI-Kit (Washington Post Design System) ist ein Mono-Repo unseres UI-Kits und unserer Dokumentationsseite.

Abhängigkeitsgrafik

Ein Beispiel für das Abhängigkeitsgraphen zum Importieren von Taste aus dem Kit.

 Flussdiagramm LR
A ["@WashingtonPost/WPDS-Theme"]-> B ["@WashingtonPost/WPDS-UI-Kit"]
C ["@WashingtonPost/WPDS-Button"]-> B ["@WashingtonPost/WPDS-UI-Kit"]
A ["@WashingtonPost/WPDS-Theme"]-> C ["@WashingtonPost/WPDS-Button"]
Klicken Sie auf "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/theme".
Klicken Sie auf B "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/kit"
Klicken Sie auf C "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/button"

Diese Projektstruktur ist stark von Chakra UI, Radix UI und anderen inspiriert.

Ein einzelner Import für Benutzer, viele Pakete, die in @washingtonpost/wpds-ui-kit importiert wurden.

npm i @washingtonpost/wpds-ui-kit

Weitere Informationen

• Lesen Sie, wie Sie eine Funktion für Ihre React -Site mit unserem UI -Kit auf unserem React -Handbuch erstellen.
• Wenn Sie zu unserem WPDS -UI -Kit beitragen möchten, lesen Sie bitte die Beitragsdokumente.
• Fühlen Sie sich frei, #WPDS on Slack zu erreichen, wenn Sie Fragen haben oder Probleme haben.
• Untersuchen Sie die DOCS -Site für Verwendungsbeispiele und zusätzliche Dokumentation zu jeder Komponente. Sie können auch zusätzliche Ressourcen unter den Ressourcen, Führern und Supportseiten finden.
• Es gibt auch eine Storybook -Site, die nur für die Komponentenentwicklung verwendet wird. Wenn Sie nach Codebeispielen oder Informationen zur Verwendung einer bestimmten Komponente suchen, finden Sie unter Build.WashingtonPost.com.

Upgrade

• Vor V1.5.1 hatte die Button eine density: "compact" . Nach dem Upgrade ist die Standardeinstellung density: "default" , sodass Sie alle in Ihrem Code verwendeten Schaltflächen für Regressionen überprüfen und die density: "compact" nach Bedarf anwenden.

   < Button
    density = "compact"
    . . .

• Vor V0.12 enthielten globalStyles einen weltweit angewendeten Übergang zu allen CSS -Eigenschaften für alle Elemente. Nach der Aktualisierung eines Komponentenelements, das sich auf diesen Übergang stützt, muss eine lokal unter Verwendung von WPDS -Themenvariablen angewendet werden.

   transition : theme . transitions . allFast ,
  // or
  transition : `background ${ theme . transitions . fast } ${ theme . transitions . inOut `

• Vor V0.15 enthielten globalStyles für alle Elemente eine globale Entfernung von Margen und Polsterung. Nach dem Upgrade eines Komponentenelements, das auf den Abstand stützte, müssen die Styles lokal zur Komponente hinzufügen.

Lizenz

Dieses Projekt wird im Rahmen einer MIT -Lizenz entwickelt.