@ canonical/ react-ds- global(全球)

Pragma设计系统的通用反应组件. 这个软件包提供了适用于所有Canonical网络应用程序的基础UI元素:按钮,徽章,卡片,工具提示等.

先决条件

• 反应19或以上

安装

bun add @canonical/react-ds-global @canonical/styles

导入设计系统的样式 第一个 在应用程序条目中,在进口部件之前:

import "@canonical/styles";

每个组件在导入时都会带出自己的样式表.

使用量

以名称导入组件 :

import { Button, Badge, Card, Tooltip } from "@canonical/react-ds-global";

function Example() {
  return (
    <Card>
      <Badge>New</Badge>
      <Tooltip content="Click to submit">
        <Button appearance="positive">Submit</Button>
      </Tooltip>
    </Card>
  );
}

组件接受其基本元素的标准HTML属性. A 类 Button 全部接受( e) ButtonHTMLAttributes页:1 Link 全部接受( e) AnchorHTMLAttributes,等等。 (笑声).

修饰家庭

几个组件接受与修饰家庭相对应的外观道具 @canonical/ds-types数字 :

<Button appearance="positive">Confirm</Button>
<Button appearance="negative">Delete</Button>
<Button appearance="caution">Proceed with caution</Button>

与 CSS 定义的自定义属性相融合的修改类 @canonical/styles。 。 。 .

样式

@canonical/styles 提供全局设计符号(颜色、间距、打字)。 本套件中的每个组件将自己的组件级符号放在一个 styles.css 文件位于组件源旁边。 这些组件符号参考了来自 @canonical/design-tokens ,并在组件被导入时自动包含.

CSS 组件如何到达页面

每个组件模块都导入自己的样式表(import "./styles.css"),所以导入一个组件就是将它的CSS放入页面. 捆绑者收集这些导入到应用程序的CSS中;这里没有在运行时注入,也没有样式表可以手动链接. 结果是,一个你从未进口过没有CSS的船体的部件, 并且一个捆绑者碰巧放出床单的命令, 并不是你能够依赖的, 这就是下面的级联层的目的.

这就是下面的总和。 它本身没有一层,进口是赤裸裸的:它进口的每张纸都已经打开了自己的块,所以进口一张 layer(…) 将它嵌入一个更深的平面 而不是放在它.

要链接的文件

包船的每个部件样式表也以一个集合列出:

@import url("@canonical/styles");
@import url("@canonical/react-ds-global/index.css");

这就是整个文件,一个 @import 每个组件样式表,没有其它东西——它购买的是存在,而不是位置.

每个组件都从模块中导入自己的样式表,因此没有集合组件的规则只有在让其达到的JavaScript时才能到达页面. 因此,在部件的CSS到达之前,懒散的路线会作画. 连接汇总将每个组件规则放入条目样式表,从第一个颜料中呈现出来,因此任何路由都无法被渲染出不样式.

它没有固定规则在所建的床单中的位置。 两种副本都到达了建筑——集合和组件模块的建筑——和一个去除重复的修饰器保持了 最后一个,这是模块的。 按参考应用程序衡量:每个组件规则的活下来副本在应用程序自己的CSS之后,确切位置是没有集合的;其前方的所有集合叶子是11个 @media 编号 : @starting-style 编号 : :has() 碎片不能崩溃(1,033字节)。 组件与应用程序之间的顺序在此不确定,不应依赖。 用组件样式表包裹 ds.components.global ——下面一节——按层次和源头位置进行的级联仲裁根本不重要.

列表是来源,而不是输出:它是手写的,如寄存器的章程所要求(通过一个构建步骤明确导入,通过命名惯例来发现文件),以及 src/lib/index.css.test.ts 如果停止匹配磁盘上的样式表,则无法构建 . 添加组件表示添加其行按字母顺序排列,在 src/lib/index.css。 。 。 .

字节已经装入捆绑中: 软件包声明不 sideEffects因此,一个到达桶的捆绑机 将所有46个床单拉入不管。 在参考建构上,总和在简洁的样式表上增加了1,033个字节——重复去除的叶子的残留物,在一个不去除重复的建筑上大约增加了96个KB.

公布的路径是 @canonical/react-ds-global/index.css (子路径 exports 地图名称)和 dist/esm/lib/index.css (档案本身). 货单上还有 style,一些工具读取了该软件包的样式表而无需导入 @canonical/react-ds-global-form 用于自己的用途.

软件包所出版的内容以及如何导入

名单现在载有 exports 映射,这是此软件包对下列路径的列表:

对于通过地图未回答的路径导入的任何人来说,这是一个突破性的变化. 之前,一个没有的包 exports 映射让解析器到达目录中的任何文件, 在大多数捆绑者中, 猜测其它文件—— 您离开的扩展名, 或是 index.js 在您命名的文件夹中 。 有两件事不起作用了:

• 一个文件夹而不是一个文件 . @canonical/react-ds-global/dist/esm 财务报告和审定财务报表 @canonical/react-ds-global/dist/esm/lib/component/Button 用来找到 index.js 在他们体内。 文件名称 : …/dist/esm/index.js, (中文(简体) ), …/dist/esm/lib/component/Button/index.js。 。 。 .
• 外面的任何东西 dist。 。 。 . @canonical/react-ds-global/README.md,或任何 src/… 在工作空间校验中解决的路径, 现在失败 ERR_PACKAGE_PATH_NOT_EXPORTED。这些文件无论如何都不公布; files 仅列出过 dist。 。 。 .

