diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 1bb2a0cafbb8..d36401abc9a9 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -9,6 +9,7 @@ timeline: true | infrad version | antd version | update content | time | | --- | --- | --- | --- | +| 4.21.1 | 4.21.2 | 1.Synchronize the update of antd 4.20.2 version
2.Temporarily removed QuickPicker | 2022-06-16 | | 4.21.0 | 4.21.0 | 1.Synchronize the update of antd 4.21.0 version
2.Modify a part of UI of table header | 2022-06-09 | | 4.20.4 | 4.20.4 | Synchronize the update of antd 4.20.4 version | 2022-05-13 | | 4.20.0 | 4.20.0 | Synchronize the update of antd 4.20.0 version | 2022-04-26 | @@ -34,6 +35,28 @@ if you have some problem, welcome to connect `taofeng.yang@shopee.com` or `lay.z --- +## 4.21.2 + +`2022-06-15` + +- 🐞 Fix incorrect Form status with `noStyle`. [#36054](https://github.com/ant-design/ant-design/pull/36054) + +## 4.21.1 + +`2022-06-13` + +- 🐞 Fixed Image the `getContainer` property not reading from ConfigProvider. [#36002](https://github.com/ant-design/ant-design/pull/36002) [@robothot](https://github.com/robothot) +- 🐞 Fixed Button issue [#35952](https://github.com/ant-design/ant-design/issues/35952) where the `disabled` attribute does not take effect with `href`. [#35975](https://github.com/ant-design/ant-design/pull/35975) [@MuxinFeng](https://github.com/MuxinFeng) +- 🐞 Fix less color palette algorithm according to `@ant-design/colors`. [#35954](https://github.com/ant-design/ant-design/pull/35954) [@christian-lechner](https://github.com/christian-lechner) +- 🐞 Fix Upload image flickering. [#35943](https://github.com/ant-design/ant-design/pull/35943) +- 💄 Remove styles from Form such as `status` for children of Modal and Drawer. [#35849](https://github.com/ant-design/ant-design/pull/35849) +- TypeScript + - 🤖 Fix type definition for `autoFocus` in Dropdown. [#35990](https://github.com/ant-design/ant-design/pull/35990) [@robothot](https://github.com/robothot) + - 🤖 Fix type definition for `MenuItemGroupType` in Menu. [#35790](https://github.com/ant-design/ant-design/pull/35790) [@MasaoBlue](https://github.com/MasaoBlue) + - 🤖 Fix Carousel type definition in React 18. [#35959](https://github.com/ant-design/ant-design/pull/35959) +- 🌐 Localization + - 🇮🇹 Fix italian translation for `Table.cancelSort` key. [#35970](https://github.com/ant-design/ant-design/pull/35970) [@gariggio](https://github.com/gariggio) + ## 4.21.0 `2022-06-06` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index f1ae30f2f189..14c24216099b 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -9,6 +9,7 @@ timeline: true | infrad 版本号 | 对应 antd 版本号 | 更新内容 | 时间 | | --- | --- | --- | --- | +| 4.21.1 | 4.21.2 | 1.同步 antd 4.21.2 版本的更新
2.暂时移除了 QuickPicker 组件 | 2022-06-16 | | 4.21.0 | 4.21.0 | 1.同步 antd 4.21.0 版本的更新
2.修改 table 表头部分 UI | 2022-06-09 | | 4.20.6 | 4.20.6 | 同步 antd 4.20.6 版本的更新 | 2022-05-30 | | 4.20.4 | 4.20.4 | 同步 antd 4.20.4 版本的更新 | 2022-05-13 | @@ -35,6 +36,28 @@ timeline: true --- +## 4.21.2 + +`2022-06-15` + +- 🐞 修复 Form 有 `noStyle` 属性时校验状态错误的问题。[#36054](https://github.com/ant-design/ant-design/pull/36054) + +## 4.21.1 + +`2022-06-13` + +- 🐞 修复 Image `getContainer` 属性没有从 ConfigProvider 中读取的问题。[#36002](https://github.com/ant-design/ant-design/pull/36002) [@robothot](https://github.com/robothot) +- 🐞 修复 Button 有 `href` 时 `disabled` 属性不生效的问题。[#35952](https://github.com/ant-design/ant-design/issues/35952)。[#35975](https://github.com/ant-design/ant-design/pull/35975) [@MuxinFeng](https://github.com/MuxinFeng) +- 🐞 修复 Upload 组件动画闪烁的问题。[#35943](https://github.com/ant-design/ant-design/pull/35943) +- 🐞 修复 less 色彩算法，使其和 `@ant-design/colors` 保持一致。[#35954](https://github.com/ant-design/ant-design/pull/35954) [@christian-lechner](https://github.com/christian-lechner) +- 💄 Form.Item 中的 Modal 或 Drawer 组件包含的控件去除 `status` 等受 Form 影响的样式。[#35849](https://github.com/ant-design/ant-design/pull/35849) +- TypeScript + - 🤖 修复 Dropdown `autoFocus` 属性定义。[#35990](https://github.com/ant-design/ant-design/pull/35990) [@robothot](https://github.com/robothot) + - 🤖 修复 Menu 中 `MenuItemGroupType` 的类型定义。[#35790](https://github.com/ant-design/ant-design/pull/35790) [@MasaoBlue](https://github.com/MasaoBlue) + - 🤖 修复 Carousel 在 React 18 下的 TS 定义问题。[#35959](https://github.com/ant-design/ant-design/pull/35959) +- 🌐 国际化 + - 🇮🇹 修复 `Table.cancelSort` 的意大利语翻译。[#35970](https://github.com/ant-design/ant-design/pull/35970) [@gariggio](https://github.com/gariggio) + ## 4.21.0 `2022-06-06` diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/badge/__tests__/__snapshots__/demo.test.js.snap rename to components/badge/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/badge/__tests__/__snapshots__/index.test.js.snap rename to components/badge/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/badge/__tests__/demo.test.js b/components/badge/__tests__/demo.test.ts similarity index 100% rename from components/badge/__tests__/demo.test.js rename to components/badge/__tests__/demo.test.ts diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.tsx similarity index 56% rename from components/badge/__tests__/index.test.js rename to components/badge/__tests__/index.test.tsx index 400e3332c20c..0cc406ccd250 100644 --- a/components/badge/__tests__/index.test.js +++ b/components/badge/__tests__/index.test.tsx @@ -1,11 +1,10 @@ +import { fireEvent, render } from '@testing-library/react'; import React from 'react'; -import { mount } from 'enzyme'; import { act } from 'react-dom/test-utils'; -import { fireEvent, render } from '@testing-library/react'; -import Badge from '../index'; -import Tooltip from '../../tooltip'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; +import Tooltip from '../../tooltip'; +import Badge from '../index'; describe('Badge', () => { mountTest(Badge); @@ -27,34 +26,37 @@ describe('Badge', () => { }); it('badge dot not scaling count > 9', () => { - const badge = mount(); - expect(badge.find('.ant-card-multiple-words').length).toBe(0); + const { container } = render(); + expect(container.querySelectorAll('.ant-card-multiple-words').length).toBe(0); }); it('badge should support float number', () => { - let wrapper = mount(); - expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5'); + const { container } = render(); + expect(container.querySelectorAll('.ant-badge-multiple-words')[0].textContent).toEqual('3.5'); - wrapper = mount(); - expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5'); - expect(() => wrapper.unmount()).not.toThrow(); + const { container: anotherContainer, unmount } = render(); + expect(anotherContainer.querySelectorAll('.ant-badge-multiple-words')[0].textContent).toEqual( + '3.5', + ); + + expect(() => unmount()).not.toThrow(); }); it('badge dot not showing count == 0', () => { - const badge = mount(); - expect(badge.find('.ant-badge-dot').length).toBe(0); + const { container } = render(); + expect(container.querySelectorAll('.ant-badge-dot').length).toBe(0); }); it('should have an overriden title attribute', () => { - const badge = mount(); - expect( - badge.find('.ant-scroll-number').getDOMNode().attributes.getNamedItem('title').value, - ).toEqual('Custom title'); + const { container } = render(); + expect((container.querySelector('.ant-scroll-number')! as HTMLElement).title).toEqual( + 'Custom title', + ); }); // https://github.com/ant-design/ant-design/issues/10626 it('should be composable with Tooltip', () => { - const ref = React.createRef(); + const ref = React.createRef(); const { container } = render( @@ -62,22 +64,21 @@ describe('Badge', () => { ); act(() => { - fireEvent.mouseEnter(container.querySelector('.ant-badge')); + fireEvent.mouseEnter(container.querySelector('.ant-badge')!); jest.runAllTimers(); }); - expect(ref.current.props.visible).toBeTruthy(); + expect((container.firstChild! as HTMLElement).classList).toContain('ant-tooltip-open'); }); it('should render when count is changed', () => { - const wrapper = mount(); + const { asFragment, rerender } = render(); - function updateMatch(count) { - wrapper.setProps({ count }); + function updateMatch(count: number) { + rerender(); act(() => { jest.runAllTimers(); - wrapper.update(); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); } @@ -90,48 +91,52 @@ describe('Badge', () => { }); it('should be compatible with borderColor style', () => { - const wrapper = mount( + const { asFragment } = render( , ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/13694 it('should support offset when count is a ReactNode', () => { - const wrapper = mount( + const { asFragment } = render( } offset={[10, 20]}> head , ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/15349 it('should color style works on Badge', () => { - const wrapper = mount(); - expect(wrapper.find('.ant-badge-status-text').props().style.color).toBe('red'); + const { container } = render( + , + ); + expect((container.querySelector('.ant-badge-status-text')! as HTMLElement).style.color).toEqual( + 'red', + ); }); // https://github.com/ant-design/ant-design/issues/15799 it('render correct with negative number', () => { - const wrapper = mount( + const { asFragment } = render(
, ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/21331 // https://github.com/ant-design/ant-design/issues/31590 it('render Badge status/color when contains children', () => { - const wrapper = mount( + const { container, asFragment } = render( , ); - expect(wrapper.render()).toMatchSnapshot(); - expect(wrapper.find(Badge).at(0).find('.ant-scroll-number-only-unit').text()).toBe('5'); - expect(wrapper.find(Badge).at(1).find('.ant-scroll-number-only-unit').text()).toBe('5'); - expect(wrapper.find(Badge).at(2).find('.ant-scroll-number-only-unit').text()).toBe('5'); + expect(asFragment().firstChild).toMatchSnapshot(); + expect(container.querySelectorAll('.ant-scroll-number-only-unit')[0].textContent).toBe('5'); + expect(container.querySelectorAll('.ant-scroll-number-only-unit')[1].textContent).toBe('5'); + expect(container.querySelectorAll('.ant-scroll-number-only-unit')[2].textContent).toBe('5'); }); it('Badge should work when status/color is empty string', () => { - const wrapper = mount( + const { container } = render( <> - + , ); - expect(wrapper.find('.ant-badge')).toHaveLength(2); + expect(container.querySelectorAll('.ant-badge')).toHaveLength(2); }); }); diff --git a/components/badge/__tests__/ribbon.test.tsx b/components/badge/__tests__/ribbon.test.tsx index b708e9f25a2d..9206bf43b870 100644 --- a/components/badge/__tests__/ribbon.test.tsx +++ b/components/badge/__tests__/ribbon.test.tsx @@ -1,8 +1,8 @@ +import { render } from '@testing-library/react'; import React from 'react'; -import { mount } from 'enzyme'; -import Badge from '../index'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; +import Badge from '../index'; describe('Ribbon', () => { mountTest(Badge.Ribbon); @@ -10,65 +10,73 @@ describe('Ribbon', () => { describe('placement', () => { it('works with `start` & `end` placement', () => { - const wrapperStart = mount( + const { container: wrapperStart } = render(
, ); - expect(wrapperStart.find('.ant-ribbon-placement-start').length).toEqual(1); + expect(wrapperStart.querySelectorAll('.ant-ribbon-placement-start').length).toEqual(1); - const wrapperEnd = mount( + const { container: wrapperEnd } = render(
, ); - expect(wrapperEnd.find('.ant-ribbon-placement-end').length).toEqual(1); + expect(wrapperEnd.querySelectorAll('.ant-ribbon-placement-end').length).toEqual(1); }); }); describe('color', () => { it('works with preset color', () => { - const wrapper = mount( + const { container } = render(
, ); - expect(wrapper.find('.ant-ribbon-color-green').length).toEqual(1); + expect(container.querySelectorAll('.ant-ribbon-color-green').length).toEqual(1); }); it('works with custom color', () => { - const wrapperLeft = mount( + const { container: wrapperLeft } = render(
, ); - expect(wrapperLeft.find('.ant-ribbon').prop('style')?.background).toEqual('#888'); - expect(wrapperLeft.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888'); - const wrapperRight = mount( + expect((wrapperLeft.querySelector('.ant-ribbon')! as HTMLElement).style.background).toEqual( + 'rgb(136, 136, 136)', + ); + expect((wrapperLeft.querySelector('.ant-ribbon-corner')! as HTMLElement).style.color).toEqual( + 'rgb(136, 136, 136)', + ); + const { container: wrapperRight } = render(
, ); - expect(wrapperRight.find('.ant-ribbon').prop('style')?.background).toEqual('#888'); - expect(wrapperRight.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888'); + expect((wrapperRight.querySelector('.ant-ribbon')! as HTMLElement).style.background).toEqual( + 'rgb(136, 136, 136)', + ); + expect( + (wrapperRight.querySelector('.ant-ribbon-corner')! as HTMLElement).style.color, + ).toEqual('rgb(136, 136, 136)'); }); }); describe('text', () => { it('works with string', () => { - const wrapper = mount( + const { container } = render(
, ); - expect(wrapper.find('.ant-ribbon').text()).toEqual('cool'); + expect(container.querySelector('.ant-ribbon')?.textContent).toEqual('cool'); }); it('works with element', () => { - const wrapper = mount( + const { container } = render( }>
, ); - expect(wrapper.find('.cool').length).toEqual(1); + expect(container.querySelectorAll('.cool').length).toEqual(1); }); }); }); diff --git a/components/breadcrumb/demo/react-router.md b/components/breadcrumb/demo/react-router.md index 2eb3b712f6ca..448e83d2ad15 100644 --- a/components/breadcrumb/demo/react-router.md +++ b/components/breadcrumb/demo/react-router.md @@ -18,7 +18,6 @@ Used together with `react-router@6+`. ```tsx import { Alert, Breadcrumb } from 'infrad'; import React from 'react'; - import { HashRouter, Link, Route, Routes, useLocation } from 'react-router-dom'; const Apps = () => ( diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx index da758c29ea22..73a368f9a2b1 100644 --- a/components/button/__tests__/index.test.tsx +++ b/components/button/__tests__/index.test.tsx @@ -1,5 +1,5 @@ +import { SearchOutlined } from '@ant-design/icons'; import { mount } from 'enzyme'; -import { SearchOutlined } from 'infra-design-icons'; import { resetWarned } from 'rc-util/lib/warning'; import React, { Component } from 'react'; import { act } from 'react-dom/test-utils'; diff --git a/components/button/button.tsx b/components/button/button.tsx index 538fe0a157fb..c9d71dbe59d6 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -2,7 +2,6 @@ import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; - import { ConfigContext } from '../config-provider'; import DisabledContext from '../config-provider/DisabledContext'; import type { SizeType } from '../config-provider/SizeContext'; diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 6f63d0d28dda..df011d98534c 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -1,5 +1,7 @@ +import LeftOutlined from '@ant-design/icons/LeftOutlined'; +import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; +import RightOutlined from '@ant-design/icons/RightOutlined'; import classNames from 'classnames'; -import { LeftOutlined, LoadingOutlined, RightOutlined } from 'infra-design-icons'; import type { BaseOptionType, DefaultOptionType, diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index d76f3e2ff086..082fa974450c 100644 --- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -33690,200 +33690,6 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md extend contex
`; -exports[`renders ./components/date-picker/demo/quick.md extend context correctly 1`] = ` -
-
-
-
- - - - - - -
-
-
-
-
-
-
-
- Real-time -
-
- Yesterday -
-
- Last 7 Days -
-
- Last 30 Days -
-
-
- - By Day - - - - -
-
- - By Week - - - - -
-
- - By Month - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - exports[`renders ./components/date-picker/demo/range-picker.md extend context correctly 1`] = `
(props: FormItemProps): React.ReactElemen const getItemRef = useItemRef(); // ======================== Status ======================== - const { status: contextStatus, hasFeedback: contextHasFeedback } = - useContext(FormItemInputContext); - - let mergedValidateStatus: ValidateStatus | undefined; + let mergedValidateStatus: ValidateStatus = ''; if (validateStatus !== undefined) { mergedValidateStatus = validateStatus; - } else if (contextStatus !== undefined) { - mergedValidateStatus = contextStatus; } else if (meta?.validating) { mergedValidateStatus = 'validating'; } else if (debounceErrors.length) { @@ -235,11 +230,9 @@ function FormItem(props: FormItemProps): React.ReactElemen mergedValidateStatus = 'success'; } - const mergedHasFeedback = hasFeedback || contextHasFeedback; - const formItemStatusContext = useMemo(() => { let feedbackIcon: ReactNode; - if (mergedHasFeedback) { + if (hasFeedback) { const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus]; feedbackIcon = IconNode ? ( (props: FormItemProps): React.ReactElemen return { status: mergedValidateStatus, - hasFeedback: mergedHasFeedback, + hasFeedback, feedbackIcon, isFormItemInput: true, }; - }, [mergedValidateStatus, mergedHasFeedback]); - - const noOverrideFormItemContext = useMemo( - () => ({ - ...formItemStatusContext, - isFormItemInput: false, - }), - [formItemStatusContext], - ); + }, [mergedValidateStatus, hasFeedback]); // ======================== Render ======================== function renderLayout( @@ -276,11 +261,7 @@ function FormItem(props: FormItemProps): React.ReactElemen isRequired?: boolean, ): React.ReactNode { if (noStyle && !hidden) { - return ( - - {baseChildren} - - ); + return baseChildren; } const itemClassName = { @@ -290,7 +271,7 @@ function FormItem(props: FormItemProps): React.ReactElemen [`${className}`]: !!className, // Status - [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && mergedHasFeedback, + [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && hasFeedback, [`${prefixCls}-item-has-success`]: mergedValidateStatus === 'success', [`${prefixCls}-item-has-warning`]: mergedValidateStatus === 'warning', [`${prefixCls}-item-has-error`]: mergedValidateStatus === 'error', diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index a3e989e6fc4e..39a65a8d3d56 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5869,7 +5869,7 @@ Array [ "name": [ "username" ], - "value": "Infra Design" + "value": "Ant Design" } ] , @@ -6836,7 +6836,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly class="ant-form-item-control-input-content" >