Merge pull request #40219 from ant-design/master

chore: feature merge master

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -22,16 +22,31 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
     setExpandAll(!expandAll);
   };
 
-  const visibleDemos = showDebug ? items : items.filter((item) => !item.previewerProps.debug);
-  const filteredItems = visibleDemos.map((item) => ({
-    ...item,
-    previewerProps: {
-      ...item.previewerProps,
-      expand: expandAll,
-      // always override debug property, because dumi will hide debug demo in production
-      debug: false,
-    },
-  }));
+  const demos = React.useMemo(
+    () =>
+      items.reduce((acc, item) => {
+        const { previewerProps } = item;
+        const { debug } = previewerProps;
+
+        if (debug && !showDebug) return acc;
+
+        return acc.concat({
+          ...item,
+          previewerProps: {
+            ...previewerProps,
+            expand: expandAll,
+            // always override debug property, because dumi will hide debug demo in production
+            debug: false,
+            /**
+             * antd extra marker for the original debug
+             * @see https://github.com/ant-design/ant-design/pull/40130#issuecomment-1380208762
+             */
+            originDebug: debug,
+          },
+        });
+      }, [] as typeof items),
+    [expandAll, showDebug],
+  );
 
   return (
     <div className="demo-wrapper">
@@ -60,7 +75,7 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
         </Tooltip>
       </span>
       {/* FIXME: find a new way instead of `key` to trigger re-render */}
-      <DumiDemoGrid items={filteredItems} key={`${expandAll}${showDebug}`} />
+      <DumiDemoGrid items={demos} key={`${expandAll}${showDebug}`} />
     </div>
   );
 };

.dumi/theme/builtins/Previewer/index.tsx

@@ -90,7 +90,7 @@ const Demo: React.FC<DemoProps> = (props) => {
   const docsOnlineUrl = `https://ant.design${pathname}${search}#${meta.id}`;
 
   const handleCodeExpand = (demo: string) => {
-    setCodeExpand(!codeExpand);
+    setCodeExpand((prev) => !prev);
     track({ type: 'expand', demo });
   };
 
@@ -112,6 +112,10 @@ const Demo: React.FC<DemoProps> = (props) => {
     }
   }, []);
 
