chore: auto merge branchs (#33823)

chore: sync master into feature
2024-11-30 11:08:45 +08:00 · 2022-01-24 08:16:00 +00:00 · 2022-01-24 08:16:00 +00:00 · d81ac2d5a9
commit d81ac2d5a9
parent 0c6d1512be 8217c544da
21 changed files with 208 additions and 28 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,19 @@ timeline: true

 ---

+## 4.18.5
+
+`2022-01-24`
+
+- Cascader
+  - 💄 Fix Cascader loading icon. [#33799](https://github.com/ant-design/ant-design/pull/33799)
+  - 🐞 Fix Cascader not auto offset placement when popup is out of screen and fix active option out of screen not scroll. [#33777](https://github.com/ant-design/ant-design/pull/33777)
+- 💄 Fix Tag style in dark theme. [#33751](https://github.com/ant-design/ant-design/pull/33751)
+- 💄 Fix disabled Checkbox inside Tooltip dom structure. [#33772](https://github.com/ant-design/ant-design/pull/33772) [@boomler](https://github.com/boomler)
+- ⚡️ Fix invalid hook dependency array in Row and Layout.Sider components. [#33804](https://github.com/ant-design/ant-design/pull/33804) [@mrwd2009](https://github.com/mrwd2009)
+- 🐞 Fix Card `ref` not working. [#33784](https://github.com/ant-design/ant-design/pull/33784) [@LongHaoo](https://github.com/LongHaoo)
+- 🐞 Fix a Checkbox problem that `onChange` could not correctly pass in the modified value when dynamically modifying `value` property. [#33753](https://github.com/ant-design/ant-design/pull/33753)
+
 ## 4.18.4

 `2022-01-18`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,19 @@ timeline: true

 ---

+## 4.18.5
+
+`2022-01-24`
+
+- Cascader
+  - 🐞 修复 Cascader 弹层超出屏幕时不会自动偏移以及激活选项不会自动滚动到正确位置的问题。[#33777](https://github.com/ant-design/ant-design/pull/33777)
+  - 💄 修复 Cascader 加载中图标。[#33799](https://github.com/ant-design/ant-design/pull/33799)
+- 💄 修复 Tag 在暗黑主题下的样式。[#33751](https://github.com/ant-design/ant-design/pull/33751)
+- 💄 修复 Tooltip 的子元素含有禁用态的 CheckBox 时可能引起的行为和样式异常。[#33772](https://github.com/ant-design/ant-design/pull/33772) [@boomler](https://github.com/boomler)
+- ⚡️ 优化 Row 和 Layout.Sider 的 hooks 依赖数组。[#33804](https://github.com/ant-design/ant-design/pull/33804) [@mrwd2009](https://github.com/mrwd2009)
+- 🐞 修复 Card `ref` 不生效的问题。[#33784](https://github.com/ant-design/ant-design/pull/33784) [@LongHaoo](https://github.com/LongHaoo)
+- 🐞 修复动态修改 Checkbox 的 `value` 时 `onChange` 不能正确传入修改后的值的问题。[#33753](https://github.com/ant-design/ant-design/pull/33753)
+
 ## 4.18.4

 `2022-01-18`
--- a/components/badge/style/ribbon.less
+++ b/components/badge/style/ribbon.less
@ -30,7 +30,7 @@
    top: 100%;
    width: 8px;
    height: 8px;
-    color: currentColor;
+    color: currentcolor;
    border: 4px solid;
    transform: scaleY(0.75);
    transform-origin: top;
@ -66,7 +66,7 @@
    border-bottom-right-radius: 0;
    .@{ribbon-prefix-cls}-corner {
      right: 0;
-      border-color: currentColor transparent transparent currentColor;
+      border-color: currentcolor transparent transparent currentcolor;
    }
  }

@ -75,7 +75,7 @@
    border-bottom-left-radius: 0;
    .@{ribbon-prefix-cls}-corner {
      left: 0;
-      border-color: currentColor currentColor transparent transparent;
+      border-color: currentcolor currentcolor transparent transparent;
    }
  }
 }
--- a/components/badge/style/rtl.less
+++ b/components/badge/style/rtl.less
@ -42,10 +42,10 @@
    .@{ribbon-prefix-cls}-corner {
      right: unset;
      left: 0;
-      border-color: currentColor currentColor transparent transparent;
+      border-color: currentcolor currentcolor transparent transparent;

      &::after {
-        border-color: currentColor currentColor transparent transparent;
+        border-color: currentcolor currentcolor transparent transparent;
      }
    }
  }
@ -57,10 +57,10 @@
    .@{ribbon-prefix-cls}-corner {
      right: 0;
      left: unset;
-      border-color: currentColor transparent transparent currentColor;
+      border-color: currentcolor transparent transparent currentcolor;

      &::after {
-        border-color: currentColor transparent transparent currentColor;
+        border-color: currentcolor transparent transparent currentcolor;
      }
    }
  }
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -153,7 +153,7 @@
    &.@{iconfont-css-prefix}-plus,
    &.@{iconfont-css-prefix}-minus {
      > svg {
-        shape-rendering: optimizeSpeed;
+        shape-rendering: optimizespeed;
      }
    }
  }
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@ -19,7 +19,7 @@
  }
  // http://stackoverflow.com/a/17253457
  > a:only-child {
-    color: currentColor;
+    color: currentcolor;

    &::after {
      position: absolute;
--- a/components/date-picker/style/panel.less
+++ b/components/date-picker/style/panel.less
@ -101,7 +101,7 @@
      display: inline-block;
      width: @picker-arrow-size;
      height: @picker-arrow-size;
-      border: 0 solid currentColor;
+      border: 0 solid currentcolor;
      border-width: 1.5px 0 0 1.5px;
      content: '';
    }
@ -116,7 +116,7 @@
      display: inline-block;
      width: @picker-arrow-size;
      height: @picker-arrow-size;
-      border: 0 solid currentColor;
+      border: 0 solid currentcolor;
      border-width: 1.5px 0 0 1.5px;
      content: '';
    }
--- a/components/grid/tests/cached-row-context.test.tsx
+++ b/components/grid/tests/cached-row-context.test.tsx
@ -0,0 +1,48 @@
+import React, { memo, useRef, useState, useContext } from 'react';
+import { mount } from 'enzyme';
+import Row from '../row';
+import RowContext from '../RowContext';
+
+const CacheInner = memo(() => {
+  const countRef = useRef(0);
+  countRef.current++;
+  useContext(RowContext);
+  return (
+    <div>
+      Child Rendering Count: <span id="child_count">{countRef.current}</span>
+    </div>
+  );
+});
+
+const CacheOuter = () => {
+  const [count, setCount] = useState(1);
+  const handleClick = () => {
+    setCount(count + 1);
+  };
+  return (
+    <div>
+      <button type="button" onClick={handleClick} id="parent_btn">
+        Click
+      </button>
+      Parent Rendering Count: <span id="parent_count">{count}</span>
+      <Row>
+        <CacheInner />
+      </Row>
+    </div>
+  );
+};
+
+it('Cached RowContext is working', () => {
+  const wrapper = mount(<CacheOuter />);
+  const childCount = wrapper.find('#child_count').text();
+
+  wrapper.find('#parent_btn').at(0).simulate('click');
+  expect(wrapper.find('#parent_count').text()).toBe('2');
+  // child component won't rerender
+  expect(wrapper.find('#child_count').text()).toBe(childCount);
+
+  wrapper.find('#parent_btn').at(0).simulate('click');
+  expect(wrapper.find('#parent_count').text()).toBe('3');
+  // child component won't rerender
+  expect(wrapper.find('#child_count').text()).toBe(childCount);
+});
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@ -116,11 +116,13 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
    rowStyle.marginBottom = verticalGutter;
  }

-  const rowContext = React.useMemo(() => ({ gutter: gutters, wrap, supportFlexGap }), [
-    gutters,
-    wrap,
-    supportFlexGap,
-  ]);
+  // "gutters" is a new array in each rendering phase, it'll make 'React.useMemo' effectless.
+  // So we deconstruct "gutters" variable here.
+  const [gutterH, gutterV] = gutters;
+  const rowContext = React.useMemo(
+    () => ({ gutter: [gutterH, gutterV] as [number, number], wrap, supportFlexGap }),
+    [gutterH, gutterV, wrap, supportFlexGap],
+  );

  return (
    <RowContext.Provider value={rowContext}>
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@ -136,7 +136,7 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>(
          mql?.removeListener(responsiveHandler);
        }
      };
-    }, []);
+    }, [breakpoint]); // in order to accept dynamic 'breakpoint' property, we need to add 'breakpoint' into dependency array.

    useEffect(() => {
      const uniqueId = generateId('ant-sider-');
--- a/components/layout/tests/dynamic-breakpoint.test.tsx
+++ b/components/layout/tests/dynamic-breakpoint.test.tsx
@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { mount } from 'enzyme';
+import Sider from '../Sider';
+
+const Content = () => {
+  const [breakpoint, setBreakpoint] = useState('sm');
+  const toggleBreakpoint = () => {
+    if (breakpoint === 'sm') {
+      setBreakpoint('lg');
+    } else {
+      setBreakpoint('sm');
+    }
+  };
+  return (
+    <Sider breakpoint={breakpoint as any}>
+      <button type="button" id="toggle" onClick={toggleBreakpoint}>
+        Toggle
+      </button>
+    </Sider>
+  );
+};
+
+it('Dynamic breakpoint in Sider component', () => {
+  const add = jest.fn();
+  const remove = jest.fn();
+  jest.spyOn(window, 'matchMedia').mockReturnValue({
+    matches: true,
+    addEventListener: add,
+    removeEventListener: remove,
+  } as any);
+
+  const wrapper = mount(<Content />);
+  const newMatch = window.matchMedia as jest.Mock;
+
+  // subscribe at first
+  expect(newMatch.mock.calls.length).toBe(1);
+  expect(add.mock.calls.length).toBe(1);
+  expect(remove.mock.calls.length).toBe(0);
+
+  wrapper.find('#toggle').at(0).simulate('click');
+  // unsubscribe then subscribe again
+  expect(newMatch.mock.calls.length).toBe(2);
+  expect(add.mock.calls.length).toBe(2);
+  expect(remove.mock.calls.length).toBe(1);
+
+  jest.restoreAllMocks();
+});
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@ -315,7 +315,7 @@
        position: absolute;
        width: 6px;
        height: 1.5px;
-        background-color: currentColor;
+        background-color: currentcolor;
        border-radius: 2px;
        transition: background @animation-duration-slow @ease-in-out,
          transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
--- a/components/style/mixins/iconfont.less
+++ b/components/style/mixins/iconfont.less
@ -6,7 +6,7 @@
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@ -508,13 +508,13 @@
    &:focus,
    &:hover,
    &:active {
-      border-color: currentColor;
+      border-color: currentcolor;
    }

    &::before,
    &::after {
      position: absolute;
-      background: currentColor;
+      background: currentcolor;
      transition: transform 0.3s ease-out;
      content: '';
    }
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@ -171,7 +171,7 @@

    &&-active &-btn {
      color: @tabs-highlight-color;
-      text-shadow: 0 0 0.25px currentColor;
+      text-shadow: 0 0 0.25px currentcolor;
    }

    &&-disabled {
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@ -94,7 +94,7 @@ When uploading state change, it returns:

 ## FAQ

-### How to implement upload server side?
+### How do I implement upload server side?

 - You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki#server-side) about how to implement server side upload interface.
 - There is a mock example of [express](https://github.com/react-component/upload/blob/master/server.js) in rc-upload.
@ -107,10 +107,10 @@ Please set property `url` of each item in `fileList` to control content of link.

 See <https://github.com/react-component/upload#customrequest>.

-### Why `fileList` in control will not trigger `onChange` `status` update when file not in the list?
+### Why will the `fileList` that's in control not trigger `onChange` `status` update when the file is not in the list?

-`onChange` only trigger when file in the list, it will ignore left events when removed from the list. Please note that there exist bug which makes event still trigger even the file is not in the list before `4.13.0`.
+`onChange` will only trigger when the file is in the list, it will ignore any events removed from the list. Please note that there does exist a bug which makes an event still trigger even when the file is not in the list before `4.13.0`.

-### Why sometime `onChange` return File object and sometime return { originFileObj: File }?
+### Why does `onChange` sometimes return File object and other times return { originFileObj: File }?

 For compatible case, we return File object when `beforeUpload` return `false`. It will merge to `{ originFileObj: File }` in next major version. Current version is compatible to get origin file by `info.file.originFileObj`. You can change this before major release.
--- a/docs/react/i18n.en-US.md
+++ b/docs/react/i18n.en-US.md
@ -100,3 +100,29 @@ See more usage at [ConfigProvider](/components/config-provider).
 ## Adding new language

 If your language is not in above list, feel free to create a locale package based on the [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) lanugage pack and send us a pull request. For reference, you can refer to the pull request of adding the [Azerbaijani](https://github.com/ant-design/ant-design/pull/21387) language as a sample.
+
+Do it step by step:
+
+1. Fork `antd` and git clone to local, switch to `feature` branch, pull it to make sure it's up-to-date, create a new branch based on `feature` branch, all work will be done in it.
+
+   ```bash
+   git clone git@github.com:<your organization>/ant-design.git
+   cd ant-design/
+   git remote add upstream origin git@github.com:ant-design/ant-design.git
+   git checkout -b <your new branch name>
+   ```
+
+2. Add the language support for [rc-picker](https://github.com/react-component/picker), for example [this](https://github.com/react-component/picker/blob/master/src/locale/en_US.ts).
+3. Add the language support for [rc-pagination](https://github.com/react-component/pagination), for example [this](https://github.com/react-component/pagination/blob/master/src/locale/en_US.js).
+4. Wait for `rc-picker` and `rc-pagination` to release the new version containing the above.
+5. Update the `rc-picker` and `rc-pagination` versions in `antd` and add the remaining other necessary content for the language. for example [Azerbaijani PR](https://github.com/ant-design/ant-design/pull/21387).
+6. Add a test case for the language in [index.test.js](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/__tests__/index.test.js).
+7. update snapshots, you may also need to delete `node_modules`, lock files (`yarn.lock` or `package-lock.json`) and reinstall at first.
+
+   ```bash
+   npm run test -- components/locale-provider -u
+   ```
+
+8. Add the language to i18n list [docs/react/i18n.zh-CN.md](https://github.com/ant-design/ant-design/blob/master/docs/react/i18n.en-US.md) and [docs/react/i18n.zh-CN.md](https://github.com/ant-design/ant-design/blob/master/docs/react/i18n.zh-CN.md).
+9. Watch out the CI status, and if it failed, look at the logs and make some changes until it all passes.
+10. Ok, now everything is ready for review.
--- a/docs/react/i18n.zh-CN.md
+++ b/docs/react/i18n.zh-CN.md
@ -98,6 +98,32 @@ return (

 如果你找不到你需要的语言包，欢迎你在 [英文语言包](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) 的基础上创建一个新的语言包，并给我们发一个 Pull Request，可以参考 [阿塞拜疆语的 PR](https://github.com/ant-design/ant-design/pull/21387)。

+基本步骤如下：
+
+1. Fork `antd` 并 git clone 到本地，切换到 `feature` 分支，执行一次拉取确保最新，基于 `feature` 分支切换一个新分支，以下工作将在新分支完成。
+
+   ```bash
+   git clone git@github.com:<your organization>/ant-design.git
+   cd ant-design/
+   git remote add upstream origin git@github.com:ant-design/ant-design.git
+   git checkout -b <your new branch name>
+   ```
+
+2. 为 [rc-picker](https://github.com/react-component/picker) 添加对应语言，参考 [这个](https://github.com/react-component/picker/blob/master/src/locale/en_US.ts)。
+3. 为 [rc-pagination](https://github.com/react-component/pagination) 添加对应语言，参考 [这个](https://github.com/react-component/pagination/blob/master/src/locale/en_US.js)。
+4. 等待 `rc-picker` 和 `rc-pagination` 发布含上述内容的最低版本。
+5. 参考 [阿塞拜疆语的 PR](https://github.com/ant-design/ant-design/pull/21387) 向 `antd` 发起 PR，完善对应语言的其他内容和更新 `rc-picker` 和 `rc-pagination` 版本。
+6. 在 [index.test.js](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/__tests__/index.test.js) 添加该语言的测试用例。
+7. 更新 snapshot，在这之前或许你还需要先删除 `node_modules` 和 lock 文件 （`yarn.lock` or `package-lock.json`） 并全新安装。
+
+   ```bash
+   npm run test -- components/locale-provider -u
+   ```
+
+8. 更新 [docs/react/i18n.zh-CN.md](https://github.com/ant-design/ant-design/blob/master/docs/react/i18n.zh-CN.md) 和 [docs/react/i18n.zh-CN.md](https://github.com/ant-design/ant-design/blob/master/docs/react/i18n.zh-CN.md)，将对应语言添加到文档列表。
+9. 观察 CI 是否通过，若未通过，根据日志进行修改直至通过。
+10. 万事俱备等待 review 。
+
 ## i18n 项目示例

 你可以参考 [Ant Design Pro 国际化文档](https://pro.ant.design/docs/i18n-cn) 查看完整的国际化项目示例。
--- a/docs/resources.en-US.md
+++ b/docs/resources.en-US.md
@ -70,6 +70,10 @@ Please find below some of the design resources and tools about Ant Design that w
  - https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dxzdQYWlmjMAAAAAAAAAAAAAARQnAQ
  - Use fully components and templates on JiShi Design
  - https://js.design/antd
+- Ant for Plasmic
+  - https://user-images.githubusercontent.com/7129/149994038-76214796-cd6a-4e80-b0a4-117e8edac050.png
+  - Drag/drop live Ant components and manipulate props in this React visual builder
+  - https://www.plasmic.app/ant-design

 ## Articles

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "4.18.4",
+  "version": "4.18.5",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
  "keywords": [
@ -272,7 +272,7 @@
    "rimraf": "^3.0.0",
    "scrollama": "^3.0.0",
    "semver": "^7.3.5",
-    "simple-git": "^2.23.0",
+    "simple-git": "^3.0.0",
    "string-replace-loader": "^3.0.3",
    "stylelint": "^14.0.0",
    "stylelint-config-prettier": "^9.0.2",
--- a/scripts/post-script.js
+++ b/scripts/post-script.js
@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const fetch = require('isomorphic-fetch');
 const semver = require('semver');
 const moment = require('moment');