feat: button component token (ant-design#44090)

* feat: button component token * chore: add demo * chore: update
ammar-knowledge · Aug 8, 2023 · 4fe27ba · 4fe27ba
1 parent 9d122a6
commit 4fe27ba
Show file tree

Hide file tree

Showing 11 changed files with 573 additions and 63 deletions.
diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -388,6 +388,115 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context
 
 exports[`renders components/button/demo/chinese-chars-loading.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/button/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+      style="flex-wrap: wrap; margin-bottom: -8px;"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right: 8px; padding-bottom: 8px;"
+      >
+        <button
+          class="ant-btn ant-btn-text"
+          type="button"
+        >
+          <span>
+            TEXT
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right: 8px; padding-bottom: 8px;"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            CONTAINED
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="padding-bottom: 8px;"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          type="button"
+        >
+          <span>
+            OUTLINED
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+      style="flex-wrap: wrap; margin-bottom: -8px;"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right: 8px; padding-bottom: 8px;"
+      >
+        <button
+          class="ant-btn ant-btn-text"
+          disabled=""
+          type="button"
+        >
+          <span>
+            TEXT
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right: 8px; padding-bottom: 8px;"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          disabled=""
+          type="button"
+        >
+          <span>
+            CONTAINED
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="padding-bottom: 8px;"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          disabled=""
+          type="button"
+        >
+          <span>
+            OUTLINED
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/button/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/button/demo/danger.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -377,6 +377,113 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx correctly 1`]
 </div>
 `;
 
+exports[`renders components/button/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+      style="flex-wrap:wrap;margin-bottom:-8px"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px;padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-btn-text"
+          type="button"
+        >
+          <span>
+            TEXT
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:8px;padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            CONTAINED
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          type="button"
+        >
+          <span>
+            OUTLINED
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+      style="flex-wrap:wrap;margin-bottom:-8px"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px;padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-btn-text"
+          disabled=""
+          type="button"
+        >
+          <span>
+            TEXT
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:8px;padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          disabled=""
+          type="button"
+        >
+          <span>
+            CONTAINED
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          disabled=""
+          type="button"
+        >
+          <span>
+            OUTLINED
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/button/demo/danger.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

diff --git a/components/button/demo/component-token.md b/components/button/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+组件 Token，模仿 MUI 风格的 Button
+
+## en-US
+
+Component Token. Button with MUI style.
diff --git a/components/button/demo/component-token.tsx b/components/button/demo/component-token.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button, ConfigProvider, Space } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Button: {
+          algorithm: true,
+          colorPrimary: '#1976d2',
+          controlHeight: 36,
+          primaryShadow:
+            '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+          fontWeight: 500,
+          defaultBorderColor: 'rgba(25, 118, 210, 0.5)',
+          colorText: '#1976d2',
+          defaultColor: '#1976d2',
+          borderRadius: 4,
+          colorTextDisabled: 'rgba(0, 0, 0, 0.26)',
+          colorBgContainerDisabled: 'rgba(0, 0, 0, 0.12)',
+        },
+      },
+    }}
+  >
+    <Space direction="vertical">
+      <Space wrap>
+        <Button type="text">TEXT</Button>
+        <Button type="primary">CONTAINED</Button>
+        <Button>OUTLINED</Button>
+      </Space>
+      <Space wrap>
+        <Button type="text" disabled>
+          TEXT
+        </Button>
+        <Button type="primary" disabled>
+          CONTAINED
+        </Button>
+        <Button disabled>OUTLINED</Button>
+      </Space>
+    </Space>
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -47,6 +47,7 @@ And 4 other properties additionally.
 <code src="./demo/block.tsx">Block Button</code>
 <code src="./demo/legacy-group.tsx" debug>Deprecated Button Group</code>
 <code src="./demo/chinese-chars-loading.tsx" debug>Loading style bug</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
@@ -50,6 +50,7 @@ group:
 <code src="./demo/block.tsx">Block 按钮</code>
 <code src="./demo/legacy-group.tsx" debug>废弃的 Block 组</code>
 <code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

diff --git a/components/button/style/group.ts b/components/button/style/group.ts
@@ -23,7 +23,7 @@ const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
 });
 
 const genGroupStyle: GenerateStyle<ButtonToken> = (token) => {
-  const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token;
+  const { componentCls, fontSize, lineWidth, groupBorderColor, colorErrorHover } = token;
 
   return {
     [`${componentCls}-group`]: [
@@ -71,7 +71,7 @@ const genGroupStyle: GenerateStyle<ButtonToken> = (token) => {
       },
 
       // Border Color
-      genButtonBorderStyle(`${componentCls}-primary`, colorPrimaryHover),
+      genButtonBorderStyle(`${componentCls}-primary`, groupBorderColor),
       genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover),
     ],
   };