diff --git a/.github/workflows/pr-check-merge.yml b/.github/workflows/pr-check-merge.yml new file mode 100644 index 0000000000..9798928806 --- /dev/null +++ b/.github/workflows/pr-check-merge.yml @@ -0,0 +1,19 @@ +name: PR Check Merge + +on: + pull_request_target: + types: [opened] + +jobs: + comment: + runs-on: ubuntu-latest + if: (github.event.pull_request.head.ref == 'feature' && github.event.pull_request.base.ref == 'master') || (github.event.pull_request.base.ref == 'feature' && github.event.pull_request.head.ref == 'master') + steps: + - uses: actions-cool/issues-helper@v2.2.1 + with: + actions: 'create-comment' + issue-number: ${{ github.event.number }} + body: | + Hi @${{ github.event.pull_request.user.login }}。 + + **请注意**，当前 PR 是分支间的互相合并，请使用 `BranchAutoMerge` 标签来进行自动合并。切记**不要、不要、不要使用 `Squash`**。 diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 8cfdbc3446..79d7705175 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,49 @@ timeline: true --- +## 4.16.0 + +`2021-05-24` + +- 🔥 Refactor Menu and supports keyboard operation and optimization of accessibility experience. [#30382](https://github.com/ant-design/ant-design/pull/30382) +- Table + - 🆕 Table.Summary supports `sticky` mode. [#30631](https://github.com/ant-design/ant-design/pull/30631) + - 🐞 Fix the problem that the extra margin of the embedded Table with fixed columns is lost. [#30587](https://github.com/ant-design/ant-design/pull/30587) + - 🆕 Table adds the `expandable.fixed` property to set the expansion icon to be fixed. [#29959](https://github.com/ant-design/ant-design/pull/29959) +- Upload + - 🆕 Upload component `itemRender` adds `actions` call parameters. [#30236](https://github.com/ant-design/ant-design/pull/30236) [@kerm1it](https://github.com/kerm1it) + - 🆕 Upload Remove `stopPropagation` from drag event and add `onDrop` callback. [#30319](https://github.com/ant-design/ant-design/pull/30319) [@ebonow](https://github.com/ebonow) +- Typography + - 🆕 Typography adds support for italics. [#30458](https://github.com/ant-design/ant-design/pull/30458) [@alwaysloseall](https://github.com/alwaysloseall) + - 🐞 Fix the flickering problem when configuring `ellipsis={{ suffix:'xxx' }}` in Typography. [#30582](https://github.com/ant-design/ant-design/pull/30582) +- Collapse + - 💄 Fix the problem of arrow misalignment when Collapse does not specify `header`. [#30586](https://github.com/ant-design/ant-design/pull/30586) + - 🐞 Fix Collapse content disappears when set `activeKey` while it is hidden. [#30555](https://github.com/ant-design/ant-design/pull/30555) [@zjffun](https://github.com/zjffun) +- 🆕 RadioGroup supports `data-*` and `aria-*` attributes. [#30507](https://github.com/ant-design/ant-design/pull/30507) [@kerm1it](https://github.com/kerm1it) +- 🆕 Statistic.CountDown component adds `onChange` event. [#30265](https://github.com/ant-design/ant-design/pull/30265) [@appleshell](https://github.com/appleshell) +- 🆕 PageHeader's `breadcrumb` allows to set as a component. [#30019](https://github.com/ant-design/ant-design/pull/30019) [@gepd](https://github.com/gepd) +- 🆕 ConfigProvider supports dynamic setting of `prefixCls`. [#30625](https://github.com/ant-design/ant-design/pull/30625) [@kerm1it](https://github.com/kerm1it) +- 🐞 Fix the problem that Anchor cannot trigger `onChange` after specifying `getCurrentAnchor`. [#30601](https://github.com/ant-design/ant-design/pull/30601) +- 🐞 Fix the problem that the scope of notification box `className` generated by Notification `useNotification` is inconsistent. [#30588](https://github.com/ant-design/ant-design/pull/30588) +- 🐞 Fix Tabs `tabBarGutter` property failure. [#30545](https://github.com/ant-design/ant-design/pull/30545) +- 💄 Rewrite Space to use `flexGap` instead of `margin` style to deal with layout issues under certain border situations. [#30023](https://github.com/ant-design/ant-design/pull/30023) +- 🐞 Fix the wrong border color of Input.Group and Cascader under Form check error state. [#30640](https://github.com/ant-design/ant-design/pull/30640) +- 🌐 Internationalization + - 🇷🇴 Added Romanian internationalization. [#30419](https://github.com/ant-design/ant-design/pull/30419) [@stefy](https://github.com/stefy) + - 🌐 Added Dutch (Netherland 🇳🇱) and Dutch (Belgium 🇧🇪) internationalization. [#30389](https://github.com/ant-design/ant-design/pull/30389) [@lewis-fidlers](https://github.com/lewis-fidlers) +- TypeScript + - 🤖 Space TypeScript definition supports HTMLAttribute attribute. [#30590](https://github.com/ant-design/ant-design/pull/30590) + +## 4.15.6 + +`2021-05-18` + +- 🐞 Upload will ignore `accept` if it's invalidate MIME type to follow native behavior. [#30549](https://github.com/ant-design/ant-design/pull/30549) +- 💄 Remove reset style of `th` `text-align`. [#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa) +- 🌐 Locale + - 🇮🇳 Improve hi_IN locale. [#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh) + - 🇧🇷 Improve pt-BR locale. [#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs) + ## 4.15.5 `2021-05-10` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 4c10bdda0d..a6bc3c4ec3 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,49 @@ timeline: true --- +## 4.16.0 + +`2021-05-24` + +- 🔥 重构 Menu，支持键盘操作以及无障碍体验优化。[#30382](https://github.com/ant-design/ant-design/pull/30382) +- Table + - 🆕 Table.Summary 支持 `sticky` 模式。[#30631](https://github.com/ant-design/ant-design/pull/30631) + - 🐞 修复有固定列的 Table 内嵌 Table 的额外边距丢失的问题。[#30587](https://github.com/ant-design/ant-design/pull/30587) + - 🆕 Table 新增 `expandable.fixed` 属性用于设置扩展图标固定。[#29959](https://github.com/ant-design/ant-design/pull/29959) +- Upload + - 🆕 Upload 组件 `itemRender` 添加 `actions` 调用参数。[#30236](https://github.com/ant-design/ant-design/pull/30236) [@kerm1it](https://github.com/kerm1it) + - 🆕 Upload 从拖动事件中删除 `stopPropagation`，并添加`onDrop` 回调。[#30319](https://github.com/ant-design/ant-design/pull/30319) [@ebonow](https://github.com/ebonow) +- Typography + - 🆕 Typography 增加斜体字支持。[#30458](https://github.com/ant-design/ant-design/pull/30458) [@alwaysloseall](https://github.com/alwaysloseall) + - 🐞 修复 Typography 配置 `ellipsis={{ suffix: 'xxx' }}` 时换行闪动问题。[#30582](https://github.com/ant-design/ant-design/pull/30582) +- Collapse + - 💄 修复 Collapse 不指定 `header` 时箭头错位的问题。[#30586](https://github.com/ant-design/ant-design/pull/30586) + - 🐞 修复 Collapse 隐藏时设置 `activeKey` 时内容会消失的问题。[#30555](https://github.com/ant-design/ant-design/pull/30555) [@zjffun](https://github.com/zjffun) +- 🆕 RadioGroup 支持 `data-*` 和 `aria-*` 属性。[#30507](https://github.com/ant-design/ant-design/pull/30507) [@kerm1it](https://github.com/kerm1it) +- 🆕 Statistic.CountDown 组件增加 `onChange` 事件。[#30265](https://github.com/ant-design/ant-design/pull/30265) [@appleshell](https://github.com/appleshell) +- 🆕 PageHeader 的 `breadcrumb` 中允许设置为组件。[#30019](https://github.com/ant-design/ant-design/pull/30019) [@gepd](https://github.com/gepd) +- 🆕 ConfigProvider 支持动态设置 `prefixCls`。[#30625](https://github.com/ant-design/ant-design/pull/30625) [@kerm1it](https://github.com/kerm1it) +- 🐞 修复 Anchor 指定 `getCurrentAnchor` 后无法触发 `onChange` 的问题。[#30601](https://github.com/ant-design/ant-design/pull/30601) +- 🐞 修复 Notification `useNotification` 生成的通知框 `className` 作用范围不一致的问题。[#30588](https://github.com/ant-design/ant-design/pull/30588) +- 🐞 修复 Tabs `tabBarGutter` 属性失效的问题。[#30545](https://github.com/ant-design/ant-design/pull/30545) +- 💄 改写 Space 使用 `flexGap` 以代替 `margin` 样式以处理某些边界情况下的布局问题。[#30023](https://github.com/ant-design/ant-design/pull/30023) +- 🐞 修复 Form 校验错误状态下 Input.Group 和 Cascader 边框颜色错误。[#30640](https://github.com/ant-design/ant-design/pull/30640) +- 🌐 国际化 + - 🇷🇴 补充罗马尼亚语国际化。[#30419](https://github.com/ant-design/ant-design/pull/30419) [@stefy](https://github.com/stefy) + - 🌐 补充荷兰语（荷兰 🇳🇱）及荷兰语（比利时 🇧🇪）国际化。[#30389](https://github.com/ant-design/ant-design/pull/30389) [@lewis-fidlers](https://github.com/lewis-fidlers) +- TypeScript + - 🤖 Space TypeScript 定义支持 HTMLAttribute 属性。[#30590](https://github.com/ant-design/ant-design/pull/30590) + +## 4.15.6 + +`2021-05-18` + +- 🐞 Upload `accept` 将无视无效的 MIME 类型，以更贴近原生行为。[#30549](https://github.com/ant-design/ant-design/pull/30549) +- 💄 移除全局样式中对 `th` 的 `text-align` 属性的重置。[#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa) +- 🌐 国际化 + - 🇮🇳 补充印地语国际化文案。[#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh) + - 🇧🇷 补充葡萄牙语（巴西）国际化文案。[#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs) + ## 4.15.5 `2021-05-10` diff --git a/components/_util/motion.tsx b/components/_util/motion.tsx index 0b5fa529f7..2ded358b41 100644 --- a/components/_util/motion.tsx +++ b/components/_util/motion.tsx @@ -1,11 +1,12 @@ import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion'; +import { MotionEvent } from 'rc-motion/lib/interface'; // ================== Collapse Motion ================== const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 }); const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 }); const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight }); -const skipOpacityTransition: MotionEndEventHandler = (_, event) => - (event as TransitionEvent).propertyName === 'height'; +const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) => + event?.deadline === true || (event as TransitionEvent).propertyName === 'height'; const collapseMotion: CSSMotionProps = { motionName: 'ant-motion-collapse', diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index e0aec98753..23de276c70 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -163,12 +163,6 @@ export default class Anchor extends React.Component = []; const container = this.getContainer(); this.links.forEach(link => { @@ -229,14 +223,15 @@ export default class Anchor extends React.Component { const { activeLink } = this.state; - const { onChange } = this.props; - - if (activeLink !== link) { - this.setState({ - activeLink: link, - }); - onChange?.(link); + const { onChange, getCurrentAnchor } = this.props; + if (activeLink === link) { + return; } + // https://github.com/ant-design/ant-design/issues/30584 + this.setState({ + activeLink: typeof getCurrentAnchor === 'function' ? getCurrentAnchor() : link, + }); + onChange?.(link); }; handleScroll = () => { diff --git a/components/anchor/__tests__/Anchor.test.tsx b/components/anchor/__tests__/Anchor.test.tsx index ad54eb82b3..41c3104e62 100644 --- a/components/anchor/__tests__/Anchor.test.tsx +++ b/components/anchor/__tests__/Anchor.test.tsx @@ -359,6 +359,23 @@ describe('Anchor Render', () => { expect(onChange).toHaveBeenCalledWith(hash2); }); + // https://github.com/ant-design/ant-design/issues/30584 + it('should trigger onChange when have getCurrentAnchor', async () => { + const hash1 = getHashUrl(); + const hash2 = getHashUrl(); + const onChange = jest.fn(); + const wrapper = mount( + hash1}> + + + , + ); + expect(onChange).toHaveBeenCalledTimes(1); + wrapper.instance().handleScrollTo(hash2); + expect(onChange).toHaveBeenCalledTimes(2); + expect(onChange).toHaveBeenCalledWith(hash2); + }); + it('invalid hash', async () => { const wrapper = mount( diff --git a/components/collapse/__tests__/index.test.js b/components/collapse/__tests__/index.test.js index ad8d7209ee..07a4587564 100644 --- a/components/collapse/__tests__/index.test.js +++ b/components/collapse/__tests__/index.test.js @@ -1,5 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; +import { act } from 'react-dom/test-utils'; import { sleep } from '../../../tests/utils'; import { resetWarned } from '../../_util/devWarning'; @@ -101,4 +102,39 @@ describe('Collapse', () => { wrapper.find('.ant-collapse-header').simulate('click'); expect(wrapper.find('.ant-collapse-item-active').length).toBe(0); }); + + it('should end motion when set activeKey while hiding', async () => { + jest.useFakeTimers(); + jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => { + setTimeout(cb, 16.66); + }); + + let setActiveKeyOuter; + const Test = () => { + const [activeKey, setActiveKey] = React.useState(); + setActiveKeyOuter = setActiveKey; + return ( + + ); + }; + + const wrapper = mount(); + + await act(async () => { + setActiveKeyOuter('1'); + await Promise.resolve(); + jest.runAllTimers(); + }); + + expect(wrapper.render().find('.ant-motion-collapse').length).toBe(0); + + window.requestAnimationFrame.mockRestore(); + jest.useRealTimers(); + }); }); diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 7b83e895a0..ca1d251185 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -24,7 +24,6 @@ > .@{collapse-prefix-cls}-header { position: relative; padding: @collapse-header-padding; - padding-left: @collapse-header-padding-extra; color: @heading-color; line-height: @line-height-base; cursor: pointer; @@ -32,17 +31,10 @@ .clearfix(); .@{collapse-prefix-cls}-arrow { - .iconfont-mixin(); - - position: absolute; - top: ((@font-size-base * @line-height-base - @font-size-sm) / 2); - left: @collapse-header-arrow-left; display: inline-block; - padding: @collapse-header-padding; - padding-right: 0; - padding-bottom: 0; - padding-left: 0; + margin-right: 12px; font-size: @font-size-sm; + vertical-align: -1px; & svg { transition: transform 0.24s; diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index 0ca329e5b2..1f986cee46 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -22769,177 +22769,165 @@ exports[`ConfigProvider components Table configProvider 1`] = `
- -
-
- - Name - - - - - - - - - - - -
-
- - + + Name + - + + + + + -
-
+ + +
+ + + +
+
+
+ +
+ - -
+ + Reset + + +
- +
@@ -23044,177 +23032,165 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
- -
-
- - Name - - - - - - - - - - - -
-
- - + + Name + - + + + + + -
-
+ + +
+ + + +
+
+
+ +
+ - -
+ + Reset + + +
- +
@@ -23319,177 +23295,165 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
- -
-
- - Name - - - - - - - - - - - -
-
- - + + Name + - + + + + + -
-
+ + +
+ + + +
+
+
+ +
+ - -
+ + Reset + + +
- +
@@ -23594,177 +23558,165 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
- -
-
- - Name - - - - - - - - - - - -
-
- - + + Name + - + + + + + -
-
+ + +
+ + + +
+
+
+ +
+ - -
+ + Reset + + +
- +
@@ -23869,177 +23821,165 @@ exports[`ConfigProvider components Table normal 1`] = `
- -
-
- - Name - - - - - - - - - - - -
-
- - + + Name + - + + + + + -
-
+ + +
+ + + +
+
+
+ +
+ - -
+ + Reset + + +
- +
@@ -24144,177 +24084,165 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
- -
-
- - Name - - - - - - - - - - - -
-
- - + + Name + - + + + + + -
-
+ + +
+ + + +
+
+
+ +
+ - -
+ + Reset + + +
- +
diff --git a/components/config-provider/__tests__/index.test.js b/components/config-provider/__tests__/index.test.js index 514c4d897a..83f93d9aca 100644 --- a/components/config-provider/__tests__/index.test.js +++ b/components/config-provider/__tests__/index.test.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { mount } from 'enzyme'; import { SmileOutlined } from '@ant-design/icons'; import ConfigProvider, { ConfigContext } from '..'; @@ -57,6 +57,30 @@ describe('ConfigProvider', () => { expect(wrapper.find('button').props().className).toEqual('bamboo-btn'); }); + it('dynamic prefixCls', () => { + const DynamicPrefixCls = () => { + const [prefixCls, setPrefixCls] = useState('bamboo'); + return ( +
+ + + +
+ ); + }; + + const wrapper = mount(); + + expect(wrapper.find('button').last().props().className).toEqual('bamboo-btn'); + wrapper.find('.toggle-button').first().simulate('click'); + expect(wrapper.find('button').last().props().className).toEqual('light-btn'); + }); + it('iconPrefixCls', () => { const wrapper = mount( diff --git a/components/config-provider/demo/prefixCls.md b/components/config-provider/demo/prefixCls.md index b7efba778d..3d9781a7cc 100644 --- a/components/config-provider/demo/prefixCls.md +++ b/components/config-provider/demo/prefixCls.md @@ -15,18 +15,29 @@ debug: true Config component and icon prefixCls. ```jsx -import { ConfigProvider, Select } from 'antd'; +import { ConfigProvider, Select, Button } from 'antd'; import { SmileOutlined } from '@ant-design/icons'; +import React, { useState } from 'react'; // Ant Design site use `es` module for view // but do not replace related lib `lib` with `es` // which do not show correct in site. // We may need do convert in site also. -const FormSizeDemo = () => ( - - - + +
+
+ ); +}; ReactDOM.render(, mountNode); ``` diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 47a3946881..2c669a4c69 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -149,7 +149,7 @@ const ProviderChildren: React.FC = props => { return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls; }, - [parentContext.getPrefixCls], + [parentContext.getPrefixCls, props.prefixCls], ); const config = { diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index da75b37230..f291ae44b9 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index b1054dff7a..9688b6ad9b 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -3532,6 +3532,92 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
+
+
+ +
+
+
+
+
+
+ + + + + select your gender + +
+ +
+
+
+
+
diff --git a/components/form/demo/register.md b/components/form/demo/register.md index aa2e8f0e94..0f82c3f42c 100644 --- a/components/form/demo/register.md +++ b/components/form/demo/register.md @@ -15,17 +15,7 @@ Fill in this form to create a new account for you. ```tsx import React, { useState } from 'react'; -import { - Form, - Input, - Cascader, - Select, - Row, - Col, - Checkbox, - Button, - AutoComplete, -} from 'antd'; +import { Form, Input, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd'; const { Option } = Select; @@ -221,6 +211,18 @@ const RegistrationForm = () => { + + + + diff --git a/components/form/style/status.less b/components/form/style/status.less index e04b607b84..75add0b1bb 100644 --- a/components/form/style/status.less +++ b/components/form/style/status.less @@ -182,7 +182,9 @@ .@{ant-prefix}-input-group-addon .@{ant-prefix}-select { &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input) .@{ant-prefix}-select-selector { + background-color: inherit; border: 0; + box-shadow: none; } } @@ -221,9 +223,18 @@ } } - .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input { - background-color: @form-error-input-bg; - .active(@error-color); + // cascader + .@{ant-prefix}-cascader-picker { + &:hover + .@{ant-prefix}-cascader-picker-label:hover + + .@{ant-prefix}-cascader-input.@{ant-prefix}-input { + border-color: @error-color; + } + + &:focus .@{ant-prefix}-cascader-input { + background-color: @form-error-input-bg; + .active(@error-color); + } } // transfer diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap index 70bf88a011..7379dfc23a 100644 --- a/components/layout/__tests__/__snapshots__/demo.test.js.snap +++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap @@ -1067,7 +1067,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = ` > + Name - Name - - - + +
@@ -11695,38 +11687,30 @@ exports[`Locale Provider should display the text as az 1`] = `
+ Name - Name - - - + +
@@ -16717,38 +16701,30 @@ exports[`Locale Provider should display the text as bg 1`] = `
+ Name - Name - - - + +
@@ -21739,38 +21715,30 @@ exports[`Locale Provider should display the text as by 1`] = `
+ Name - Name - - - + +
@@ -26761,38 +26729,30 @@ exports[`Locale Provider should display the text as ca 1`] = `
+ Name - Name - - - + +
@@ -31783,38 +31743,30 @@ exports[`Locale Provider should display the text as cs 1`] = `
+ Name - Name - - - + +
@@ -36805,38 +36757,30 @@ exports[`Locale Provider should display the text as da 1`] = `
+ Name - Name - - - + +
@@ -41827,38 +41771,30 @@ exports[`Locale Provider should display the text as de 1`] = `
+ Name - Name - - - + +
@@ -46849,38 +46785,30 @@ exports[`Locale Provider should display the text as el 1`] = `
+ Name - Name - - - + +
@@ -51871,38 +51799,30 @@ exports[`Locale Provider should display the text as en 1`] = `
+ Name - Name - - - + +
@@ -56893,38 +56813,30 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
+ Name - Name - - - + +
@@ -61915,38 +61827,30 @@ exports[`Locale Provider should display the text as es 1`] = `
+ Name - Name - - - + +
@@ -66937,38 +66841,30 @@ exports[`Locale Provider should display the text as et 1`] = `
+ Name - Name - - - + +
@@ -71959,38 +71855,30 @@ exports[`Locale Provider should display the text as fa 1`] = `
+ Name - Name - - - + +
@@ -76981,38 +76869,30 @@ exports[`Locale Provider should display the text as fi 1`] = `
+ Name - Name - - - + +
@@ -82003,38 +81883,30 @@ exports[`Locale Provider should display the text as fr 1`] = `
+ Name - Name - - - + +
@@ -87025,38 +86897,30 @@ exports[`Locale Provider should display the text as fr 2`] = `
+ Name - Name - - - + +
@@ -92047,38 +91911,30 @@ exports[`Locale Provider should display the text as fr 3`] = `
+ Name - Name - - - + +
@@ -97069,38 +96925,30 @@ exports[`Locale Provider should display the text as ga 1`] = `
+ Name - Name - - - + +
@@ -102091,38 +101939,30 @@ exports[`Locale Provider should display the text as gl 1`] = `
+ Name - Name - - - + +
@@ -107113,38 +106953,30 @@ exports[`Locale Provider should display the text as he 1`] = `
+ Name - Name - - - + +
@@ -112135,38 +111967,30 @@ exports[`Locale Provider should display the text as hi 1`] = `
+ Name - Name - - - + +
@@ -117157,38 +116981,30 @@ exports[`Locale Provider should display the text as hr 1`] = `
+ Name - Name - - - + +
@@ -122179,38 +121995,30 @@ exports[`Locale Provider should display the text as hu 1`] = `
+ Name - Name - - - + +
@@ -127201,38 +127009,30 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
+ Name - Name - - - + +
@@ -132223,38 +132023,30 @@ exports[`Locale Provider should display the text as id 1`] = `
+ Name - Name - - - + +
@@ -137245,38 +137037,30 @@ exports[`Locale Provider should display the text as is 1`] = `
+ Name - Name - - - + +
@@ -142267,38 +142051,30 @@ exports[`Locale Provider should display the text as it 1`] = `
+ Name - Name - - - + +
@@ -147289,38 +147065,30 @@ exports[`Locale Provider should display the text as ja 1`] = `
+ Name - Name - - - + +
@@ -152311,38 +152079,30 @@ exports[`Locale Provider should display the text as kk 1`] = `
+ Name - Name - - - + +
@@ -157333,38 +157093,30 @@ exports[`Locale Provider should display the text as kn 1`] = `
+ Name - Name - - - + +
@@ -162355,38 +162107,30 @@ exports[`Locale Provider should display the text as ko 1`] = `
+ Name - Name - - - + +
@@ -167377,38 +167121,30 @@ exports[`Locale Provider should display the text as ku 1`] = `
+ Name - Name - - - + +
@@ -172399,38 +172135,30 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
+ Name - Name - - - + +
@@ -177421,38 +177149,30 @@ exports[`Locale Provider should display the text as lt 1`] = `
+ Name - Name - - - + +
@@ -182443,38 +182163,30 @@ exports[`Locale Provider should display the text as lv 1`] = `
+ Name - Name - - - + +
@@ -187465,38 +187177,30 @@ exports[`Locale Provider should display the text as mk 1`] = `
+ Name - Name - - - + +
@@ -192487,38 +192191,30 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
+ Name - Name - - - + +
@@ -197509,38 +197205,30 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
+ Name - Name - - - + +
@@ -202531,38 +202219,30 @@ exports[`Locale Provider should display the text as nb 1`] = `
+ Name - Name - - - + +
@@ -207553,38 +207233,30 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
+ Name - Name - - - + +
@@ -212575,38 +212247,30 @@ exports[`Locale Provider should display the text as nl 1`] = `
+ Name - Name - - - + +
@@ -217597,38 +217261,30 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
+ Name - Name - - - + +
@@ -222619,38 +222275,30 @@ exports[`Locale Provider should display the text as pl 1`] = `
+ Name - Name - - - + +
@@ -227641,38 +227289,30 @@ exports[`Locale Provider should display the text as pt 1`] = `
+ Name - Name - - - + +
@@ -232663,38 +232303,30 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
+ Name - Name - - - + +
@@ -237685,38 +237317,30 @@ exports[`Locale Provider should display the text as ro 1`] = `
+ Name - Name - - - + +
@@ -242707,38 +242331,30 @@ exports[`Locale Provider should display the text as ru 1`] = `
+ Name - Name - - - + +
@@ -247729,38 +247345,30 @@ exports[`Locale Provider should display the text as sk 1`] = `
+ Name - Name - - - + +
@@ -252751,38 +252359,30 @@ exports[`Locale Provider should display the text as sl 1`] = `
+ Name - Name - - - + +
@@ -257773,38 +257373,30 @@ exports[`Locale Provider should display the text as sr 1`] = `
+ Name - Name - - - + +
@@ -262795,38 +262387,30 @@ exports[`Locale Provider should display the text as sv 1`] = `
+ Name - Name - - - + +
@@ -267817,38 +267401,30 @@ exports[`Locale Provider should display the text as ta 1`] = `
+ Name - Name - - - + +
@@ -272839,38 +272415,30 @@ exports[`Locale Provider should display the text as th 1`] = `
+ Name - Name - - - + +
@@ -277861,38 +277429,30 @@ exports[`Locale Provider should display the text as tr 1`] = `
+ Name - Name - - - + +
@@ -282883,38 +282443,30 @@ exports[`Locale Provider should display the text as uk 1`] = `
+ Name - Name - - - + +
@@ -287905,38 +287457,30 @@ exports[`Locale Provider should display the text as vi 1`] = `
+ Name - Name - - - + +
@@ -292927,38 +292471,30 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
+ Name - Name - - - + +
@@ -297949,38 +297485,30 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
+ Name - Name - - - + +
@@ -302971,38 +302499,30 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
+ Name - Name - - - + +
diff --git a/components/menu/SubMenu.tsx b/components/menu/SubMenu.tsx index 8652467e96..83fee858aa 100644 --- a/components/menu/SubMenu.tsx +++ b/components/menu/SubMenu.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { SubMenu as RcSubMenu } from 'rc-menu'; +import { useFullPath } from 'rc-menu/lib/context/PathContext'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; -import MenuContext, { MenuContextProps } from './MenuContext'; -import { isValidElement } from '../_util/reactNode'; +import MenuContext from './MenuContext'; +import { isValidElement, cloneElement } from '../_util/reactNode'; interface TitleEventEntity { key: string; @@ -22,53 +23,56 @@ export interface SubMenuProps { onTitleMouseLeave?: (e: TitleEventEntity) => void; popupOffset?: [number, number]; popupClassName?: string; + children?: React.ReactNode; } -class SubMenu extends React.Component { - static contextType = MenuContext; +function SubMenu(props: SubMenuProps) { + const { popupClassName, icon, title } = props; + const context = React.useContext(MenuContext); + const { prefixCls, inlineCollapsed, antdMenuTheme } = context; - context: MenuContextProps; + const parentPath = useFullPath(); - renderTitle(inlineCollapsed: boolean) { - const { icon, title, level } = this.props; - const { prefixCls } = this.context; + let titleNode: React.ReactNode; - if (!icon) { - return inlineCollapsed && level === 1 && title && typeof title === 'string' ? ( + if (!icon) { + titleNode = + inlineCollapsed && !parentPath.length && title && typeof title === 'string' ? (
{title.charAt(0)}
) : ( title ); - } + } else { // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span // ref: https://github.com/ant-design/ant-design/pull/23456 const titleIsSpan = isValidElement(title) && title.type === 'span'; - return ( + titleNode = ( <> - {icon} + {cloneElement(icon, { + className: classNames( + isValidElement(icon) ? icon.props?.className : '', + `${prefixCls}-item-icon`, + ), + })} {titleIsSpan ? title : {title}} ); } - render() { - const { popupClassName } = this.props; - const { prefixCls, inlineCollapsed, antdMenuTheme } = this.context; - return ( - - - - ); - } + return ( + + + + ); } export default SubMenu; diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap index cf6ca5de16..ffbd2886d1 100644 --- a/components/menu/__tests__/__snapshots__/demo.test.js.snap +++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap @@ -83,7 +83,7 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = ` > { it('Use first char as Icon when collapsed', () => { const wrapper = mount( + Bamboo , ); - expect(wrapper.find('.ant-menu-inline-collapsed-noicon').text()).toEqual('B'); + expect(wrapper.find('.ant-menu-inline-collapsed-noicon').first().text()).toEqual('L'); + expect(wrapper.find('.ant-menu-inline-collapsed-noicon').last().text()).toEqual('B'); }); }); diff --git a/components/menu/style/index.less b/components/menu/style/index.less index b8956d2fc0..0b799a0df1 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -218,6 +218,10 @@ } } + .@{menu-prefix-cls}-item-icon.svg { + vertical-align: -0.125em; + } + &.@{menu-prefix-cls}-item-only-child { > .@{iconfont-css-prefix}, > .@{menu-prefix-cls}-item-icon { diff --git a/components/notification/style/index.less b/components/notification/style/index.less index a998f11948..7ded96f53d 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -31,14 +31,19 @@ cursor: pointer; } - &-hook-holder, + &-hook-holder { + position: relative; + } + &-notice { position: relative; width: @notification-width; max-width: ~'calc(100vw - @{notification-margin-edge} * 2)'; margin-bottom: @notification-margin-bottom; margin-left: auto; + padding: @notification-padding; overflow: hidden; + line-height: @line-height-base; word-wrap: break-word; background: @notification-bg; border-radius: @border-radius-base; @@ -49,16 +54,6 @@ margin-right: auto; margin-left: 0; } - } - - &-hook-holder > &-notice { - margin-bottom: 0; - box-shadow: none; - } - - &-notice { - padding: @notification-padding; - line-height: @line-height-base; &-message { margin-bottom: 8px; diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap index c539d93907..7912167be1 100644 --- a/components/select/__tests__/__snapshots__/demo.test.js.snap +++ b/components/select/__tests__/__snapshots__/demo.test.js.snap @@ -1581,8 +1581,9 @@ exports[`renders ./components/select/demo/responsive.md correctly 1`] = ` class="ant-select-selection-overflow" >