Merge branch 'master' into affix-r

2 years ago · c093f2f388
8 changed files with 237 additions and 127 deletions
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@ -51,6 +51,10 @@ jobs:
      - name: checkout
        uses: actions/checkout@v3

+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
      - name: restore cache from package-lock.json
        uses: actions/cache@v3
        with:
--- a/components/message/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/message/tests/snapshots/demo-extend.test.ts.snap
@ -1,40 +1,76 @@
 // 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"
->
+Array [
  <div
-    class="ant-message-notice-content"
+    class="ant-message-notice ant-message-notice-pure-panel"
  >
    <div
-      class="ant-message-custom-content ant-message-error"
+      class="ant-message-notice-content"
    >
-      <span
-        aria-label="close-circle"
-        class="anticon anticon-close-circle"
-        role="img"
+      <div
+        class="ant-message-custom-content ant-message-error"
      >
-        <svg
-          aria-hidden="true"
-          data-icon="close-circle"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
        >
-          <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>
+          <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>
-</div>
+  </div>,
+  <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`] = `
--- a/components/message/tests/snapshots/demo.test.ts.snap
+++ b/components/message/tests/snapshots/demo.test.ts.snap
@ -1,40 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders components/message/demo/component-token.tsx correctly 1`] = `
-<div
-  class="ant-message-notice ant-message-notice-pure-panel"
->
+Array [
  <div
-    class="ant-message-notice-content"
+    class="ant-message-notice ant-message-notice-pure-panel"
  >
    <div
-      class="ant-message-custom-content ant-message-error"
+      class="ant-message-notice-content"
    >
-      <span
-        aria-label="close-circle"
-        class="anticon anticon-close-circle"
-        role="img"
+      <div
+        class="ant-message-custom-content ant-message-error"
      >
-        <svg
-          aria-hidden="true"
-          data-icon="close-circle"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
        >
-          <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>
+          <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>
-</div>
+  </div>,
+  <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 correctly 1`] = `
--- a/components/message/demo/component-token.tsx
+++ b/components/message/demo/component-token.tsx
@ -1,20 +1,33 @@
-import React from 'react';
 import { ConfigProvider, message } from 'antd';
+import React from 'react';

 /** Test usage. Do not use in your production. */
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;

 export default () => (
-  <ConfigProvider
-    theme={{
-      components: {
-        Message: {
-          contentPadding: 40,
-          contentBg: '#e6f4ff',
+  <>
+    <ConfigProvider
+      theme={{
+        components: {
+          Message: {
+            contentPadding: 40,
+            contentBg: '#e6f4ff',
+          },
+        },
+      }}
+    >
+      <InternalPanel content="Hello World!" type="error" />
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Message: {
+            colorBgElevated: '#e6f4ff',
+          },
        },
-      },
-    }}
-  >
-    <InternalPanel content="Hello World!" type="error" />
-  </ConfigProvider>
+      }}
+    >
+      <InternalPanel content="Hello World!" type="error" />
+    </ConfigProvider>
+  </>
 );
--- a/components/pagination/index.tsx
+++ b/components/pagination/index.tsx
--- a/components/pagination/style/index.tsx
+++ b/components/pagination/style/index.tsx
@ -109,16 +109,18 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (t
        },
      },