将扩展名离开真实文件( E)…/Button/Button)仍然在我们测试的解决者中工作,但它取决于解决者而不是这个包——写扩展.

按名称导入软件包,或按其子路径导入样式表,不会受到影响,几乎每个消费者都会这样做.

每个组件样式表都在 ds.components.global

每个组件 styles.css 在此包件中用一个级联层包裹:

@layer ds.components.global {
  .ds.my-component {
    /* … */
  }
}

@canonical/styles 在一个语句中宣布每层的顺序 ds.components.global 坐于其上相近相. 二事随顺.

上面是其他组件级,它们沿着设计系统自己的分层树,平: ds.components.sites, (中文(简体) ), ds.components.documentation, (中文(简体) ), ds.components.stores 财务报告和审定财务报表 ds.components.apps,在其中每一个上方,有一个产品本身组件的分层 ds.components.apps-lxd,该软件包宣布了它本身,在其CSS条目中的第一个规则,因为样式包的订单语句不能知道产品的名称. 平地而不是筑巢:筑巢 ds.components.apps.lxd 将排序 内部 ds.components.apps 所以就输掉所有直接写下来的规则 与产品级的需求相反.

这些软件包还没有被包裹——在撰写时,下面没有样式表 packages/react/ds-app* 或者说 packages/svelte/ds-app* 背负着一层一层——并且正在用一个包包与这个包包一起进行包装。 因此,今天一个产品级仍然比这个软件包好,原因恰恰相反:它是无层的,无层的节拍是分层的。 层层保证,一旦这些套件落地, 产品级规则 对于一个组件,这个套件的样式也会通过级联层胜出, 而不是通过最后释放的装入器的捆绑胜出.

申请本身 无层 CSS现在击败了这个软件包中的每一个规则,无论哪一边的选取者,因为没有层次的作者规则排在每层的分数后. 这是CSS设计的,这是故意逃出舱门:一个需要覆盖一个组件的应用程序会写出一个简单的规则,它会获胜。 实际的应用程序 没有 无意中取胜,让CSS进入 @layer app。 。 。 .

捐助者规则: 每个组件 styles.css 在这个包中,用包装打开. @keyframes 和该部件本身 :root 默认值会进入其中; @property 财务报告和审定财务报表 @font-face 登记在外,在街区上方。 这是惯例,不是级联的力量:层层的确在排序注册——高层层 @property 或者说 @keyframes 以任一源顺序击败下层,而未下层的则击败了两者(在Chromium 151中测量出). 将注册内容保留在区块之上, 让他们读作自己. @keyframes 进到块内是相反的选择, 和深思熟虑: 它让一个应用层 替换一个动画层。 此包件船是导入的 赤线从不与 layer(ds.components.global):它已经打开了自己的块,关键词会把它嵌入更深一层,在 ds.components.global.ds.components.global ——一个在任何特异性(Chrimium 151中测量)中输给本层自身规则的子层. layer(…) 在导入时,是用于不带一层自带的工作表。 永远无法到达 !important 以赢得争斗——一项重要宣言颠倒了地层秩序,完全不能被地层仲裁. 包裹的船是一号, component/Tooltip/styles.css:16,它将边距从任何工具提示上剥去;这是一个已知的缺陷,组件-hygiene的改变可以去除它。 这个 @canonical/styles README"卡斯卡德地层"部分是全序和被故意留下的未分层的参考.

拥有他们制作的原生人的盒子

A. 使本地要素具有下列特性的组成部分: <button>,一个 <input>页:1 <label> ——负责该元素的框:其边距,宽度,宽度 min-width页:1 box-sizing。如果组件未申报,则由主机页面加载的其他内容填入,并在一个同样运行另一个框架的页面上填入,这个框架是一个可见的错误而不是默认错误。 宣布这个盒子是作为它自己的变化来完成的;在它着陆之前,把"原住民的外观在我们自己的一页"视为比听起来更弱的保证.

图标资产

制作图标的组件—— Icon, (中文(简体) ), Spinner,以及带有 图标支付(例如: Accordion - 参考来自 @canonical/ds-assets 运行时间而不是从JavaScript捆绑。 每个 glyph由 URL 获取,例如:. /icons/spinner.svg#spinner。 。 。 .

因此,您的申请必须 服务 @canonical/ds-assets 图标在 /icons。在大多数设置中,这意味着复制(或并联)软件包 icons/ 应用程序的静态/ 公用目录中的目录, 所以文件是 可达时间 /icons/*.svg图标 组件挂载但显示为空( SVG) <use> 决心一无所有.

如果您从不同的路径为图标服务 :

• Icon 财务报告和审定财务报表 Spinner 接受一个 rootPath 道具( 默认) /icons改为: 覆盖每个实例的位置 :

  <Spinner rootPath="/assets/icons" />
  

  目前没有全局默认值——每个组件的覆被 举个例子.

• CSS 参考图标 (例如: Accordion (c) 固定在下列地点: /icons 在样式表中,不能通过道具定向。 服务于 图标在 /icons,或覆盖 CSS 自定义属性 你的风格.

为图标根规划了单一的全球真理源;在此之前, 资产在 /icons 是抵抗最小的路径.

故事书

每个组成部分包括显示使用模式和变体的故事:

cd packages/react/ds-global
bun run storybook

构成部分规格

构成部分规格定义载于 设计系统本体学。 。 。 .