diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index 2d908dedeb..14a1e91ecf 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -573,6 +573,64 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = ` +
+ +
+ +
+ + + + + + `; diff --git a/components/input/demo/group.md b/components/input/demo/group.md index b86f163173..cb3e1b3174 100644 --- a/components/input/demo/group.md +++ b/components/input/demo/group.md @@ -18,10 +18,33 @@ Input.Group example Note: You don't need `Col` to control the width in the `compact` mode. ````jsx -import { Input, Col, Select, InputNumber, DatePicker, AutoComplete } from 'antd'; +import { Input, Col, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd'; const InputGroup = Input.Group; const Option = Select.Option; +const options = [{ + value: 'zhejiang', + label: 'Zhejiang', + children: [{ + value: 'hangzhou', + label: 'Hangzhou', + children: [{ + value: 'xihu', + label: 'West Lake', + }], + }], +}, { + value: 'jiangsu', + label: 'Jiangsu', + children: [{ + value: 'nanjing', + label: 'Nanjing', + children: [{ + value: 'zhonghuamen', + label: 'Zhong Hua Men', + }], + }], +}]; class CompactDemo extends React.Component { state = { @@ -108,6 +131,14 @@ class CompactDemo extends React.Component { placeholder="Email" /> +
+ + + + ); } diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 99b76de878..18be3d6cb8 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -259,10 +259,13 @@ z-index: auto; } - // reset border for Select, datePicker + // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker & > .@{ant-prefix}-select > .@{ant-prefix}-select-selection, & > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input, - & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input { + & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input, + & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input, + & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor, + & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input { border-radius: 0; border-right-width: 0; } @@ -270,7 +273,10 @@ & > *:first-child, & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selection, & > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input, - & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input { + & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input, + & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input, + & > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor, + & > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input { border-top-left-radius: @border-radius-base; border-bottom-left-radius: @border-radius-base; } @@ -278,7 +284,10 @@ & > *:last-child, & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selection, & > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input, - & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input { + & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input, + & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input, + & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor, + & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input { border-top-right-radius: @border-radius-base; border-bottom-right-radius: @border-radius-base; border-right-width: 1px;