Skip to content

Commit 4c1baf4

Browse files
Youyou-smilesYouyou-smiles
authored
feat(radio): [radio] Adapting to the SMB theme (#1959)
* feat(radio): [radio] Apating to the SMB theme * feat(radio): [radio] Adapting to the SMB theme
1 parent 86e214f commit 4c1baf4

File tree

10 files changed

+74
-22
lines changed

10 files changed

+74
-22
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<div class="mt-20">
1212
<tiny-radio-group v-model="radio2">
13-
<tiny-radio-button label="1">日度</tiny-radio-button>
13+
<tiny-radio-button disabled label="1">日度</tiny-radio-button>
1414
<tiny-radio-button disabled label="2">月度</tiny-radio-button>
1515
<tiny-radio-button label="3">年度</tiny-radio-button>
1616
</tiny-radio-group>

‎examples/sites/demos/pc/app/radio/dynamic-disable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<div class="mt-20">
1212
<tiny-radio-group v-model="radio2">
13-
<tiny-radio-button label="1">日度</tiny-radio-button>
13+
<tiny-radio-button disabled label="1">日度</tiny-radio-button>
1414
<tiny-radio-button disabled label="2">月度</tiny-radio-button>
1515
<tiny-radio-button label="3">年度</tiny-radio-button>
1616
</tiny-radio-group>

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,18 @@
1818
.@{radio-button-prefix-cls} {
1919
.component-css-vars-radio-button();
2020

21+
border-radius: var(--ti-radio-button-border-radius);
2122
&:first-child &__inner {
22-
border-left: 1px solid var(--ti-radio-button-border-color);
23-
border-radius: var(--ti-radio-button-border-radius) 0 0 var(--ti-radio-button-border-radius);
23+
border-left: var(--ti-radio-button-border-left) solid var(--ti-radio-button-border-color);
24+
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);
2425
}
2526

2627
&:first-child &__orig-radio:checked + &__inner {
2728
box-shadow: none;
2829
}
2930

3031
&:last-child &__inner {
31-
border-radius: 0 var(--ti-radio-button-border-radius) var(--ti-radio-button-border-radius) 0;
32+
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);
3233
}
3334

3435
&:first-child:last-child &__inner {
@@ -40,16 +41,17 @@
4041
display: inline-block;
4142
position: relative;
4243
outline: 0;
44+
margin-right: var(--ti-radio-button-margin-right);
4345
}
4446

