feat(badge): migrate less to token (ant-design#42778)

* chore: update * docs: add component token demo * test: update snapshot * chore: update * test: update snapshot * feat: token * chore: update snapshot * chore: code clean * chore: code clean * chore: code clean * chore: code clean * chore: update * chore: fix lint * fix: fontsizesm --------- Co-authored-by: MadCcc <[email protected]>
ammar-knowledge · Aug 14, 2023 · 6a6f1b7 · 6a6f1b7
1 parent db07a2f
commit 6a6f1b7
Show file tree

Hide file tree

Showing 10 changed files with 466 additions and 73 deletions.
diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1390,6 +1390,147 @@ Array [
 
 exports[`renders components/badge/demo/colorful-with-count-debug.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/badge/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <span
+      class="ant-badge"
+    >
+      <span
+        class="ant-avatar ant-avatar-lg ant-avatar-square"
+      >
+        <span
+          class="ant-avatar-string"
+          style="transform: scale(1) translateX(-50%);"
+        />
+      </span>
+      <sup
+        class="ant-scroll-number ant-badge-count"
+        data-show="true"
+        title="5"
+      >
+        <span
+          class="ant-scroll-number-only"
+          style="transition: none;"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            5
+          </span>
+        </span>
+      </sup>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <span
+      class="ant-badge ant-badge-not-a-wrapper"
+    >
+      <sup
+        class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
+        data-show="true"
+        title="26"
+      >
+        <span
+          class="ant-scroll-number-only"
+          style="transition: none;"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            2
+          </span>
+        </span>
+        <span
+          class="ant-scroll-number-only"
+          style="transition: none;"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            6
+          </span>
+        </span>
+      </sup>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <span
+      class="ant-badge"
+    >
+      <span
+        aria-label="notification"
+        class="anticon anticon-notification"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="notification"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
+          />
+        </svg>
+      </span>
+      <sup
+        class="ant-scroll-number ant-badge-dot"
+        data-show="true"
+      />
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <span
+      class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+    >
+      <span
+        class="ant-badge-status-dot ant-badge-status-success"
+      />
+      <span
+        class="ant-badge-status-text"
+      >
+        Success
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-badge ant-badge-not-a-wrapper"
+    >
+      <sup
+        class="ant-scroll-number ant-badge-count ant-badge-count-sm"
+        data-show="true"
+        title="0"
+      >
+        0
+      </sup>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders components/badge/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/badge/demo/dot.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

diff --git a/components/badge/__tests__/__snapshots__/demo.test.tsx.snap b/components/badge/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1383,6 +1383,145 @@ Array [
 ]
 `;
 
+exports[`renders components/badge/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <span
+      class="ant-badge"
+    >
+      <span
+        class="ant-avatar ant-avatar-lg ant-avatar-square"
+      >
+        <span
+          class="ant-avatar-string"
+          style="opacity:0"
+        />
+      </span>
+      <sup
+        class="ant-scroll-number ant-badge-count"
+        data-show="true"
+        title="5"
+      >
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            5
+          </span>
+        </span>
+      </sup>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <span
+      class="ant-badge ant-badge-not-a-wrapper"
+    >
+      <sup
+        class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
+        data-show="true"
+        title="26"
+      >
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            2
+          </span>
+        </span>
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            6
+          </span>
+        </span>
+      </sup>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <span
+      class="ant-badge"
+    >
+      <span
+        aria-label="notification"
+        class="anticon anticon-notification"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="notification"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
+          />
+        </svg>
+      </span>
+      <sup
+        class="ant-scroll-number ant-badge-dot"
+        data-show="true"
+      />
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <span
+      class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+    >
+      <span
+        class="ant-badge-status-dot ant-badge-status-success"
+      />
+      <span
+        class="ant-badge-status-text"
+      >
+        Success
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-badge ant-badge-not-a-wrapper"
+    >
+      <sup
+        class="ant-scroll-number ant-badge-count ant-badge-count-sm"
+        data-show="true"
+        title="0"
+      >
+        0
+      </sup>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders components/badge/demo/dot.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

diff --git a/components/badge/demo/component-token.md b/components/badge/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug
diff --git a/components/badge/demo/component-token.tsx b/components/badge/demo/component-token.tsx
@@ -0,0 +1,32 @@
+import { NotificationOutlined } from '@ant-design/icons';
+import React from 'react';
+import { Avatar, Badge, ConfigProvider, Space } from 'antd';
+
+/** Test usage. Do not use in your production. */
+export default () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Badge: {
+          indicatorHeight: 24,
+          indicatorHeightSM: 18,
+          dotSize: 4,
+          textFontWeight: 'bold',
+          statusSize: 8,
+        },
+      },
+    }}
+  >
+    <Space direction="vertical">
+      <Badge count={5}>
+        <Avatar shape="square" size="large" />
+      </Badge>
+      <Badge count={26} />
+      <Badge dot>
+        <NotificationOutlined />
+      </Badge>
+      <Badge status="success" text="Success" />
+      <Badge size="small" count={0} showZero />
+    </Space>
+  </ConfigProvider>
+);
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
@@ -32,6 +32,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 <code src="./demo/mix.tsx" debug>Mixed usage</code>
 <code src="./demo/title.tsx" debug>Title</code>
 <code src="./demo/colorful-with-count-debug.tsx" debug>Colorful Badge support count Debug</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
@@ -33,6 +33,7 @@ group: 数据展示
 <code src="./demo/mix.tsx" debug>各种混用的情况</code>
 <code src="./demo/title.tsx" debug>自定义标题</code>
 <code src="./demo/colorful-with-count-debug.tsx" debug>多彩徽标支持 count 显示 Debug</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API