wpds ui kitダウンロード-WPDS wpds ui kitソースコードダウンロード

wpds ui kit

サードパーティ製コンポーネント

v2.10.1

ダウンロード

WPDSのUIキット

ワシントンポストデザインシステム（WPDS）UIキットは、UIキットとドキュメントサイトのモノレポです。

依存関係グラフ

キットからボタンをインポートするための依存関係グラフの例。

フローチャート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"]]
「https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/theme」をクリックします。
Bをクリックします "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/kit"
c "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/buttonをクリックします"

このプロジェクト構造は、Chakra UI、Radix UIなどに大きなインスピレーションを受けています。

ユーザー向けの単一のインポート、 @washingtonpost/wpds-ui-kitにインポートされた多くのパッケージ。

npm i @washingtonpost/wpds-ui-kit

追加情報

ReactガイドでUIキットを使用して、Reactサイトの機能を構築する方法について読んでください。
WPDS UIキットに貢献したい場合は、貢献ドキュメントを参照してください。
質問がある場合や問題が発生した場合は、Slackの#WPDSに自由に連絡してください。
各コンポーネントの使用例と追加のドキュメントについては、Docsサイトを調べてください。また、リソース、ガイド、サポートページの下に追加のリソースを見つけることもできます。
コンポーネント開発のみに使用されるストーリーブックサイトもあります。特定のコンポーネントの使用方法に関するコードの例や情報を探している場合は、build.washingtonpost.comを参照してください。

アップグレード

V1.5.1の前に、 Buttonコンポーネントのデフォルトdensity: "compact"がありました。アップグレード後、デフォルトはdensity: "default"になります。そのため、コードで使用されているボタンを回帰を確認し、必要に応じてdensity: "compact"手動で適用する必要があります。
```
 < Button
  density = "compact"
  . . .
```
V0.12以前には、 globalStylesには、すべての要素のすべてのCSSプロパティへのグローバルに適用された遷移が含まれていました。その遷移に依存しているコンポーネント要素をアップグレードした後、WPDSテーマ変数を使用してローカルで1つを適用する必要があります。
```
 transition : theme . transitions . allFast ,
// or
transition : `background ${ theme . transitions . fast } ${ theme . transitions . inOut `
```
V0.15の前に、 globalStylesには、すべての要素のマージンとパディングのグローバルな除去が含まれていました。その間隔を削除することに依存しているコンポーネント要素をアップグレードした後、コンポーネントにローカルなスタイルを備えた間隔ルールを追加する必要があります。