feat: migrate less to token for Image (#42048)

* feat: migrate less to token for Image * docs: update migrate-less-variables.en-US.md * docs: update migrate-less-variables.zh-CN.md * docs: fix error * docs: fix typo * docs: remove Chinese in English docs * feat: migrate less to token for Image * docs: update migrate-less-variables.en-US.md * docs: remove Chinese in English docs * docs: fix typo * docs: fix docs error * feat: add demo * docs: Update docs/react/migrate-less-variables.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> * fix: remove token * docs: Update docs/react/migrate-less-variables.en-US.md * fix: correct token name * fix: demo token name * docs: update global token in docs * docs: update * chore: fix lint --------- Co-authored-by: MadCcc <1075746765@qq.com>
2 years ago · 32cca6e5a8
9 changed files with 244 additions and 26 deletions
--- a/components/image/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/image/tests/snapshots/demo-extend.test.ts.snap
@ -41,6 +41,87 @@ exports[`renders components/image/demo/basic.tsx extend context correctly 1`] =
 </div>
 `;

+exports[`renders components/image/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-image"
+    style="width: 150px;"
+  >
+    <img
+      class="ant-image-img"
+      src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+      width="150"
+    />
+    <div
+      class="ant-image-mask"
+    >
+      <div
+        class="ant-image-mask-info"
+      >
+        <span
+          aria-label="eye"
+          class="anticon anticon-eye"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="eye"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+            />
+          </svg>
+        </span>
+        Preview
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-image"
+    style="width: 150px;"
+  >
+    <img
+      class="ant-image-img"
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      width="150"
+    />
+    <div
+      class="ant-image-mask"
+    >
+      <div
+        class="ant-image-mask-info"
+      >
+        <span
+          aria-label="eye"
+          class="anticon anticon-eye"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="eye"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+            />
+          </svg>
+        </span>
+        Preview
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/image/demo/controlled-preview.tsx extend context correctly 1`] = `
 Array [
  <div>
--- a/components/image/tests/snapshots/demo.test.ts.snap
+++ b/components/image/tests/snapshots/demo.test.ts.snap
@ -41,6 +41,87 @@ exports[`renders components/image/demo/basic.tsx correctly 1`] = `
 </div>
 `;

+exports[`renders components/image/demo/component-token.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-image"
+    style="width:150px"
+  >
+    <img
+      class="ant-image-img"
+      src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+      width="150"
+    />
+    <div
+      class="ant-image-mask"
+    >
+      <div
+        class="ant-image-mask-info"
+      >
+        <span
+          aria-label="eye"
+          class="anticon anticon-eye"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="eye"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+            />
+          </svg>
+        </span>
+        Preview
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-image"
+    style="width:150px"
+  >
+    <img
+      class="ant-image-img"
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      width="150"
+    />
+    <div
+      class="ant-image-mask"
+    >
+      <div
+        class="ant-image-mask-info"
+      >
+        <span
+          aria-label="eye"
+          class="anticon anticon-eye"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="eye"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+            />
+          </svg>
+        </span>
+        Preview
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/image/demo/controlled-preview.tsx correctly 1`] = `
 Array [
  <div>
--- a/components/image/demo/component-token.md
+++ b/components/image/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+自定义组件 Token。
+
+## en-US
+
+Custom component token.
--- a/components/image/demo/component-token.tsx
+++ b/components/image/demo/component-token.tsx
@ -0,0 +1,31 @@
+import { ConfigProvider, Image } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Image: {
+          previewOperationSize: 20,
+          previewOperationColor: '#222',
+          previewOperationColorDisabled: '#b20000',
+        },
+      },
+    }}
+  >
+    <Image.PreviewGroup
+      preview={{ countRender: (current, total) => `当前 ${current} / 总计 ${total}` }}
+    >
+      <Image
+        width={150}
+        src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+      />
+      <Image
+        width={150}
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      />
+    </Image.PreviewGroup>
+  </ConfigProvider>
+);
+
+export default App;
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@ -26,6 +26,7 @@ Previewable image.
 <code src="./demo/controlled-preview.tsx">Controlled Preview</code>
 <code src="./demo/preview-mask.tsx" debug>Custom preview mask</code>
 <code src="./demo/preview-group-top-progress.tsx" debug>Top progress customization when previewing multiple images</code>
+<code src="./demo/component-token.tsx" debug>Custom component token</code>

 ## API

--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@ -27,6 +27,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
 <code src="./demo/controlled-preview.tsx">受控的预览</code>
 <code src="./demo/preview-mask.tsx" debug>自定义预览文本</code>
 <code src="./demo/preview-group-top-progress.tsx" debug>多图预览时顶部进度自定义</code>
+<code src="./demo/component-token.tsx" debug>自定义组件 Token</code>

 ## API

--- a/components/image/style/index.ts
+++ b/components/image/style/index.ts
@ -8,15 +8,15 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';

 export interface ComponentToken {
  zIndexPopup: number;
+  previewOperationSize: number;
+  previewOperationColor: string;
+  previewOperationColorDisabled: string;
 }

 export interface ImageToken extends FullToken<'Image'> {
  previewCls: string;
  modalMaskBg: string;
-  imagePreviewOperationDisabledColor: string;
-  imagePreviewOperationSize: number;
  imagePreviewSwitchSize: number;
-  imagePreviewOperationColor: string;
 }

 export type PositionType = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky' | undefined;
@ -54,13 +54,8 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => {
 };

 export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
-  const {
-    previewCls,
-    modalMaskBg,
-    paddingSM,
-    imagePreviewOperationDisabledColor,
-    motionDurationSlow,
-  } = token;
+  const { previewCls, modalMaskBg, paddingSM, previewOperationColorDisabled, motionDurationSlow } =
+    token;

  const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
  const operationBgHover = operationBg.clone().setAlpha(0.2);
@ -71,7 +66,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
      display: 'flex',
      flexDirection: 'row-reverse',
      alignItems: 'center',
-      color: token.imagePreviewOperationColor,
+      color: token.previewOperationColor,
      listStyle: 'none',
      background: operationBg.toRgbString(),
      pointerEvents: 'auto',
@ -88,7 +83,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
        },

        '&-disabled': {
-          color: imagePreviewOperationDisabledColor,
+          color: previewOperationColorDisabled,
          pointerEvents: 'none',
        },

@ -104,7 +99,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
      },

      '&-icon': {
-        fontSize: token.imagePreviewOperationSize,
+        fontSize: token.previewOperationSize,
      },
    },
  };
@ -114,7 +109,7 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
  const {
    modalMaskBg,
    iconCls,
-    imagePreviewOperationDisabledColor,
+    previewOperationColorDisabled,
    previewCls,
    zIndexPopup,
    motionDurationSlow,
@ -134,7 +129,7 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
      width: token.imagePreviewSwitchSize,
      height: token.imagePreviewSwitchSize,
      marginTop: -token.imagePreviewSwitchSize / 2,
-      color: token.imagePreviewOperationColor,
+      color: token.previewOperationColor,
      background: operationBg.toRgbString(),
      borderRadius: '50%',
      transform: `translateY(-50%)`,
@ -149,7 +144,7 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {

      [`&-disabled`]: {
        '&, &:hover': {
-          color: imagePreviewOperationDisabledColor,
+          color: previewOperationColorDisabled,
          background: 'transparent',
          cursor: 'not-allowed',
          [`> ${iconCls}`]: {
@ -158,7 +153,7 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
        },
      },
      [`> ${iconCls}`]: {
-        fontSize: token.imagePreviewOperationSize,
+        fontSize: token.previewOperationSize,
      },
    },

@ -300,17 +295,11 @@ const genPreviewMotion: GenerateStyle<ImageToken> = (token) => {
 export default genComponentStyleHook(
  'Image',
  (token) => {
-    const imagePreviewOperationColor = new TinyColor(token.colorTextLightSolid);
    const previewCls = `${token.componentCls}-preview`;

    const imageToken = mergeToken<ImageToken>(token, {
      previewCls,
-      imagePreviewOperationColor: imagePreviewOperationColor.toRgbString(),
-      imagePreviewOperationDisabledColor: new TinyColor(imagePreviewOperationColor)
-        .setAlpha(0.25)
-        .toRgbString(),
      modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: Shared Token
-      imagePreviewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
      imagePreviewSwitchSize: token.controlHeightLG,
    });

@ -323,5 +312,10 @@ export default genComponentStyleHook(
  },
  (token) => ({
    zIndexPopup: token.zIndexPopupBase + 80,
+    previewOperationColor: new TinyColor(token.colorTextLightSolid).toRgbString(),
+    previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid)
+      .setAlpha(0.25)
+      .toRgbString(),
+    previewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
  }),
 );
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@ -174,7 +174,18 @@ This document contains the correspondence between all the less variables related

 <!-- ### Form -->

-<!-- ### Image -->
+### Image
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@image-size-base` | - | Deprecated for not used |
+| `@image-font-size-base` | - | Deprecated for not used |
+| `@image-bg` | `colorFillTertiary` | GlobalToken |
+| `@image-color` | `colorTextLightSolid` | GlobalToken |
+| `@image-preview-operation-size` | `previewOperationSize` | - |
+| `@image-preview-operation-color` | `previewOperationColor` | - |
+| `@image-preview-operation-disabled-color` | `previewOperationColorDisabled` | - |

 <!-- ### Input -->

@ -407,7 +418,7 @@ This document contains the correspondence between all the less variables related
 ## Tag

 <!-- prettier-ignore -->
-| less 变量 | Component Token | 备注 |
+| Less variables | Component Token | Note |
 | --- | --- | --- |
 | `@tag-border-radius` | `borderRadiusSM` | Global Token |
 | `@tag-default-bg` | `defaultBg` | - |
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@ -172,7 +172,18 @@ title: Less 变量迁移 Design Token

 <!-- ### Form 表单 -->

-<!-- ### Image 图片 -->
+### Image 图片
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@image-size-base` | - | 未使用已废弃 |
+| `@image-font-size-base` | - | 未使用已废弃 |
+| `@image-bg` | `colorFillTertiary` | 全局 Token |
+| `@image-color` | `colorTextLightSolid` | 全局 Token |
+| `@image-preview-operation-size` | `previewOperationSize` | - |
+| `@image-preview-operation-color` | `previewOperationColor` | - |
+| `@image-preview-operation-disabled-color` | `previewOperationColorDisabled` | - |

 <!-- ### Input 输入框 -->