docs: component token meta (ant-design#43337)

* docs: component token meta * docs: more * docs: complete
peter-boot · Jul 5, 2023 · b64a57d · b64a57d
1 parent a640139
commit b64a57d
Show file tree

Hide file tree

Showing 43 changed files with 1,006 additions and 79 deletions.
diff --git a/.dumi/theme/builtins/ColorChunk/index.tsx b/.dumi/theme/builtins/ColorChunk/index.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { TinyColor, type ColorInput } from '@ctrl/tinycolor';
 import { css } from '@emotion/react';
+import * as React from 'react';
 import useSiteToken from '../../../hooks/useSiteToken';
 
 interface ColorChunkProps {
@@ -23,7 +23,7 @@ const useStyle = () => {
       display: inline-block;
       width: 6px;
       height: 6px;
-      border-radius: ${token.borderRadiusSM}px;
+      border-radius: 50%;
       margin-inline-end: 4px;
       border: 1px solid ${token.colorSplit};
     `,

diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx
@@ -17,12 +17,16 @@ const locales = {
     description: '描述',
     type: '类型',
     value: '默认值',
+    componentToken: '组件 Token',
+    globalToken: '全局 Token',
   },
   en: {
     token: 'Token Name',
     description: 'Description',
     type: 'Type',
     value: 'Default Value',
+    componentToken: 'Component Token',
+    globalToken: 'Global Token',
   },
 };
 
@@ -48,9 +52,10 @@ interface SubTokenTableProps {
   defaultOpen?: boolean;
   title: string;
   tokens: string[];
+  component?: string;
 }
 
-const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title }) => {
+const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title, component }) => {
   const [, lang] = useLocale(locales);
   const { token } = useSiteToken();
   const columns = useColumns();
@@ -64,22 +69,28 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
   }
 
   const data = tokens
-    .sort((token1, token2) => {
-      const hasColor1 = token1.toLowerCase().includes('color');
-      const hasColor2 = token2.toLowerCase().includes('color');
-
-      if (hasColor1 && !hasColor2) {
-        return -1;
-      }
-
-      if (!hasColor1 && hasColor2) {
-        return 1;
-      }
-
-      return token1 < token2 ? -1 : 1;
-    })
+    .sort(
+      component
+        ? undefined
+        : (token1, token2) => {
+            const hasColor1 = token1.toLowerCase().includes('color');
+            const hasColor2 = token2.toLowerCase().includes('color');
+
+            if (hasColor1 && !hasColor2) {
+              return -1;
+            }
+
+            if (!hasColor1 && hasColor2) {
+              return 1;
+            }
+
+            return token1 < token2 ? -1 : 1;
+          },
+    )
     .map((name) => {
-      const meta = tokenMeta[name];
+      const meta = component
+        ? tokenMeta.components[component].find((item) => item.token === name)
+        : tokenMeta.global[name];
 
       if (!meta) {
         return null;
@@ -89,7 +100,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
         name,
         desc: lang === 'cn' ? meta.desc : meta.descEn,
         type: meta.type,
-        value: defaultToken[name],
+        value: component ? tokenData[component].component[name] : defaultToken[name],
       };
     })
     .filter(Boolean);
@@ -122,28 +133,31 @@ export interface ComponentTokenTableProps {
 }
 
 const ComponentTokenTable: React.FC<ComponentTokenTableProps> = ({ component }) => {
+  const [locale] = useLocale(locales);
   const [mergedGlobalTokens] = useMemo(() => {
     const globalTokenSet = new Set<string>();
-    let componentTokens: Record<string, string> = {};
 
     component.split(',').forEach((comp) => {
-      const { global: globalTokens = [], component: singleComponentTokens = [] } =
-        tokenData[comp] || {};
+      const { global: globalTokens = [] } = tokenData[comp] || {};
 
       globalTokens.forEach((token: string) => {
         globalTokenSet.add(token);
       });
-
-      componentTokens = {
-        ...componentTokens,
-        ...singleComponentTokens,
-      };
     });
 
-    return [Array.from(globalTokenSet), componentTokens] as const;
+    return [Array.from(globalTokenSet)] as const;
   }, [component]);
 
-  return <SubTokenTable title="Global Token" tokens={mergedGlobalTokens} />;
+  return (
+    <>
+      <SubTokenTable
+        title={locale.componentToken}
+        tokens={tokenMeta.components[component].map((item) => item.token)}
+        component={component}
+      />
+      <SubTokenTable title={locale.globalToken} tokens={mergedGlobalTokens} />
+    </>
+  );
 };
 
 export default React.memo(ComponentTokenTable);
diff --git a/.dumi/theme/builtins/TokenTable/index.tsx b/.dumi/theme/builtins/TokenTable/index.tsx
@@ -98,7 +98,7 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
 
   const data = React.useMemo<TokenData[]>(
     () =>
-      Object.entries(tokenMeta)
+      Object.entries(tokenMeta.global)
         .filter(([, meta]) => meta.source === type)
         .map(([token, meta]) => ({
           name: token,

diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.ts
@@ -4,7 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 链接横向内间距
+   * @descEN Link horizontal padding
+   */
   linkPaddingBlock: number;
+  /**
+   * @desc 链接纵向内间距
+   * @descEN Link vertical padding
+   */
   linkPaddingInlineStart: number;
 }
 

diff --git a/components/avatar/style/index.ts b/components/avatar/style/index.ts
@@ -4,14 +4,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 头像背景色
+   * @descEN Background color of Avatar
+   */
   containerSize: number;
+  /**
+   * @desc 大号头像尺寸
+   * @descEN Size of large Avatar
+   */
   containerSizeLG: number;
+  /**
+   * @desc 小号头像尺寸
+   * @descEN Size of small Avatar
+   */
   containerSizeSM: number;
+  /**
+   * @desc 头像文字大小
+   * @descEN Font size of Avatar
+   */
   textFontSize: number;
+  /**
+   * @desc 大号头像文字大小
+   * @descEN Font size of large Avatar
+   */
   textFontSizeLG: number;
+  /**
+   * @desc 小号头像文字大小
+   * @descEN Font size of small Avatar
+   */
   textFontSizeSM: number;
+  /**
+   * @desc 头像组间距
+   * @descEN Spacing between avatars in a group
+   */
   groupSpace: number;
+  /**
+   * @desc 头像组重叠宽度
+   * @descEN Overlapping of avatars in a group
+   */
   groupOverlapping: number;
+  /**
+   * @desc 头像组边框颜色
+   * @descEN Border color of avatars in a group
+   */
   groupBorderColor: string;
 }
 

diff --git a/components/breadcrumb/style/index.ts b/components/breadcrumb/style/index.ts
@@ -4,12 +4,40 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 面包屑项文字颜色
+   * @descEN Text color of Breadcrumb item
+   */
   itemColor: string;
+  /**
+   * @desc 图标大小
+   * @descEN Icon size
+   */
   iconFontSize: number;
+  /**
+   * @desc 链接文字颜色
+   * @descEN Text color of link
+   */
   linkColor: string;
+  /**
+   * @desc 链接文字悬浮颜色
+   * @descEN Color of hovered link
+   */
   linkHoverColor: string;
+  /**
+   * @desc 最后一项文字颜色
+   * @descEN Text color of the last item
+   */
   lastItemColor: string;
+  /**
+   * @desc 分隔符外间距
+   * @descEN Margin of separator
+   */
   separatorMargin: number;
+  /**
+   * @desc 分隔符颜色
+   * @descEN Color of separator
+   */
   separatorColor: string;
 }
 

diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts
@@ -8,11 +8,35 @@ import type { FullToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 年选择器宽度
+   * @descEN Width of year select
+   */
   yearControlWidth: number;
+  /**
+   * @desc 月选择器宽度
+   * @descEN Width of month select
+   */
   monthControlWidth: number;
+  /**
+   * @desc 迷你日历内容高度
+   * @descEN Height of mini calendar content
+   */
   miniContentHeight: number;
+  /**
+   * @desc 完整日历背景色
+   * @descEN Background color of full calendar
+   */
   fullBg: string;
+  /**
+   * @desc 完整日历面板背景色
+   * @descEN Background color of full calendar panel
+   */
   fullPanelBg: string;
+  /**
+   * @desc 日期项选中背景色
+   * @descEN Background color of selected date item
+   */
   itemActiveBg: string;
 }
 

diff --git a/components/card/style/index.ts b/components/card/style/index.ts
@@ -5,14 +5,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 卡片头部背景色
+   * @descEN Background color of card header
+   */
   headerBg: string;
+  /**
+   * @desc 卡片头部文字大小
+   * @descEN Font size of card header
+   */
   headerFontSize: number;
+  /**
+   * @desc 小号卡片头部文字大小
+   * @descEN Font size of small card header
+   */
   headerFontSizeSM: number;
+  /**
+   * @desc 卡片头部高度
+   * @descEN Height of card header
+   */
   headerHeight: number;
+  /**
+   * @desc 小号卡片头部高度
+   * @descEN Height of small card header
+   */
   headerHeightSM: number;
+  /**
+   * @desc 操作区背景色
+   * @descEN Background color of card actions
+   */
   actionsBg: string;
+  /**
+   * @desc 操作区每一项的外间距
+   * @descEN Margin of each item in card actions
+   */
   actionsLiMargin: string;
+  /**
+   * @desc 内置标签页组件下间距
+   * @descEN Margin bottom of tabs component
+   */
   tabsMarginBottom: number;
+  /**
+   * @desc 额外区文字颜色
+   * @descEN Text color of extra area
+   */
   extraColor: string;
 }
 

diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts
@@ -3,10 +3,22 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 指示点宽度
+   * @descEN Width of indicator
+   */
   dotWidth: number;
+  /**
+   * @desc 指示点高度
+   * @descEN Height of indicator
+   */
   dotHeight: number;
   /** @deprecated Use `dotActiveWidth` instead. */
   dotWidthActive: number;
+  /**
+   * @desc 激活态指示点宽度
+   * @descEN Width of active indicator
+   */
   dotActiveWidth: number;
 }
 

diff --git a/components/cascader/style/index.ts b/components/cascader/style/index.ts
@@ -1,12 +1,24 @@
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook } from '../../theme/internal';
 import { textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 选择器宽度
+   * @descEN Width of Cascader
+   */
   controlWidth: number;
+  /**
+   * @desc 选项宽度
+   * @descEN Width of item
+   */
   controlItemWidth: number;
+  /**
+   * @desc 下拉菜单高度
+   * @descEN Height of dropdown
+   */
   dropdownHeight: number;
 }