chore: auto merge branchs (#34358)

chore: merge master into next
2025-01-18 06:03:38 +08:00 · 2022-03-08 06:56:08 +00:00 · 2022-03-08 06:56:08 +00:00 · 6bc219b13b
commit 6bc219b13b
parent 068584b76c 8fe8df777e
12 changed files with 186 additions and 68 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,55 @@ timeline: true

 ---

+## 4.19.1-alpha.0
+
+`2022-03-08`
+
+- 🐞 Fix less compile error related to custom status. [#34350](https://github.com/ant-design/ant-design/pull/34350)
+  - 🐞 Fix error `ReferenceError: colorPalette is not defined` when customize theme.
+  - 🐞 Fix error `Error: Invalid class or id selector syntax` when import `antd/dist/antd.css`.
+
+## 4.19.0
+
+`2022-03-08`
+
+- 💄 Optimize arrow style for some components. [#33710](https://github.com/ant-design/ant-design/pull/33710)
+
+![image](https://user-images.githubusercontent.com/27722486/157088587-ca49cc29-bf25-42d1-8c14-020b5501c62e.png)
+
+- Input
+  - 🛠 Refactor Input with rc-input. [#34206](https://github.com/ant-design/ant-design/pull/34206)
+    - Attention: The type and value of `ref` is modified because of refactoring from class component to function component. You can still get DOM node from `input`, and other methods such as `focus` and `blur` mentioned in document are also supported.
+  - 🆕 Support `clearIcon` prop for customizing clear icon. [#34325](https://github.com/ant-design/ant-design/pull/34325)
+- Table
+  - 🆕 `filterSearch` now support passing function to customize search. [#34085](https://github.com/ant-design/ant-design/pull/34085) [@heiyu4585](https://github.com/heiyu4585)
+  - 🆕 `column.filterDropdown({ clearFilters })` support `clearFilters({ confirm: false, closeDropdown: false })`. [#34120](https://github.com/ant-design/ant-design/pull/34120) [@heiyu4585](https://github.com/heiyu4585)
+  - ⌨️ Table adds `aria-sort` attribute for screen readers. [#33603](https://github.com/ant-design/ant-design/pull/33603) [@dgreene1](https://github.com/dgreene1)
+  - 🐞 Fix Table filters select-all Checkbox not changed when select item. [#34295](https://github.com/ant-design/ant-design/pull/34295)
+- 🆕 Data entry components add `status` prop to support custom status.
+  - Transfer [#34098](https://github.com/ant-design/ant-design/pull/34098)
+  - AutoComplete [#34096](https://github.com/ant-design/ant-design/pull/34096)
+  - TreeSelect [#34093](https://github.com/ant-design/ant-design/pull/34093)
+  - Cascader [#34086](https://github.com/ant-design/ant-design/pull/34086)
+  - Select [#34084](https://github.com/ant-design/ant-design/pull/34084)
+  - DatePicker and TimePicker [#34073](https://github.com/ant-design/ant-design/pull/34073)
+  - Mentions [#34071](https://github.com/ant-design/ant-design/pull/34071)
+  - InputNumber [#34042](https://github.com/ant-design/ant-design/pull/34042)
+  - Input [#33995](https://github.com/ant-design/ant-design/pull/33995)
+
+![image](https://user-images.githubusercontent.com/27722486/157089015-f96b0153-2cc4-4e04-94d6-e0e4b195d5d1.png)
+
+- 🆕 InputNumber supports `controls={{ upIcon, downIcon }}` to customize icon up and down. [#33914](https://github.com/ant-design/ant-design/pull/33914) [@heiyu4585](https://github.com/heiyu4585)
+- 🆕 Notification `placement` support `top` / `bottom` [#33871](https://github.com/ant-design/ant-design/pull/33871) [@heiyu4585](https://github.com/heiyu4585)
+- 🆕 Select, Cascades, DatePicker now support `placement` property. [#33641](https://github.com/ant-design/ant-design/pull/33541) [@ONLY-yours](https://github.com/ONLY-yours)
+- 🆕 Dropdown support `arrow={{ pointAtCenter: true }}` to make arrow point at center. And `top` `bottom` placement are also supported. [#33658](https://github.com/ant-design/ant-design/pull/33658)
+- 🆕 Skeleton.Input Adds `block` prop. [#33672](https://github.com/ant-design/ant-design/pull/33672) [@woochanleee](https://github.com/woochanleee)
+- 🆕 Move TimePicker `disabledHours`, `disabledMinutes`, `disabledSeconds` into `disabledTime` to align with DatePicker. [#33503](https://github.com/ant-design/ant-design/pull/33503)
+- 💄 Modify the color of some borders and the background color of the progress bar to be transparent to suit the colored background. [#33506](https://github.com/ant-design/ant-design/pull/33506)
+- 💄 Space support custom children `key`. [#33607](https://github.com/ant-design/ant-design/pull/33607) [@qin20](https://github.com/qin20)
+- 🐞 Fix `Typography.Title` didn't keep font size when become editable. [#34169](https://github.com/ant-design/ant-design/pull/34169) [@heiyu4585](https://github.com/heiyu4585)
+- 🐞 Fix Form.Item throw warning `React does not recognize the requiredMark prop on a DOM element`. [#34323](https://github.com/ant-design/ant-design/pull/34323)
+
 ## 4.18.9

 `2022-02-28`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,55 @@ timeline: true

 ---

+## 4.19.1-alpha.0
+
+`2022-03-08`
+
+- 🐞 修复自定义状态相关的 less 编译错误 [#34350](https://github.com/ant-design/ant-design/pull/34350)
+  - 🐞 修复使用定制主题时 less 编译提示 `ReferenceError: colorPalette is not defined` 错误。
+  - 🐞 修复引入 `antd/dist/antd.css` 时提示 `Error: Invalid class or id selector syntax` 错误。
+
+## 4.19.0
+
+`2022-03-08`
+
+- 💄 优化部分组件箭头样式。 [#33710](https://github.com/ant-design/ant-design/pull/33710)
+
+![image](https://user-images.githubusercontent.com/27722486/157088587-ca49cc29-bf25-42d1-8c14-020b5501c62e.png)
+
+- Input
+  - 🛠 引入 rc-input 重构 Input 组件为 function component。[#34206](https://github.com/ant-design/ant-design/pull/34206)
+    - 注意：由于从 class component 变为 function component，Input 组件的 `ref` 类型及内容已经更新，可以通过 `import { InputRef } from 'antd'` 引入。其中的 `input` 属性作为获取 DOM 的途径被保留，同时支持 `focus` 和 `blur` 等文档中支持的方法。
+  - 🆕 新增 `clearIcon` 属性，支持自定义清除按钮。 [#34325](https://github.com/ant-design/ant-design/pull/34325)
+- Table
+  - 🆕 `column.filterSearch` 属性现在支持返回一个函数用于自定义搜索条件。[#34085](https://github.com/ant-design/ant-design/pull/34085) [@heiyu4585](https://github.com/heiyu4585)
+  - 🆕 `column.filterDropdown({ clearFilters })` 支持参数 `clearFilters({ confirm: false, closeDropdown: false })` 控制筛选。[#34120](https://github.com/ant-design/ant-design/pull/34120) [@heiyu4585](https://github.com/heiyu4585)
+  - ⌨️ 增加 `aria-sort` 属性以优化屏幕阅读器的使用体验。 [#33603](https://github.com/ant-design/ant-design/pull/33603) [@dgreene1](https://github.com/dgreene1)
+  - 🐞 修复 Table 列筛选器中选择全部 Checkbox 状态问题。 [#34295](https://github.com/ant-design/ant-design/pull/34295)
+- 🆕 表单组件新增 `status` 属性以支持自定义状态。
+  - Transfer [#34098](https://github.com/ant-design/ant-design/pull/34098)
+  - AutoComplete [#34096](https://github.com/ant-design/ant-design/pull/34096)
+  - TreeSelect [#34093](https://github.com/ant-design/ant-design/pull/34093)
+  - Cascader [#34086](https://github.com/ant-design/ant-design/pull/34086)
+  - Select [#34084](https://github.com/ant-design/ant-design/pull/34084)
+  - DatePicker 和 TimePicker [#34073](https://github.com/ant-design/ant-design/pull/34073)
+  - Mentions [#34071](https://github.com/ant-design/ant-design/pull/34071)
+  - InputNumber [#34042](https://github.com/ant-design/ant-design/pull/34042)
+  - Input [#33995](https://github.com/ant-design/ant-design/pull/33995)
+
+![image](https://user-images.githubusercontent.com/27722486/157089015-f96b0153-2cc4-4e04-94d6-e0e4b195d5d1.png)
+
+- 🆕 InputNumber 组件支持 `controls={{ upIcon, downIcon }}` 用于自定义上下图标。[#33914](https://github.com/ant-design/ant-design/pull/33914) [@heiyu4585](https://github.com/heiyu4585)
+- 🆕 Notification 组件弹窗位置新增支持 `top` / `bottom`。 [#33871](https://github.com/ant-design/ant-design/pull/33871) [@heiyu4585](https://github.com/heiyu4585)
+- 🆕 Select、Cascader、DatePicker 等组件新增 `placement` 用于自定义弹层方向。 [#33641](https://github.com/ant-design/ant-design/pull/33541) [@ONLY-yours](https://github.com/ONLY-yours)
+- 🆕 Dropdown 组件支持 `arrow={{ pointAtCenter: true }}` 用于指向元素正中间，并且新增 `top` `bottom` 两种 `placement` 位置。 [#33658](https://github.com/ant-design/ant-design/pull/33658)
+- 🆕 Skeleton.Input 添加 `block` 属性。 [#33672](https://github.com/ant-design/ant-design/pull/33672) [@woochanleee](https://github.com/woochanleee)
+- 🆕 合并 TimePicker `disabledHours`、`disabledMinutes`、`disabledSeconds` 至 `disabledTime` 以保持与 DatePicker 接口一致性。 [#33503](https://github.com/ant-design/ant-design/pull/33503)
+- 💄 修改部分边框颜色和进度条的背景色为透明色以适应有色背景。 [#33506](https://github.com/ant-design/ant-design/pull/33506)
+- 💄 Space 支持自定义 children 的 `key`。 [#33607](https://github.com/ant-design/ant-design/pull/33607) [@qin20](https://github.com/qin20)
+- 🐞 修复 Typography.Title 进入编辑模式时大小不一致的问题。 [#34169](https://github.com/ant-design/ant-design/pull/34169) [@heiyu4585](https://github.com/heiyu4585)
+- 🐞 修复 Form.Item 抛出 `React does not recognize the requiredMark prop on a DOM element` 的问题。 [#34323](https://github.com/ant-design/ant-design/pull/34323)
+
 ## 4.18.9

 `2022-02-28`
--- a/components/config-provider/tests/icon.test.js
+++ b/components/config-provider/tests/icon.test.js
@ -16,17 +16,30 @@ describe('ConfigProvider.Icon', () => {
    });
  });

-  it('basic', () => {
-    const wrapper = mount(
-      <ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
-        <SmileOutlined />
-      </ConfigProvider>,
-    );
+  describe('csp', () => {
+    it('raw', () => {
+      mount(
+        <ConfigProvider csp={{ nonce: 'little' }}>
+          <SmileOutlined />
+        </ConfigProvider>,
+      );

-    const styleNode = document.querySelector('style');
+      const styleNode = document.querySelector('style');
+      expect(styleNode.nonce).toEqual('little');
+    });

-    expect(wrapper.exists('.bamboo-smile')).toBeTruthy();
-    expect(styleNode.nonce).toEqual('light');
+    it('mix with iconPrefixCls', () => {
+      const wrapper = mount(
+        <ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
+          <SmileOutlined />
+        </ConfigProvider>,
+      );
+
+      const styleNode = document.querySelector('style');
+
+      expect(wrapper.exists('.bamboo-smile')).toBeTruthy();
+      expect(styleNode.nonce).toEqual('light');
+    });
  });

  it('nest', () => {
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -219,7 +219,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {

  const memoIconContextValue = React.useMemo(
    () => ({ prefixCls: iconPrefixCls, csp }),
-    [iconPrefixCls],
+    [iconPrefixCls, csp],
  );

  let childNode = children;
@ -246,7 +246,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
    );
  }

-  if (iconPrefixCls) {
+  if (iconPrefixCls || csp) {
    childNode = (
      <IconContext.Provider value={memoIconContextValue}>{childNode}</IconContext.Provider>
    );
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@ -129,7 +129,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
    onBlur,
    onFocus,
    suffix,
-    clearIcon,
+    allowClear,
    ...rest
  } = props;
  const { getPrefixCls, direction, input } = React.useContext(ConfigContext);
@ -199,6 +199,14 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {

  const withPrefixSuffix = hasPrefixSuffix(props) || hasFeedback;

+  // Allow clear
+  let mergedAllowClear;
+  if (typeof allowClear === 'object' && allowClear?.clearIcon) {
+    mergedAllowClear = allowClear;
+  } else if (allowClear) {
+    mergedAllowClear = { clearIcon: <CloseCircleFilled /> };
+  }
+
  return (
    <RcInput
      ref={composeRef(ref, inputRef)}
@ -208,7 +216,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
      onBlur={handleBlur}
      onFocus={handleFocus}
      suffix={suffixNode}
-      clearIcon={clearIcon || <CloseCircleFilled />}
+      allowClear={mergedAllowClear}
      inputClassName={classNames(
        !withPrefixSuffix && {
          [`${prefixCls}-sm`]: mergedSize === 'small',
--- a/components/input/tests/index.test.js
+++ b/components/input/tests/index.test.js
@ -380,4 +380,9 @@ describe('Input allowClear', () => {
    wrapper.setProps({ value: false });
    expect(wrapper.find('input').first().getDOMNode().value).toBe('false');
  });
+
+  it('should support custom clearIcon', () => {
+    const wrapper = mount(<Input allowClear={{ clearIcon: 'clear' }} />);
+    expect(wrapper.find('.ant-input-clear-icon').text()).toBe('clear');
+  });
 });
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@ -20,9 +20,8 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 | --- | --- | --- | --- | --- |
 | addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - |  |
 | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - |  |
-| allowClear | If allow to remove input content with clear icon | boolean | false |  |
+| allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false |  |
 | bordered | Whether has border style | boolean | true | 4.5.0 |
-| clearIcon | Icon displayed when `allowClear` is enabled | ReactNode | <CloseCircleFilled /> | 4.19.0 |
 | defaultValue | The initial input content | string | - |  |
 | disabled | Whether the input is disabled | boolean | false |  |
 | id | The ID for input | string | - |  |
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@ -21,9 +21,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
 | --- | --- | --- | --- | --- |
 | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - |  |
 | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - |  |
-| allowClear | 可以点击清除图标删除内容 | boolean | - |  |
+| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - |  |
 | bordered | 是否有边框 | boolean | true | 4.5.0 |
-| clearIcon | 清除按钮，与 `allowClear` 一同使用 | ReactNode | <CloseCircleFilled /> | 4.19.0 |
 | defaultValue | 输入框默认内容 | string | - |  |
 | disabled | 是否禁用状态，默认为 false | boolean | false |  |
 | id | 输入框的 id | string | - |  |
--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@ -25,7 +25,7 @@
    }
  }

-  &-password-icon {
+  &-password-icon.@{iconfont-css-prefix} {
    color: @text-color-secondary;
    cursor: pointer;
    transition: all 0.3s;
--- a/components/select/style/status.less
+++ b/components/select/style/status.less
@ -25,56 +25,52 @@
  }
 }

-.select-status-base(@prefix-cls) {
-  .@{prefix-cls} {
-    &-status-error {
-      .select-status-color(@error-color, @error-color, @select-background, @error-color-hover, @error-color-outline);
-    }
+.@{select-prefix-cls} {
+  &-status-error {
+    .select-status-color(@error-color, @error-color, @select-background, @error-color-hover, @error-color-outline);
+  }

-    &-status-warning {
-      .select-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
-    }
+  &-status-warning {
+    .select-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
+  }

-    &-status-success {
-      .@{prefix-cls}-feedback-icon {
-        color: @success-color;
+  &-status-success {
+    .@{select-prefix-cls}-feedback-icon {
+      color: @success-color;
+    }
+  }
+
+  &-status-validating {
+    .@{select-prefix-cls}-feedback-icon {
+      color: @primary-color;
+    }
+  }
+
+  &-status-error,
+  &-status-warning,
+  &-status-success,
+  &-status-validating {
+    &.@{select-prefix-cls}-has-feedback {
+      //.@{prefix-cls}-arrow,
+      .@{select-prefix-cls}-clear {
+        right: 32px;
      }
-    }

-    &-status-validating {
-      .@{prefix-cls}-feedback-icon {
-        color: @primary-color;
-      }
-    }
-
-    &-status-error,
-    &-status-warning,
-    &-status-success,
-    &-status-validating {
-      &.@{prefix-cls}-has-feedback {
-        //.@{prefix-cls}-arrow,
-        .@{prefix-cls}-clear {
-          right: 32px;
-        }
-
-        .@{prefix-cls}-selection-selected-value {
-          padding-right: 42px;
-        }
-      }
-    }
-
-    &-feedback-icon {
-      font-size: @font-size-base;
-      text-align: center;
-      visibility: visible;
-      animation: zoomIn 0.3s @ease-out-back;
-      pointer-events: none;
-
-      &:not(:first-child) {
-        margin-left: 8px;
+      .@{select-prefix-cls}-selection-selected-value {
+        padding-right: 42px;
      }
    }
  }
-}

-.select-status-base(@select-prefix-cls);
+  &-feedback-icon {
+    font-size: @font-size-base;
+    text-align: center;
+    visibility: visible;
+    animation: zoomIn 0.3s @ease-out-back;
+    pointer-events: none;
+
+    &:not(:first-child) {
+      margin-left: 8px;
+    }
+  }
+}
--- a/components/transfer/style/status.less
+++ b/components/transfer/style/status.less
@ -2,7 +2,7 @@

@transfer-prefix-cls: ~'@{ant-prefix}-transfer';

-.status-color(@color) {
+.transfer-status-color(@color) {
  .@{transfer-prefix-cls}-list {
    border-color: @color;

@ -22,10 +22,10 @@

 .@{transfer-prefix-cls} {
  &-status-error {
-    .status-color(@error-color);
+    .transfer-status-color(@error-color);
  }

  &-status-warning {
-    .status-color(@warning-color);
+    .transfer-status-color(@warning-color);
  }
 }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "4.18.9",
+  "version": "4.19.1-alpha.0",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
  "keywords": [
@ -131,7 +131,7 @@
    "rc-dropdown": "~3.3.2",
    "rc-field-form": "~1.23.0",
    "rc-image": "~5.2.5",
-    "rc-input": "^0.0.1-alpha.4",
+    "rc-input": "^0.0.1-alpha.5",
    "rc-input-number": "~7.3.0",
    "rc-mentions": "~1.6.1",
    "rc-menu": "~9.2.1",