Merge pull request #50103 from ant-design/master

chore: merge master into feature
2024-11-24 02:59:58 +08:00 · 2024-07-26 23:21:05 +08:00 · 2024-07-26 23:21:05 +08:00 · 65496b5845
commit 65496b5845
parent 02853808ee 5f917554db
15 changed files with 82 additions and 69 deletions
--- a/.dumi/pages/index/components/Theme/ColorPicker.tsx
+++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { ColorPicker, Flex, Input } from 'antd';
 import { createStyles } from 'antd-style';
-import type { Color } from 'antd/es/color-picker';
+import type { ColorPickerProps, GetProp } from 'antd';
 import { generateColor } from 'antd/es/color-picker/util';
 import classNames from 'classnames';

 import { PRESET_COLORS } from './colorUtil';

+type Color = GetProp<ColorPickerProps, 'value'>;
+
 const useStyle = createStyles(({ token, css }) => ({
  color: css`
    width: ${token.controlHeightLG / 2}px;
@ -34,13 +36,13 @@ const useStyle = createStyles(({ token, css }) => ({
  `,
 }));

-export interface ColorPickerProps {
+export interface ThemeColorPickerProps {
  id?: string;
  value?: string | Color;
  onChange?: (value?: Color | string) => void;
 }

-const DebouncedColorPicker: React.FC<React.PropsWithChildren<ColorPickerProps>> = (props) => {
+const DebouncedColorPicker: React.FC<React.PropsWithChildren<ThemeColorPickerProps>> = (props) => {
  const { value: color, children, onChange } = props;
  const [value, setValue] = useState(color);

@ -66,7 +68,7 @@ const DebouncedColorPicker: React.FC<React.PropsWithChildren<ColorPickerProps>>
  );
 };

-const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, id }) => {
+const ThemeColorPicker: React.FC<ThemeColorPickerProps> = ({ value, onChange, id }) => {
  const { styles } = useStyle();

  const matchColors = React.useMemo(() => {
--- a/.dumi/pages/index/components/Theme/colorUtil.ts
+++ b/.dumi/pages/index/components/Theme/colorUtil.ts
@ -1,6 +1,8 @@
-import type { Color } from 'antd/es/color-picker';
+import type { ColorPickerProps, GetProp } from 'antd';
 import { generateColor } from 'antd/es/color-picker/util';

+type Color = GetProp<ColorPickerProps, 'value'>;
+
 export const DEFAULT_COLOR = '#1677FF';
 export const PINK_COLOR = '#ED4192';

--- a/.dumi/pages/index/components/Theme/index.tsx
+++ b/.dumi/pages/index/components/Theme/index.tsx
@ -7,7 +7,7 @@ import {
  QuestionCircleOutlined,
 } from '@ant-design/icons';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { MenuProps, ThemeConfig } from 'antd';
+import type { MenuProps, ThemeConfig, GetProp, ColorPickerProps } from 'antd';
 import {
  Breadcrumb,
  Card,
@ -21,7 +21,6 @@ import {
  Typography,
 } from 'antd';
 import { createStyles } from 'antd-style';
-import type { Color } from 'antd/es/color-picker';
 import { generateColor } from 'antd/es/color-picker/util';
 import classNames from 'classnames';
 import { useLocation } from 'dumi';
@ -41,6 +40,8 @@ import RadiusPicker from './RadiusPicker';
 import type { THEME } from './ThemePicker';
 import ThemePicker from './ThemePicker';

+type Color = GetProp<ColorPickerProps, 'value'>;
+
 const { Header, Content, Sider } = Layout;

 const TokenChecker: React.FC = () => {
@ -264,7 +265,7 @@ const sideMenuItems: MenuProps['items'] = [

 // ============================= Theme =============================

-function getTitleColor(colorPrimary: string | Color, isLight?: boolean) {
+function getTitleColor(colorPrimary: Color, isLight?: boolean) {
  if (!isLight) {
    return '#FFF';
  }
@ -289,7 +290,7 @@ function getTitleColor(colorPrimary: string | Color, isLight?: boolean) {

 interface ThemeData {
  themeType: THEME;
-  colorPrimary: string | Color;
+  colorPrimary: Color;
  borderRadius: number;
  compact: 'default' | 'compact';
 }
--- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx
+++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx
@ -156,7 +156,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
          {title}
          <Popover
            title={null}
-            popupStyle={{ width: 400 }}
+            overlayStyle={{ width: 400 }}
            content={
              <Typography>
                {/* <SourceCode lang="jsx">{code}</SourceCode> */}
--- a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
+++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { Col, ColorPicker, Row } from 'antd';
 import { FormattedMessage } from 'dumi';
+import type { Color } from 'antd/es/color-picker';

 import useLocale from '../../../hooks/useLocale';
 import ColorPatterns from './ColorPatterns';
@ -24,7 +25,7 @@ const locales = {
 const ColorPaletteTool: React.FC = () => {
  const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
  const [backgroundColor, setBackgroundColor] = useState<string>('#141414');
-  const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
+  const [primaryColorInstance, setPrimaryColorInstance] = useState<Color | null>(null);

  const [locale] = useLocale(locales);

--- a/.github/workflows/visual-regression-diff-finish.yml
+++ b/.github/workflows/visual-regression-diff-finish.yml
@ -142,8 +142,10 @@ jobs:
            ## Visual Regression Build for PR #${{ steps.pr.outputs.id }} Failed ❌
            Potential causes:
              - `upstream workflow` status: ${{ needs.upstream-workflow-summary.outputs.build-status }} [upstream job link](${{ needs.upstream-workflow-summary.outputs.upstream-job-link }})
-              - `download report artifact` status: ${{ steps.download_report.outcome }}
-              - `report upload` status: ${{ steps.report.outcome }}
+              - `current workflow` summary:
+                - `download report artifact` status: ${{ steps.download_report.outcome }}
+                - `report upload` status: ${{ steps.report.outcome }}
+                - job url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/jobs/${{ github.job }}
            <!-- VISUAL_DIFF_REGRESSION_HOOK -->
          body-include: '<!-- VISUAL_DIFF_REGRESSION_HOOK -->'
          number: ${{ steps.pr.outputs.id }}
--- a/components/checkbox/style/index.ts
+++ b/components/checkbox/style/index.ts
@ -189,8 +189,8 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
        '&-indeterminate': {
          // Wrapper > Checkbox > inner
          [`${checkboxCls}-inner`]: {
-            backgroundColor: token.colorBgContainer,
-            borderColor: token.colorBorder,
+            backgroundColor: `${token.colorBgContainer} !important`,
+            borderColor: `${token.colorBorder} !important`,

            '&:after': {
              top: '50%',
@ -204,6 +204,12 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
              content: '""',
            },
          },
+
+          // https://github.com/ant-design/ant-design/issues/50074
+          [`&:hover ${checkboxCls}-inner`]: {
+            backgroundColor: `${token.colorBgContainer} !important`,
+            borderColor: `${token.colorPrimary} !important`,
+          },
        },
      },
    },
--- a/components/empty/style/index.ts
+++ b/components/empty/style/index.ts
@ -25,7 +25,7 @@ const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
      lineHeight,
      textAlign: 'center',

-      // 原来 &-image 没有父子结构，现在为了外层承担我们的hashId，改成父子结果
+      // 原来 &-image 没有父子结构，现在为了外层承担我们的 hashId，改成父子结构
      [`${componentCls}-image`]: {
        height: token.emptyImgHeight,
        marginBottom: marginXS,
@ -46,7 +46,7 @@ const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
        color: token.colorTextDescription,
      },

-      // 原来 &-footer 没有父子结构，现在为了外层承担我们的hashId，改成父子结果
+      // 原来 &-footer 没有父子结构，现在为了外层承担我们的 hashId，改成父子结构
      [`${componentCls}-footer`]: {
        marginTop: margin,
      },
--- a/components/popconfirm/PurePanel.tsx
+++ b/components/popconfirm/PurePanel.tsx
@ -59,16 +59,17 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
  const { getPrefixCls } = React.useContext(ConfigContext);

  const [contextLocale] = useLocale('Popconfirm', defaultLocale.Popconfirm);
-  const theTitle = getRenderPropValue(title);
-  const theDescription = getRenderPropValue(description);
+
+  const titleNode = getRenderPropValue(title);
+  const descriptionNode = getRenderPropValue(description);

  return (
    <div className={`${prefixCls}-inner-content`} onClick={onPopupClick}>
      <div className={`${prefixCls}-message`}>
        {icon && <span className={`${prefixCls}-message-icon`}>{icon}</span>}
        <div className={`${prefixCls}-message-text`}>
-          {theTitle && <div className={classNames(`${prefixCls}-title`)}>{theTitle}</div>}
-          {theDescription && <div className={`${prefixCls}-description`}>{theDescription}</div>}
+          {titleNode && <div className={`${prefixCls}-title`}>{titleNode}</div>}
+          {descriptionNode && <div className={`${prefixCls}-description`}>{descriptionNode}</div>}
        </div>
      </div>
      <div className={`${prefixCls}-buttons`}>
--- a/components/popover/PurePanel.tsx
+++ b/components/popover/PurePanel.tsx
@ -7,18 +7,20 @@ import { getRenderPropValue } from '../_util/getRenderPropValue';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';

-export const getOverlay = (
-  prefixCls?: string,
-  title?: PopoverProps['title'],
-  content?: PopoverProps['content'],
-) => {
+interface OverlayProps {
+  prefixCls?: string;
+  title?: React.ReactNode;
+  content?: React.ReactNode;
+}
+
+export const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => {
  if (!title && !content) {
    return null;
  }
  return (
    <>
-      {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-      <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
+      {title && <div className={`${prefixCls}-title`}>{title}</div>}
+      {content && <div className={`${prefixCls}-inner-content`}>{content}</div>}
    </>
  );
 };
@ -43,20 +45,22 @@ export const RawPurePanel: React.FC<RawPurePanelProps> = (props) => {
    children,
  } = props;

+  const titleNode = getRenderPropValue(title);
+  const contentNode = getRenderPropValue(content);
+
+  const cls = classNames(
+    hashId,
+    prefixCls,
+    `${prefixCls}-pure`,
+    `${prefixCls}-placement-${placement}`,
+    className,
+  );
+
  return (
-    <div
-      className={classNames(
-        hashId,
-        prefixCls,
-        `${prefixCls}-pure`,
-        `${prefixCls}-placement-${placement}`,
-        className,
-      )}
-      style={style}
-    >
+    <div className={cls} style={style}>
      <div className={`${prefixCls}-arrow`} />
      <Popup {...props} className={hashId} prefixCls={prefixCls}>
-        {children || getOverlay(prefixCls, title, content)}
+        {children || <Overlay prefixCls={prefixCls} title={titleNode} content={contentNode} />}
      </Popup>
    </div>
  );
--- a/components/popover/tests/snapshots/index.test.tsx.snap
+++ b/components/popover/tests/snapshots/index.test.tsx.snap
@ -27,9 +27,6 @@ Array [
        >
          RTL
        </div>
-        <div
-          class="ant-popover-inner-content"
-        />
      </div>
    </div>
  </div>,
--- a/components/popover/tests/index.test.tsx
+++ b/components/popover/tests/index.test.tsx
@ -124,4 +124,17 @@ describe('Popover', () => {
    fireEvent.keyDown(triggerNode, { key: 'Escape', keyCode: 27 });
    expect(onOpenChange).toHaveBeenLastCalledWith(false, eventObject);
  });
+
+  it('should not display overlay when the content is null/undefined', () => {
+    [null, undefined].forEach((item) => {
+      const { container } = render(
+        <Popover title={() => item} content={() => item} trigger="click">
+          <span>show me your code</span>
+        </Popover>,
+      );
+      fireEvent.click(container.querySelector<HTMLSpanElement>('span')!);
+      const popup = document.querySelector('.ant-popover');
+      expect(popup).toBe(null);
+    });
+  });
 });
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@ -10,7 +10,7 @@ import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import type { AbstractTooltipProps, TooltipRef } from '../tooltip';
 import Tooltip from '../tooltip';
-import PurePanel from './PurePanel';
+import PurePanel, { Overlay } from './PurePanel';
 // CSSINJS
 import useStyle from './style';

@ -23,19 +23,6 @@ export interface PopoverProps extends AbstractTooltipProps {
  ) => void;
 }

-interface OverlayProps {
-  prefixCls?: string;
-  title?: PopoverProps['title'];
-  content?: PopoverProps['content'];
-}
-
-const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => (
-  <>
-    {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-    <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
-  </>
-);
-
 const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref) => {
  const {
    prefixCls: customizePrefixCls,
@ -81,6 +68,9 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
    settingOpen(value);
  };

+  const titleNode = getRenderPropValue(title);
+  const contentNode = getRenderPropValue(content);
+
  return wrapCSSVar(
    <Tooltip
      placement={placement}
@ -95,7 +85,9 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
      open={open}
      onOpenChange={onInternalOpenChange}
      overlay={
-        title || content ? <Overlay prefixCls={prefixCls} title={title} content={content} /> : null
+        titleNode || contentNode ? (
+          <Overlay prefixCls={prefixCls} title={titleNode} content={contentNode} />
+        ) : null
      }
      transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
      data-popover-inject
--- a/components/tour/style/index.ts
+++ b/components/tour/style/index.ts
@ -46,19 +46,16 @@ interface TourToken extends FullToken<'Tour'> {
 const genBaseStyle: GenerateStyle<TourToken> = (token) => {
  const {
    componentCls,
-    lineHeight,
    padding,
    paddingXS,
    borderRadius,
    borderRadiusXS,
    colorPrimary,
-    colorText,
    colorFill,
    indicatorHeight,
    indicatorWidth,
    boxShadowTertiary,
    tourZIndexPopup,
-    fontSize,
    colorBgElevated,
    fontWeightStrong,
    marginXS,
@ -77,13 +74,10 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
      [componentCls]: {
        ...resetComponent(token),

-        color: colorText,
        position: 'absolute',
        zIndex: tourZIndexPopup,
-        display: 'block',
+        maxWidth: 'fit-content',
        visibility: 'visible',
-        fontSize,
-        lineHeight,
        width: 520,
        '--antd-arrow-background-color': colorBgElevated,

@ -100,6 +94,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
        [`${componentCls}-content`]: {
          position: 'relative',
        },
+
        [`${componentCls}-inner`]: {
          textAlign: 'start',
          textDecoration: 'none',
@ -151,15 +146,12 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
            padding: `${unit(padding)} ${unit(padding)} ${unit(paddingXS)}`,

            [`${componentCls}-title`]: {
-              lineHeight,
-              fontSize,
              fontWeight: fontWeightStrong,
            },
          },

          [`${componentCls}-description`]: {
            padding: `0 ${unit(padding)}`,
-            lineHeight,
            wordWrap: 'break-word',
          },

--- a/package.json
+++ b/package.json
@ -240,7 +240,7 @@
    "eslint-plugin-markdown": "^5.1.0",
    "eslint-plugin-react": "^7.34.4",
    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-unicorn": "^54.0.0",
+    "eslint-plugin-unicorn": "^55.0.0",
    "fast-glob": "^3.3.2",
    "fetch-jsonp": "^1.3.0",
    "fs-extra": "^11.2.0",
@ -248,7 +248,7 @@
    "glob": "^11.0.0",
    "html2sketch": "^1.0.2",
    "http-server": "^14.1.1",
-    "husky": "^9.0.11",
+    "husky": "^9.1.2",
    "identity-obj-proxy": "^3.0.0",
    "immer": "^10.1.1",
    "is-ci": "^3.0.1",