fix: Radio Group style with Badge (#21215)

* 💄 fix Radio Group style with Badge

close #21213

*  update snapshot
This commit is contained in:
偏右 2020-02-04 17:01:19 +08:00 committed by GitHub
parent 93e6454488
commit 7d47413afa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 418 additions and 0 deletions

View File

@ -1,5 +1,380 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/radio/demo/badge.md correctly 1`] = `
<div
class="ant-radio-group ant-radio-group-solid"
>
<span
class="ant-badge"
>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="1"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Click Me
</span>
</label>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
title="1"
>
<span
class="ant-scroll-number-only"
style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class="current"
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
</span>
</sup>
</span>
<span
class="ant-badge"
>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="2"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Not Me
</span>
</label>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
title="2"
>
<span
class="ant-scroll-number-only"
style="transition:none;-ms-transform:translateY(-1200%);-webkit-transform:translateY(-1200%);transform:translateY(-1200%)"
>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class="current"
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
</span>
</sup>
</span>
</div>
`;
exports[`renders ./components/radio/demo/basic.md correctly 1`] = `
<label
class="ant-radio-wrapper"

View File

@ -0,0 +1,34 @@
---
order: 99
debug: true
title:
zh-CN: Badge style
en-US: 测试 Badge 的样式
---
## zh-CN
测试 Badge 的样式。
## en-US
Test Badge style.
```jsx
import { Radio, Badge } from 'antd';
ReactDOM.render(
<Radio.Group buttonStyle="solid">
<Badge count={1}>
<Radio.Button value={1}>
Click Me
</Radio.Button>
</Badge>
<Badge count={2}>
<Radio.Button value={2}>
Not Me
</Radio.Button>
</Badge>
</Radio.Group>
, mountNode);
```

View File

@ -16,6 +16,14 @@
&-rtl {
direction: rtl;
}
.@{ant-prefix}-badge-count {
z-index: 1;
}
> .@{ant-prefix}-badge:not(:first-child) > .@{radio-prefix-cls}-button-wrapper {
border-left: none;
}
}
// 一般状态
@ -209,6 +217,7 @@ span.@{radio-prefix-cls} + * {
content: '';
}
}
&:first-child {
border-left: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base 0 0 @border-radius-base;