-      [`${componentCls}-item-link-icon`]: {
-        opacity: 0,
+      [`${componentCls}-simple-pager`]: {
+        color: token.colorTextDisabled,
      },

-      [`${componentCls}-item-ellipsis`]: {
-        opacity: 1,
-      },
+      [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
+        [`${componentCls}-item-link-icon`]: {
+          opacity: 0,
+        },

-      [`${componentCls}-simple-pager`]: {
-        color: token.colorTextDisabled,
+        [`${componentCls}-item-ellipsis`]: {
+          opacity: 1,
+        },
      },
    },
    [`&${componentCls}-simple`]: {
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@ -4,7 +4,7 @@ import { useStyleRegister } from '@ant-design/cssinjs';
 import { useContext } from 'react';
 import { ConfigContext } from '../../config-provider/context';
 import { genCommonStyle, genLinkStyle } from '../../style';
-import type { ComponentTokenMap, GlobalToken } from '../interface';
+import type { ComponentTokenMap, GlobalToken, OverrideToken } from '../interface';
 import type { UseComponentStyleResult } from '../internal';
 import { mergeToken, statisticToken, useToken } from '../internal';

@ -13,6 +13,11 @@ export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
 export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken &
  ComponentTokenMap[ComponentName];

+type ComponentToken<ComponentName extends OverrideComponent> = Exclude<
+  OverrideToken[ComponentName],
+  undefined
+>;
+
 export interface StyleInfo<ComponentName extends OverrideComponent> {
  hashId: string;
  prefixCls: string;
@ -70,9 +75,12 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
      useStyleRegister({ ...sharedConfig, path: [component, prefixCls, iconPrefixCls] }, () => {
        const { token: proxyToken, flush } = statisticToken(token);

+        const customComponentToken = token[component] as ComponentToken<ComponentName>;
        const defaultComponentToken =
-          typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
-        const mergedComponentToken = { ...defaultComponentToken, ...token[component] };
+          typeof getDefaultToken === 'function'
+            ? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {}))
+            : getDefaultToken;
+        const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };

        const componentCls = `.${prefixCls}`;
        const mergedToken = mergeToken<
--- a/tests/shared/imageTest.tsx
+++ b/tests/shared/imageTest.tsx
@ -16,59 +16,70 @@ const toMatchImageSnapshot = configureToMatchImageSnapshot({

 expect.extend({ toMatchImageSnapshot });

+const themes = {
+  default: theme.defaultAlgorithm,
+  dark: theme.darkAlgorithm,
+  compact: theme.compactAlgorithm,
+};
+
 // eslint-disable-next-line jest/no-export
 export default function imageTest(component: React.ReactElement) {
-  [theme.defaultAlgorithm, theme.darkAlgorithm, theme.compactAlgorithm].forEach(
-    (algorithm, index) => {
-      it(`component image screenshot should correct${index || ''}`, async () => {
-        await jestPuppeteer.resetPage();
-        await page.setRequestInterception(true);
-        const onRequestHandle = (request: any) => {
-          if (['image'].includes(request.resourceType())) {
-            request.abort();
-          } else {
-            request.continue();
-          }
-        };
-
-        MockDate.set(dayjs('2016-11-22').valueOf());
-        page.on('request', onRequestHandle);
-        await page.goto(`file://${process.cwd()}/tests/index.html`);
-        await page.addStyleTag({ path: `${process.cwd()}/dist/reset.css` });
-
-        const cache = createCache();
-
-        const element = (
-          <ConfigProvider theme={{ algorithm }}>
-            <App style={{ background: algorithm === theme.darkAlgorithm ? '#000' : '' }}>
-              <StyleProvider cache={cache}>{component}</StyleProvider>
-            </App>
-          </ConfigProvider>
-        );
-
-        const html = ReactDOMServer.renderToString(element);
-        const styleStr = extractStyle(cache);
-
-        await page.evaluate(
-          (innerHTML, ssrStyle) => {
-            document.querySelector('#root')!.innerHTML = innerHTML;
-
-            const head = document.querySelector('head')!;
-            head.innerHTML += ssrStyle;
-          },
-          html,
-          styleStr,
-        );
-
-        const image = await page.screenshot();
-
-        expect(image).toMatchImageSnapshot();
-
-        MockDate.reset();
-        page.removeListener('request', onRequestHandle);
-      });
-    },
-  );
+  it(`component image screenshot should correct`, async () => {
+    await jestPuppeteer.resetPage();
+    await page.setRequestInterception(true);
+    const onRequestHandle = (request: any) => {
+      if (['image'].includes(request.resourceType())) {
+        request.abort();
+      } else {
+        request.continue();
+      }
+    };
+
+    MockDate.set(dayjs('2016-11-22').valueOf());
+    page.on('request', onRequestHandle);
+    await page.goto(`file://${process.cwd()}/tests/index.html`);
+    await page.addStyleTag({ path: `${process.cwd()}/dist/reset.css` });
+
+    const cache = createCache();
+
+    const element = (
+      <StyleProvider cache={cache}>
+        <App>
+          {Object.entries(themes).map(([key, algorithm]) => (
+            <div
+              style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }}
+              key={key}
+            >
+              <ConfigProvider theme={{ algorithm }}>{component}</ConfigProvider>
+            </div>
+          ))}
+        </App>
+      </StyleProvider>
+    );
+
+    const html = ReactDOMServer.renderToString(element);
+    const styleStr = extractStyle(cache);
+
+    await page.evaluate(
+      (innerHTML, ssrStyle) => {
+        document.querySelector('#root')!.innerHTML = innerHTML;
+
+        const head = document.querySelector('head')!;
+        head.innerHTML += ssrStyle;
+      },
+      html,
+      styleStr,
+    );
+
+    const image = await page.screenshot({
+      fullPage: true,
+    });
+
+    expect(image).toMatchImageSnapshot();
+
+    MockDate.reset();
+    page.removeListener('request', onRequestHandle);
+  });
 }

 type Options = {