4547
&__inner {
4648
color: var(--ti-radio-button-text-color);
4749
font-size: var(--ti-radio-button-font-size);
4850
background: var(--ti-radio-button-bg-color);
4951
border: 1px solid var(--ti-radio-button-border-color);
50-
padding: 12px 20px;
52+
padding: var(--ti-radio-button-padding-verticals) 20px;
5153
font-weight: 500;
52-
border-radius: 0;
54+
border-radius: var(--ti-radio-button-border-radius);
5355
border-left: 0;
5456
line-height: 1;
5557
white-space: nowrap;
@@ -128,7 +130,7 @@
128130
&--medium &__inner {
129131
font-size: var(--ti-radio-button-medium-font-size);
130132
padding: 10px 20px;
131-
border-radius: 0;
133+
border-radius: var(--ti-radio-button-margin-right);
132134

133135
&.is-round {
134136
padding: 10px 20px;
@@ -138,7 +140,7 @@
138140
&--small &__inner {
139141
font-size: var(--ti-radio-button-font-size);
140142
padding: 9px 15px;
141-
border-radius: 0;
143+
border-radius: var(--ti-radio-button-margin-right);
142144

143145
&.is-round {
144146
padding: 9px 15px;
@@ -148,7 +150,7 @@
148150
&--mini &__inner {
149151
font-size: var(--ti-radio-button-font-size);
150152
padding: 7px 15px;
151-
border-radius: 0;
153+
border-radius: var(--ti-radio-button-margin-right);
152154

153155
&.is-round {
154156
padding: 7px 15px;
@@ -158,4 +160,9 @@
158160
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
159161
box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color);
160162
}
163+
&.is-active.is-disabled {
164+
color: var(--ti-radio-button-active-disabled-color);
165+
background-color: var(--ti-radio-button-active-disabled-bg-color);;
166+
167+
}
161168
}

‎packages/theme/src/radio-button/smb-theme.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,16 @@ export const tinyRadioButtonSmbTheme = {
22
'ti-radio-button-checked-normal-bg-color': '#1476FF',
33
'ti-radio-button-checked-normal-border-color': '#1476FF',
44
'ti-radio-button-checked-normal-box-shadow': '#1476FF',
5-
'ti-radio-button-checked-hover-bg-color': '#1293ff',
5+
'ti-radio-button-checked-hover-bg-color': 'var(--ti-common-color-prompt-bg)',
6+
'ti-radio-button-hover-text-color': 'var(--ti-common-color-bg-emphasize)',
67
'ti-radio-button-checked-hover-border-color': '#1293ff',
7-
'ti-radio-button-checked-hover-box-shadow': '#1293ff'
8+
'ti-radio-button-checked-hover-box-shadow': '#1293ff',
9+
'ti-radio-button-margin-right': 'var(--ti-common-space-2)',
10+
'ti-radio-button-border-radius': 'var(--ti-common-space-6)',
11+
'ti-radio-button-border-left': 0,
12+
'ti-radio-button-child-left-border-radius': 'var(--ti-common-space-6)',
13+
'ti-radio-button-child-right-border-radius': 'var(--ti-common-space-6)',
14+
'ti-radio-button-padding-verticals': '9px',
15+
'ti-radio-button-active-disabled-color': 'var(--ti-common-color-text-weaken)',
16+
'ti-radio-button-active-disabled-bg-color': 'var(--ti-common-color-bg-dark-disabled)'
817
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
--ti-radio-button-text-color: var(--ti-common-color-info-normal, #252b3a);
1515
--ti-radio-button-hover-text-color: var(--ti-common-color-light, #fff);
1616
--ti-radio-button-border-color: var(--ti-common-color-border, #adb0b8);
17-
--ti-radio-button-border-radius: var(--ti-common-border-radius-normal, 2px);
17+
--ti-radio-button-border-radius: 0;
1818
--ti-radio-button-font-size: var(--ti-common-font-size-base, 12px);
1919
--ti-radio-button-bg-color: var(--ti-common-color-light, #fff);
2020
--ti-radio-button-checked-normal-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
@@ -26,4 +26,11 @@
2626
--ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
2727
--ti-radio-button-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
2828
--ti-radio-button-medium-font-size: var(--ti-common-font-size-1, 14px);
29+
--ti-radio-button-margin-right: unset;
30+
--ti-radio-button-border-left: 1px;
31+
--ti-radio-button-child-left-border-radius: var(--ti-common-space-2);
32+
--ti-radio-button-child-right-border-radius: 0;
33+
--ti-radio-button-padding-verticals: var(--ti-common-space-3x);
34+
--ti-radio-button-active-disabled-color: var(--ti-common-color-text-weaken);
35+
--ti-radio-button-active-disabled-bg-color: var(--ti-common-color-bg-dark-disabled);
2936
}

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
*
1111
*/
1212

13+
@import '../mixins/common.less';
1314
@import '../custom.less';
1415
@import './vars.less';
1516

@@ -18,6 +19,8 @@
1819
@radio-prefix-cls: ~'@{css-prefix}radio';
1920

2021
.@{radio-group-prefix-cls} {
22+
.component-css-vars-radio-group();
23+
2124
display: inline-flex;
2225

2326
&.list-inline {
@@ -28,20 +31,22 @@
2831
margin-right: 0;
2932

3033
&:not(:last-child) {
31-
margin-bottom: var(--ti-radio-button-margin-bottom);
34+
margin-bottom: var(--ti-radio-group-margin-bottom);
3235
}
3336
}
3437

3538
.@{radio-button-prefix-cls} {
3639
display: block;
40+
margin-bottom: var(--ti-radio-button-margin-bottom);
41+
border-radius: var(--ti-radio-button-border-radius);
3742

3843
&:first-child .@{radio-button-prefix-cls}__inner {
39-
border-radius: var(--ti-radio-button-border-radius) var(--ti-radio-button-border-radius) 0 0;
40-
border-top: 1px solid var(--ti-radio-button-border-color);
44+
border-radius: var(--ti-radio-button-top-border-radius) var(--ti-radio-button-top-border-radius) var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-bottom-border-radius);
45+
border-top: var(--ti-radio-button-border-top) solid var(--ti-radio-button-border-color);
4146
}
4247

4348
&:last-child .@{radio-button-prefix-cls}__inner {
44-
border-radius: 0 0 var(--ti-radio-button-border-radius) var(--ti-radio-button-border-radius);
49+
border-radius: var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-top-border-radius) var(--ti-radio-button-top-border-radius);
4550
}
4651

4752
&.is-active .@{radio-button-prefix-cls}__inner {

‎packages/theme/src/radio-group/index.js‎ renamed to ‎packages/theme/src/radio-group/smb-theme.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@
99
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
1010
*
1111
*/
12-
13-
export default {
14-
// radio-group
12+
export const tinyRadioGroupSmbTheme = {
13+
'ti-radio-group-margin-bottom': '16px',
14+
'ti-radio-button-border-color': 'none',
15+
'ti-radio-button-border-radius': '6px',
16+
'ti-radio-button-margin-bottom': '2px',
17+
'ti-radio-button-top-border-radius': '6px',
18+
'ti-radio-button-bottom-border-radius': '6px',
19+
'ti-radio-button-border-top': 0
1520
}

‎packages/theme/src/radio-group/vars.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,11 @@
99
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
1010
*
1111
*/
12+
.component-css-vars-radio-group() {
13+
--ti-radio-group-margin-bottom: var(--ti-common-space-2x);
14+
--ti-radio-button-border-radius: unset;
15+
--ti-radio-button-margin-bottom: 0;
16+
--ti-radio-button-top-border-radius: var(--ti-common-space-2);
17+
--ti-radio-button-bottom-border-radius: 0;
18+
--ti-radio-button-border-top: var(--ti-common-border-weight-normal);
19+
}

‎packages/theme/src/radio/smb-theme.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
/**
2+
* Copyright (c) 2022 - present TinyVue Authors.
3+
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
4+
*
5+
* Use of this source code is governed by an MIT-style license.
6+
*
7+
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
8+
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
9+
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
10+
*
11+
*/
112
export const tinyRadioSmbTheme = {
213
'ti-radio-margin-right': 'var(--ti-common-space-6x)',
314
'ti-radio-bordered-border-color': 'var(--ti-common-color-line-normal)',

‎packages/theme/src/theme.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ export default {
8686
'year-table': 'year-table',
8787
'skeleton-item': 'skeleton-item',
8888
'radio-button': 'radio-button',
89-
'color-select-panel': 'color-select-panel',
90-
'color-picker': 'color-picker',
89+
'radio': 'radio',
90+
'radio-group': 'radio-group',
9191
'split': 'split-wrapper',
9292
'float-bar': 'float-bar'
9393
}

0 commit comments

Comments
 (0)