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许可开发的。