Merge pull request #19 from ant-design/master

[pull] master from ant-design:master
ammar-knowledge · Aug 10, 2023 · e5edec2 · e5edec2
2 parents 5493bf8 + 54081c8
commit e5edec2
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 37 deletions.
diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
@@ -64,3 +64,4 @@ jobs:
           skip_step: install
         env:
           NODE_OPTIONS: --max_old_space_size=4096
+          PRODUCTION_ONLY: 1
diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1674,6 +1674,27 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           />
         </span>
       </div>
+      <div
+        class="ant-space-item"
+        style="margin-right: 16px; padding-bottom: 16px;"
+      >
+        <span
+          class="ant-badge ant-badge-status"
+        >
+          <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-dot ant-badge-status-processing"
+            data-show="true"
+          />
+        </span>
+      </div>
       <div
         class="ant-space-item"
         style="margin-right: 16px; padding-bottom: 16px;"

diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
@@ -1663,6 +1663,27 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
           />
         </span>
       </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:16px;padding-bottom:16px"
+      >
+        <span
+          class="ant-badge ant-badge-status"
+        >
+          <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-dot ant-badge-status-processing"
+            data-show="true"
+          />
+        </span>
+      </div>
       <div
         class="ant-space-item"
         style="margin-right:16px;padding-bottom:16px"

