Skip to content

Commit d567a94

Browse files
zzcrzzcr
authored
refactor(radio): [radio] refactor radio theme (#2181)
* refactor(radio): [radio] refactor radio theme * test: fix e2e test * test: fix e2e test
1 parent 6cb0cda commit d567a94

File tree

14 files changed

+124
-402
lines changed

14 files changed

+124
-402
lines changed

‎examples/sites/demos/apis/radio.js

-24
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,6 @@ export default {
55
name: 'radio',
66
type: 'component',
77
props: [
8-
{
9-
name: 'border',
10-
type: 'boolean',
11-
defaultValue: 'false',
12-
desc: {
13-
'zh-CN': '是否显示边框',
14-
'en-US': 'Display Border'
15-
},
16-
mode: ['pc', 'mobile-first'],
17-
pcDemo: 'with-border',
18-
mfDemo: ''
19-
},
208
{
219
name: 'disabled',
2210
type: 'boolean',
@@ -79,18 +67,6 @@ export default {
7967
mobileDemo: 'base',
8068
mfDemo: ''
8169
},
82-
{
83-
name: 'size',
84-
type: "'medium' | small' | 'mini'",
85-
defaultValue: '',
86-
desc: {
87-
'zh-CN': 'radio 的尺寸，仅在 border 为真时有效',
88-
'en-US': 'radio size. This parameter is valid only when border is set to true'
89-
},
90-
mode: ['pc', 'mobile-first'],
91-
pcDemo: 'radio-size',
92-
mfDemo: ''
93-
},
9470
{
9571
name: 'tabindex',
9672
type: 'String',

‎examples/sites/demos/pc/app/radio/radio-size-composition-api.vue

+1-21
Original file line numberDiff line numberDiff line change
@@ -19,32 +19,12 @@
1919
<tiny-radio-button label="2">选项二</tiny-radio-button>
2020
</tiny-radio-group>
2121
</div>
22-
23-
<div class="title mt-20">带边框尺寸：</div>
24-
<tiny-radio-group v-model="value" size="medium">
25-
<tiny-radio label="1" border>选项一</tiny-radio>
26-
<tiny-radio label="2" border>选项二</tiny-radio>
27-
</tiny-radio-group>
28-
29-
<div class="mt-20">
30-
<tiny-radio-group v-model="value" size="small">
31-
<tiny-radio label="1" border>选项一</tiny-radio>
32-
<tiny-radio label="2" border>选项二</tiny-radio>
33-
</tiny-radio-group>
34-
</div>
35-
36-
<div class="mt-20">
37-
<tiny-radio-group v-model="value" size="mini">
38-
<tiny-radio label="1" border>选项一</tiny-radio>
39-
<tiny-radio label="2" border>选项二</tiny-radio>
40-
</tiny-radio-group>
41-
</div>
4222
</div>
4323
</template>
4424

4525
<script setup>
4626
import { ref } from 'vue'
47-
import { Radio as TinyRadio, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
27+
import { RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
4828
4929
const value = ref('1')
5030
</script>

‎examples/sites/demos/pc/app/radio/radio-size.spec.ts

-3
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@ test('尺寸设置', async ({ page }) => {
77
const demo = page.locator('#radio-size')
88
const radioGroup = demo.locator('.tiny-radio-group')
99

10-
await expect(radioGroup.first()).toHaveCSS('width', '184px')
1110
await expect(radioGroup.first()).toHaveCSS('height', '32px')
12-
await expect(radioGroup.nth(1)).toHaveCSS('width', '184px')
1311
await expect(radioGroup.nth(1)).toHaveCSS('height', '28px')
14-
await expect(radioGroup.nth(2)).toHaveCSS('width', '152px')
1512
await expect(radioGroup.nth(2)).toHaveCSS('height', '24px')
1613
})

‎examples/sites/demos/pc/app/radio/radio-size.vue

+1-22
Original file line numberDiff line numberDiff line change
@@ -19,35 +19,14 @@
1919
<tiny-radio-button label="2">选项二</tiny-radio-button>
2020
</tiny-radio-group>
2121
</div>
22-
23-
<div class="title mt-20">带边框尺寸：</div>
24-
<tiny-radio-group v-model="value" size="medium">
25-
<tiny-radio label="1" border>选项一</tiny-radio>
26-
<tiny-radio label="2" border>选项二</tiny-radio>
27-
</tiny-radio-group>
28-
29-
<div class="mt-20">
30-
<tiny-radio-group v-model="value" size="small">
31-
<tiny-radio label="1" border>选项一</tiny-radio>
32-
<tiny-radio label="2" border>选项二</tiny-radio>
33-
</tiny-radio-group>
34-
</div>
35-
36-
<div class="mt-20">
37-
<tiny-radio-group v-model="value" size="mini">
38-
<tiny-radio label="1" border>选项一</tiny-radio>
39-
<tiny-radio label="2" border>选项二</tiny-radio>
40-
</tiny-radio-group>
41-
</div>
4222
</div>
4323
</template>
4424

4525
<script>
46-
import { Radio, RadioButton, RadioGroup } from '@opentiny/vue'
26+
import { RadioButton, RadioGroup } from '@opentiny/vue'
4727
4828
export default {
4929
components: {
50-
TinyRadio: Radio,
5130
TinyRadioButton: RadioButton,
5231
TinyRadioGroup: RadioGroup
5332
},

‎examples/sites/demos/pc/app/radio/webdoc/radio.js

+1-13
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,6 @@ export default {
4242
},
4343
codeFiles: ['group-options.vue']
4444
},
45-
{
46-
demoId: 'with-border',
47-
name: {
48-
'zh-CN': '带有边框',
49-
'en-US': 'With borders'
50-
},
51-
desc: {
52-
'zh-CN': '<p>可通过设置 <code>border</code> 属性，给单选框增加边框。</p>\n',
53-
'en-US': '<p>You can set the <code>border</code> attribute to add a border to an option button. </p>\n'
54-
},
55-
codeFiles: ['with-border.vue']
56-
},
5745
{
5846
demoId: 'dynamic-disable',
5947
name: {
@@ -116,7 +104,7 @@ export default {
116104
},
117105
desc: {
118106
'zh-CN':
119-
'<p>可对按钮形式的 <code>radio</code> 或带有边框的 <code>radio</code> 设置 <code>size</code> 属性，以改变其尺寸，可选值有： <code>medium</code> 、<code>small</code> 、<code>mini</code> 。</p>\n',
107+
'<p>可对按钮形式的 <code>radio</code> 设置 <code>size</code> 属性，以改变其尺寸，可选值有： <code>medium</code> 、<code>small</code> 、<code>mini</code> 。</p>',
120108
'en-US':
121109
'<p>You can set the <code>size</code> attribute for a radio with a button or a radio with a border to change its size. The options include medium, small, and mini. </p>\n'
122110
},

‎examples/sites/demos/pc/app/radio/with-border-composition-api.vue

-14
This file was deleted.

‎examples/sites/demos/pc/app/radio/with-border.spec.ts

-12
This file was deleted.

‎examples/sites/demos/pc/app/radio/with-border.vue

-22
This file was deleted.

‎packages/theme/src/radio-button/index.less

+25-57
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,25 @@
1616
@radio-button-prefix-cls: ~'@{css-prefix}radio-button';
1717

1818
.@{radio-button-prefix-cls} {
19-
.component-css-vars-radio-button();
20-
21-
border-radius: var(--ti-radio-button-border-radius);
22-
&:first-child &__inner {
23-
border-radius: var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-left-border-radius);
24-
}
25-
26-
&:first-child &__orig-radio:checked + &__inner {
27-
box-shadow: none;
28-
}
29-
30-
&:last-child &__inner {
31-
border-radius: var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-right-border-radius);
32-
}
33-
34-
&:first-child:last-child &__inner {
35-
border-radius: var(--ti-radio-button-border-radius);
36-
}
19+
.inject-RadioButton-vars();
20+
border-radius: var(--tv-RadioButton-border-radius);
3721

3822
&,
3923
&__inner {
4024
display: inline-block;
4125
position: relative;
4226
outline: 0;
43-
margin-right: var(--ti-radio-button-margin-right);
27+
margin-right: 2px;
4428
}
4529

4630
&__inner {
47-
color: var(--ti-radio-button-text-color);
48-
font-size: var(--ti-radio-button-font-size);
49-
background: var(--ti-radio-button-bg-color);
50-
border: 1px solid var(--ti-radio-button-border-color);
51-
padding: var(--ti-radio-button-padding-verticals) 24px;
31+
color: var(--tv-RadioButton-text-color);
32+
font-size: var(--tv-RadioButton-font-size);
33+
background: var(--tv-RadioButton-bg-color);
34+
border: 1px solid var(--tv-RadioButton-border-color);
35+
padding: 5px 24px;
5236
font-weight: 500;
53-
border-radius: var(--ti-radio-button-border-radius);
37+
border-radius: var(--tv-RadioButton-border-radius);
5438
line-height: 1;
5539
white-space: nowrap;
5640
vertical-align: middle;
@@ -66,8 +50,7 @@
6650
}
6751

6852
&:hover {
69-
color: var(--ti-radio-button-hover-text-color);
70-
background-color: var(--ti-radio-button-checked-hover-bg-color);
53+
background-color: var(--tv-RadioButton-checked-hover-bg-color);
7154
outline: 0;
7255
}
7356

@@ -89,21 +72,15 @@
8972
&:checked {
9073
& + .@{radio-button-prefix-cls}__inner {
9174
color: #fff;
92-
background-color: var(--ti-radio-button-checked-normal-bg-color);
93-
box-shadow: var(--ti-radio-button-checked-normal-box-shadow);
94-
95-
&:hover {
96-
background-color: var(--ti-radio-button-checked-hover-bg-color);
97-
box-shadow: var(--ti-radio-button-checked-hover-box-shadow);
98-
}
75+
background-color: var(--tv-RadioButton-checked-bg-color);
9976
}
10077
}
10178

10279
&:disabled {
10380
& + .@{radio-button-prefix-cls}__inner {
104-
color: var(--ti-radio-button-disabled-text-color);
105-
border-color: var(--ti-radio-button-border-color);
106-
background-color: var(--ti-radio-button-disabled-bg-color);
81+
color: var(--tv-RadioButton-disabled-text-color);
82+
border-color: var(--tv-RadioButton-border-color);
83+
background-color: var(--tv-RadioButton-disabled-bg-color);
10784
background-image: none;
10885
box-shadow: none;
10986
cursor: not-allowed;
@@ -112,70 +89,61 @@
11289

11390
&:disabled:checked {
11491
& + .@{radio-button-prefix-cls}__inner {
115-
background-color: var(--ti-radio-button-checked-disabled-bg-color);
116-
color: var(--ti-radio-button-disabled-checked-text-color);
92+
background-color: var(--tv-RadioButton-checked-disabled-bg-color);
93+
color: var(--tv-RadioButton-disabled-checked-text-color);
11794
}
11895
}
11996
}
12097

12198
&--default &__inner {
122-
font-size: var(--ti-radio-button-medium-font-size);
12399
display: flex;
124100
align-items: center;
125-
height: 32px;
101+
height: var(--tv-RadioButton-size-height-md);
126102
padding: 5px 24px;
127-
border-radius: var(--ti-radio-button-margin-right);
128103

129104
&.is-round {
130105
padding: 10px 20px;
131106
}
132107
}
133108

134109
&--medium &__inner {
135-
font-size: var(--ti-radio-button-medium-font-size);
136110
display: flex;
137111
align-items: center;
138-
height: 32px;
112+
height: var(--tv-RadioButton-size-height-md);
139113
padding: 5px 24px;
140-
border-radius: var(--ti-radio-button-margin-right);
141114

142115
&.is-round {
143116
padding: 10px 20px;
144117
}
145118
}
146119

147120
&--small &__inner {
148-
font-size: var(--ti-radio-button-font-size);
121+
font-size: 12px;
149122
display: flex;
150123
align-items: center;
151-
height: 28px;
124+
height: var(--tv-RadioButton-size-height-sm);
152125
padding: 5px 24px;
153-
border-radius: var(--ti-radio-button-margin-right);
154126

155127
&.is-round {
156128
padding: 9px 15px;
157129
}
158130
}
159131

160132
&--mini &__inner {
161-
font-size: var(--ti-radio-button-font-size);
133+
font-size: 12px;
162134
display: flex;
163135
align-items: center;
164-
height: 24px;
136+
height: var(--tv-RadioButton-size-height-xs);
165137
padding: 3px 16px;
166-
border-radius: var(--ti-radio-button-margin-right);
138+
border-radius: 4px;
167139

168140
&.is-round {
169141
padding: 7px 15px;
170142
}
171143
}
172144

173-
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
174-
box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color);
175-
}
176145
&.is-active.is-disabled {
177-
color: var(--ti-radio-button-active-disabled-color);
178-
background-color: var(--ti-radio-button-active-disabled-bg-color);;
179-
146+
color: var(--tv-RadioButton-disabled-checked-text-color);
147+
background-color: var(--tv-RadioButton-checked-disabled-bg-color);
180148
}
181149
}

0 commit comments

Comments
 (0)