From 2b46a232db4fd86ce57117d654044ae9c80ae1f8 Mon Sep 17 00:00:00 2001 From: Aaron Cawte <6383947+aaroncawte@users.noreply.github.com> Date: Mon, 28 Oct 2019 01:09:22 +0000 Subject: [PATCH 1/4] Navigation components doc tweaks (#19447) * Documentation - Affix Component * Documentation - Dropdown component * Documentation - Menu component * Documentation - Pagination component * Documentation - PageHeader component * Documentation - Steps component --- components/affix/index.en-US.md | 16 +++--- components/dropdown/index.en-US.md | 36 +++++++------- components/menu/index.en-US.md | 72 +++++++++++++-------------- components/page-header/index.en-US.md | 16 +++--- components/pagination/index.en-US.md | 36 +++++++------- components/steps/index.en-US.md | 32 ++++++------ 6 files changed, 104 insertions(+), 104 deletions(-) diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md index e9fbc05305..9f2a8b94e1 100644 --- a/components/affix/index.en-US.md +++ b/components/affix/index.en-US.md @@ -4,11 +4,11 @@ type: Navigation title: Affix --- -Make an element stick to viewport. +Wrap Affix around another component to make it stick the viewport. ## When To Use -When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions. +On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions. Please note that Affix should not cover other content on the page, especially when the size of the viewport is small. @@ -16,12 +16,12 @@ Please note that Affix should not cover other content on the page, especially wh | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | | -| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | | -| target | specifies the scrollable area dom node | () => HTMLElement | () => window | | -| onChange | Callback for when affix state is changed | Function(affixed) | - | | +| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - | | +| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 | | +| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window | | +| onChange | Callback for when Affix state is changed | Function(affixed) | - | | -**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`: +**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself: ```jsx ... @@ -33,4 +33,4 @@ Please note that Affix should not cover other content on the page, especially wh We don't listen window scroll for performance consideration. You can add listener if you still want: -Related issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120) +Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120) diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index a4bf30ba03..278d156308 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -8,7 +8,7 @@ A dropdown list. ## When To Use -If there are too many operations to display, you can wrap them in a `Dropdown`. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions. +When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action. ## API @@ -16,15 +16,15 @@ If there are too many operations to display, you can wrap them in a `Dropdown`. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| disabled | whether the dropdown menu is disabled | boolean | - | | -| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | | -| overlay | the dropdown menu | [Menu](/components/menu) \| () => Menu | - | | +| disabled | Whether the dropdown menu is disabled | boolean | - | | +| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010). | Function(triggerNode) | `() => document.body` | | +| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | | | overlayClassName | Class name of the dropdown root element | string | - | 3.11.0 | | overlayStyle | Style of the dropdown root element | object | - | 3.11.0 | -| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | -| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | | -| visible | whether the dropdown menu is visible | boolean | - | | -| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function(visible) | - | | +| placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight` | String | `bottomLeft` | | +| trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens. | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | | +| visible | Whether the dropdown menu is currently visible | boolean | - | | +| onVisibleChange | Called when the visible state is changed. | Function(visible) | - | | You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`. @@ -36,13 +36,13 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| disabled | whether the dropdown menu is disabled | boolean | - | | -| icon | icon of right | ReactNode | - | 3.17.0 | -| overlay | the dropdown menu | [Menu](/components/menu) | - | | -| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | -| size | size of the button, the same as [Button](/components/button) | string | `default` | | -| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | | -| type | type of the button, the same as [Button](/components/button) | string | `default` | | -| visible | whether the dropdown menu is visible | boolean | - | | -| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - | | -| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | - | | +| disabled | Whether the dropdown menu is disabled | boolean | - | | +| icon | Icon (appears on the right) | ReactNode | - | 3.17.0 | +| overlay | The dropdown menu | [Menu](/components/menu) | - | | +| placement | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | +| size | Size of the button, the same as [Button](/components/button) | string | `default` | | +| trigger | The trigger mode which executes the dropdown action | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | | +| type | Type of the button, the same as [Button](/components/button) | string | `default` | | +| visible | Whether the dropdown menu is currently visible | boolean | - | | +| onClick | The same as [Button](/components/button): called when you click the button on the left | Function | - | | +| onVisibleChange | Called when the visible state is changed | Function | - | | diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index 4ffccc317d..c0ef714d64 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -5,13 +5,13 @@ type: Navigation title: Menu --- -Menu list of Navigation. +A versatile menu for navigation. ## When To Use -Navigation menu is important for a website, it helps users jump from one site section to another quickly. Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. Side navigation provides the Multi-level structure of the website. +Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website. -More layouts with navigation: [layout](/components/layout). +More layouts with navigation: [Layout](/components/layout). ## API @@ -26,27 +26,27 @@ More layouts with navigation: [layout](/components/layout). ### Menu -| Param | Description | Type | Default value | Version | -| --- | --- | --- | --- | --- | -| defaultOpenKeys | array with the keys of default opened sub menus | string\[] | | | -| defaultSelectedKeys | array with the keys of default selected menu items | string\[] | | | -| forceSubMenuRender | render submenu into DOM before it shows | boolean | false | | -| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - | | -| inlineIndent | indent px of inline menu item on each level | number | 24 | | -| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `horizontal` \| `inline` | `vertical` | | -| multiple | Allow selection of multiple items | boolean | false | | -| openKeys | array with the keys of currently opened sub menus | string\[] | | | -| selectable | allow selecting menu items | boolean | true | | -| selectedKeys | array with the keys of currently selected menu items | string\[] | | | -| style | style of the root node | object | | | -| subMenuCloseDelay | delay time to hide submenu when mouse leave, unit: second | number | 0.1 | | -| subMenuOpenDelay | delay time to show submenu when mouse enter, unit: second | number | 0 | | -| theme | color theme of the menu | string: `light` `dark` | `light` | | -| onClick | callback executed when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | | -| onDeselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, keyPath, selectedKeys, domEvent }) | - | | -| onOpenChange | called when open/close sub menu | function(openKeys: string\[]) | noop | | -| onSelect | callback executed when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | none | | -| overflowedIndicator | Customized icon when menu collapsed | ReactNode | - | 3.16.0 | +| Param | Description | Type | Default value | Version | +| ------------------- | ---------------------------------------------------------- | -------------------------------------------------------- | ------------- | ------- | +| defaultOpenKeys | Array with the keys of default opened sub menus | string\[] | | | +| defaultSelectedKeys | Array with the keys of default selected menu items | string\[] | | | +| forceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | | +| inlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | | +| inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | | +| mode | Type of menu; `vertical`, `horizontal`, or `inline` | string: `vertical` \| `horizontal` \| `inline` | `vertical` | | +| multiple | Allows selection of multiple items | boolean | false | | +| openKeys | Array with the keys of currently opened sub-menus | string\[] | | | +| selectable | Allows selecting menu items | boolean | true | | +| selectedKeys | Array with the keys of currently selected menu items | string\[] | | | +| style | Style of the root node | object | | | +| subMenuCloseDelay | Delay time to hide submenu when mouse leaves (in seconds) | number | 0.1 | | +| subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | | +| theme | Color theme of the menu | string: `light` \| `dark` | `light` | | +| onClick | Called when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | | +| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - | | +| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | noop | | +| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | none | | +| overflowedIndicator | Customized icon when menu is collapsed | ReactNode | - | 3.16.0 | > More options in [rc-menu](https://github.com/react-component/menu#api) @@ -54,26 +54,26 @@ More layouts with navigation: [layout](/components/layout). | Param | Description | Type | Default value | Version | | -------- | ------------------------------------ | ------- | ------------- | ------- | -| disabled | whether menu item is disabled or not | boolean | false | | -| key | unique id of the menu item | string | | | -| title | set display title for collapsed item | string | | 3.11.0 | +| disabled | Whether menu item is disabled | boolean | false | | +| key | Unique ID of the menu item | string | | | +| title | Set display title for collapsed item | string | | 3.11.0 | ### Menu.SubMenu -| Param | Description | Type | Default value | Version | -| --- | --- | --- | --- | --- | -| popupClassName | sub menu class name | string | | 3.22.0 | -| children | sub menus or sub menu items | Array<MenuItem\|SubMenu> | | | -| disabled | whether sub menu is disabled or not | boolean | false | | -| key | unique id of the sub menu | string | | | -| title | title of the sub menu | string\|ReactNode | | | -| onTitleClick | callback executed when the sub menu title is clicked | function({ key, domEvent }) | | | +| Param | Description | Type | Default value | Version | +| -------------- | ---------------------------------------------------- | --------------------------- | ------------- | ------- | +| popupClassName | Sub-menu class name | string | | 3.22.0 | +| children | Sub-menus or sub-menu items | Array<MenuItem\|SubMenu> | | | +| disabled | Whether sub-menu is disabled | boolean | false | | +| key | Unique ID of the sub-menu | string | | | +| title | Title of the sub-menu | string\|ReactNode | | | +| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | | | ### Menu.ItemGroup | Param | Description | Type | Default value | Version | | -------- | ------------------ | ----------------- | ------------- | ------- | -| children | sub menu items | MenuItem\[] | | | +| children | sub-menu items | MenuItem\[] | | | | title | title of the group | string\|ReactNode | | | ### Menu.Divider diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md index 91bca5585d..89148f8b89 100644 --- a/components/page-header/index.en-US.md +++ b/components/page-header/index.en-US.md @@ -6,23 +6,23 @@ cols: 1 subtitle: --- -The header can be used to declare the page topic, display important information about the page that the user is interested in, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) +A header with common actions and design elements built in. ## When To Use -It can also be used as inter-page navigation when it is needed to make the user quickly understand what the current page is and to facilitate the user to use the page function. +PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation. ## API | Param | Description | Type | Default value | Version | | --- | --- | --- | --- | --- | -| title | custom title text | ReactNode | - | 3.14.0 | -| subTitle | custom subTitle text | ReactNode | - | 3.14.0 | -| ghost | pageHeader type, will change background color | boolean | true | 3.24.0 | +| title | Custom title text | ReactNode | - | 3.14.0 | +| subTitle | Custom subtitle text | ReactNode | - | 3.14.0 | +| ghost | PageHeader type, will change background color | boolean | true | 3.24.0 | | avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 | -| backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `` | 3.14.0 | +| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode | `` | 3.14.0 | | tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | | extra | Operating area, at the end of the line of the title line | ReactNode | - | 3.14.0 | -| breadcrumb | breadcrumb config | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 | +| breadcrumb | Breadcrumb configuration | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 | | footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | 3.14.0 | -| onBack | back icon click event | `()=>void` | `()=>history.back()` | 3.14.0 | +| onBack | Back icon click event | `()=>void` | `()=>history.back()` | 3.14.0 | diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md index aa5cb4556c..57941affa0 100644 --- a/components/pagination/index.en-US.md +++ b/components/pagination/index.en-US.md @@ -5,7 +5,7 @@ title: Pagination cols: 1 --- -A long list can be divided into several pages by `Pagination`, and only one page will be loaded at a time. +A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time. ## When To Use @@ -20,21 +20,21 @@ A long list can be divided into several pages by `Pagination`, and only one page | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| current | current page number | number | - | | -| defaultCurrent | default initial page number | number | 1 | | -| defaultPageSize | default number of data items per page | number | 10 | | -| disabled | disable pagination | boolean | - | 3.18.0 | +| current | Current page number | number | - | | +| defaultCurrent | Default initial page number | number | 1 | | +| defaultPageSize | Default number of data items per page | number | 10 | | +| disabled | Disable pagination | boolean | - | 3.18.0 | | hideOnSinglePage | Whether to hide pager on single page | boolean | false | 3.1.0 | -| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | | -| pageSize | number of data items per page | number | - | | -| pageSizeOptions | specify the sizeChanger options | string\[] | \['10', '20', '30', '40'] | | -| showLessItems | show less page items | boolean | false | 3.16.3 | -| showQuickJumper | determine whether you can jump to pages directly | boolean \| `{ goButton: ReactNode }` | false | | -| showSizeChanger | determine whether `pageSize` can be changed | boolean | false | | -| showTitle | show page items title | boolean | true | | -| showTotal | to display the total number and range | Function(total, range) | - | | -| simple | whether to use simple mode | boolean | - | | -| size | specify the size of `Pagination`, can be set to `small` | string | "" | | -| total | total number of data items | number | 0 | | -| onChange | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop | | -| onShowSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop | | +| itemRender | To customize item's innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | | +| pageSize | Number of data items per page | number | - | | +| pageSizeOptions | Specify the sizeChanger options | string\[] | \['10', '20', '30', '40'] | | +| showLessItems | Show less page items | boolean | false | 3.16.3 | +| showQuickJumper | Determine whether you can jump to pages directly | boolean \| `{ goButton: ReactNode }` | false | | +| showSizeChanger | Determine whether `pageSize` can be changed | boolean | false | | +| showTitle | Show page item's title | boolean | true | | +| showTotal | To display the total number and range | Function(total, range) | - | | +| simple | Whether to use simple mode | boolean | - | | +| size | Specify the size of `Pagination`, can be set to `small` | string | "" | | +| total | Total number of data items | number | 0 | | +| onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop | | +| onShowSizeChange | Called when `pageSize` is changed | Function(current, size) | noop | | diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md index 26446b8df3..97aefc3c24 100644 --- a/components/steps/index.en-US.md +++ b/components/steps/index.en-US.md @@ -9,7 +9,7 @@ title: Steps ## When To Use -When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier. +When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier. ## API @@ -27,16 +27,16 @@ The whole of the step bar. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| className | additional class to Steps | string | - | 3.11.3 | -| type | type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 3.22.0 | -| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | | -| direction | to specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` | | -| labelPlacement | place title and description with `horizontal` or `vertical` direction | string | `horizontal` | 3.7.3 | +| className | Additional class to Steps | string | - | 3.11.3 | +| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 3.22.0 | +| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | | +| direction | To specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` | | +| labelPlacement | Place title and description with `horizontal` or `vertical` direction | string | `horizontal` | 3.7.3 | | progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | | -| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | | -| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | | -| initial | set the initial step, counting from 0 | number | 0 | 3.9.0 | -| onChange | Trigger when Step click to change | (current) => void | - | 3.19.0 | +| size | To specify the size of the step bar, `default` and `small` are currently supported | string | `default` | | +| status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | | +| initial | Set the initial step, counting from 0 | number | 0 | 3.9.0 | +| onChange | Trigger when Step is changed | (current) => void | - | 3.19.0 | ### Steps.Step @@ -44,9 +44,9 @@ A single step in the step bar. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| description | description of the step, optional property | string\|ReactNode | - | | -| icon | icon of the step, optional property | string\|ReactNode | - | | -| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | | -| title | title of the step | string\|ReactNode | - | | -| subTitle | subTitle of the step | string\|ReactNode | - | 3.22.0 | -| disabled | disable click | boolean | false | 3.22.0 | +| description | Description of the step, optional property | string\|ReactNode | - | | +| icon | Icon of the step, optional property | string\|ReactNode | - | | +| status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | | +| title | Title of the step | string\|ReactNode | - | | +| subTitle | Subtitle of the step | string\|ReactNode | - | 3.22.0 | +| disabled | Disable click | boolean | false | 3.22.0 | From 1d1e197527f35c9866961eabd692283a3b60bb2b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Oct 2019 14:47:24 +0800 Subject: [PATCH 2/4] :bug: Fix Icon Button align issue close #19392 --- components/button/style/mixin.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 9fa89d6236..832ca185a8 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -124,6 +124,9 @@ z-index: 0; } } + > .@{btnClassName}-icon-only { + font-size: @font-size-base; + } // size &-lg > .@{btnClassName}, &-lg > span > .@{btnClassName} { From f8a3da5f4aebe8b76b36b80a22faf4db7dc1116b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Oct 2019 14:31:22 +0800 Subject: [PATCH 3/4] :bug: Fix Checkbox not aligned center in some cases close #16695 close #19450 --- components/checkbox/style/mixin.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 63f60a6ffe..ff070543ec 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -61,7 +61,7 @@ position: absolute; top: 50%; - left: 21%; + left: 22%; display: table; width: @check-width; height: @check-height; From ff382abc511cf6d08ef19b239fde72c98d5dcefd Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Oct 2019 15:25:22 +0800 Subject: [PATCH 4/4] :lipstick: refactor alert code for better semantic close #19426 --- components/alert/index.tsx | 16 ++++++++-------- components/alert/style/index.less | 3 ++- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/components/alert/index.tsx b/components/alert/index.tsx index 785b17bc1b..f2174873b3 100755 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -52,7 +52,7 @@ export default class Alert extends React.Component { ); this.state = { - closing: true, + closing: false, closed: false, }; } @@ -66,15 +66,15 @@ export default class Alert extends React.Component { dom.style.height = `${dom.offsetHeight}px`; this.setState({ - closing: false, + closing: true, }); (this.props.onClose || noop)(e); }; animationEnd = () => { this.setState({ + closing: false, closed: true, - closing: true, }); (this.props.afterClose || noop)(); }; @@ -91,6 +91,7 @@ export default class Alert extends React.Component { icon, } = this.props; let { closable, type, showIcon, iconType } = this.props; + const { closing, closed } = this.state; const prefixCls = getPrefixCls('alert', customizePrefixCls); @@ -133,7 +134,7 @@ export default class Alert extends React.Component { prefixCls, `${prefixCls}-${type}`, { - [`${prefixCls}-close`]: !this.state.closing, + [`${prefixCls}-closing`]: closing, [`${prefixCls}-with-description`]: !!description, [`${prefixCls}-no-icon`]: !showIcon, [`${prefixCls}-banner`]: !!banner, @@ -162,23 +163,22 @@ export default class Alert extends React.Component { const iconNode = (icon && (React.isValidElement<{ className?: string }>(icon) ? ( React.cloneElement(icon, { - className: classNames({ + className: classNames(`${prefixCls}-icon`, { [icon.props.className as string]: icon.props.className, - [`${prefixCls}-icon`]: true, }), }) ) : ( {icon} ))) || ; - return this.state.closed ? null : ( + return closed ? null : ( -
+
{showIcon ? iconNode : null} {message} {description} diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 0e189d096a..3e04bd8e4b 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -77,6 +77,7 @@ line-height: 22px; background-color: transparent; border: none; + outline: none; cursor: pointer; .@{iconfont-css-prefix}-close { @@ -138,7 +139,7 @@ display: block; } - &&-close { + &&-closing { height: 0 !important; margin: 0; padding-top: 0;