wpds ui kit

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/main/ui/kit”
單擊C“ https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/button”

這種項目結構受到脈輪UI，Radix UI等的啟發。

用於用戶的單個導入，許多軟件包在@washingtonpost/wpds-ui-kit中導入。

npm i @washingtonpost/wpds-ui-kit

附加信息

• 在我們的React指南中使用我們的UI套件來了解如何使用我們的UI套件為您的React站點構建功能。
• 如果您想為我們的WPDS UI套件做出貢獻，請參考貢獻文檔。
• 如果您有任何疑問或遇到任何問題，請隨時接觸#WPD。
• 探索文檔網站以獲取使用示例，並在每個組件上進行其他文檔。您還可以在資源，指南和支持頁面下找到其他資源。
• 還有一個故事書網站僅用於組件開發。如果您正在尋找有關如何使用特定組件的代碼示例或信息，請參閱build.washingtonpost.com。

升級

• 在v1.5.1之前， Button組件具有默認density: "compact" 。升級後，默認值將是density: "default" ，因此您將需要檢查代碼中使用的任何按鈕以進行回歸，並手動應用density: "compact" 。

   < Button
    density = "compact"
    . . .

• 在V0.12之前， globalStyles包含所有元素上所有CSS屬性的全球應用過渡。升級依賴該過渡的任何組件元素後，都需要使用WPDS主題變量在本地應用一個元素。

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

• 在v0.15之前， globalStyles包含了所有元素的全球邊距和填充。在升級依賴於刪除該間距的任何組件元素之後，都需要添加使用樣式的固有樣式的組件。

執照

該項目是根據MIT許可開發的。