feat: migrate less to token for Anchor (#42141)

* feat: rename anchor token

* docs: add component-token demo

* fix: update token

components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -79,6 +79,85 @@ exports[`renders components/anchor/demo/basic.tsx extend context correctly 1`] =
 </div>
 `;
 
+exports[`renders components/anchor/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-row"
+>
+  <div
+    class="ant-col ant-col-16"
+  >
+    <div
+      id="part-1"
+      style="height: 100vh; background: rgba(255, 0, 0, 0.02);"
+    />
+    <div
+      id="part-2"
+      style="height: 100vh; background: rgba(0, 255, 0, 0.02);"
+    />
+    <div
+      id="part-3"
+      style="height: 100vh; background: rgba(0, 0, 255, 0.02);"
+    />
+  </div>
+  <div
+    class="ant-col ant-col-8"
+  >
+    <div>
+      <div
+        class=""
+      >
+        <div
+          class="ant-anchor-wrapper"
+          style="max-height: 100vh;"
+        >
+          <div
+            class="ant-anchor"
+          >
+            <span
+              class="ant-anchor-ink ant-anchor-ink-visible"
+              style="top: 0px; height: 0px;"
+            />
+            <div
+              class="ant-anchor-link ant-anchor-link-active"
+            >
+              <a
+                class="ant-anchor-link-title ant-anchor-link-title-active"
+                href="#part-1"
+                title="Part 1"
+              >
+                Part 1
+              </a>
+            </div>
+            <div
+              class="ant-anchor-link"
+            >
+              <a
+                class="ant-anchor-link-title"
+                href="#part-2"
+                title="Part 2"
+              >
+                Part 2
+              </a>
+            </div>
+            <div
+              class="ant-anchor-link"
+            >
+              <a
+                class="ant-anchor-link-title"
+                href="#part-3"
+                title="Part 3"
+              >
+                Part 3
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/anchor/demo/customizeHighlight.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"

components/anchor/__tests__/__snapshots__/demo.test.tsx.snap

@@ -78,6 +78,84 @@ exports[`renders components/anchor/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/anchor/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-row"
+>
+  <div
+    class="ant-col ant-col-16"
+  >
+    <div
+      id="part-1"
+      style="height:100vh;background:rgba(255,0,0,0.02)"
+    />
+    <div
+      id="part-2"
+      style="height:100vh;background:rgba(0,255,0,0.02)"
+    />
+    <div
+      id="part-3"
+      style="height:100vh;background:rgba(0,0,255,0.02)"
+    />
+  </div>
+  <div
+    class="ant-col ant-col-8"
+  >
+    <div>
+      <div
+        class=""
+      >
+        <div
+          class="ant-anchor-wrapper"
+          style="max-height:100vh"
+        >
+          <div
+            class="ant-anchor"
+          >
+            <span
+              class="ant-anchor-ink"
+            />
+            <div
+              class="ant-anchor-link"
+            >
+              <a
+                class="ant-anchor-link-title"
+                href="#part-1"
+                title="Part 1"
+              >
+                Part 1
+              </a>
+            </div>
+            <div
+              class="ant-anchor-link"
+            >
+              <a
+                class="ant-anchor-link-title"
+                href="#part-2"
+                title="Part 2"
+              >
+                Part 2
+              </a>
+            </div>
+            <div
+              class="ant-anchor-link"
+            >
+              <a
+                class="ant-anchor-link-title"
+                href="#part-3"
+                title="Part 3"
+              >
+                Part 3
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"

components/anchor/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug

components/anchor/demo/component-token.tsx

@@ -0,0 +1,46 @@
+import { Anchor, Col, ConfigProvider, Row } from 'antd';
+import React from 'react';
+
+/** Test usage. Do not use in your production. */
+
+export default () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Anchor: {
+          linkPaddingBlock: 100,
+          linkPaddingInlineStart: 50,
+        },
+      },
+    }}
+  >
+    <Row>
+      <Col span={16}>
+        <div id="part-1" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />
+        <div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />
+        <div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />
+      </Col>
+      <Col span={8}>
+        <Anchor
+          items={[
+            {
+              key: 'part-1',
+              href: '#part-1',
+              title: 'Part 1',
+            },
+            {
+              key: 'part-2',
+              href: '#part-2',
+              title: 'Part 2',
+            },
+            {
+              key: 'part-3',
+              href: '#part-3',
+              title: 'Part 3',
+            },
+          ]}
+        />
+      </Col>
+    </Row>
+  </ConfigProvider>
+);

components/anchor/index.en-US.md

@@ -30,6 +30,7 @@ For displaying anchor hyperlinks on page and jumping between them.
 <code src="./demo/targetOffset.tsx" iframe="200">Set Anchor scroll offset</code>
 <code src="./demo/onChange.tsx">Listening for anchor link change</code>
 <code src="./demo/legacy-anchor.tsx" debug>Deprecated JSX demo</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

components/anchor/index.zh-CN.md

@@ -31,6 +31,7 @@ group:
 <code src="./demo/targetOffset.tsx" iframe="200">设置锚点滚动偏移量</code>
 <code src="./demo/onChange.tsx">监听锚点链接改变</code>
 <code src="./demo/legacy-anchor.tsx" debug>废弃的 JSX 示例</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

components/anchor/style/index.ts

@@ -1,15 +1,16 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent, textEllipsis } from '../../style';
 
-export interface ComponentToken {}
+export interface ComponentToken {
+  linkPaddingBlock: number;
+  linkPaddingInlineStart: number;
+}
 
 interface AnchorToken extends FullToken<'Anchor'> {
   holderOffsetBlock: number;
-  anchorPaddingBlock: number;
   anchorPaddingBlockSecondary: number;
-  anchorPaddingInline: number;
   anchorBallSize: number;
   anchorTitleBlock: number;
 }
@@ -34,16 +35,14 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
       // delete overflow: auto
       // overflow: 'auto',
 
-      backgroundColor: 'transparent',
-
       [componentCls]: {
         ...resetComponent(token),
         position: 'relative',
         paddingInlineStart: lineWidthBold,
 
         [`${componentCls}-link`]: {
-          paddingBlock: token.anchorPaddingBlock,
-          paddingInline: `${token.anchorPaddingInline}px 0`,
+          paddingBlock: token.linkPaddingBlock,
+          paddingInline: `${token.linkPaddingInlineStart}px 0`,
 
           '&-title': {
             ...textEllipsis,
@@ -158,16 +157,21 @@ const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token): CSSO
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Anchor', (token) => {
-  const { fontSize, fontSizeLG, padding, paddingXXS } = token;
-
-  const anchorToken = mergeToken<AnchorToken>(token, {
-    holderOffsetBlock: paddingXXS,
-    anchorPaddingBlock: paddingXXS,
-    anchorPaddingBlockSecondary: paddingXXS / 2,
-    anchorPaddingInline: padding,
-    anchorTitleBlock: (fontSize / 14) * 3,
-    anchorBallSize: fontSizeLG / 2,
-  });
-  return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
-});
+export default genComponentStyleHook(
+  'Anchor',
+  (token) => {
+    const { fontSize, fontSizeLG, paddingXXS } = token;
+
+    const anchorToken = mergeToken<AnchorToken>(token, {
+      holderOffsetBlock: paddingXXS,
+      anchorPaddingBlockSecondary: paddingXXS / 2,
+      anchorTitleBlock: (fontSize / 14) * 3,
+      anchorBallSize: fontSizeLG / 2,
+    });
+    return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
+  },
+  (token) => ({
+    linkPaddingBlock: token.paddingXXS,
+    linkPaddingInlineStart: token.padding,
+  }),
+);

docs/react/migrate-less-variables.en-US.md

@@ -13,7 +13,16 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Alert -->
 
-<!-- ### Anchor -->
+## Anchor
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@anchor-bg` | '-' | Can be modified directly by `className` or `style` |
+| `@anchor-border-color` | `colorSplit` | GlobalToken |
+| `@anchor-link-top` | `linkPaddingBlock` | - |
+| `@anchor-link-left` | `linkPaddingInlineStart` | - |
+| `@anchor-link-padding` | - | `${linkPaddingBlock}px ${linkPaddingInlineStart}px` |
 
 <!-- ### Avatar -->
 

docs/react/migrate-less-variables.zh-CN.md

@@ -13,7 +13,16 @@ title: Less 变量迁移 Design Token
 
 <!-- ### Alert 警告提示 -->
 
-<!-- ### Anchor 锚点 -->
+## Anchor 锚点
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@anchor-bg` | - | 可以由 `className` 或 `style` 直接修改 |
+| `@anchor-border-color` | `colorSplit` | 全局 Token |
+| `@anchor-link-top` | `linkPaddingBlock` | - |
+| `@anchor-link-left` | `linkPaddingInlineStart` | - |
+| `@anchor-link-padding` | - | `${linkPaddingBlock}px ${linkPaddingInlineStart}px` |
 
 <!-- ### Avatar 头像 -->