+  useEffect(() => {
+    setCodeExpand(expand);
+  }, [expand]);
+
   if (!liveDemo.current) {
     liveDemo.current = meta.iframe ? (
       <BrowserFrame>
@@ -123,8 +127,8 @@ const Demo: React.FC<DemoProps> = (props) => {
   }
 
   const codeBoxClass = classNames('code-box', {
-    expand: codeExpand || expand,
-    'code-box-debug': meta.debug,
+    expand: codeExpand,
+    'code-box-debug': meta.originDebug,
   });
 
   const localizedTitle = meta?.title[locale] || meta?.title;
@@ -330,7 +334,7 @@ const Demo: React.FC<DemoProps> = (props) => {
       </section>
       <section className="code-box-meta markdown">
         <div className="code-box-title">
-          <Tooltip title={meta.debug ? <FormattedMessage id="app.demo.debug" /> : ''}>
+          <Tooltip title={meta.originDebug ? <FormattedMessage id="app.demo.debug" /> : ''}>
             <a href={`#${meta.id}`} ref={anchorRef}>
               {localizedTitle}
             </a>

.github/workflows/test.yml

@@ -171,13 +171,6 @@ jobs:
         if: ${{ matrix.module == 'dist' }}
         run: node ./tests/dekko/dist.test.js
 
-      - name: bundlesize
-        if: ${{ matrix.module == 'dist' && matrix.react == '18' }}
-        run: npm run bundlesize
-        env:
-          BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}
-          INTERNAL_SKIP_CACHE: true
-
       # dom test
       - name: dom test
         if: ${{ matrix.module == 'dom' }}

components/select/demo/custom-dropdown-menu.md

@@ -1,6 +1,6 @@
 ## zh-CN
 
-使用 `open` 对下拉菜单进行自由扩展。如果希望点击自定义内容后关闭浮层，你需要使用受控模式自行控制（[codesandbox](https://codesandbox.io/s/ji-ben-shi-yong-antd-4-21-7-forked-gnp4cy?file=/demo.js)）。
+使用 `dropdownRender` 对下拉菜单进行自由扩展。如果希望点击自定义内容后关闭浮层，你需要使用受控模式自行控制（[codesandbox](https://codesandbox.io/s/ji-ben-shi-yong-antd-4-21-7-forked-gnp4cy?file=/demo.js)）。
 
 ## en-US
 

components/style/motion/slide.ts

@@ -152,6 +152,8 @@ export const initSlideMotion = (
       ${motionCls}-enter,
       ${motionCls}-appear
     `]: {
+        transform: 'scale(0)',
+        transformOrigin: '0% 0%',
         opacity: 0,
         animationTimingFunction: token.motionEaseOutQuint,
       },

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

@@ -96,7 +96,8 @@ Array [
     </div>
   </div>,
   <span
-    class="ant-tag site-tag-plus"
+    class="ant-tag"
+    style="background:#ffffff;border-style:dashed"
   >
     <span
       aria-label="plus"
@@ -410,14 +411,16 @@ Array [
 exports[`renders ./components/tag/demo/control.tsx extend context correctly 1`] = `
 Array [
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Unremovable
     </span>
   </span>,
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Tag 2
@@ -444,7 +447,8 @@ Array [
     </span>
   </span>,
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Tag 3
@@ -471,7 +475,8 @@ Array [
     </span>
   </span>,
   <span
-    class="ant-tag site-tag-plus"
+    class="ant-tag"
+    style="background:#ffffff;border-style:dashed"
   >
     <span
       aria-label="plus"

components/tag/__tests__/__snapshots__/demo.test.ts.snap

@@ -96,7 +96,8 @@ Array [
     </div>
   </div>,
   <span
-    class="ant-tag site-tag-plus"
+    class="ant-tag"
+    style="background:#ffffff;border-style:dashed"
   >
     <span
       aria-label="plus"
@@ -410,14 +411,16 @@ Array [
 exports[`renders ./components/tag/demo/control.tsx correctly 1`] = `
 Array [
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Unremovable
     </span>
   </span>,
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Tag 2
@@ -444,7 +447,8 @@ Array [
     </span>
   </span>,
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Tag 3
@@ -471,7 +475,8 @@ Array [
     </span>
   </span>,
   <span
-    class="ant-tag site-tag-plus"
+    class="ant-tag"
+    style="background:#ffffff;border-style:dashed"
   >
     <span
       aria-label="plus"

components/tag/demo/animation.md

@@ -5,17 +5,3 @@
 ## en-US
 
 Animating the Tag by using [rc-tween-one](https://github.com/react-component/tween-one).
-
-```css
-.site-tag-plus {
-  background: #fff;
-  border-style: dashed;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-tag-plus {
-    background: transparent;
-    border-style: dashed;
-  }
-</style>

components/tag/demo/animation.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import type { InputRef } from 'antd';
-import { Input, Tag } from 'antd';
+import { Input, Tag, theme } from 'antd';
 import { TweenOneGroup } from 'rc-tween-one';
 
 const App: React.FC = () => {
-  const [tags, setTags] = useState<string[]>(['Tag 1', 'Tag 2', 'Tag 3']);
-  const [inputVisible, setInputVisible] = useState<boolean>(false);
+  const { token } = theme.useToken();
+  const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
+  const [inputVisible, setInputVisible] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const inputRef = useRef<InputRef>(null);
 
@@ -58,6 +59,12 @@ const App: React.FC = () => {
   };
 
   const tagChild = tags.map(forMap);
+
+  const tagPlusStyle = {
+    background: token.colorBgContainer,
+    borderStyle: 'dashed',
+  };
+
   return (
     <>
       <div style={{ marginBottom: 16 }}>
@@ -79,7 +86,7 @@ const App: React.FC = () => {
           {tagChild}
         </TweenOneGroup>
       </div>
-      {inputVisible && (
+      {inputVisible ? (
         <Input
           ref={inputRef}
           type="text"
@@ -90,9 +97,8 @@ const App: React.FC = () => {
           onBlur={handleInputConfirm}
           onPressEnter={handleInputConfirm}
         />
-      )}
-      {!inputVisible && (
-        <Tag onClick={showInput} className="site-tag-plus">
+      ) : (
+        <Tag onClick={showInput} style={tagPlusStyle}>
           <PlusOutlined /> New Tag
         </Tag>
       )}

components/tag/demo/control.md

@@ -5,25 +5,3 @@
 ## en-US
 
 Generating a set of Tags by array, you can add and remove dynamically.
-
-```css
-.site-tag-plus {
-  background: #fff;
-  border-style: dashed;
-}
-.edit-tag {
-  user-select: none;
-}
-.tag-input {
-  width: 78px;
-  margin-right: 8px;
-  vertical-align: top;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-tag-plus {
-    background: transparent;
-    border-style: dashed;
-  }
-</style>

components/tag/demo/control.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import type { InputRef } from 'antd';
-import { Input, Tag, Tooltip } from 'antd';
+import { Input, Tag, Tooltip, theme } from 'antd';
 
 const App: React.FC = () => {
-  const [tags, setTags] = useState<string[]>(['Unremovable', 'Tag 2', 'Tag 3']);
+  const { token } = theme.useToken();
+  const [tags, setTags] = useState(['Unremovable', 'Tag 2', 'Tag 3']);
   const [inputVisible, setInputVisible] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const [editInputIndex, setEditInputIndex] = useState(-1);
@@ -56,6 +57,17 @@ const App: React.FC = () => {
     setInputValue('');
   };
 
+  const tagInputStyle = {
+    width: 78,
+    marginRight: 8,
+    verticalAlign: 'top',
+  };
+
+  const tagPlusStyle = {
+    background: token.colorBgContainer,
+    borderStyle: 'dashed',
+  };
+
   return (
     <>
       {tags.map((tag, index) => {
@@ -65,7 +77,7 @@ const App: React.FC = () => {
               ref={editInputRef}
               key={tag}
               size="small"
-              className="tag-input"
+              style={tagInputStyle}
               value={editInputValue}
               onChange={handleEditInputChange}
               onBlur={handleEditInputConfirm}
@@ -78,9 +90,9 @@ const App: React.FC = () => {
 
         const tagElem = (
           <Tag
-            className="edit-tag"
             key={tag}
             closable={index !== 0}
+            style={{ userSelect: 'none' }}
             onClose={() => handleClose(tag)}
           >
             <span
@@ -104,20 +116,19 @@ const App: React.FC = () => {
           tagElem
         );
       })}
-      {inputVisible && (
+      {inputVisible ? (
         <Input
           ref={inputRef}
           type="text"
           size="small"
-          className="tag-input"
+          style={tagInputStyle}
           value={inputValue}
           onChange={handleInputChange}
           onBlur={handleInputConfirm}
           onPressEnter={handleInputConfirm}
         />
-      )}
-      {!inputVisible && (
-        <Tag className="site-tag-plus" onClick={showInput}>
+      ) : (
+        <Tag style={tagPlusStyle} onClick={showInput}>
           <PlusOutlined /> New Tag
         </Tag>
       )}

docs/blog/testing-migrate.en-US.md

@@ -80,7 +80,7 @@ In `enzyme`, some built-in APIs are provided to manipulate dom, or find componen
 - setProps(nextProps): Set the properties of the component
 - find(selector): Find the node according to the selector, the selector can be the selector in CSS, or the constructor of the component, and the displayName of the component, etc.
 
-在 `testing-library` 中，没有提供这些 api（正如上面提到过的 - `testing-library` 更加注重行为上的测试），所以需要换成原生的 dom 操作：
+In `testing-library`, these APIs are not provided (as mentioned above - `testing-library` focuses more on behavioral testing), so it needs to be replaced by native dom operations:
 
 ```diff
     expect(ref.current.getPopupDomNode()).toBe(null);

package.json

@@ -48,7 +48,6 @@
     "api-collection": "antd-tools run api-collection",
     "authors": "node ./scripts/generate-authors",
     "build": "npm run compile && NODE_OPTIONS='--max-old-space-size=4096' npm run dist",
-    "bundlesize": "bundlesize --enable-github-checks",
     "size-limit": "size-limit",
     "check-commit": "node ./scripts/check-commit",
     "check-ts-demo": "node ./scripts/check-ts-demo",
@@ -194,7 +193,6 @@
     "antd-img-crop": "^4.2.8",
     "antd-token-previewer": "^1.1.0-21",
     "array-move": "^4.0.0",
-    "bundlesize2": "^0.0.31",
     "chalk": "^4.0.0",
     "cheerio": "1.0.0-rc.12",
     "cross-env": "^7.0.0",
@@ -306,12 +304,6 @@
       "limit": "500 KiB"
     }
   ],
-  "bundlesize": [
-    {
-      "path": "./dist/antd.min.js",
-      "maxSize": "385 kB"
-    }
-  ],
   "tnpm": {
     "mode": "npm"
   },