diff --git a/components/badge/demo/mix.tsx b/components/badge/demo/mix.tsx
@@ -22,6 +22,9 @@ const App: React.FC = () => (
       <Badge dot status="warning">
         <Avatar shape="square" size="large" />
       </Badge>
+      <Badge dot status="processing">
+        <Avatar shape="square" size="large" />
+      </Badge>
       <Badge dot color="blue">
         <Avatar shape="square" size="large" />
       </Badge>
@@ -32,12 +35,12 @@ const App: React.FC = () => (
 
     <Space size="middle" wrap>
       <Badge count={0} showZero />
-      <Badge count={0} showZero color='blue' />
-      <Badge count={0} showZero color='#f0f' />
+      <Badge count={0} showZero color="blue" />
+      <Badge count={0} showZero color="#f0f" />
       <Badge count={0} showZero>
         <Avatar shape="square" size="large" />
       </Badge>
-      <Badge count={0} showZero color='blue'>
+      <Badge count={0} showZero color="blue">
         <Avatar shape="square" size="large" />
       </Badge>
     </Space>

diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
@@ -178,7 +178,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
           backgroundColor: token.colorSuccess,
         },
         [`${componentCls}-status-processing`]: {
-          position: 'relative',
+          overflow: 'visible',
           color: token.colorPrimary,
           backgroundColor: token.colorPrimary,
 

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -18430,7 +18430,6 @@ exports[`ConfigProvider components Modal configProvider componentDisabled 1`] =
           >
             <button
               class="config-btn config-btn-default"
-              disabled=""
               type="button"
             >
               <span>
@@ -18439,7 +18438,6 @@ exports[`ConfigProvider components Modal configProvider componentDisabled 1`] =
             </button>
             <button
               class="config-btn config-btn-primary"
-              disabled=""
               type="button"
             >
               <span>

diff --git a/components/descriptions/__tests__/index.test.tsx b/components/descriptions/__tests__/index.test.tsx
@@ -269,7 +269,7 @@ describe('Descriptions', () => {
     expect(container).toHaveAttribute('aria-describedby', 'some-label');
   });
 
-  it('Descriptions should inherit the size from ConfigProvider if the componentSize is set ', () => {
+  it('Descriptions should inherit the size from ConfigProvider if the componentSize is set', () => {
     const { container } = render(
       <ConfigProvider componentSize="small">
         <Descriptions bordered>
@@ -306,4 +306,18 @@ describe('Descriptions', () => {
     expect(container.querySelectorAll('.ant-descriptions-item')).toHaveLength(3);
     expect(container).toMatchSnapshot();
   });
+
+  it('Descriptions nested within an Item are unaffected by the external borderless style', () => {
+    const { container } = render(
+      <Descriptions bordered>
+        <Descriptions.Item>
+          <Descriptions bordered={false} />
+        </Descriptions.Item>
+      </Descriptions>,
+    );
+
+    const nestDesc = container.querySelectorAll('.ant-descriptions')?.[1];
+    const view = nestDesc.querySelector('.ant-descriptions-view');
+    expect(getComputedStyle(view!).border).toBeFalsy();
+  });
 });
diff --git a/components/descriptions/style/index.ts b/components/descriptions/style/index.ts
@@ -44,41 +44,45 @@ const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
   const { componentCls, labelBg } = token;
   return {
     [`&${componentCls}-bordered`]: {
-      [`${componentCls}-view`]: {
+      [`> ${componentCls}-view`]: {
         border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
         '> table': {
           tableLayout: 'auto',
           borderCollapse: 'collapse',
         },
-      },
-      [`${componentCls}-item-label, ${componentCls}-item-content`]: {
-        padding: `${token.padding}px ${token.paddingLG}px`,
-        borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
-        '&:last-child': {
-          borderInlineEnd: 'none',
-        },
-      },
-      [`${componentCls}-item-label`]: {
-        color: token.colorTextSecondary,
-        backgroundColor: labelBg,
-        '&::after': {
-          display: 'none',
-        },
-      },
-      [`${componentCls}-row`]: {
-        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
-        '&:last-child': {
-          borderBottom: 'none',
+        [`${componentCls}-row`]: {
+          borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+          '&:last-child': {
+            borderBottom: 'none',
+          },
+          [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
+            padding: `${token.padding}px ${token.paddingLG}px`,
+            borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+            '&:last-child': {
+              borderInlineEnd: 'none',
+            },
+          },
+          [`> ${componentCls}-item-label`]: {
+            color: token.colorTextSecondary,
+            backgroundColor: labelBg,
+            '&::after': {
+              display: 'none',
+            },
+          },
         },
       },
       [`&${componentCls}-middle`]: {
-        [`${componentCls}-item-label, ${componentCls}-item-content`]: {
-          padding: `${token.paddingSM}px ${token.paddingLG}px`,
+        [`${componentCls}-row`]: {
+          [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
+            padding: `${token.paddingSM}px ${token.paddingLG}px`,
+          },
         },
       },
       [`&${componentCls}-small`]: {
-        [`${componentCls}-item-label, ${componentCls}-item-content`]: {
-          padding: `${token.paddingXS}px ${token.padding}px`,
+        [`${componentCls}-row`]: {
+          [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
+            padding: `${token.paddingXS}px ${token.padding}px`,
+          },
         },
       },
     },

diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx
@@ -1900,4 +1900,23 @@ describe('Form', () => {
       'Warning: [antd: Form] There exist multiple Form with same `name`.',
     );
   });
+
+  // https://github.com/ant-design/ant-design/issues/43044
+  it('should not pass disabled to modal footer button', () => {
+    render(
+      // <FormDemo formProps={{ disabled: true }} modalProps={{ open: true }} />,
+      <Form disabled>
+        <Form.Item label="label">
+          <Modal open />
+        </Form.Item>
+      </Form>,
+    );
+
+    const footerBts = document.querySelectorAll('.ant-modal-footer > button');
+    expect(footerBts).toBeTruthy();
+
+    footerBts.forEach((bt) => {
+      expect(bt).not.toHaveAttribute('disabled');
+    });
+  });
 });
diff --git a/components/image/style/index.ts b/components/image/style/index.ts
@@ -22,6 +22,11 @@ export interface ComponentToken {
    * @descEN Color of preview operation icon
    */
   previewOperationColor: string;
+  /**
+   * @desc 预览操作图标悬浮颜色
+   * @descEN Color of hovered preview operation icon
+   */
+  previewOperationHoverColor: string;
   /**
    * @desc 预览操作图标禁用颜色
    * @descEN Disabled color of preview operation icon
@@ -79,6 +84,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
     margin,
     paddingLG,
     previewOperationColorDisabled,
+    previewOperationHoverColor,
     motionDurationSlow,
     iconCls,
     colorTextLightSolid,
@@ -144,7 +150,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
         userSelect: 'none',
 
         [`&:not(${previewCls}-operations-operation-disabled):hover > ${iconCls}`]: {
-          opacity: 0.3,
+          color: previewOperationHoverColor,
         },
 
         '&-disabled': {
@@ -370,7 +376,10 @@ export default genComponentStyleHook(
   },
   (token) => ({
     zIndexPopup: token.zIndexPopupBase + 80,
-    previewOperationColor: new TinyColor(token.colorTextLightSolid).toRgbString(),
+    previewOperationColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.65).toRgbString(),
+    previewOperationHoverColor: new TinyColor(token.colorTextLightSolid)
+      .setAlpha(0.85)
+      .toRgbString(),
     previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid)
       .setAlpha(0.25)
       .toRgbString(),

diff --git a/components/modal/shared.tsx b/components/modal/shared.tsx
@@ -2,6 +2,7 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import React from 'react';
 import Button from '../button';
 import { convertLegacyProps } from '../button/button';
+import { DisabledContextProvider } from '../config-provider/DisabledContext';
 import { useLocale } from '../locale';
 import type { ModalProps } from './interface';
 import { getConfirmLocale } from './locale';
@@ -46,7 +47,7 @@ export const Footer: React.FC<
   const [locale] = useLocale('Modal', getConfirmLocale());
 
   return (
-    <>
+    <DisabledContextProvider disabled={false}>
       <Button onClick={onCancel} {...cancelButtonProps}>
         {cancelText || locale?.cancelText}
       </Button>
@@ -58,6 +59,6 @@ export const Footer: React.FC<
       >
         {okText || locale?.okText}
       </Button>
-    </>
+    </DisabledContextProvider>
   );
 };
diff --git a/package.json b/package.json
@@ -220,7 +220,7 @@
     "dekko": "^0.2.1",
     "dumi": "^2.1.23",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
-    "esbuild-loader": "^3.0.0",
+    "esbuild-loader": "^4.0.0",
     "eslint": "^8.40.0",
     "eslint-config-airbnb": "^19.0.0",
     "eslint-config-prettier": "^9.0.0",

diff --git a/webpack.config.js b/webpack.config.js
@@ -24,7 +24,14 @@ function externalDayjs(config) {
   };
 }
 
-const webpackConfig = getWebpackConfig(false);
+let webpackConfig = getWebpackConfig(false);
+
+// Used for `size-limit` ci which only need to check min files
+if (process.env.PRODUCTION_ONLY) {
+  // eslint-disable-next-line no-console
+  console.log('🍐 Build production only');
+  webpackConfig = webpackConfig.filter((config) => config.mode === 'production');
+}
 
 if (process.env.RUN_ENV === 'PRODUCTION') {
   webpackConfig.forEach((config) => {