docs: more token info (#41475)

.dumi/theme/builtins/ComponentTokenTable/index.tsx

@@ -58,13 +58,18 @@ function SubTokenTable({ defaultOpen, tokens, title }: SubTokenTableProps) {
     .map((name) => {
       const meta = tokenMeta[name];
 
+      if (!meta) {
+        return null;
+      }
+
       return {
         name,
         desc: lang === 'cn' ? meta.desc : meta.descEn,
         type: meta.type,
         value: (defaultToken as any)[name],
       };
-    });
+    })
+    .filter((info) => info);
 
   return (
     // Reuse `.markdown` style
@@ -97,12 +102,32 @@ export interface ComponentTokenTableProps {
 }
 
 function ComponentTokenTable({ component }: ComponentTokenTableProps) {
-  const { global: globalTokens = [], component: componentTokens = [] } = tokenData[component] || {};
+  const [mergedGlobalTokens] = React.useMemo(() => {
+    const globalTokenSet = new Set<string>();
+    let componentTokens: Record<string, string> = {};
+
+    component.split(',').forEach((comp) => {
+      const { global: globalTokens = [], component: singleComponentTokens = [] } =
+        tokenData[comp] || {};
+
+      globalTokens.forEach((token: string) => {
+        globalTokenSet.add(token);
+      });
+
+      componentTokens = {
+        ...componentTokens,
+        ...singleComponentTokens,
+      };
+    });
+
+    return [Array.from(globalTokenSet), componentTokens];
+  }, [component]);
 
   return (
     <>
-      <SubTokenTable title="Component Token" tokens={componentTokens} defaultOpen />
-      <SubTokenTable title="Global Token" tokens={globalTokens} />
+      {/* Component Token 先不展示 */}
+      {/* <SubTokenTable title="Component Token" tokens={mergedComponentTokens} defaultOpen /> */}
+      <SubTokenTable title="Global Token" tokens={mergedGlobalTokens} />
     </>
   );
 }

components/anchor/index.en-US.md

@@ -68,3 +68,7 @@ We recommend using the items form instead.
 | href     | The target of hyperlink                   | string    |         |         |
 | target   | Specifies where to display the linked URL | string    |         |         |
 | title    | The content of hyperlink                  | ReactNode |         |         |
+
+## Design Token
+
+<ComponentTokenTable component="Anchor"></ComponentTokenTable>

components/anchor/index.zh-CN.md

@@ -69,3 +69,7 @@ group:
 | href   | 锚点链接                       | string    | -      |      |
 | target | 该属性指定在何处显示链接的资源 | string    | -      |      |
 | title  | 文字内容                       | ReactNode | -      |      |
+
+## Design Token
+
+<ComponentTokenTable component="Anchor"></ComponentTokenTable>

components/breadcrumb/index.en-US.md

@@ -125,3 +125,7 @@ function itemRender(route, params, items, paths) {
 
 return <Breadcrumb itemRender={itemRender} items={items} />;
 ```
+
+## Design Token
+
+<ComponentTokenTable component="Breadcrumb"></ComponentTokenTable>

components/breadcrumb/index.zh-CN.md

@@ -126,3 +126,7 @@ function itemRender(item, params, items, paths) {
 
 return <Breadcrumb itemRender={itemRender} items={items} />;
 ```
+
+## Design Token
+
+<ComponentTokenTable component="Breadcrumb"></ComponentTokenTable>

components/divider/index.en-US.md

@@ -38,3 +38,7 @@ A divider line separates different content.
 | plain | Divider text show as plain style | boolean | true | 4.2.0 |
 | style | The style object of container | CSSProperties | - |  |
 | type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` |  |
+
+## Design Token
+
+<ComponentTokenTable component="Divider"></ComponentTokenTable>

components/divider/index.zh-CN.md

@@ -39,3 +39,7 @@ group:
 | plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
 | style | 分割线样式对象 | CSSProperties | - |  |
 | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |
+
+## Design Token
+
+<ComponentTokenTable component="Divider"></ComponentTokenTable>

components/dropdown/index.en-US.md

@@ -72,3 +72,7 @@ Same props from Dropdown. And includes additional props:
 ## Note
 
 Please ensure that the child node of `Dropdown` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
+
+## Design Token
+
+<ComponentTokenTable component="Dropdown"></ComponentTokenTable>

components/dropdown/index.zh-CN.md

@@ -76,3 +76,7 @@ demo:
 ## 注意
 
 请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
+
+## Design Token
+
+<ComponentTokenTable component="Dropdown"></ComponentTokenTable>

components/layout/index.en-US.md

@@ -127,3 +127,7 @@ The sidebar.
   xxl: '1600px',
 }
 ```
+
+## Design Token
+
+<ComponentTokenTable component="Layout"></ComponentTokenTable>

components/layout/index.zh-CN.md

@@ -128,3 +128,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA
   xxl: '1600px',
 }
 ```
+
+## Design Token
+
+<ComponentTokenTable component="Layout"></ComponentTokenTable>

components/menu/index.en-US.md

@@ -142,3 +142,7 @@ Menu will render fully item in flex layout and then collapse it. You need tell f
   <Menu style={{ minWidth: 0, flex: "auto" }} />
 </div>
 ```
+
+## Design Token
+
+<ComponentTokenTable component="Menu"></ComponentTokenTable>

components/menu/index.zh-CN.md

@@ -142,3 +142,7 @@ Menu 初始化时会先全部渲染，然后根据宽度裁剪内容。当处于
   <Menu style={{ minWidth: 0, flex: "auto" }} />
 </div>
 ```
+
+## Design Token
+
+<ComponentTokenTable component="Menu"></ComponentTokenTable>

components/pagination/index.en-US.md

@@ -55,3 +55,7 @@ A long list can be divided into several pages using `Pagination`, and only one p
 | total | Total number of data items | number | 0 |  |
 | onChange | Called when the page number or `pageSize` is changed, and it takes the resulting page number and pageSize as its arguments | function(page, pageSize) | - |  |
 | onShowSizeChange | Called when `pageSize` is changed | function(current, size) | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Pagination"></ComponentTokenTable>

components/pagination/index.zh-CN.md

@@ -56,3 +56,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
 | total | 数据总数 | number | 0 |  |
 | onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - |  |
 | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Pagination"></ComponentTokenTable>

components/steps/index.en-US.md

@@ -79,3 +79,7 @@ A single step in the step bar.
 | status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` |  |
 | subTitle | Subtitle of the step | ReactNode | - |  |
 | title | Title of the step | ReactNode | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Steps"></ComponentTokenTable>

components/steps/index.zh-CN.md

@@ -80,3 +80,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 | status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` |  |
 | subTitle | 子标题 | ReactNode | - |  |
 | title | 标题 | ReactNode | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Steps"></ComponentTokenTable>

components/theme/interface/maps/style.ts

@@ -36,6 +36,8 @@ export interface StyleMapToken {
    * @nameZH 外部圆角
    * @nameEN Outer Border Radius
    * @default 4
+   * @desc 外部圆角
+   * @descEN Outer border radius
    */
   borderRadiusOuter: number;
 }

components/theme/interface/seeds.ts

@@ -140,6 +140,8 @@ export interface SeedToken extends PresetColorType {
 
   /**
    * @nameZH 组件箭头尺寸
+   * @desc 组件箭头的尺寸
+   * @descEN The size of the component arrow
    */
   sizePopupArrow: number;
 
@@ -253,6 +255,7 @@ export interface SeedToken extends PresetColorType {
    * @nameZH 线框风格
    * @nameEN Wireframe Style
    * @desc 用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项
+   * @descEN Used to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration item
    * @default false
    */
   wireframe: boolean;

components/typography/index.en-US.md

@@ -152,6 +152,10 @@ Basic text writing, including headings, body text, lists, and more.
 | onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |
 | onExpand | Called when expand content | function(event) | - |  |
 
+## Design Token
+
+<ComponentTokenTable component="Typography"></ComponentTokenTable>
+
 ## FAQ
 
 ### How to use Typography.Link in react-router?

components/typography/index.zh-CN.md

@@ -153,6 +153,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
 | onExpand | 点击展开时的回调 | function(event) | - |  |
 
+## Design Token
+
+<ComponentTokenTable component="Typography"></ComponentTokenTable>
+
 ## FAQ
 
 ### Typography.Link 如何与 react-router 库集成？