fix: Adjust Select style (#20387)

* fix: Select style sync with v3

* update demo

* update test case
This commit is contained in:
二货机器人 2019-12-23 16:22:59 +08:00 committed by GitHub
parent 5b29913174
commit d4d79bbe13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 46 additions and 20 deletions

View File

@ -333,7 +333,7 @@ exports[`List.pagination should change page size work 2`] = `
class="ant-pagination-options"
>
<div
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -345,7 +345,7 @@ exports[`List.pagination should change page size work 2`] = `
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-expanded="true"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
@ -365,7 +365,7 @@ exports[`List.pagination should change page size work 2`] = `
<div>
<div
class="ant-select-dropdown"
style="width: 0px;"
style="width: 0px; opacity: 0;"
>
<div>
<div
@ -503,6 +503,9 @@ exports[`List.pagination should change page size work 2`] = `
<div
style="position: absolute; top: 0px; left: 0px; width: 100%;"
/>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%;"
/>
</div>
</li>
</ul>

View File

@ -168,6 +168,7 @@ describe('List.pagination', () => {
.at(2)
.simulate('click');
wrapper.find('.ant-select-selector').simulate('mousedown');
expect(
wrapper
.find('Pagination')

View File

@ -32,30 +32,44 @@ ReactDOM.render(
optionLabelProp="label"
>
<Option value="china" label="China">
<span role="img" aria-label="China">
🇨🇳
</span>
China (中国)
<div className="demo-option-label-item">
<span role="img" aria-label="China">
🇨🇳
</span>
China (中国)
</div>
</Option>
<Option value="usa" label="USA">
<span role="img" aria-label="USA">
🇺🇸
</span>
USA (美国)
<div className="demo-option-label-item">
<span role="img" aria-label="USA">
🇺🇸
</span>
USA (美国)
</div>
</Option>
<Option value="japan" label="Japan">
<span role="img" aria-label="Japan">
🇯🇵
</span>
Japan (日本)
<div className="demo-option-label-item">
<span role="img" aria-label="Japan">
🇯🇵
</span>
Japan (日本)
</div>
</Option>
<Option value="korea" label="Korea">
<span role="img" aria-label="Korea">
🇰🇷
</span>
Korea (韩国)
<div className="demo-option-label-item">
<span role="img" aria-label="Korea">
🇰🇷
</span>
Korea (韩国)
</div>
</Option>
</Select>,
mountNode,
);
```
```css
.demo-option-label-item > span {
margin-right: 6px;
}
```

View File

@ -229,6 +229,10 @@
color: @text-color;
font-weight: @select-item-selected-font-weight;
background-color: @select-item-selected-bg;
.@{select-prefix-cls}-item-option-state {
color: @primary-color;
}
}
&-disabled {

View File

@ -19,6 +19,10 @@
align-items: center;
// Multiple is little different that horizontal is follow the vertical
padding: 0 @select-multiple-padding @select-multiple-padding;
.@{select-prefix-cls}-show-search& {
cursor: text;
}
}
// ======================== Selections ========================

View File

@ -123,7 +123,7 @@
"rc-progress": "~2.5.0",
"rc-rate": "~2.5.0",
"rc-resize-observer": "^0.1.0",
"rc-select": "~10.0.0-alpha.31",
"rc-select": "~10.0.0-alpha.34",
"rc-slider": "~8.7.1",
"rc-steps": "~3.5.0",
"rc-switch": "~1.9.0",