feat: component token rename (ant-design#42184)

* feat: component token naming rules * dcos: update * feat: modal token rename * feat: rename result token * feat: statsitic token rename * feat: steps token remane * chore: update snapshot * chore: fix lint * feat: semantic part component * revert: button & notification * revert: files * chore: code clean
peter-boot · May 9, 2023 · 34af3ec · 34af3ec
1 parent 5904f80
commit 34af3ec
Show file tree

Hide file tree

Showing 53 changed files with 3,267 additions and 394 deletions.
diff --git a/components/button/style/index.ts b/components/button/style/index.ts
@@ -7,14 +7,13 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genGroupStyle from './group';
 
 /** Component only token. Which will handle additional calculation of alias token */
-export interface ComponentToken {
-  buttonFontWeight: number;
-}
+export interface ComponentToken {}
 
 export interface ButtonToken extends FullToken<'Button'> {
   colorOutlineDefault: string;
   buttonPaddingHorizontal: number;
   buttonIconOnlyFontSize: number;
+  buttonFontWeight: number;
 }
 
 // ============================== Shared ==============================
@@ -504,41 +503,36 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
-  'Button',
-  (token) => {
-    const { controlTmpOutline, paddingContentHorizontal } = token;
-
-    const buttonToken = mergeToken<ButtonToken>(token, {
-      colorOutlineDefault: controlTmpOutline,
-      buttonPaddingHorizontal: paddingContentHorizontal,
-      buttonIconOnlyFontSize: token.fontSizeLG,
-    });
-
-    return [
-      // Shared
-      genSharedButtonStyle(buttonToken),
-
-      // Size
-      genSizeSmallButtonStyle(buttonToken),
-      genSizeBaseButtonStyle(buttonToken),
-      genSizeLargeButtonStyle(buttonToken),
-
-      // Block
-      genBlockButtonStyle(buttonToken),
-
-      // Group (type, ghost, danger, disabled, loading)
-      genTypeButtonStyle(buttonToken),
-
-      // Button Group
-      genGroupStyle(buttonToken),
-
-      // Space Compact
-      genCompactItemStyle(token),
-      genCompactItemVerticalStyle(token),
-    ];
-  },
-  {
+export default genComponentStyleHook('Button', (token) => {
+  const { controlTmpOutline, paddingContentHorizontal } = token;
+
+  const buttonToken = mergeToken<ButtonToken>(token, {
+    colorOutlineDefault: controlTmpOutline,
+    buttonPaddingHorizontal: paddingContentHorizontal,
+    buttonIconOnlyFontSize: token.fontSizeLG,
     buttonFontWeight: 400,
-  },
-);
+  });
+
+  return [
+    // Shared
+    genSharedButtonStyle(buttonToken),
+
+    // Size
+    genSizeSmallButtonStyle(buttonToken),
+    genSizeBaseButtonStyle(buttonToken),
+    genSizeLargeButtonStyle(buttonToken),
+
+    // Block
+    genBlockButtonStyle(buttonToken),
+
+    // Group (type, ghost, danger, disabled, loading)
+    genTypeButtonStyle(buttonToken),
+
+    // Button Group
+    genGroupStyle(buttonToken),
+
+    // Space Compact
+    genCompactItemStyle(token),
+    genCompactItemVerticalStyle(token),
+  ];
+});
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -99,6 +99,70 @@ Array [
 ]
 `;
 
+exports[`renders components/drawer/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  style="padding: 32px; background: rgb(230, 230, 230);"
+>
+  <div
+    class="ant-drawer ant-drawer-pure ant-drawer-right"
+    style="height: 300px;"
+  >
+    <div
+      class="ant-drawer-wrapper-body"
+    >
+      <div
+        class="ant-drawer-header"
+      >
+        <div
+          class="ant-drawer-header-title"
+        >
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+            type="button"
+          >
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </span>
+          </button>
+          <div
+            class="ant-drawer-title"
+          >
+            Hello Title
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-drawer-body"
+      >
+        Hello Content
+      </div>
+      <div
+        class="ant-drawer-footer"
+      >
+        Footer!
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/drawer/demo/config-provider.tsx extend context correctly 1`] = `
 <div
   class="site-drawer-render-in-current-wrapper"

diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
@@ -11,6 +11,70 @@ exports[`renders components/drawer/demo/basic-right.tsx correctly 1`] = `
 </button>
 `;
 
+exports[`renders components/drawer/demo/component-token.tsx correctly 1`] = `
+<div
+  style="padding:32px;background:#e6e6e6"
+>
+  <div
+    class="ant-drawer ant-drawer-pure ant-drawer-right"
+    style="height:300px"
+  >
+    <div
+      class="ant-drawer-wrapper-body"
+    >
+      <div
+        class="ant-drawer-header"
+      >
+        <div
+          class="ant-drawer-header-title"
+        >
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+            type="button"
+          >
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </span>
+          </button>
+          <div
+            class="ant-drawer-title"
+          >
+            Hello Title
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-drawer-body"
+      >
+        Hello Content
+      </div>
+      <div
+        class="ant-drawer-footer"
+      >
+        Footer!
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/drawer/demo/config-provider.tsx correctly 1`] = `
 <div
   class="site-drawer-render-in-current-wrapper"

diff --git a/components/drawer/demo/component-token.md b/components/drawer/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
diff --git a/components/drawer/demo/component-token.tsx b/components/drawer/demo/component-token.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ConfigProvider, Drawer } from 'antd';
+
+/** Test usage. Do not use in your production. */
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer;
+
+export default () => (
+  <ConfigProvider
+    theme={{ components: { Drawer: { footerPaddingBlock: 0, footerPaddingInline: 0 } } }}
+  >
+    <div style={{ padding: 32, background: '#e6e6e6' }}>
+      <InternalDrawer title="Hello Title" style={{ height: 300 }} footer="Footer!">
+        Hello Content
+      </InternalDrawer>
+    </div>
+  </ConfigProvider>
+);
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
@@ -34,6 +34,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 <code src="./demo/no-mask.tsx" debug>No mask</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/scroll-debug.tsx" debug>Scroll Debug</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
@@ -33,6 +33,7 @@ demo:
 <code src="./demo/no-mask.tsx" debug>无遮罩</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/scroll-debug.tsx" debug>滚动锁定调试</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

diff --git a/components/drawer/style/index.ts b/components/drawer/style/index.ts
@@ -4,8 +4,8 @@ import genMotionStyle from './motion';
 
 export interface ComponentToken {
   zIndexPopup: number;
-  drawerFooterPaddingVertical: number;
-  drawerFooterPaddingHorizontal: number;
+  footerPaddingBlock: number;
+  footerPaddingInline: number;
 }
 
 export interface DrawerToken extends FullToken<'Drawer'> {}
@@ -31,8 +31,8 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
     colorIconHover,
     colorText,
     fontWeightStrong,
-    drawerFooterPaddingVertical,
-    drawerFooterPaddingHorizontal,
+    footerPaddingBlock,
+    footerPaddingInline,
   } = token;
 
   const wrapperCls = `${componentCls}-content-wrapper`;
@@ -200,7 +200,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
       // Footer
       [`${componentCls}-footer`]: {
         flexShrink: 0,
-        padding: `${drawerFooterPaddingVertical}px ${drawerFooterPaddingHorizontal}px`,
+        padding: `${footerPaddingBlock}px ${footerPaddingInline}px`,
         borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
       },
 
@@ -222,7 +222,7 @@ export default genComponentStyleHook(
   },
   (token) => ({
     zIndexPopup: token.zIndexPopupBase,
-    drawerFooterPaddingVertical: token.paddingXS,
-    drawerFooterPaddingHorizontal: token.padding,
+    footerPaddingBlock: token.paddingXS,
+    footerPaddingInline: token.padding,
   }),
 );
diff --git a/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,5 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders components/message/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-message-notice ant-message-notice-pure-panel"
+>
+  <div
+    class="ant-message-notice-content"
+  >
+    <div
+      class="ant-message-custom-content ant-message-error"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          />
+        </svg>
+      </span>
+      <span>
+        Hello World!
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/message/demo/custom-style.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"