diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 63f7267272..558f341fd8 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -9,12 +9,37 @@ timeline: true #### Release Schedule -* Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix). -* Monthly release: minor version at the end of every month for new features. -* Major version release is not included in this schedule for breaking change and new features. +- Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix). +- Monthly release: minor version at the end of every month for new features. +- Major version release is not included in this schedule for breaking change and new features. --- +## 3.17.0 + +`2019-05-05` + +- 🎉 Breadcrumb.Item supports `overlay` props to define drop-down menus. [#16315](https://github.com/ant-design/ant-design/pull/16315) +- 🎉 Button added a new type `link`. [#16289](https://github.com/ant-design/ant-design/pull/16289) +- ⌨️ Wrap List.Item under `ul` to enhance accessibility.[#15890](https://github.com/ant-design/ant-design/pull/15890) +- 🌟 TreeSelect support `showSearch` in multiple mode. [#15933](https://github.com/ant-design/ant-design/pull/15933) +- 🌟 Provides `previewFile` to customize preview logic. [#15984](https://github.com/ant-design/ant-design/pull/15984) +- 🌟 Added the `@table-selected-row-color` variable to customize the color selected by the table. [#15971](https://github.com/ant-design/ant-design/pull/15971) [@hextion](https://github.com/hextion) +- 🌟 Added `@form-warning-input-bg` and `@form-error-input-bg` variables to customize the background color when the form is in error state. [#15954](https://github.com/ant-design/ant-design/pull/15954) [@hextion](https://github.com/hextion) +- 🌟 Dropdown.Button supports `icon` props to customize icons. [#15996](https://github.com/ant-design/ant-design/pull/15996) [@DiamondYuan](https://github.com/DiamondYuan) +- 🌟 Support SkeletonAvatarProps `size` accept number. [#16128](https://github.com/ant-design/ant-design/pull/16128) [@MrHeer](https://github.com/MrHeer) +- 🌟 Notification.config now supports `getContainer` for custom dom rendering locations. [#16123](https://github.com/ant-design/ant-design/pull/16123) [@Nouzbe](https://github.com/Nouzbe) +- 🌟 Drawer supports `afterVisibleChange` props, which fires when the drawer animation is complete. [#16228](https://github.com/ant-design/ant-design/pull/16228) +- 🌟 Form.Item supports `htmlFor` props. [#16278](https://github.com/ant-design/ant-design/pull/16278) +- 🌟 Collapse supports `expandIconPosition` props. [#16365](https://github.com/ant-design/ant-design/pull/16365) +- 🌟 Carousel supports the location of custom panel indicator points. [#16225](https://github.com/ant-design/ant-design/pull/16225) [@yociduo](https://github.com/yociduo) +- 🌟 TreeNode supports the properties of `checkable`. [#16369](https://github.com/ant-design/ant-design/pull/16369) +- 🌟 🇭🇷 Added Croatian language pack. [#15641](https://github.com/ant-design/ant-design/pull/15641) [@fpintaric](https://github.com/fpintaric) +- 🐞 Fix Drawer wrong animation direction. [#16358](https://github.com/ant-design/ant-design/pull/16358) +- 🐞 Fix Slider mark text style will break line. [#15128](https://github.com/ant-design/ant-design/pull/15128) +- 🐞 Fix Checkbox.Group `onChange` pass removed value. [#16392](https://github.com/ant-design/ant-design/pull/16392) +- 🐞 Fixed multiple Typescript type errors. [#16043](https://github.com/ant-design/ant-design/pull/16043) [#16341](https://github.com/ant-design/ant-design/pull/16341) [#16343](https://github.com/ant-design/ant-design/pull/16343) [#16360](https://github.com/ant-design/ant-design/pull/16360) [#16344](https://github.com/ant-design/ant-design/pull/16344) + ## 3.16.6 `2019-04-26` @@ -58,7 +83,7 @@ timeline: true - 🐞 Fix issue that Affix's `target` does not work after it's value changing. [#16146](https://github.com/ant-design/ant-design/pull/16146) - 🐞 Fix the Modal's animation issue Modal on first rendering. [#15795](https://github.com/ant-design/ant-design/issues/15795) - 🐞 Fix issue that Table's `rowSelection.columnWidth` does not work. [#16163](https://github.com/ant-design/ant-design/issues/16163) -- 🐞 Fix type definition of Form.create. [#16095](https://github.com/ant-design/ant-design/issues/16095) +- 🐞 Fix type definition of Form.create. [#16095](https://github.com/ant-design/ant-design/issues/16095) - 🐞 Fix type definition of Icon's `aria-hidden`. [#16202](https://github.com/ant-design/ant-design/pull/16202) - 🐞 Fix type definition of PageHeader's `tags`. [#16092](https://github.com/ant-design/ant-design/issues/16092) - 🌟 Add new less variable `@text-selection-bg;`. [#16155](https://github.com/ant-design/ant-design/pull/16155) @@ -186,10 +211,10 @@ timeline: true - 🐞 Correct suffix icon in Input.Password. [#15381](https://github.com/ant-design/ant-design/pull/15381) [@melchior-voidwolf](https://github.com/melchior-voidwolf) - 🐞 Fix Layout has classname `ant-layout-has-sider` even if `hasFixer` is set to `false`. [#15396](https://github.com/ant-design/ant-design/pull/15396) [@SoraYama](https://github.com/SoraYama) - 🐞 Fix Divider alignment issue in PageHeader. [#15400](https://github.com/ant-design/ant-design/pull/15400) -- 🐞 Fix a style issue of Skeleton. [#15421](https://github.com/ant-design/ant-design/pull/15421) [@Maktel](https://github.com/Maktel) +- 🐞 Fix a style issue of Skeleton. [#15421](https://github.com/ant-design/ant-design/pull/15421) [@Maktel](https://github.com/Maktel) - 🌟 Adjust multiple TypeScript types - 🌟 FormComponentProps added a generic type of form values. [#15355](https://github.com/ant-design/ant-design/pull/15355) - - 🌟 Export ConfigProviderProps interface. [#15446](https://github.com/ant-design/ant-design/pull/15446) [@DiamondYuan](https://github.com/DiamondYuan) + - 🌟 Export ConfigProviderProps interface. [#15446](https://github.com/ant-design/ant-design/pull/15446) [@DiamondYuan](https://github.com/DiamondYuan) - 🐞 Add `onClick` prop for Breadcrumb.Item. [#15331](https://github.com/ant-design/ant-design/pull/15331) [@tgxpuisb](https://github.com/tgxpuisb) - 🐞 Add `style` prop for Steps.Step component. [#15393](https://github.com/ant-design/ant-design/pull/15393) [@pavolgolias](https://github.com/pavolgolias) - 🐞 Fix `itemRender` definition of Pagination. [#15428](https://github.com/ant-design/ant-design/pull/15428) [@DiamondYuan](https://github.com/DiamondYuan) @@ -584,7 +609,7 @@ timeline: true - 🐞 Fixed Table `Cannot read property 'children' of undefined` error when customize `column.title` as ReactNode. [#13542](https://github.com/ant-design/ant-design/issues/13542) [@geraldchen890806](https://github.com/geraldchen890806) - 🐞 Fixed another border problem of Button when customized less variable `@border-width-base`. [#13534](https://github.com/ant-design/ant-design/issues/13534) [@morenyang](https://github.com/morenyang) - 🐞 Fixed Upload don't support resolve `Blob` object when `beforeUpload` returns a Promise. [#13528](https://github.com/ant-design/ant-design/pull/13528/) [@huanz](https://github.com/huanz) -- https://github.com/ant-design/ant-design/pull/13536 +- https://github.com/ant-design/ant-design/pull/13536 - 🐞 Fixed two props of Dropdown TypeScript definitions. [#13536](https://github.com/ant-design/ant-design/pull/13536) [@wangxingkang](https://github.com/wangxingkang) ## 3.11.1 @@ -833,7 +858,6 @@ Component Fixes / Enhancements: - 🐞 Fix the issue with mouse hover when using non-Input components in Input.Group. [#12407](https://github.com/ant-design/ant-design/pull/12407) [@hengkx](https://github.com/hengkx) - 🐞 Fix some TypeScript type definitions. [#12374](https://github.com/ant-design/ant-design/pull/12374) [#12370](https://github.com/ant-design/ant-design/pull/12370) [#12354](https://github.com/ant-design/ant-design/pull/12354/files) [#12473](https://github.com/ant-design/ant-design/pull/12473) - ## 3.9.3 `2018-09-22` @@ -899,8 +923,7 @@ Component Fixes / Enhancements: In September we brought an update for `3.9.0`. There are many new features in `3.9.0`, Ant Design is getting stronger and solider. -- 🔥🔥🔥 In the `3.9.0` version, we redraw all the icons, adding two new categories, more than 90 new icons. And the bit adds a variety of styles to each icon. To this end, we have rewritten the Icon component, replaced the `fontface` icon with `SVG`, adding a number of features that allow us to quickly use new icons and styles. - ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png) +- 🔥🔥🔥 In the `3.9.0` version, we redraw all the icons, adding two new categories, more than 90 new icons. And the bit adds a variety of styles to each icon. To this end, we have rewritten the Icon component, replaced the `fontface` icon with `SVG`, adding a number of features that allow us to quickly use new icons and styles. ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png) - 💄 Replace the `css` font icon with the `SVG` icon, [see more discussion about it](https://github.com/ant-design/ant-design/issues/10353). - 💄 You can now render a two-color icon. - 💄 We provide three theme of icons: outlined, filled, twoTone, default theme is outlined. @@ -974,7 +997,6 @@ In addition, our **Ant Design Pro 2.0.0** version has also been released simulta - 🐞 Fixed `selectable` prop is missing in TreeNode props. [#11604](https://github.com/ant-design/ant-design/issues/11604) [@apieceofbart](https://github.com/apieceofbart) - 🐞 Fixed `autosize` prop is missing in Input props. [#11697](https://github.com/ant-design/ant-design/issues/11697) - ## 3.8.1 `2018-08-12` @@ -1079,8 +1101,7 @@ Thanks to 24 contributors who send pull request to 3.8.0! ## 3.7.0 -3.7.0 is a heavy update that brings a lot of exciting changes and new features. -Here are some highlights ✨: +3.7.0 is a heavy update that brings a lot of exciting changes and new features. Here are some highlights ✨: - 🌟 Add drawer component : [Drawer](https://ant.design/components/drawer-cn/). [#10791](https://github.com/ant-design/ant-design/pull/10791) - 🌟 Add `Tree.DirectoryTree` component as the built-in directory tree. [#7749](https://github.com/ant-design/ant-design/issues/7749) @@ -1103,7 +1124,7 @@ Component Fixes / Enhancements: - Upgrade `rc-table` to `6.2.2` for Table. [f2fddff](https://github.com/ant-design/ant-design/commit/f2fddff3fd0d6b36e8e6d8ee06bfcbcc85ead4f0) - 🌟 Add `expanded` as the fourth param of `expandedRowRender` prop to get the expanded state of current row. [#10379](https://github.com/ant-design/ant-design/issues/10379) - 🌟 Add the ability to override the filter menu without the fully controlled component. [59cc3a8](https://github.com/ant-design/ant-design/commit/59cc3a8b6c643f7206feedf2dc2c7154296ba3e3) [@chrvadala](https://github.com/chrvadala) - - 🌟 `filterIcon` prop supports to be a render function which returns ReactNode. [1af4392](https://github.com/ant-design/ant-design/commit/1af4392ae9fbdaa6fcfbf2f0de5413100ef4a84a) + - 🌟 `filterIcon` prop supports to be a render function which returns ReactNode. [1af4392](https://github.com/ant-design/ant-design/commit/1af4392ae9fbdaa6fcfbf2f0de5413100ef4a84a) - 🐞 Fix the row dislocation problem when the column is fixed. [#10392](https://github.com/ant-design/ant-design/issues/10392) - 🌟 Allow to pass `data-*`, `aria-*` and `role-*` props to the inner for Alert. [f0b684d](https://github.com/ant-design/ant-design/commit/f0b684de6a7c422f0de56e1ef72aeb35ab25a858) - 🌟 Add `alt` prop for Avatar to set the text when the image is unable to display. [#10798](https://github.com/ant-design/ant-design/pull/10798) @@ -1124,7 +1145,6 @@ Component Fixes / Enhancements: - 🐞 Fix border radius when avatar has custom size. [e1e6523](https://github.com/ant-design/ant-design/commit/e1e6523452286ba56f20b73abad762a58ea7d7bc) - 🌟 Add `okButtonDisabled` and `cancelButtonDisabled` props to disable ok button and cancel button. [#10955](https://github.com/ant-design/ant-design/pull/10955) - ## 3.6.6 `2018-07-07` @@ -1197,15 +1217,15 @@ Component Fixes / Enhancements: `2018-06-02` -* 🌟 `Form`'s error message now can be customized with ReactNode. [#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona) -* 🌟 `List` support customized configuration for position of pagination. [#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng) -* 🌟 `Layout.Sider` now can be configured with `light` or `dark` theme. [#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10) -* 🌟 Ant Design official site now supports offline mode. [#10625](https://github.com/ant-design/ant-design/issues/10625) -* 🌟 `Transfer` adding `style` and `operationStyle` props for further customization. [@eduludi](https://github.com/eduludi) -* 🌟 `Message` adds a promisfied interface to handle callback. [#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan) -* 🐞 Fix compilation issue with typescript@v2.9.1 . [#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski) -* 🐞 Fix a bug in `Menu` where outer menu item not highlighting while inner item is selected. [#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank) -* 🐞 Affix `offsetBottom` not working. [#10674](https://github.com/ant-design/ant-design/issues/10674) +- 🌟 `Form`'s error message now can be customized with ReactNode. [#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona) +- 🌟 `List` support customized configuration for position of pagination. [#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng) +- 🌟 `Layout.Sider` now can be configured with `light` or `dark` theme. [#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10) +- 🌟 Ant Design official site now supports offline mode. [#10625](https://github.com/ant-design/ant-design/issues/10625) +- 🌟 `Transfer` adding `style` and `operationStyle` props for further customization. [@eduludi](https://github.com/eduludi) +- 🌟 `Message` adds a promised interface to handle callback. [#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan) +- 🐞 Fix compilation issue with typescript@v2.9.1 . [#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski) +- 🐞 Fix a bug in `Menu` where outer menu item not highlighting while inner item is selected. [#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank) +- 🐞 Affix `offsetBottom` not working. [#10674](https://github.com/ant-design/ant-design/issues/10674) ## 3.5.4 @@ -1274,13 +1294,13 @@ Component Fixes / Enhancements: - 🐞 Fix merged header cell border. [#10359](https://github.com/ant-design/ant-design/issues/10359) - 🐞 Fix lost of user selection on data updates. [#10332](https://github.com/ant-design/ant-design/pull/10332) [@chrvadala](https://github.com/chrvadala) - Menu upgrade `rc-menu` to `7.x` [#10305](https://github.com/ant-design/ant-design/pull/10305) - - 🌟 Better aria-* attributes support. [react-component/menu#137](https://github.com/react-component/menu/pull/137) + - 🌟 Better aria-\* attributes support. [react-component/menu#137](https://github.com/react-component/menu/pull/137) - 🌟 Improve Menu performance by avoiding unnecessary updates. [react-component/menu#133](https://github.com/react-component/menu/pull/133) - 🌟 Support passing props through to MenuItem list item. [react-component/menu#135](https://github.com/react-component/menu/pull/135) - 🐞 Minor key shortcut bug fixes. [react-component/menu#132](https://github.com/react-component/menu/pull/132) - Collapse - 🌟 Support custom `Collapse` styles with less. [#9943](https://github.com/ant-design/ant-design/pull/9943) [@davidhatten](https://github.com/davidhatten) - - 🌟 Update `rc-collapse` to 1.9.0 to add `Collapse` keyboard support. [react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel) + - 🌟 Update `rc-collapse` to 1.9.0 to add `Collapse` keyboard support. [react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel) - Select - 🐞 Fix type for `placeholder`. [#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud) - 🐞 Fix extra space taken up when arrow disabled. [#10296](https://github.com/ant-design/ant-design/pull/10296) @@ -1316,7 +1336,7 @@ Component Fixes / Enhancements: `2018-04-23` - 🐞 Fix style lose bug when use tree shaking in webpack@4. [#10197](https://github.com/ant-design/ant-design/pull/10197) [@Aladdin-ADD](https://github.com/Aladdin-ADD) -- 🐞 Fix `Menu` item's clickable region in dark theme. [#10187](https://github.com/ant-design/ant-design/pull/10187) [@dgeibi ](https://github.com/dgeibi ) +- 🐞 Fix `Menu` item's clickable region in dark theme. [#10187](https://github.com/ant-design/ant-design/pull/10187) [@dgeibi ](https://github.com/dgeibi) ## 3.4.2 @@ -1374,7 +1394,7 @@ Component Fixes / Enhancements: `2018-03-25` -- Revert Upload `file` type change in previous version which causes breaking change. +- Revert Upload `file` type change in previous version which causes breaking change. ## 3.3.2 @@ -1392,12 +1412,13 @@ Component Fixes / Enhancements: `2018-03-18` - 💄 Tweak danger button focus style. -- 🐞 Fix a show error when the value of enterButton is a button element. [#9639](https://github.com/ant-design/ant-design/issues/9639) +- 🐞 Fix a show error when the value of enterButton is a button element. [#9639](https://github.com/ant-design/ant-design/issues/9639) - 🐞 Fix missing key of `column.title` in Table .[#9658](https://github.com/ant-design/ant-design/issues/9658) [@terence55](https://github.com/terence55) - 🐞 Fix `scroll: { x: true }` not working if `.ant-table-scroll table` width is `auto`. [#9704](https://github.com/ant-design/ant-design/pull/9704) -- 🐞 Fix when the helper message disappears, the input box will shake. [#8831](https://github.com/ant-design/ant-design/issues/8831) +- 🐞 Fix when the helper message disappears, the input box will shake. [#8831](https://github.com/ant-design/ant-design/issues/8831) - 🐞 Fix isMoment call in `TimePicker` will report error in parcel. [85c78e4](https://github.com/ant-design/ant-design/commit/85c78e49a91737c2841dc42621db21ca248b62b4) - 🐞 Tweak `Table` border radius. [#9674](https://github.com/ant-design/ant-design/pull/9674) + ## 3.3.0 `2018-03-12` @@ -1406,17 +1427,17 @@ Component Fixes / Enhancements: - 🌟 Add `validRange` prop for `Calendar` to set the date range. [71f65a0](https://github.com/ant-design/ant-design/commit/71f65a0be8e72a67f334c57e79ae3ff5fb640630) [@Rohanhacker](https://github.com/Rohanhacker) - 🌟 Add `defaultActiveTabKey` prop for `Card` to initial TabPane's active key. [30fe88d](https://github.com/ant-design/ant-design/commit/30fe88d4bdcec765bf92ca32a755d9646b36978e) [@u3u](https://github.com/u3u) - `DatePicker` - - 🌟 Add `dropdownClassName` prop to set the className of popup calendar. [#7211](https://github.com/ant-design/ant-design/issues/7211) - - 🐞 Fix the error of resolving `moment` object. [#9539](https://github.com/ant-design/ant-design/pull/9539) - - 🐞 Fix incorrect import of `turkish(tr_TR)` locale file. [#9373](https://github.com/ant-design/ant-design/issues/9373) + - 🌟 Add `dropdownClassName` prop to set the className of popup calendar. [#7211](https://github.com/ant-design/ant-design/issues/7211) + - 🐞 Fix the error of resolving `moment` object. [#9539](https://github.com/ant-design/ant-design/pull/9539) + - 🐞 Fix incorrect import of `turkish(tr_TR)` locale file. [#9373](https://github.com/ant-design/ant-design/issues/9373) - 🌟 Add `orientation` prop for `Divider` to set the alignment of text in divider. [#9275](https://github.com/ant-design/ant-design/pull/9275) [@jrvboesch](https://github.com/jrvboesch) - 🌟 Add `keyboard` prop for `Modal` to set whether Modal could be closed by `Esc` key. [#8818](https://github.com/ant-design/ant-design/issues/8818) - 🌟 Improve the TypeScript definition of `event` param in `onChange` prop for `Radio` and `Checkbox`. [#9574](https://github.com/ant-design/ant-design/issues/9574) - `Table` - - 🌟 Add `position` prop in `pagination` prop to set the position of pagination. [#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei) - - 🌟 Add event param of `onSelect` prop in `rowSelection` prop. [#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei) - - 🌟 Add `columnWidth` prop in `rowSelection` prop to set the column width of selection. [#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend) - - 🐞 Fix border radius issue in `Chrome` for `Table`. [af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61) + - 🌟 Add `position` prop in `pagination` prop to set the position of pagination. [#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei) + - 🌟 Add event param of `onSelect` prop in `rowSelection` prop. [#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei) + - 🌟 Add `columnWidth` prop in `rowSelection` prop to set the column width of selection. [#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend) + - 🐞 Fix border radius issue in `Chrome` for `Table`. [af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61) - 🌟 Add `pendingDot` prop for `Timeline` to set icon of ghost node. [#9546](https://github.com/ant-design/ant-design/pull/9546) [@SimpleFrontend](https://github.com/SimpleFrontend) - 🌟 Add `inputReadOnly` prop for `TimePicker` to set if it's read only. [4a69446](https://github.com/ant-design/ant-design/commit/4a69446be155c1c176b18cb2c31459f999aa5d5e) [@JesperWe](https://github.com/JesperWe) - 🌟 Add `dropdownClassName` prop for `TreeSelect`. [69b154f](https://github.com/ant-design/ant-design/commit/69b154f9a9cfa5f2d89a82b6ed730d4d8793de73) [56e4ce0](https://github.com/ant-design/ant-design/commit/56e4ce099d950601538d72243563021e8083776b) @@ -1506,7 +1527,6 @@ Component Fixes / Enhancements: - 🐞 Revert [#9141](https://github.com/ant-design/ant-design/pull/9141) since it causes year and month can not be selected in DatePicker. - ## 3.1.5 `2018-01-27` @@ -1522,7 +1542,7 @@ Component Fixes / Enhancements: - Add `duration` for Notification. [pull/9120](https://github.com/ant-design/ant-design/pull/9120) [@duhongjun](https://github.com/duhongjun) - Add `style` for Steps. [pull/9126](https://github.com/ant-design/ant-design/pull/9126) [@wanliyunyan](https://github.com/wanliyunyan) - 🌟 Optimize Avatar default background color. [commit/275946](https://github.com/ant-design/ant-design/commit/275946090823ab8da90f1871976c671b2c7ac851) -- 🌟 Add the less variable for Slider and Menu. [pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray) +- 🌟 Add the less variable for Slider and Menu. [pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray) ## 3.1.4 @@ -1635,25 +1655,25 @@ Happy 2018 !~ 2018 2018 2018 coming!~~~ `2017-12-11` -* Remove useless DOM wrapper of Card, so that Card's DOM structure will be the same as Card of 2.x. -* Fix that missing `antd/lib/style/v2-compatible-reset.css`. [28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f) -* Fix that Affix will be overlap when it is higher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da) -* Fix the open animation of Collapse. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12) -* Fix the alignment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459) -* Menu - * Fix the popup will disappear unexpectedly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453) - * Fix the open animation. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12) -* Fix compile error of style of Notification. [#8437](https://github.com/ant-design/ant-design/issues/8437) -* Fix the background color of mini Pagination. [e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5) -* Table - * Fix broken style in mobile. [#8465](https://github.com/ant-design/ant-design/issues/8465) - * Fix broken style when use size and nested Table together. [#8525](https://github.com/ant-design/ant-design/issues/8525) -* TypeScript - * Fix TypeScript definition of AutoComplete. [#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag) - * Fix TypeScript definition of Divider. [#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu) - * Fix TypeScript definition of Dropdown. [#8444](https://github.com/ant-design/ant-design/issues/8444) - * Fix TypeScript definition of List. [e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692) - * Fix TypeScript definition of Table. [#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid) +- Remove useless DOM wrapper of Card, so that Card's DOM structure will be the same as Card of 2.x. +- Fix that missing `antd/lib/style/v2-compatible-reset.css`. [28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f) +- Fix that Affix will be overlap when it is higher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da) +- Fix the open animation of Collapse. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12) +- Fix the alignment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459) +- Menu + - Fix the popup will disappear unexpectedly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453) + - Fix the open animation. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12) +- Fix compile error of style of Notification. [#8437](https://github.com/ant-design/ant-design/issues/8437) +- Fix the background color of mini Pagination. [e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5) +- Table + - Fix broken style in mobile. [#8465](https://github.com/ant-design/ant-design/issues/8465) + - Fix broken style when use size and nested Table together. [#8525](https://github.com/ant-design/ant-design/issues/8525) +- TypeScript + - Fix TypeScript definition of AutoComplete. [#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag) + - Fix TypeScript definition of Divider. [#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu) + - Fix TypeScript definition of Dropdown. [#8444](https://github.com/ant-design/ant-design/issues/8444) + - Fix TypeScript definition of List. [e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692) + - Fix TypeScript definition of Table. [#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid) ## 3.0.0 @@ -1770,7 +1790,9 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe - 🌟 Added new `hourStep`, `minuteStep`, `secondStep` props to allow customizing time steps. [Demo](https://ant.design/components/time-picker/#components-time-picker-demo-interval-options) - 🌟 Added new `focusOnOpen` prop to focus input after panel is open. - Table + - 🌟 Added new `components` prop to allow overriding default table elements. + ```javascript // You can override following elements const components = { @@ -1787,8 +1809,9 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe }, }; - +
; ``` + - 🌟 Added new `onRow` prop to allow passing custom props to table body row. - 🌟 Added new `onHeaderRow` props to allow passing custom props to table header row. - 🌟 Added `column[onCell]` to allow passing custom props to table body cell. @@ -1799,14 +1822,17 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe - 🙅 Deprecated `getBodyWrapper`, please use `components` instead. - 🙅 Deprecated `onRowClick`, `onRowDoubleClick`, `onRowContextMenu`, `onRowMouseEnter`, `onRowMouseLeave`, please use `onRow` instead. ```javascript -
({ - onClick: () => {}, - onDoubleClick: () => {}, - onContextMenu: () => {}, - onMouseEnter: () => {}, - onMouseLeave: () => {}, - })} /> +
({ + onClick: () => {}, + onDoubleClick: () => {}, + onContextMenu: () => {}, + onMouseEnter: () => {}, + onMouseLeave: () => {}, + })} + /> ``` + - Select - 🌟 Option's value can be a number in single or multiple mode. - 🌟 Added new `maxTagCount` and `maxTagPlaceholder` props. @@ -1835,7 +1861,6 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe Visit [GitHub](https://github.com/ant-design/ant-design/blob/2.x-stable/CHANGELOG.en-US.md) to read `2.x` change logs. - ## 1.11.4 Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`. diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index bbbdd4076d..8f21301471 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -9,12 +9,37 @@ timeline: true #### 发布周期 -* 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布） -* 次版本号：每月发布一个带有新特性的向下兼容的版本。 -* 主版本号：含有破坏性更新和新特性，不在发布周期内。 +- 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布） +- 次版本号：每月发布一个带有新特性的向下兼容的版本。 +- 主版本号：含有破坏性更新和新特性，不在发布周期内。 --- +## 3.17.0 + +`2019-05-05` + +- 🎉 Breadcrumb.Item 支持 `overlay` props 来定义下拉菜单。[#16315](https://github.com/ant-design/ant-design/pull/16315) +- 🎉 Button 的增加了新的类型 `link`。[#16289](https://github.com/ant-design/ant-design/pull/16289) +- ⌨️ 用`ul`包裹 List.Item，以增加可访问性。[#15890](https://github.com/ant-design/ant-design/pull/15890) +- 🌟 TreeSelect 的 `showSearch` 支持多选模式。[#15933](https://github.com/ant-design/ant-design/pull/15933) +- 🌟 Upload 提供 `previewFile` props 以自定义预览逻辑。[#15984](https://github.com/ant-design/ant-design/pull/15984) +- 🌟 添加了 `@table-selected-row-color` 变量来自定义表格选中的颜色。[#15971](https://github.com/ant-design/ant-design/pull/15971) [@hextion](https://github.com/hextion) +- 🌟 添加了 `@form-warning-input-bg` 和 `@form-error-input-bg` 变量来自定义表单错误状态时的背景颜色。[#15954](https://github.com/ant-design/ant-design/pull/15954) [@hextion](https://github.com/hextion) +- 🌟 Dropdown.Button 支持 `icon` props 来自定义图标。[#15996](https://github.com/ant-design/ant-design/pull/15996) [@DiamondYuan](https://github.com/DiamondYuan) +- 🌟 SkeletonAvatarProps 的 `size` props 支持传入数字。[#16128](https://github.com/ant-design/ant-design/pull/16128) [@MrHeer](https://github.com/MrHeer) +- 🌟 notification.config 现在支持 `getContainer` 来进行自定义 dom 渲染位置。[#16123](https://github.com/ant-design/ant-design/pull/16123) [@Nouzbe](https://github.com/Nouzbe) +- 🌟 Drawer 支持 `afterVisibleChange` props，在抽屉动画完成后触发。[#16228](https://github.com/ant-design/ant-design/pull/16228) +- 🌟 Form.Item 支持了 `htmlFor` props. [#16278](https://github.com/ant-design/ant-design/pull/16278) +- 🌟 Collapse 支持 `expandIconPosition` props。[#16365](https://github.com/ant-design/ant-design/pull/16365) +- 🌟 Carousel 支持自定义面板指示点的位置。[#16225](https://github.com/ant-design/ant-design/pull/16225) [@yociduo](https://github.com/yociduo) +- 🌟 TreeNode 支持 `checkable` 的属性。[#16369](https://github.com/ant-design/ant-design/pull/16369) +- 🌟 🇭🇷 新增克罗地亚语言包。[#15641](https://github.com/ant-design/ant-design/pull/15641) [@fpintaric](https://github.com/fpintaric) +- 🐞 修复 Drawer 组件的弹出动画闪烁的问题。[#16358](https://github.com/ant-design/ant-design/pull/16358) +- 🐞 修复 Slider 的文字会换行的问题。[#15128](https://github.com/ant-design/ant-design/pull/15128) +- 🐞 修复 Checkbox.Group `onChange` 会包含移除值得问题。[#16392](https://github.com/ant-design/ant-design/pull/16392) +- 🐞 修正了多处 Typescript 的类型错误。[#16043](https://github.com/ant-design/ant-design/pull/16043) [#16341](https://github.com/ant-design/ant-design/pull/16341) [#16343](https://github.com/ant-design/ant-design/pull/16343) [#16360](https://github.com/ant-design/ant-design/pull/16360) [#16344](https://github.com/ant-design/ant-design/pull/16344) + ## 3.16.6 `2019-04-26` @@ -179,7 +204,7 @@ timeline: true - 🐞 保持 List 组件内容颜色与之前的版本一致。[#15301](https://github.com/ant-design/ant-design/pull/15301) - 🐞 修复 Calendar 无法切换类型的问题。[#15338](https://github.com/ant-design/ant-design/pull/15338) [@zy410419243](https://github.com/zy410419243) - Badge - - 🐞 修复 Badge 组件不支持自定义颜色的问题。[#15356](https://github.com/ant-design/ant-design/pull/15356) [@DiamondYuan](https://github.com/DiamondYuan) + - 🐞 修复 Badge 组件不支持自定义颜色的问题。[#15356](https://github.com/ant-design/ant-design/pull/15356) [@DiamondYuan](https://github.com/DiamondYuan) - 🐞 修复 Badge 组件内带小圆点时的高度问题。[#15395](https://github.com/ant-design/ant-design/pull/15395) - 🐞 微调 Tabs 标签模式在浏览器放大时丢失边框的问题。[#15299](https://github.com/ant-design/ant-design/pull/15299) [@rinick](https://github.com/rinick) - 🐞 修复 Avatar 组件设置了 `display: none` 的时候无法计算偏移量的问题。[#15351](https://github.com/ant-design/ant-design/pull/15351) [@ppbl](https://github.com/ppbl) @@ -401,6 +426,7 @@ timeline: true ## 3.12.4 `2019-01-19` + - 🌟 更新《在 create-react-app 中使用》文档以兼容升级后的 create-react-app 和 react-scripts-rewired。[#14385](https://github.com/ant-design/ant-design/pull/14385) - 🐞 修复在 postcss（webpack）中使用 autoprefixer 9.4.5 会抛出错误 `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed` 的问题。[#14312](https://github.com/ant-design/ant-design/pull/14312) - 🐞 修复 InputNumber 在 MenuItem 中样式不正确的问题。[#14373](https://github.com/ant-design/ant-design/pull/14373) @@ -580,7 +606,7 @@ timeline: true - 🐞 修复 Table 使用自定义列头时报 `Cannot read property 'children' of undefined` 的问题。[#13542](https://github.com/ant-design/ant-design/issues/13542) [@geraldchen890806](https://github.com/geraldchen890806) - 🐞 修复另一个 Input 在自定义了 less 变量 `@border-width-base` 时的边框问题。[#13534](https://github.com/ant-design/ant-design/pull/13534) [@morenyang](https://github.com/morenyang) - 🐞 修复 Upload 的 `beforeUpload` 方法返回 Promise 时不支持 resolve `Blob` 对象的问题。[#13528](https://github.com/ant-design/ant-design/pull/13528/) [@huanz](https://github.com/huanz) -- https://github.com/ant-design/ant-design/pull/13536 +- https://github.com/ant-design/ant-design/pull/13536 - 🐞 修复 Dropdown 两个属性的 TypeScript 定义。[#13536](https://github.com/ant-design/ant-design/pull/13536) [@wangxingkang](https://github.com/wangxingkang) ## 3.11.1 @@ -661,7 +687,7 @@ timeline: true `2018-11-17` - 🐞 修复弹出菜单背景透明的问题。[#13104](https://github.com/ant-design/ant-design/issues/13104) -- 🐞 修复了 disabled Button 在 Popconfirm 中的不占用整个宽度的问题。[#13119](https://github.com/ant-design/ant-design/issues/13119) +- 🐞 修复了 disabled Button 在 Popconfirm 中的不占用整个宽度的问题。[#13119](https://github.com/ant-design/ant-design/issues/13119) - 🐞 修复了 Radio.Group 中的 Radio.Button 覆盖了 Badge 的问题。[#13132](https://github.com/ant-design/ant-design/issues/13132) - 🐞 修复 RangePicker 在 `small` 模式不对齐的问题。[#13105](https://github.com/ant-design/ant-design/issues/13105) - 🐞 修复 Dropdown 字体大小影响到头像的问题。[#13091](https://github.com/ant-design/ant-design/issues/13091) @@ -685,7 +711,7 @@ timeline: true `2018-11-09` - 🎉 发布 [首页模板集](https://landing.ant.design)！ -- 📖 发布 Ant Design [新版 Sketch 模版文件](https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch)。 +- 📖 发布 Ant Design [新版 Sketch 模版文件](https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch)。 - Button - 🐞 修复在小尺寸的 `Button.Group` 中没有垂直对齐的问题。[#12972](https://github.com/ant-design/ant-design/issues/12972) - 🐞 修复设置了 `href` 属性没有垂直对齐的问题。[#12978](https://github.com/ant-design/ant-design/issues/12978) @@ -827,7 +853,7 @@ timeline: true - 🐞 修复 Icon.createFromIconfontCN 方法会自动给 `scriptUrl` 加 `https` 的问题。[#12316](https://github.com/ant-design/ant-design/issues/12316) - 🐞 修复 Row 的 `gutter` 属性，在使用嵌套的 Col 时不生效的问题。[#12320](https://github.com/ant-design/ant-design/pull/12320) - 🐞 修复 Tree.DirectoryTree 组件在设置的 `expandedKeys` 有初始值时不能正确展开节点的问题。[#12396](https://github.com/ant-design/ant-design/issues/12396) -- 🐞 修复 Transfer 组件使用 `render` 属性返回 ReactNode 时，列表项的 `title` 属性显示错误的问题。[#12399](https://github.com/ant-design/ant-design/issues/12399) +- 🐞 修复 Transfer 组件使用 `render` 属性返回 ReactNode 时，列表项的 `title` 属性显示错误的问题。[#12399](https://github.com/ant-design/ant-design/issues/12399) - 🐞 修复 Tooltip 在 CheckboxGroup 上不工作的问题。[#12427](https://github.com/ant-design/ant-design/issues/12427) - 🐞 修复 Button 组件 loading 状态下在 IE9 里依然可以被点击的问题。[#12466](https://github.com/ant-design/ant-design/pull/12466) [@snail](https://github.com/120216220) - 🐞 修复 Input.Group 中使用非 Input 组件时，鼠标 hover 时会产生抖动的问题。[#12407](https://github.com/ant-design/ant-design/pull/12407) [@hengkx](https://github.com/hengkx) @@ -857,10 +883,10 @@ timeline: true - 🐞 修复当 `Icon` 组件包含子组件时，`React.Children.only` 报错。[c21ff](https://github.com/ant-design/ant-design/commit/c21ff5251d1ff0f00d7f283dd377a7b13eec21ee) - 🐞 修复 `Notification` 组件没有描述时图标对齐问题。[e6579](https://github.com/ant-design/ant-design/commit/e657985cc35359fb813a2bd68be8c3afbe75c95a) - 🐞 修复 `Table` 组件的排序图标对齐问题。[c935d](https://github.com/ant-design/ant-design/commit/c935d53b713afb3ec314133d749ca4e29e0c1ee5) -- TypeScript - - 🐞 修复 `Message` 组件中 `MessageApi` 类型定义。[e82d7](https://github.com/ant-design/ant-design/commit/e82d7a9c095317d62b054fcf7c2d6666ba54660d)[#12137](https://github.com/ant-design/ant-design/issues/12137) - - 🐞 修复 `Tree` onDrop 类型定义。[e5827](https://github.com/ant-design/ant-design/commit/e58273dccf59d58862e8bab0da36c7065e1c1044)[#12269](https://github.com/ant-design/ant-design/issues/12269) - - 🐞 `TreeSelect` 组件中 `onChange` 方法中添加 `extra` 类型定义。[#12243](https://github.com/ant-design/ant-design/pull/12243)[@jardicc](https://github.com/jardicc) +- TypeScript +- 🐞 修复 `Message` 组件中 `MessageApi` 类型定义。[e82d7](https://github.com/ant-design/ant-design/commit/e82d7a9c095317d62b054fcf7c2d6666ba54660d)[#12137](https://github.com/ant-design/ant-design/issues/12137) +- 🐞 修复 `Tree` onDrop 类型定义。[e5827](https://github.com/ant-design/ant-design/commit/e58273dccf59d58862e8bab0da36c7065e1c1044)[#12269](https://github.com/ant-design/ant-design/issues/12269) +- 🐞 `TreeSelect` 组件中 `onChange` 方法中添加 `extra` 类型定义。[#12243](https://github.com/ant-design/ant-design/pull/12243)[@jardicc](https://github.com/jardicc) ## 3.9.2 @@ -888,7 +914,7 @@ timeline: true - 🐞 修复 `Popconfirm` 组件中的图标显示位置不正确的问题。[#12026](https://github.com/ant-design/ant-design/issues/12026) - 🐞 修复 `Card` 组件中的 `Actions` 图标显示位置不正确的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016) - 🐞 修复 `Form`、`Alert`、`TimePicker` 等组件图标主题风格不正确的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016) -- 🐞 修复 `Collapse` 组件中的 `header` 中的图标会顺时针旋转90度的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016) +- 🐞 修复 `Collapse` 组件中的 `header` 中的图标会顺时针旋转 90 度的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016) - 🐞 修复在特定部署环境中，新旧图标会同时出现的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016) [8b82f14](https://github.com/ant-design/ant-design/pull/12016/commits/8b82f143b6bd612e8ec7f1202dfd5f41127b025e) - 🐞 修复使用 `Icon.createFromIconFontCN({...})` 方法失效并报错的问题。[#12013](https://github.com/ant-design/ant-design/pull/12013) @@ -898,8 +924,7 @@ timeline: true 在开学之际我们带来了久违的 `3.9.0` 的更新。多个重量级的新特性和大量修复，使 Ant Design 的能力显著提升。 -- 🔥🔥🔥 在 `3.9.0` 版本中，我们重绘了所有的图标，新增了两大类，超过 90 个新图标，并且为每个图标增加了多种风格。为此我们重写了 Icon 组件，使用 `SVG` 替换了 `fontface` 图标，增加了多个特性，可以快速的使用新的图标和风格。 - ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png) +- 🔥🔥🔥 在 `3.9.0` 版本中，我们重绘了所有的图标，新增了两大类，超过 90 个新图标，并且为每个图标增加了多种风格。为此我们重写了 Icon 组件，使用 `SVG` 替换了 `fontface` 图标，增加了多个特性，可以快速的使用新的图标和风格。 ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png) - 💄 使用 `SVG` 图标替换了 `css` 字体图标，[可以看这里的讨论了解 svg 的优势](https://github.com/ant-design/ant-design/issues/10353)。 - 💄 提供了三套图标风格线性、实色和双色图标，默认为线性风格。 - 🌟 新增了 **编辑类** 和 **数据类** 两个新类别。 @@ -960,12 +985,13 @@ timeline: true ## 3.8.2 `2018-8-18` + - 🐞 修复 Tag 组件 `visible` 属性初始值为 false 时仍然可见的问题。[#11757](https://github.com/ant-design/ant-design/issues/11757) - 🐞 修复 Modal 文本在双击打开的时候会被选中的问题。[#11777](https://github.com/ant-design/ant-design/issues/11777) - 🐞 修复 Rate 组件点击时的样式问题。[#11736](https://github.com/ant-design/ant-design/issues/11736) - 🐞 修复 Badge 组件在子元素为 `display:block` 时的样式问题。[#84119d8](https://github.com/ant-design/ant-design/commit/84119d8959d55edf535a9cac5ff532e61b6ee698) - Drawer - - 🐞 修复 Drawer 组件不兼容 IE10 和 IE9 的问题。[#11583](https://github.com/ant-design/ant-design/issues/11583) + - 🐞 修复 Drawer 组件不兼容 IE10 和 IE9 的问题。[#11583](https://github.com/ant-design/ant-design/issues/11583) - 🐞 修复 Drawer 组件在移动设备上无法垂直滚动的问题。[#11443](https://github.com/ant-design/ant-design/issues/11443) - TypeScript - 🐞 修复 TreeNode 组件缺少的 `selectable` 属性定义。[#11604](https://github.com/ant-design/ant-design/issues/11604) [@apieceofbart](https://github.com/apieceofbart) @@ -989,7 +1015,7 @@ timeline: true - 🐞 修复 Collapse 组件缺少的 `destroyInactivePanel` 定义。[#11646](https://github.com/ant-design/ant-design/pull/11646) [@zheeeng](https://github.com/zheeeng) - 💄 修复 AutoComplete 没有 `getPopupContainer` 属性定义的问题。[#11690](https://github.com/ant-design/ant-design/pull/11690) [@Huanghuiying0624](https://github.com/Huanghuiying0624) - 🐞 修复 Upload 组件的 `lastModifiedDate` 定义。[#11709](https://github.com/ant-design/ant-design/pull/11709) [@andycall](https://github.com/andycall) -- 💄 使用新的 React 生命周期函数，包括组件 Upload，CheckboxGroup，Layout.Sider，Tooltip，Popconfirm。[#11666](https://github.com/ant-design/ant-design/pull/11666) [@dancerphil](https://github.com/dancerphil) [#11682](https://github.com/ant-design/ant-design/pull/11682) [@dancerphil](https://github.com/dancerphil) +- 💄 使用新的 React 生命周期函数，包括组件 Upload，CheckboxGroup，Layout.Sider，Tooltip，Popconfirm。[#11666](https://github.com/ant-design/ant-design/pull/11666) [@dancerphil](https://github.com/dancerphil) [#11682](https://github.com/ant-design/ant-design/pull/11682) [@dancerphil](https://github.com/dancerphil) ## 3.8.0 @@ -1075,8 +1101,7 @@ timeline: true ## 3.7.0 -3.7.0 是一个重磅更新，带来了很多激动人心的变化和新特性。 -以下是一些亮点✨： +3.7.0 是一个重磅更新，带来了很多激动人心的变化和新特性。以下是一些亮点 ✨： - 🔥 增加抽屉组件 : [`Drawer`](https://ant.design/components/drawer-cn/) [#10791](https://github.com/ant-design/ant-design/pull/10791) - 🔥 新增 `Tree.DirectoryTree` 组件，作为内置的目录树。[#7749](https://github.com/ant-design/ant-design/issues/7749) @@ -1093,7 +1118,7 @@ timeline: true - Upload 组件升级 `rc-upload` 到 `2.5.0` - 🌟 新增 `directory` 属性，支持上传一个文件夹。[#7315](https://github.com/ant-design/ant-design/issues/7315) - 🌟 `action` 属性支持作为一个返回 `Promise` 对象的函数，使用更加灵活。[fd96967](https://github.com/ant-design/ant-design/commit/fd96967c872600b79bb608e9ddf9f8c38814a704) -- Dropdown 增加新特性，可以做为右键菜单来使用。 +- Dropdown 增加新特性， 可以做为右键菜单来使用。 - 🌟 给菜单项的 icon 提供默认的外间距样式。[8e60a59](https://github.com/ant-design/ant-design/commit/8e60a591fd24f644de4f67d69c2210e9270be9cc) - 🌟 触发方式为 `contextMenu` 时自动调整菜单的位置。[16e4260](https://github.com/ant-design/ant-design/commit/16e42601d6772fc0830ee237a1e751a38a118676) - Table 组件升级 `rc-table` 到 `6.2.2`。[f2fddff](https://github.com/ant-design/ant-design/commit/f2fddff3fd0d6b36e8e6d8ee06bfcbcc85ead4f0) @@ -1194,15 +1219,15 @@ timeline: true `2018-06-02` -* 🌟 `Form` 表单错误信息展示支持传入 ReactNode。[#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona) -* 🌟 `List` 组件支持指定分页器的位置。[#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng) -* 🌟 `Layout.Sider` 支持 dark/light 主题定制。[#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10) -* 🌟 支持 Ant Design 站点的离线模式。[#10625](https://github.com/ant-design/ant-design/issues/10625) -* 🌟 `Transfer` 新增 `style` 以及 `operationStyle` 属性配置样式。[@eduludi](https://github.com/eduludi) -* 🌟 `Message` 增加 promise 化的回调接口。[#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan) -* 🐞 修复编译时 TypeScript v2.9.1兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski) -* 🐞 修复 `Menu` 嵌套超过两层时选中最里层后对应最外层没有亮起问题。[#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank) -* 🐞 修复 `Affix` 组件 offsetBottom 无效问题。[#10674](https://github.com/ant-design/ant-design/issues/10674) +- 🌟 `Form` 表单错误信息展示支持传入 ReactNode。[#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona) +- 🌟 `List` 组件支持指定分页器的位置。[#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng) +- 🌟 `Layout.Sider` 支持 dark/light 主题定制。[#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10) +- 🌟 支持 Ant Design 站点的离线模式。[#10625](https://github.com/ant-design/ant-design/issues/10625) +- 🌟 `Transfer` 新增 `style` 以及 `operationStyle` 属性配置样式。[@eduludi](https://github.com/eduludi) +- 🌟 `Message` 增加 promise 化的回调接口。[#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan) +- 🐞 修复编译时 TypeScript v2.9.1 兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski) +- 🐞 修复 `Menu` 嵌套超过两层时选中最里层后对应最外层没有亮起问题。[#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank) +- 🐞 修复 `Affix` 组件 offsetBottom 无效问题。[#10674](https://github.com/ant-design/ant-design/issues/10674) ## 3.5.4 @@ -1236,7 +1261,7 @@ timeline: true `2018-05-13` - 🐞 修复 `Table` 过滤器和 `Transfer` 复选框无法点击的问题。[#10452](https://github.com/ant-design/ant-design/issues/10452) -- 🐞 修复 `Cascader` 的 `displayRender` 里的链接无法点击的问题。[#10433](https://github.com/ant-design/ant-design/issues/10433) +- 🐞 修复 `Cascader` 的  `displayRender` 里的链接无法点击的问题。[#10433](https://github.com/ant-design/ant-design/issues/10433) - 🐞 修复 `Button` ref 不兼容问题。[#10405](https://github.com/ant-design/ant-design/issues/10405) - 🐞 修复 `Form` 表单项校验位置高度时出现抖动问题。[#10445](https://github.com/ant-design/ant-design/issues/10445) - 🌟 设置 `Layout` 宽度时，允许使用任何的 CSS 单位。[#10479](https://github.com/ant-design/ant-design/pull/10479) @@ -1272,12 +1297,12 @@ timeline: true - 🐞 修复头部单元格的边框样式问题。[#10359](https://github.com/ant-design/ant-design/issues/10359) - 🐞 修复当数据变化时用户选择项丢失的问题。[#10332](https://github.com/ant-design/ant-design/pull/10332) [@chrvadala](https://github.com/chrvadala) - `Menu` 升级 `rc-menu` 到 `7.x` [#10305](https://github.com/ant-design/ant-design/pull/10305) - - 🌟 更好的 aria-* 属性支持。[react-component/menu#137](https://github.com/react-component/menu/pull/137) + - 🌟 更好的 aria-\* 属性支持。[react-component/menu#137](https://github.com/react-component/menu/pull/137) - 🌟 一些内部优化提升组件性能。[react-component/menu#133](https://github.com/react-component/menu/pull/133) - 🌟 支持将属性传递到菜单项中。[react-component/menu#135](https://github.com/react-component/menu/pull/135) - 🐞 修复一些快捷键的问题。[react-component/menu#132](https://github.com/react-component/menu/pull/132) - Collapse - - 🌟 更新 `rc-collapse` 到 1.9.0 优化键盘支持。[react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel) + - 🌟 更新 `rc-collapse` 到 1.9.0 优化键盘支持。[react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel) - 🌟 支持通过 less 定义组件 `Collapse` 的样式。[#9943](https://github.com/ant-design/ant-design/pull/9943) [@davidhatten](https://github.com/davidhatten) - Select - 🐞 修复 `placeholder` 的 ts 类型问题。[#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud) @@ -1358,7 +1383,7 @@ timeline: true - 🌟 新增 `defaultExpandParent` 用于在第一次渲染时自动展开父节点。 - 🌟 新增 `disabled` 用于禁用整棵树。 - 🌟 TreeNode 新增 `icon` 用于设置自定义图标。 - - 🌟 优化了 TreeNode 设置 `disabled` 时的勾选逻辑。 + - 🌟 优化了 TreeNode 设置 `disabled` 时的  勾选逻辑。 - 🌟 Anchor 新增 `getContainer` 用于指定内容滚动的容器。 - 🌟 Table 新增 less 变量 `@table-expanded-row-bg`。[#9789](https://github.com/ant-design/ant-design/pull/9789) - 🐞 修复一处 less 语法错误。[#9832](https://github.com/ant-design/ant-design/pull/9832) [@jojoLockLock](https://github.com/jojoLockLock) @@ -1405,17 +1430,17 @@ timeline: true - 🌟 `Calendar` 组件新增 `validRange` 属性，用于设置显示的时间范围。[71f65a0](https://github.com/ant-design/ant-design/commit/71f65a0be8e72a67f334c57e79ae3ff5fb640630) [@Rohanhacker](https://github.com/Rohanhacker) - 🌟 `Card` 组件新增 `defaultActiveTabKey` 属性，用于初始化选中面板的 key。[30fe88d](https://github.com/ant-design/ant-design/commit/30fe88d4bdcec765bf92ca32a755d9646b36978e) [@u3u](https://github.com/u3u) - `DatePicker` - - 🌟 新增 `dropdownClassName` 属性，用于设置弹出日历的 className。[#7211](https://github.com/ant-design/ant-design/issues/7211) - - 🐞 修复解析 `moment` 对象出错的问题。[#9539](https://github.com/ant-design/ant-design/pull/9539) - - 🐞 修复引入土耳其语 `tr_TR` 文件的问题。[#9373](https://github.com/ant-design/ant-design/issues/9373) + - 🌟 新增 `dropdownClassName` 属性，用于设置弹出日历的 className。[#7211](https://github.com/ant-design/ant-design/issues/7211) + - 🐞 修复解析 `moment` 对象出错的问题。[#9539](https://github.com/ant-design/ant-design/pull/9539) + - 🐞 修复引入土耳其语 `tr_TR` 文件的问题。[#9373](https://github.com/ant-design/ant-design/issues/9373) - 🌟 `Divider` 组件新增 `orientation` 属性，用于设置分割线内文本的对齐方式。[#9275](https://github.com/ant-design/ant-design/pull/9275) [@jrvboesch](https://github.com/jrvboesch) - 🌟 `Modal` 组件新增 `keyboard` 属性，用于设置按下 `Esc` 键是否可以关闭 `Modal`。[#8818](https://github.com/ant-design/ant-design/issues/8818) - 🌟 优化 `Radio` 和 `Checkbox` 组件 `onChange` 属性中的事件参数的 `TypeScript` 类型定义的问题。[#9574](https://github.com/ant-design/ant-design/issues/9574) - `Table` - - 🌟 新增 `pagination` 属性的配置项 `position`，用于设置分页的显示位置。[#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei) - - 🌟 新增 `rowSelection` 属性的配置项 `onSelect` 回调函数的事件参数。[#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei) - - 🌟 新增 `rowSelection` 属性的配置项 `columnWidth`，用于设置选择框的列宽。[#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend) - - 🐞 修复 `Table` 组件在 `Chrome` 下圆角边框样式的问题。[af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61) + - 🌟 新增 `pagination` 属性的配置项 `position`，用于设置分页的显示位置。[#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei) + - 🌟 新增 `rowSelection` 属性的配置项 `onSelect` 回调函数的事件参数。[#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei) + - 🌟 新增 `rowSelection` 属性的配置项 `columnWidth`，用于设置选择框的列宽。[#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend) + - 🐞 修复 `Table` 组件在 `Chrome` 下圆角边框样式的问题。[af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61) - 🌟 `Timeline` 组件新增 `pendingDot` 属性，用于设置幽灵节点的图标。[#9546](https://github.com/ant-design/ant-design/pull/9546) [@SimpleFrontend](https://github.com/SimpleFrontend) - 🌟 `TimePicker` 组件新增 `inputReadOnly` 属性，用于设置组件是否只读。[4a69446](https://github.com/ant-design/ant-design/commit/4a69446be155c1c176b18cb2c31459f999aa5d5e) [@JesperWe](https://github.com/JesperWe) - 🌟 `TreeSelect` 组件新增 `dropdownClassName` 属性。[69b154f](https://github.com/ant-design/ant-design/commit/69b154f9a9cfa5f2d89a82b6ed730d4d8793de73) [56e4ce0](https://github.com/ant-design/ant-design/commit/56e4ce099d950601538d72243563021e8083776b) @@ -1442,7 +1467,7 @@ timeline: true - 🌟 添加 `Pagination` 字体变量。[#9351](https://github.com/ant-design/ant-design/issues/9351) - 🌟 添加 `Badge` 字重变量。[#9352](https://github.com/ant-design/ant-design/issues/9352) -- 🐞 修复 `Table` 当自定义 `loading.indicator` 时，不显示emptyText。[#9355](https://github.com/ant-design/ant-design/issues/9355) +- 🐞 修复 `Table` 当自定义 `loading.indicator` 时，不显示 emptyText。[#9355](https://github.com/ant-design/ant-design/issues/9355) - 🐞 修复 `Form.create` 。[#9331](https://github.com/ant-design/ant-design/issues/9331) - 🐞 回滚 `Table` 中 `column.dataIndex` 的 TypeScript 定义。[#9393](https://github.com/ant-design/ant-design/issues/9393) - 🐞 修复 `Layout` 中 sider 高度不足时，最后一个菜单无法显示。[#9398](https://github.com/ant-design/ant-design/issues/9398) [@MJ111](https://github.com/MJ111) @@ -1499,7 +1524,6 @@ timeline: true - 🐞 修复 Tabs 在 card 模式且 tabPosition 是 `bottom` 时的样式问题。[#9165](https://github.com/ant-design/ant-design/pull/9165) [@ryanhoho](https://github.com/ryanhoho) - 🌟 新增库尔德语。 - ## 3.1.6 `2018-01-28` @@ -1521,7 +1545,7 @@ timeline: true - 补充 Notification 缺失的 `duration` 定义。[pull/9120](https://github.com/ant-design/ant-design/pull/9120) [@duhongjun](https://github.com/duhongjun) - 补充 Steps 缺失的 `style` 定义。[pull/9126](https://github.com/ant-design/ant-design/pull/9126) [@wanliyunyan](https://github.com/wanliyunyan) - 🌟 优化了 Avatar 的默认背景色。[commit/275946](https://github.com/ant-design/ant-design/commit/275946090823ab8da90f1871976c671b2c7ac851) -- 🌟 新增了 Slider 以及 Menu 的 less 变量，更加方便的修改主题。[pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray) +- 🌟 新增了 Slider 以及 Menu 的 less 变量，更加方便的修改主题。[pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray) ## 3.1.4 @@ -1584,7 +1608,7 @@ timeline: true `2017-12-29` -新年快乐！~ 2018年了，00后都成年了！少年赶紧提个 PR 给我们吧！~ +新年快乐！~ 2018 年了，00 后都成年了！少年赶紧提个 PR 给我们吧！~ - 🐞 修复组件 Spin 可能出现跳动的问题。[#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu) - 🐞 修复 Table 在设置 `size=small` 的情况下出现多余 padding 的问题。[#8724](https://github.com/ant-design/ant-design/issues/8724) @@ -1634,25 +1658,25 @@ timeline: true `2017-12-11` -* 移除 Card 无用 DOM wrapper，以和 2.x 保持一致。 -* 修复 `antd/lib/style/v2-compatible-reset.css` 缺失问题。[28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f) -* 修复 Affix 比浏览器可见区域还高时被截断的问题。[31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da) -* 修复 Collapse 展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12) -* 修复 Form 内大尺寸 Input、Button 的对齐问题。[#8459](https://github.com/ant-design/ant-design/issues/8459) -* Menu - * 修复弹层在 Safari 下消失的问题。[#8453](https://github.com/ant-design/ant-design/issues/8453) - * 修复展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12) -* 修复 Notification 样式编译错误。[#8437](https://github.com/ant-design/ant-design/issues/8437) -* 修复迷你 Pagination 的背景色问题。[e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5) -* Table - * 修复在移动端样式错乱的问题。[#8465](https://github.com/ant-design/ant-design/issues/8465) - * 修复嵌套表格与 size 属性共用时的样式问题。[#8525](https://github.com/ant-design/ant-design/issues/8525) -* TypeScript - * 修复 AutoComplete 的 TypeScript 定义。[#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag) - * 修复 Divider 的 TypeScript 定义。[#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu) - * 修复 Dropdown 的 TypeScript 定义。[#8444](https://github.com/ant-design/ant-design/issues/8444) - * 修复 List 的 TypeScript 定义。[e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692) - * 修复 Table 的 TypeScript 定义。[#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid) +- 移除 Card 无用 DOM wrapper，以和 2.x 保持一致。 +- 修复 `antd/lib/style/v2-compatible-reset.css` 缺失问题。[28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f) +- 修复 Affix 比浏览器可见区域还高时被截断的问题。[31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da) +- 修复 Collapse 展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12) +- 修复 Form 内大尺寸 Input、Button 的对齐问题。[#8459](https://github.com/ant-design/ant-design/issues/8459) +- Menu + - 修复弹层在 Safari 下消失的问题。[#8453](https://github.com/ant-design/ant-design/issues/8453) + - 修复展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12) +- 修复 Notification 样式编译错误。[#8437](https://github.com/ant-design/ant-design/issues/8437) +- 修复迷你 Pagination 的背景色问题。[e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5) +- Table + - 修复在移动端样式错乱的问题。[#8465](https://github.com/ant-design/ant-design/issues/8465) + - 修复嵌套表格与 size 属性共用时的样式问题。[#8525](https://github.com/ant-design/ant-design/issues/8525) +- TypeScript + - 修复 AutoComplete 的 TypeScript 定义。[#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag) + - 修复 Divider 的 TypeScript 定义。[#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu) + - 修复 Dropdown 的 TypeScript 定义。[#8444](https://github.com/ant-design/ant-design/issues/8444) + - 修复 List 的 TypeScript 定义。[e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692) + - 修复 Table 的 TypeScript 定义。[#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid) ## 3.0.0 @@ -1720,8 +1744,10 @@ timeline: true import zhCN from 'antd/lib/locale-provider/zh_CN'; ReactDOM.render( - , - document.getElementById('root') + + + , + document.getElementById('root'), ); ``` @@ -1780,7 +1806,9 @@ timeline: true - 🌟 新增 `hourStep`、`minuteStep`、`secondStep`，用于设置时间步长。[例子](https://ant.design/components/time-picker-cn/#components-time-picker-demo-interval-options) - 🌟 新增 `focusOnOpen`，用于设置在打开面板的时候是否聚焦输入框。 - Table + - 🌟 新增 `components` 属性，用于覆盖表格元素的默认标签。 + ```javascript // 支持覆盖的元素 const components = { @@ -1797,8 +1825,9 @@ timeline: true }, }; -
+
; ``` + - 🌟 新增 `onRow` 属性，用于设置表格列的属性。 - 🌟 新增 `onHeaderRow`，用户设置表格头部列的属性。 - 🌟 新增 `column[onCell]`，用户设置单元格的属性。 @@ -1809,17 +1838,20 @@ timeline: true - 🙅 废弃 `getBodyWrapper`，请使用 `components` 属性代替。 - 🙅 废弃以下属性 `onRowClick`，`onRowDoubleClick`、`onRowContextMenu`、`onRowMouseEnter`、`onRowMouseLeave`，请使用 `onRow` 代替。 ```javascript -
({ - onClick: () => {}, - onDoubleClick: () => {}, - onContextMenu: () => {}, - onMouseEnter: () => {}, - onMouseLeave: () => {}, - })} /> +
({ + onClick: () => {}, + onDoubleClick: () => {}, + onContextMenu: () => {}, + onMouseEnter: () => {}, + onMouseLeave: () => {}, + })} + /> ``` + - Select - 🌟 默认和多选模式下 Option 的值允许使用 number。 - - 🌟 新增 `maxTagCount 和 `maxTagPlaceholder`，用于设置最多可显示的选中项。 + - 🌟 新增 `maxTagCount` 和 `maxTagPlaceholder`，用于设置最多可显示的选中项。 - 🌟 新增 `showAction`，用于设置出发下拉框打开的事件。 - 🌟 新增 `onMouseEnter` 和 `onMouseLeave` 事件回调。 - LocaleProvider diff --git a/components/__tests__/util/domHook.js b/components/__tests__/util/domHook.js new file mode 100644 index 0000000000..1c920fb223 --- /dev/null +++ b/components/__tests__/util/domHook.js @@ -0,0 +1,54 @@ +export function spyElementPrototypes(Element, properties) { + const propNames = Object.keys(properties); + const originDescriptors = {}; + + propNames.forEach(propName => { + const originDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, propName); + originDescriptors[propName] = originDescriptor; + + const spyProp = properties[propName]; + + if (typeof spyProp === 'function') { + // If is a function + Element.prototype[propName] = function spyFunc(...args) { + return spyProp.call(this, originDescriptor, ...args); + }; + } else { + // Otherwise tread as a property + Object.defineProperty(Element.prototype, propName, { + ...spyProp, + set(value) { + if (spyProp.set) { + return spyProp.set.call(this, originDescriptor, value); + } + return originDescriptor.set(value); + }, + get() { + if (spyProp.get) { + return spyProp.get.call(this, originDescriptor); + } + return originDescriptor.get(); + }, + }); + } + }); + + return { + mockRestore() { + propNames.forEach(propName => { + const originDescriptor = originDescriptors[propName]; + if (typeof originDescriptor === 'function') { + Element.prototype[propName] = originDescriptor; + } else { + Object.defineProperty(Element.prototype, propName, originDescriptor); + } + }); + }, + }; +} + +export function spyElementPrototype(Element, propName, property) { + return spyElementPrototypes(Element, { + [propName]: property, + }); +} diff --git a/components/_util/motion.tsx b/components/_util/motion.tsx new file mode 100644 index 0000000000..9ac7a935bd --- /dev/null +++ b/components/_util/motion.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; + +type MotionFunc = (element: HTMLElement) => React.CSSProperties; + +interface Motion { + visible?: boolean; + motionName?: string; // It also support object, but we only use string here. + motionAppear?: boolean; + motionEnter?: boolean; + motionLeave?: boolean; + motionLeaveImmediately?: boolean; // Trigger leave motion immediately + removeOnLeave?: boolean; + leavedClassName?: string; + onAppearStart?: MotionFunc; + onAppearActive?: MotionFunc; + onAppearEnd?: MotionFunc; + onEnterStart?: MotionFunc; + onEnterActive?: MotionFunc; + onEnterEnd?: MotionFunc; + onLeaveStart?: MotionFunc; + onLeaveActive?: MotionFunc; + onLeaveEnd?: MotionFunc; +} + +// ================== Collapse Motion ================== +const getCollapsedHeight: MotionFunc = () => ({ height: 0, opacity: 0 }); +const getRealHeight: MotionFunc = node => ({ height: node.scrollHeight, opacity: 1 }); +const getCurrentHeight: MotionFunc = node => ({ height: node.offsetHeight }); + +export const collapseMotion: Motion = { + motionName: 'ant-motion-collapse', + onAppearStart: getCollapsedHeight, + onEnterStart: getCollapsedHeight, + onAppearActive: getRealHeight, + onEnterActive: getRealHeight, + onLeaveStart: getCurrentHeight, + onLeaveActive: getCollapsedHeight, +}; diff --git a/components/_util/openAnimation.tsx b/components/_util/openAnimation.tsx index c73fda1e3e..d5d3f4b862 100644 --- a/components/_util/openAnimation.tsx +++ b/components/_util/openAnimation.tsx @@ -1,10 +1,14 @@ +/** + * Deprecated. We should replace the animation with pure react motion instead of modify style directly. + * If you are creating new component with animation, please use `./motion`. + */ import cssAnimation from 'css-animation'; import raf from 'raf'; function animate(node: HTMLElement, show: boolean, done: () => void) { let height: number; let requestAnimationFrameId: number; - return cssAnimation(node, 'ant-motion-collapse', { + return cssAnimation(node, 'ant-motion-collapse-legacy', { start() { if (!show) { node.style.height = `${node.offsetHeight}px`; diff --git a/components/affix/style/index.less b/components/affix/style/index.less index 9f19860e55..3762903fcc 100644 --- a/components/affix/style/index.less +++ b/components/affix/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; .@{ant-prefix}-affix { position: fixed; diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 28638faef5..31deb23d93 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @alert-prefix-cls: ~'@{ant-prefix}-alert'; diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 9307fb2cbd..ce82041718 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @anchor-border-width: 2px; diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less index 2527ba383c..6187de2c74 100644 --- a/components/auto-complete/style/index.less +++ b/components/auto-complete/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less index 53af3b6aac..f2c22c0376 100644 --- a/components/avatar/style/index.less +++ b/components/avatar/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @avatar-prefix-cls: ~'@{ant-prefix}-avatar'; diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less index 9c6e06c983..7318a74976 100644 --- a/components/back-top/style/index.less +++ b/components/back-top/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @backtop-prefix-cls: ~'@{ant-prefix}-back-top'; diff --git a/components/badge/style/index.less b/components/badge/style/index.less index cb3a36e18f..d638e0a15b 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @badge-prefix-cls: ~'@{ant-prefix}-badge'; diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index e47de7ec64..2748804a4a 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -3,12 +3,15 @@ import * as PropTypes from 'prop-types'; import { cloneElement } from 'react'; import classNames from 'classnames'; import BreadcrumbItem from './BreadcrumbItem'; +import Menu from '../menu'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import warning from '../_util/warning'; +import { Omit } from '../_util/type'; export interface Route { path: string; breadcrumbName: string; + children: Omit[]; } export interface BreadcrumbProps { @@ -69,7 +72,44 @@ export default class Breadcrumb extends React.Component { 'see: https://u.ant.design/item-render.', ); } + genForRoutes = ({ + routes = [], + params = {}, + separator, + itemRender = defaultItemRender, + }: BreadcrumbProps) => { + const paths: string[] = []; + return routes.map(route => { + route.path = route.path || ''; + let path = route.path.replace(/^\//, ''); + Object.keys(params).forEach(key => { + path = path.replace(`:${key}`, params[key]); + }); + + if (path) { + paths.push(path); + } + // generated overlay by route.children + let overlay = null; + if (route.children && route.children.length) { + overlay = ( + + {route.children.map(child => ( + + {itemRender(child, params, routes, paths)} + + ))} + + ); + } + return ( + + {itemRender(route, params, routes, paths)} + + ); + }); + }; renderBreadcrumb = ({ getPrefixCls }: ConfigConsumerProps) => { let crumbs; const { @@ -78,28 +118,12 @@ export default class Breadcrumb extends React.Component { style, className, routes, - params = {}, children, - itemRender = defaultItemRender, } = this.props; const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); if (routes && routes.length > 0) { - const paths: string[] = []; - crumbs = routes.map(route => { - route.path = route.path || ''; - let path: string = route.path.replace(/^\//, ''); - Object.keys(params).forEach(key => { - path = path.replace(`:${key}`, params[key]); - }); - if (path) { - paths.push(path); - } - return ( - - {itemRender(route, params, routes, paths)} - - ); - }); + // generated by route + crumbs = this.genForRoutes(this.props); } else if (children) { crumbs = React.Children.map(children, (element: any, index) => { if (!element) { diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 31f6e2ecd9..851f92199e 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -1,11 +1,14 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; +import DropDown, { DropDownProps } from '../dropdown/dropdown'; +import Icon from '../icon'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface BreadcrumbItemProps { prefixCls?: string; separator?: React.ReactNode; href?: string; + overlay?: DropDownProps['overlay']; onClick?: React.MouseEventHandler; } @@ -23,7 +26,13 @@ export default class BreadcrumbItem extends React.Component { - const { prefixCls: customizePrefixCls, separator, children, ...restProps } = this.props; + const { + prefixCls: customizePrefixCls, + separator, + children, + overlay, + ...restProps + } = this.props; const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); let link; if ('href' in this.props) { @@ -39,6 +48,9 @@ export default class BreadcrumbItem extends React.Component ); } + + // wrap to dropDown + link = this.renderBreadcrumbNode(link, prefixCls); if (children) { return ( @@ -50,6 +62,24 @@ export default class BreadcrumbItem extends React.Component { + const { overlay } = this.props; + if (overlay) { + return ( + + + {breadcrumbItem} + + + + ); + } + return breadcrumbItem; + }; render() { return {this.renderBreadcrumbItem}; } diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.js b/components/breadcrumb/__tests__/Breadcrumb.test.js index 0a3bd98673..6c62a4c051 100644 --- a/components/breadcrumb/__tests__/Breadcrumb.test.js +++ b/components/breadcrumb/__tests__/Breadcrumb.test.js @@ -51,4 +51,37 @@ describe('Breadcrumb', () => { ); expect(wrapper).toMatchSnapshot(); }); + + it('should render a menu', () => { + const routes = [ + { + path: 'index', + breadcrumbName: 'home', + }, + { + path: 'first', + breadcrumbName: 'first', + children: [ + { + path: '/general', + breadcrumbName: 'General', + }, + { + path: '/layout', + breadcrumbName: 'Layout', + }, + { + path: '/navigation', + breadcrumbName: 'Navigation', + }, + ], + }, + { + path: 'second', + breadcrumbName: 'second', + }, + ]; + const wrapper = render(); + expect(wrapper).toMatchSnapshot(); + }); }); diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap index ce3098a1af..1f82c45588 100644 --- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap +++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap @@ -49,3 +49,78 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals `; + +exports[`Breadcrumb should render a menu 1`] = ` +
+ + + + home + + + + / + + + + + + + + first + + + + + + + / + + + + + second + + + + / + + +
+`; diff --git a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap index 3bedf383d1..ee3c6fbe74 100644 --- a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap +++ b/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap @@ -63,6 +63,93 @@ exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = ` `; +exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = ` +
+
+ + + Ant Design + + + / + + + + + + Component + + + + / + + + + + + + + General + + + + + + + / + + + + Button + + + / + + +
+
+`; + exports[`renders ./components/breadcrumb/demo/router.md correctly 1`] = `
@@ -101,6 +102,7 @@ exports[`react router react router 3 1`] = ` @@ -122,6 +124,7 @@ exports[`react router react router 3 1`] = ` @@ -143,6 +146,7 @@ exports[`react router react router 3 1`] = ` diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md index b1be883989..37d777fa01 100644 --- a/components/breadcrumb/demo/basic.md +++ b/components/breadcrumb/demo/basic.md @@ -13,16 +13,20 @@ title: The simplest use -````jsx +```jsx import { Breadcrumb } from 'antd'; ReactDOM.render( Home - Application Center - Application List + + Application Center + + + Application List + An Application , - mountNode + mountNode, ); -```` +``` diff --git a/components/breadcrumb/demo/overlay.md b/components/breadcrumb/demo/overlay.md new file mode 100644 index 0000000000..0789262d9b --- /dev/null +++ b/components/breadcrumb/demo/overlay.md @@ -0,0 +1,54 @@ +--- +order: 5 +title: + zh-CN: 带下拉菜单的面包屑 + en-US: Bread crumbs with drop down menu +--- + +## zh-CN + +面包屑支持下拉菜单。 + +## en-US + +Breadcrumbs support drop down menu. + +```jsx +import { Breadcrumb, Menu } from 'antd'; + +const menu = ( + + + + General + + + + + Layout + + + + + Navigation + + + +); + +ReactDOM.render( +
+ + Ant Design + + Component + + + General + + Button + +
, + mountNode, +); +``` diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md index 83c24fc670..d2278fd476 100644 --- a/components/breadcrumb/demo/router.md +++ b/components/breadcrumb/demo/router.md @@ -15,10 +15,8 @@ title: Used together with `react-router@2` `react-router@3`. -````jsx -import { - Router, Route, Link, hashHistory, -} from 'react-router'; +```jsx +import { Router, Route, Link, hashHistory } from 'react-router'; import { Breadcrumb, Alert } from 'antd'; const Apps = () => ( @@ -54,11 +52,11 @@ ReactDOM.render( , - mountNode + mountNode, ); -```` +``` -````css +```css .demo { margin: 16px; } @@ -75,4 +73,4 @@ ReactDOM.render( .app-list { margin-top: 16px; } -```` +``` diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md index ef434f5101..fe204edbf9 100644 --- a/components/breadcrumb/index.en-US.md +++ b/components/breadcrumb/index.en-US.md @@ -16,10 +16,10 @@ A breadcrumb displays the current location within a hierarchy. It allows going b ## API | Property | Description | Type | Optional | Default | -| -------- | ----------- | ---- | -------- | ------- | +| --- | --- | --- | --- | --- | | itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - | | params | Routing parameters | object | | - | -| routes | The routing stack information of router | object\[] | | - | +| routes | The routing stack information of router | [routes\[\]](#routes) | | - | | separator | Custom separator | string\|ReactNode | | `/` | ### Use with browserHistory @@ -29,19 +29,41 @@ The link of Breadcrumb item targets `#` by default, you can use `itemRender` to ```jsx import { Link } from 'react-router'; -const routes = [{ - path: 'index', -  breadcrumbName: 'home' -}, { - path: 'first', - breadcrumbName: 'first' -}, { - path: 'second', - breadcrumbName: 'second' -}]; +const routes = [ + { + path: 'index', + breadcrumbName: 'home', + }, + { + path: 'first', + breadcrumbName: 'first', + children: [ + { + path: '/general', + breadcrumbName: 'General', + }, + { + path: '/layout', + breadcrumbName: 'Layout', + }, + { + path: '/navigation', + breadcrumbName: 'Navigation', + }, + ], + }, + { + path: 'second', + breadcrumbName: 'second', + }, +]; function itemRender(route, params, routes, paths) { const last = routes.indexOf(route) === routes.length - 1; - return last ? {route.breadcrumbName} : {route.breadcrumbName}; + return last ? ( + {route.breadcrumbName} + ) : ( + {route.breadcrumbName} + ); } return ; diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index ad4069089c..edfe7805f6 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -15,12 +15,36 @@ title: Breadcrumb ## API -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| --- | --- | --- | --- | --- | -| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | | - | -| params | 路由的参数 | object | | - | -| routes | router 的路由栈信息 | object\[] | | - | -| separator | 分隔符自定义 | string\|ReactNode | | '/' | +### Breadcrumb + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | +| params | 路由的参数 | object | - | +| routes | router 的路由栈信息 | [routes\[\]](#routes) | - | +| separator | 分隔符自定义 | string\|ReactNode | '/' | + +### Breadcrumb.Item + +| 参数 | 参数 | 类型 | 默认值 | +| --------- | -------------- | -------------------------------------- | ------ | +| href | 链接的目的地 | string | - | +| separator | 自定义的分隔符 | string\|ReactNode | '/' | +| overlay | 下来菜单的内容 | [Menu](/components/menu) \| () => Menu | - | +| onClick | 单击事件 | (e:MouseEventHandler)=>void | - | + +### routes + +```ts +interface Route { + path: string; + breadcrumbName: string; + children: Array<{ + path: string; + breadcrumbName: string; + }>; +} +``` ### 和 browserHistory 配合 @@ -29,20 +53,43 @@ title: Breadcrumb ```jsx import { Link } from 'react-router'; -const routes = [{ - path: 'index', - breadcrumbName: '首页' -}, { - path: 'first', - breadcrumbName: '一级面包屑' -}, { - path: 'second', - breadcrumbName: '当前页面' -}]; +const routes = [ + { + path: 'index', + breadcrumbName: 'home', + }, + { + path: 'first', + breadcrumbName: 'first', + children: [ + { + path: '/general', + breadcrumbName: 'General', + }, + { + path: '/layout', + breadcrumbName: 'Layout', + }, + { + path: '/navigation', + breadcrumbName: 'Navigation', + }, + ], + }, + { + path: 'second', + breadcrumbName: 'second', + }, +]; + function itemRender(route, params, routes, paths) { const last = routes.indexOf(route) === routes.length - 1; - return last ? {route.breadcrumbName} : {route.breadcrumbName}; + return last ? ( + {route.breadcrumbName} + ) : ( + {route.breadcrumbName} + ); } -return ; +return ; ``` diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index f51b42b99c..606103584b 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb'; @@ -39,4 +39,10 @@ margin-left: 4px; } } + + &-overlay-link { + > .@{iconfont-css-prefix} { + margin-left: 4px; + } + } } diff --git a/components/breadcrumb/style/index.tsx b/components/breadcrumb/style/index.tsx index 3a3ab0de59..165d103fdb 100644 --- a/components/breadcrumb/style/index.tsx +++ b/components/breadcrumb/style/index.tsx @@ -1,2 +1,5 @@ import '../../style/index.less'; import './index.less'; + +import '../../menu/style'; +import '../../dropdown/style'; diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap index 711b95dd1d..0bbbd84d0c 100644 --- a/components/button/__tests__/__snapshots__/demo.test.js.snap +++ b/components/button/__tests__/__snapshots__/demo.test.js.snap @@ -34,6 +34,14 @@ exports[`renders ./components/button/demo/basic.md correctly 1`] = ` Danger +
`; @@ -68,7 +76,15 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = ` type="button" > - danger + Danger + + + @@ -332,6 +348,24 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = ` Dashed(disabled) +
+ +
@@ -392,6 +426,14 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = ` danger +
`; @@ -895,6 +937,14 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = ` Danger +
- + const buttonNode = ( + ); + + if (type === 'link') { + return buttonNode; + } + + return {buttonNode}; }; render() { diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md index 720a4449de..882ebc1fcc 100644 --- a/components/button/demo/basic.md +++ b/components/button/demo/basic.md @@ -22,6 +22,7 @@ ReactDOM.render( + , mountNode ); diff --git a/components/button/demo/block.md b/components/button/demo/block.md index b0b3bc4092..2abd5964b9 100644 --- a/components/button/demo/block.md +++ b/components/button/demo/block.md @@ -21,7 +21,8 @@ ReactDOM.render( - + + , mountNode ); diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md index fd10e8b575..5ef561249b 100644 --- a/components/button/demo/disabled.md +++ b/components/button/demo/disabled.md @@ -26,6 +26,9 @@ ReactDOM.render(
+
+ +
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md index 9857d8a649..91031726fd 100644 --- a/components/button/demo/ghost.md +++ b/components/button/demo/ghost.md @@ -22,6 +22,7 @@ ReactDOM.render( +
, mountNode ); diff --git a/components/button/demo/size.md b/components/button/demo/size.md index c3f69954e6..aabe1fa642 100644 --- a/components/button/demo/size.md +++ b/components/button/demo/size.md @@ -43,6 +43,7 @@ class ButtonSize extends React.Component { +
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 62be66992c..f7ca88e451 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -25,7 +25,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`. | shape | can be set to `circle`, `round` or omitted | string | - | | size | can be set to `small` `large` or omitted | string | `default` | | target | same as target attribute of a, works when href is specified | string | - | -| type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` | +| type | can be set to `primary` `ghost` `dashed` `danger` `link`(added in 3.17) or omitted (meaning `default`) | string | `default` | | onClick | set the handler to handle `click` event | (event) => void | - | | block | option to fit button width to its parent width | boolean | `false` | diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 510d8ba5d5..5d470dc9cf 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -18,7 +18,7 @@ subtitle: 按钮 按钮的属性说明如下： | 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | disabled | 按钮失效状态 | boolean | `false` | | ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false | | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | @@ -28,7 +28,7 @@ subtitle: 按钮 | shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - | | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` | | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | -| type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | - | +| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link`(3.17 中增加) 或者不设 | string | - | | onClick | 点击按钮时的回调 | (event) => void | - | | block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` | diff --git a/components/button/style/index.less b/components/button/style/index.less index 2528f4f49b..74ca43b9ec 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @import './mixin'; @@ -69,6 +69,10 @@ .btn-danger; } + &-link { + .btn-link; + } + &-round { .btn-round(@btn-prefix-cls); } @@ -165,6 +169,12 @@ .button-variant-ghost(@btn-danger-color); } + &-background-ghost&-link { + .button-variant-ghost(@link-color; transparent); + + color: @component-background; + } + &-two-chinese-chars::first-letter { letter-spacing: 0.34em; } diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 76669445ee..934cf701eb 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -7,7 +7,7 @@ border-radius: @border-radius; } -.button-disabled() { +.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) { &-disabled, &.disabled, &[disabled] { @@ -16,7 +16,7 @@ &:focus, &:active, &.active { - .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border); + .button-color(@color; @background; @border); text-shadow: none; box-shadow: none; @@ -86,17 +86,27 @@ } .button-disabled(); } -.button-variant-ghost(@color) { - .button-color(@color; transparent; @color); +.button-variant-ghost(@color; @border: @color) { + .button-color(@color; transparent; @border); text-shadow: none; &:hover, &:focus { - .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); + & when (@border = transparent) { + .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent); + } + & when not(@border = transparent) { + .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); + } } &:active, &.active { - .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); + & when (@border = transparent) { + .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent); + } + & when not(@border = transparent) { + .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); + } } .button-disabled(); } @@ -226,6 +236,18 @@ .btn-danger() { .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border); } +// link button style +.btn-link() { + .button-variant-other(@link-color, transparent, transparent); + + box-shadow: none; + &:hover, + &:focus, + &:active { + border-color: transparent; + } + .button-disabled(@disabled-color; transparent; transparent); +} // round button .btn-round(@btnClassName: btn) { .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base + 2px; @btn-circle-size); diff --git a/components/calendar/locale/hr_HR.tsx b/components/calendar/locale/hr_HR.tsx new file mode 100644 index 0000000000..6f1f6da149 --- /dev/null +++ b/components/calendar/locale/hr_HR.tsx @@ -0,0 +1,2 @@ +import hr_HR from '../../date-picker/locale/hr_HR'; +export default hr_HR; diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index 83d0830b95..32b1c05784 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar'; diff --git a/components/card/style/index.less b/components/card/style/index.less index 037e5dd95e..b23e8fc3ea 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @card-prefix-cls: ~'@{ant-prefix}-card'; diff --git a/components/carousel/__tests__/__snapshots__/demo.test.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.js.snap index 9100c336bc..6e1c1b550a 100644 --- a/components/carousel/__tests__/__snapshots__/demo.test.js.snap +++ b/components/carousel/__tests__/__snapshots__/demo.test.js.snap @@ -180,7 +180,7 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
      • `; -exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = ` -
        +exports[`renders ./components/carousel/demo/position.md correctly 1`] = ` +
        + + + + +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      + `; diff --git a/components/carousel/__tests__/__snapshots__/index.test.js.snap b/components/carousel/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..174e06d5f2 --- /dev/null +++ b/components/carousel/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,137 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Carousel should works for dotPosition bottom 1`] = ` +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +`; + +exports[`Carousel should works for dotPosition left 1`] = ` +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +`; + +exports[`Carousel should works for dotPosition right 1`] = ` +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +`; + +exports[`Carousel should works for dotPosition top 1`] = ` +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +`; diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js index b7d762e942..8718220d87 100644 --- a/components/carousel/__tests__/index.test.js +++ b/components/carousel/__tests__/index.test.js @@ -78,4 +78,31 @@ describe('Carousel', () => { expect(spy).toHaveBeenCalled(); expect(spy2).toHaveBeenCalledWith('resize', onWindowResized); }); + + describe('should works for dotPosition', () => { + ['left', 'right', 'top', 'bottom'].forEach(dotPosition => { + it(dotPosition, () => { + const wrapper = mount( + +
      + , + ); + jest.runAllTimers(); + expect(wrapper.render()).toMatchSnapshot(); + }); + }); + }); + + it('warning', () => { + const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + mount( + +
      + , + ); + expect(warnSpy).toHaveBeenCalledWith( + 'Warning: [antd: Carousel] `vertical` is deprecated, please use `dotPosition` instead.', + ); + warnSpy.mockRestore(); + }); }); diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md index 7e8512a290..16a0732f1a 100644 --- a/components/carousel/demo/fade.md +++ b/components/carousel/demo/fade.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 3 title: zh-CN: 渐显 en-US: Fade in diff --git a/components/carousel/demo/position.md b/components/carousel/demo/position.md new file mode 100644 index 0000000000..3c29229411 --- /dev/null +++ b/components/carousel/demo/position.md @@ -0,0 +1,63 @@ +--- +order: 2 +title: + zh-CN: 位置 + en-US: Position +--- + +## zh-CN + +位置有 4 个方向。 + +## en-US + +There are 4 position options available. + +````jsx +import { Carousel, Radio } from 'antd'; + +class PositionCarouselDemo extends React.Component { + state = { + dotPosition: 'top', + }; + + handlePositionChange = ({ target: { value: dotPosition } }) => this.setState({ dotPosition }); + + render() { + const { dotPosition } = this.state; + return ( +
      + + Top + Bottom + Left + Right + + +

      1

      +

      2

      +

      3

      +

      4

      +       +
      + ); + } +} + +ReactDOM.render(, mountNode); +```` + +````css +/* For demo */ +.ant-carousel .slick-slide { + text-align: center; + height: 160px; + line-height: 160px; + background: #364d79; + overflow: hidden; +} + +.ant-carousel .slick-slide h3 { + color: #fff; +} +```` diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md deleted file mode 100644 index 97c271cc4e..0000000000 --- a/components/carousel/demo/vertical.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -order: 1 -title: - zh-CN: 垂直 - en-US: Vertical ---- - -## zh-CN - -垂直显示。 - -## en-US - -Vertical pagination. - -````jsx -import { Carousel } from 'antd'; - -ReactDOM.render( - -

      1

      -

      2

      -

      3

      -

      4

      -       , - mountNode -); -```` - -````css -/* For demo */ -.ant-carousel .slick-slide { - text-align: center; - height: 160px; - line-height: 160px; - background: #364d79; - overflow: hidden; -} - -.ant-carousel .slick-slide h3 { - color: #fff; -} -```` diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index bc8ff3b5f6..b2a7c9f908 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -14,15 +14,15 @@ A carousel component. Scales with its container. ## API -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| afterChange | Callback function called after the current index changes | function(current) | - | -| autoplay | Whether to scroll automatically | boolean | `false` | -| beforeChange | Callback function called before the current index changes | function(from, to) | - | -| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | -| easing | Transition interpolation function name | string | `linear` | -| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | -| vertical | Whether to use a vertical display | boolean | `false` | +| Property | Description | Type | Default | Version | +| -------- | ----------- | ---- | ------- | ------- | +| afterChange | Callback function called after the current index changes | function(current) | - | | +| autoplay | Whether to scroll automatically | boolean | `false` | | +| beforeChange | Callback function called before the current index changes | function(from, to) | - | | +| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | 3.17.0 | +| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | | +| easing | Transition interpolation function name | string | `linear` | | +| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | | ## Methods diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index 611635f79d..ec13eb540b 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import debounce from 'lodash/debounce'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { Settings } from 'react-slick'; +import warning from '../_util/warning'; // matchMedia polyfill for // https://github.com/WickyNilliams/enquire.js/issues/82 @@ -23,12 +24,15 @@ if (typeof window !== 'undefined') { const SlickCarousel = require('react-slick').default; export type CarouselEffect = 'scrollx' | 'fade'; +export type DotPosition = 'top' | 'bottom' | 'left' | 'right'; + // Carousel export interface CarouselProps extends Settings { effect?: CarouselEffect; style?: React.CSSProperties; prefixCls?: string; slickGoTo?: number; + dotPosition?: DotPosition; } export default class Carousel extends React.Component { @@ -47,6 +51,14 @@ export default class Carousel extends React.Component { this.onWindowResized = debounce(this.onWindowResized, 500, { leading: false, }); + + if ('vertical' in this.props) { + warning( + !this.props.vertical, + 'Carousel', + '`vertical` is deprecated, please use `dotPosition` instead.', + ); + } } componentDidMount() { @@ -90,6 +102,15 @@ export default class Carousel extends React.Component { this.slick.slickGoTo(slide, dontAnimate); } + getDotPosition(): DotPosition { + if (this.props.dotPosition) { + return this.props.dotPosition; + } else if ('vertical' in this.props) { + return this.props.vertical ? 'right' : 'bottom'; + } + return 'bottom'; + } + renderCarousel = ({ getPrefixCls }: ConfigConsumerProps) => { const props = { ...this.props, @@ -100,6 +121,10 @@ export default class Carousel extends React.Component { } let className = getPrefixCls('carousel', props.prefixCls); + const dotsClass = 'slick-dots'; + const dotPosition = this.getDotPosition(); + props.vertical = dotPosition === 'left' || dotPosition === 'right'; + props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`; if (props.vertical) { className = `${className} ${className}-vertical`; } diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 3e90a55435..bff47d63a4 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -15,15 +15,15 @@ subtitle: 走马灯 ## API -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| afterChange | 切换面板的回调 | function(current) | 无 | -| autoplay | 是否自动切换 | boolean | false | -| beforeChange | 切换面板的回调 | function(from, to) | 无 | -| dots | 是否显示面板指示点 | boolean | true | -| easing | 动画效果 | string | linear | -| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | -| vertical | 垂直显示 | boolean | false | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| afterChange | 切换面板的回调 | function(current) | 无 | | +| autoplay | 是否自动切换 | boolean | false | | +| beforeChange | 切换面板的回调 | function(from, to) | 无 | | +| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | 3.17.0 | +| dots | 是否显示面板指示点 | boolean | true | | +| easing | 动画效果 | string | linear | | +| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | | ## 方法 diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index ddb3c4b893..a8376fd25d 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; .@{ant-prefix}-carousel { @@ -146,7 +146,6 @@ // Dots .slick-dots { position: absolute; - bottom: 12px; display: block; width: 100%; height: @carousel-dot-height; @@ -154,6 +153,12 @@ padding: 0; text-align: center; list-style: none; + &-bottom { + bottom: 12px; + } + &-top { + top: 12px; + } li { position: relative; display: inline-block; @@ -196,11 +201,16 @@ .@{ant-prefix}-carousel-vertical { .slick-dots { top: 50%; - right: 12px; bottom: auto; width: @carousel-dot-height; height: auto; transform: translateY(-50%); + &-left { + left: 12px; + } + &-right { + right: 12px; + } li { margin: 0 2px; vertical-align: baseline; diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index a078e03669..b2f3733602 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less index 2d669f4f72..3f50d58973 100644 --- a/components/checkbox/style/index.less +++ b/components/checkbox/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import './mixin'; .antCheckboxFn(); diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index d6dd3cfd6e..fc8418fcaf 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -6,6 +6,8 @@ import Icon from '../icon'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import animation from '../_util/openAnimation'; +export type ExpandIconPosition = 'left' | 'right'; + export interface CollapseProps { activeKey?: Array | string; defaultActiveKey?: Array; @@ -18,6 +20,7 @@ export interface CollapseProps { bordered?: boolean; prefixCls?: string; expandIcon?: (panelProps: any) => React.ReactNode; + expandIconPosition?: ExpandIconPosition; } interface PanelProps { @@ -37,6 +40,7 @@ export default class Collapse extends React.Component { static defaultProps = { bordered: true, openAnimation: { ...animation, appear() {} }, + expandIconPosition: 'left', }; renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => { @@ -54,11 +58,17 @@ export default class Collapse extends React.Component { }; renderCollapse = ({ getPrefixCls }: ConfigConsumerProps) => { - const { prefixCls: customizePrefixCls, className = '', bordered } = this.props; + const { + prefixCls: customizePrefixCls, + className = '', + bordered, + expandIconPosition, + } = this.props; const prefixCls = getPrefixCls('collapse', customizePrefixCls); const collapseClassName = classNames( { [`${prefixCls}-borderless`]: !bordered, + [`${prefixCls}-icon-position-${expandIconPosition}`]: true, }, className, ); diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap index 3b86cd3636..31a5ebdd19 100644 --- a/components/collapse/__tests__/__snapshots__/demo.test.js.snap +++ b/components/collapse/__tests__/__snapshots__/demo.test.js.snap @@ -2,7 +2,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
      +
      - - - - This is panel header 1
      + This is panel header 1 +
      + + + +
      -
      -
      -
      - +
      +
      + A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world. +
      -
      -
      +
      +
      +
      + Expand Icon Position:
      +
      @@ -640,7 +695,7 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = ` exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
      ( /> ); -ReactDOM.render( - - -
      {text}
      -       - -
      {text}
      -       - -
      {text}
      -       -       , - mountNode -); +class Demo extends React.Component { + state = { + expandIconPosition: 'left', + }; + + onPositionChange = (expandIconPosition) => { + this.setState({ expandIconPosition }); + }; + + render() { + const { expandIconPosition } = this.state; + return ( +
      + + +
      {text}
      +       + +
      {text}
      +       + +
      {text}
      +       +       + +
      + Expand Icon Position: + {' '} + +
      + ); + } +} + +ReactDOM.render(, mountNode); ```` diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index 7b671d7f2b..31e92225de 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -16,15 +16,16 @@ A content area which can be collapsed and expanded. ### Collapse -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. | -| defaultActiveKey | Key of the initial active panel | string | - | -| bordered | Toggles rendering of the border around the collapse block | boolean | `true` | -| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | -| onChange | Callback function executed when active panel is changed | Function | - | -| expandIcon | allow to customize collapse icon | (panelProps) => ReactNode | - | -| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | +| Property | Description | Type | Default | Version | +| -------- | ----------- | ---- | ------- | ------- | +| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. | | +| defaultActiveKey | Key of the initial active panel | string | - | | +| bordered | Toggles rendering of the border around the collapse block | boolean | `true` | | +| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | | +| onChange | Callback function executed when active panel is changed | Function | - | | +| expandIcon | allow to customize collapse icon | (panelProps) => ReactNode | - | | +| expandIconPosition | Set expand icon position: `left`, `right` | `left` | - | 3.17.0 | +| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | | ### Collapse.Panel @@ -36,9 +37,3 @@ A content area which can be collapsed and expanded. | key | Unique key identifying the panel from among its siblings | string | - | | showArrow | If `false`, panel will not show arrow icon | boolean | `true` | | extra | extra element in the corner | ReactNode | - | - -## FAQ - -### How to let the arrow to be on the right? - -You can adjust style of the arrow: diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index d37ae30bf9..3893850527 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -17,15 +17,16 @@ cols: 1 ### Collapse -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 | -| defaultActiveKey | 初始化选中面板的 key | string | 无 | -| bordered | 带边框风格的折叠面板 | boolean | `true` | -| accordion | 手风琴模式 | boolean | `false` | -| onChange | 切换面板的回调 | Function | 无 | -| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | -| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 | | +| defaultActiveKey | 初始化选中面板的 key | string | 无 | | +| bordered | 带边框风格的折叠面板 | boolean | `true` | | +| accordion | 手风琴模式 | boolean | `false` | | +| onChange | 切换面板的回调 | Function | 无 | | +| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | | +| expandIconPosition | 设置图标位置： `left`, `right` | `left` | - | 3.17.0 | +| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | | ### Collapse.Panel @@ -37,9 +38,3 @@ cols: 1 | key | 对应 activeKey | string | 无 | | showArrow | 是否展示当前面板上的箭头 | boolean | `true` | | extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | - -## FAQ - -### 我希望箭头在右边，怎么做？ - -通过样式调整，将箭头放到右边就行啦： diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index d4cefd3308..93791bfba3 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @collapse-prefix-cls: ~'@{ant-prefix}-collapse'; @@ -24,6 +24,7 @@ > .@{collapse-prefix-cls}-header { position: relative; padding: @collapse-header-padding; + padding-left: @collapse-header-padding-extra; color: @heading-color; line-height: 22px; cursor: pointer; @@ -62,6 +63,21 @@ } } + // Expand Icon right + &-icon-position-right { + & > .@{collapse-prefix-cls}-item { + > .@{collapse-prefix-cls}-header { + padding: @collapse-header-padding; + padding-right: @collapse-header-padding-extra; + + .@{collapse-prefix-cls}-arrow { + right: @padding-md; + left: initial; + } + } + } + } + &-anim-active { transition: height 0.2s @ease-out; } diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap index 874479e041..b006039407 100644 --- a/components/comment/__tests__/__snapshots__/demo.test.js.snap +++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap @@ -216,108 +216,116 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
      -
      -
      -
      - -
      +
    • - - Han Solo - - +
      +
      - - a day ago - - -
      -
      -

      - We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -

      +
      + + Han Solo + + + + a day ago + + +
      +
      +

      + We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +

      +
      +
        +
      • + + Reply to + +
        • +
      +
      -
        -
      • - - Reply to - -
        • -
      - - - -
      -
      -
      -
      +
      • +
    • - - Han Solo - - +
      +
      - - 2 days ago - - -
      -
      -

      - We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -

      +
      + + Han Solo + + + + 2 days ago + + +
      +
      +

      + We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +

      +
      +
        +
      • + + Reply to + +
        • +
      +
      -
        -
      • - - Reply to - -
        • -
      - - +
      • +
    diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md index 0e3e2e0911..d1aa9a2c10 100644 --- a/components/comment/demo/list.md +++ b/components/comment/demo/list.md @@ -53,13 +53,15 @@ ReactDOM.render( itemLayout="horizontal" dataSource={data} renderItem={item => ( - +
  • + +
    • )} />, mountNode, diff --git a/components/comment/style/index.less b/components/comment/style/index.less index 573308f1b3..78548a27ab 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @comment-prefix-cls: ~'@{ant-prefix}-comment'; diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index ef42dfc440..43345ed61c 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -5517,7 +5517,7 @@ exports[`ConfigProvider components Carousel configProvider 1`] = `
        • +
          • +
        @@ -7714,39 +7718,43 @@ exports[`ConfigProvider components List normal 1`] = `
        -
        -
        - - - -
        -
        -

        - Ant Design -

        + + + +
        - Ant Design, a design language for background applications, is refined by Ant UED Team +

        + Ant Design +

        +
        + Ant Design, a design language for background applications, is refined by Ant UED Team +
        -
        -
        +
        • +
      @@ -7762,39 +7770,43 @@ exports[`ConfigProvider components List prefixCls 1`] = `
      -
      -
      - - - -
      -
      -

      - Ant Design -

      + + + +
      - Ant Design, a design language for background applications, is refined by Ant UED Team +

      + Ant Design +

      +
      + Ant Design, a design language for background applications, is refined by Ant UED Team +
      -
      -
      +
      • +
    diff --git a/components/config-provider/style/index.less b/components/config-provider/style/index.less index df1dee5e0a..eaf3a7d1ee 100644 --- a/components/config-provider/style/index.less +++ b/components/config-provider/style/index.less @@ -1,2 +1,2 @@ // placeholder -@import '../../style/themes/default'; +@import '../../style/themes/index'; diff --git a/components/date-picker/locale/hr_HR.tsx b/components/date-picker/locale/hr_HR.tsx new file mode 100644 index 0000000000..37d8e40fc9 --- /dev/null +++ b/components/date-picker/locale/hr_HR.tsx @@ -0,0 +1,19 @@ +import CalendarLocale from 'rc-calendar/lib/locale/hr_HR'; +import TimePickerLocale from '../../time-picker/locale/hr_HR'; + +// Merge into a locale object +const locale = { + lang: { + placeholder: 'Odaberite datum', + rangePlaceholder: ['Početni datum', 'Završni datum'], + ...CalendarLocale, + }, + timePickerLocale: { + ...TimePickerLocale, + }, +}; + +// All settings at: +// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json + +export default locale; diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index d8e6026dc7..14eedcced9 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; @import '../../button/style/mixin'; diff --git a/components/divider/style/index.less b/components/divider/style/index.less index 69b6b7e7f9..bb3110481c 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @divider-prefix-cls: ~'@{ant-prefix}-divider'; diff --git a/components/drawer/__tests__/__snapshots__/demo.test.js.snap b/components/drawer/__tests__/__snapshots__/demo.test.js.snap index 4f0e1ab971..632c9d9079 100644 --- a/components/drawer/__tests__/__snapshots__/demo.test.js.snap +++ b/components/drawer/__tests__/__snapshots__/demo.test.js.snap @@ -167,98 +167,102 @@ exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
    -
    -
    - - - -
    -
    -

    - - Lily - -

    + + +
    - Progresser AFX +

    + + Lily + +

    +
    + Progresser AFX +
    -
    - -
    -
    -
    -
    - - - -
    +
  • + + View Profile + +
    • +
+ +
  • -

    - - Lily - -

    + + +
    - Progresser AFX +

    + + Lily + +

    +
    + Progresser AFX +
    - - - + +
    • + diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md index 2b83e46def..d9df168a06 100644 --- a/components/drawer/index.en-US.md +++ b/components/drawer/index.en-US.md @@ -35,6 +35,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr | zIndex | The `z-index` of the Drawer. | Number | 1000 | | placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' | | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - | +| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - |