Skip to content

Commit b1240c9

Browse files
MomoPoppyMomoPoppy
authored
refactor(select): [select] refactor theme vars and style for select-dropdown/option/option-group (#2254)
* refactor(select): [select] refactor vue template for select * refactor(select-dropdown): [select] modify variable names and add refactor styles for selectDropdown * refactor(select): [select] change data-tag="tiny-select-dropdown-item" to data-tag="tiny-option" * refactor(option): [select] modify variable names and add refactor styles for option * feat(theme): [select] add new vars * refactor(option-group): [select] modify variable names and add refactor styles for option-group
1 parent e7853d2 commit b1240c9

File tree

15 files changed

+260
-512
lines changed

15 files changed

+260
-512
lines changed

‎packages/renderless/src/base-select/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1766,7 +1766,7 @@ const optmzApis = {
17661766
'.tiny-recycle-scroller__slot, .tiny-recycle-scroller__item-view:not([style*="transform: translateY(-9999px) translateX(0px)"])'
17671767
)
17681768
)
1769-
.map((item) => item.querySelector(`[data-tag="tiny-select-dropdown-item"]:not(${querySelectKey})`))
1769+
.map((item) => item.querySelector(`[data-tag="tiny-option"]:not(${querySelectKey})`))
17701770
.filter((v) => v)
17711771
},
17721772
setScrollTop: ({ refs, state }) => {

‎packages/renderless/src/select/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2092,7 +2092,7 @@ const optmzApis = {
20922092
'.tiny-recycle-scroller__slot, .tiny-recycle-scroller__item-view:not([style*="transform: translateY(-9999px) translateX(0px)"])'
20932093
)
20942094
)
2095-
.map((item) => item.querySelector(`[data-tag="tiny-select-dropdown-item"]:not(${querySelectKey})`))
2095+
.map((item) => item.querySelector(`[data-tag="tiny-option"]:not(${querySelectKey})`))
20962096
.filter((v) => v)
20972097
},
20982098
setScrollTop: ({ refs, state }) => {

‎packages/theme/src/base/vars.less

+1
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,7 @@
291291
--tv-color-icon-hover: var(--tv-base-color-common-11); // #191919 图标悬浮色
292292
--tv-color-icon-active: var(--tv-base-color-common-11); // #191919 图标激活色
293293
--tv-color-icon-disabled: var(--tv-base-color-common-7); // #c2c2c2 图标禁用色
294+
--tv-color-icon-checked-disabled:var(--tv-base-color-common-6); // #dbdbdb 图标禁用色-1 checkbox选中且禁用
294295
--tv-color-icon-control: var(--tv-base-color-brand); // #191919 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
295296
--tv-color-icon-control-active: var(--tv-base-color-brand-6); // #1476ff 控件图标激活色，主要在checkbox、radio图标激活场景
296297
--tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #1476ff 控件图标禁用色，主要在checkbox、radio图标激活场景

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

+11-18
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
padding: 0;
2525

2626
&:not(:last-of-type) {
27-
padding-bottom: var(--ti-option-group-padding-bottom);
27+
padding-bottom: 0px;
2828
}
2929

3030
&:not(:last-of-type)::after {
@@ -34,28 +34,21 @@
3434
left: 8px;
3535
right: 8px;
3636
bottom: 12px;
37-
height: var(--ti-option-group-line-dividing-height);
38-
background: var(--ti-option-group-line-dividing-bg-color);
37+
height: var(--tv-OptionGroup-height-divider);
38+
background: var(--tv-OptionGroup-border-color-divider);
3939
}
4040

4141
.@{option-group-prefix-cls}__title {
42-
padding: 0 var(--ti-option-group-title-padding-horizontal);
43-
font-size: var(--ti-option-group-title-font-size);
44-
font-weight: var(--ti-option-group-title-font-weight);
45-
color: var(--ti-option-group-title-text-color);
46-
line-height: var(--ti-option-group-title-line-height);
47-
height: var(--ti-option-group-title-height);
48-
margin-top: var(--ti-option-group-title-margin-top);
49-
margin-bottom: var(--ti-option-group-title-margin-bottom);
50-
}
42+
padding: 0 var(--tv-OptionGroup-title-padding-x);
43+
font-size: var(--tv-OptionGroup-font-size);
5144

52-
&:first-child .@{option-group-prefix-cls}__title {
53-
margin-top: var(--ti-option-group-title-margin-top-first);
45+
color: var(--tv-OptionGroup-text-color);
46+
line-height: var(--tv-OptionGroup-line-height);
47+
height: auto;
48+
margin: var(--tv-OptionGroup-title-margin);
5449
}
5550

56-
.@{option-group-prefix-cls}__list {
57-
.tiny-option {
58-
padding: var(--ti-option-padding-vertical) var(--ti-option-padding-horizontal-group);
59-
}
51+
&:first-child .@{option-group-prefix-cls}__title {
52+
margin-top: var(--tv-OptionGroup-title-margin-top-first);
6053
}
6154
}

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

+19-24
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,23 @@
1111
*/
1212

1313
.component-css-vars-option-group() {
14-
// 分组分割线填充色
15-
--ti-option-group-line-dividing-bg-color: var(--ti-common-color-line-dividing, #f0f0f0);
16-
// 分组标题字号
17-
--ti-option-group-title-font-size: var(--ti-common-font-size-0, 12px);
18-
// 分组标题字重
19-
--ti-option-group-title-font-weight: var(--ti-common-font-weight-normal, 400);
20-
// 分组标题字体颜色
21-
--ti-option-group-title-text-color: var(--ti-common-color-text-weaken, #808080);
22-
// 分组标题行高
23-
--ti-option-group-title-line-height: var(--ti-common-line-height-base, 18px);
24-
// 分组标题高度
25-
--ti-option-group-title-height: var(--ti-common-size-auto, auto);
26-
// 分组标题水平方向外边距
27-
--ti-option-group-title-padding-horizontal: var(--ti-common-space-4x, 16px);
28-
// 分组标题顶部外边距
29-
--ti-option-group-title-margin-top: var(--ti-common-space-2x, 8px);
30-
// 分组标题底部外边距
31-
--ti-option-group-title-margin-bottom: var(--ti-common-space-2, 2px);
32-
// 分组第一个标题顶部外边距
33-
--ti-option-group-title-margin-top-first: var(--ti-common-space-base, 4px);
34-
// 分组分割线高度
35-
--ti-option-group-line-dividing-height: var(--ti-common-size-0, 0px);
36-
// 分组底部内边距
37-
--ti-option-group-padding-bottom: var(--ti-common-space-0, 0px);
14+
// 字号
15+
--tv-OptionGroup-font-size: var(--tv-font-size-sm, 12px);
16+
// 文本色
17+
--tv-OptionGroup-text-color: var(--tv-color-text-weaken, #808080);
18+
// 行高
19+
--tv-OptionGroup-line-height: var(--tv-line-height-number, 1.5);
20+
21+
// 分割线填充色
22+
--tv-OptionGroup-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
23+
// 分割线高度
24+
--tv-OptionGroup-height-divider: 0px;
25+
26+
// 标题水平方向内边距
27+
--tv-OptionGroup-title-padding-x: var(--tv-space-xl, 16px);
28+
// 标题外边距
29+
--tv-OptionGroup-title-margin: var(--tv-space-md, 8px) 0 var(--tv-space-xs, 2px) 0;
30+
31+
// 第一个标题顶部外边距
32+
--tv-OptionGroup-title-margin-top-first: var(--tv-space-sm, 4px);
3833
}

‎packages/theme/src/option/index.less

+48-107
Original file line numberDiff line numberDiff line change
@@ -14,97 +14,49 @@
1414
@import './vars.less';
1515

1616
@option-prefix-cls: ~'@{css-prefix}option';
17-
@select-dropdown-prefix-cls: ~'@{css-prefix}select-dropdown';
18-
@checkbox-prefix-cls: ~'@{css-prefix}checkbox';
1917

20-
.@{select-dropdown-prefix-cls} {
21-
.component-css-vars-option();
22-
23-
&.is-multiple {
24-
.@{option-prefix-cls} {
25-
&.selected {
26-
color: var(--ti-option-text-color);
27-
background-color: var(--ti-option-bg-color-selected);
28-
29-
&:hover {
30-
background-color: var(--ti-option-hover-bg-color-selected);
31-
}
32-
33-
&.is-disabled {
34-
color: var(--ti-option-disabled-text-color);
35-
36-
&:hover {
37-
background-color: var(--ti-option-disabled-bg-color);
38-
}
39-
}
40-
.@{option-prefix-cls}__checkbox-wrap {
41-
color: var(--ti-option-selected-text-color);
42-
}
43-
}
44-
}
45-
}
18+
.@{option-prefix-cls}[data-tag='tiny-option'] {
19+
padding: var(--tv-Option-padding);
4620
}
4721

4822
.@{option-prefix-cls} {
23+
.component-css-vars-option();
24+
25+
color: var(--tv-Option-text-color);
26+
font-size: var(--tv-Option-font-size);
27+
height: var(--tv-Option-height);
28+
line-height: var(--tv-Option-line-height);
4929
position: relative;
50-
color: var(--ti-option-text-color);
51-
font-size: var(--ti-option-font-size);
52-
height: var(--ti-option-height);
30+
white-space: nowrap;
5331
display: flex;
5432
align-items: center;
5533
cursor: pointer;
56-
line-height: 1.5;
57-
box-sizing: border-box;
58-
margin-top: var(--ti-option-margin-top);
59-
border-radius: var(--ti-option-border-radius);
60-
61-
& > .@{option-prefix-cls}__label {
62-
display: inline-block;
63-
width: 100%;
64-
text-overflow: ellipsis;
65-
overflow: hidden;
66-
}
67-
68-
& > .@{option-prefix-cls}__icon {
69-
font-size: var(--ti-option-icon-size);
70-
margin-right: var(--ti-option-icon-margin-right);
71-
}
72-
73-
&.is-disabled {
74-
color: var(--ti-option-disabled-text-color);
75-
cursor: not-allowed;
76-
}
77-
78-
&.hover,
79-
&:hover {
80-
background-color: var(--ti-option-hover-bg-color);
8134

82-
&.is-disabled {
83-
background-color: var(--ti-option-disabled-bg-color);
84-
}
35+
.tiny-svg {
36+
font-size: var(--tv-Option-icon-size);
37+
margin-right: var(--tv-Option-icon-margin-right);
8538
}
8639

87-
&:not(.is-disabled):not(.selected):hover {
88-
.@{checkbox-prefix-cls}__inner {
89-
border-color: var(--ti-option-checkbox-border-color-hover);
90-
}
91-
.halfselect,
92-
.checked-sur {
93-
.@{checkbox-prefix-cls}__inner {
94-
border-color: var(--ti-option-checkbox-all-select-border-color-hover);
95-
}
40+
// 复选框
41+
.@{option-prefix-cls}__checkbox-wrap {
42+
.tiny-svg {
43+
fill: var(--tv-Option-icon-color-unchecked);
9644
}
9745
}
9846

99-
& &-checkbox {
100-
vertical-align: top;
47+
&.selected .tiny-svg,
48+
.checked-sur.tiny-svg,
49+
.halfselect.tiny-svg {
50+
fill: var(--tv-Option-icon-color-checked);
10151
}
10252

103-
& &-wrapper {
53+
// 文本区域
54+
&-wrapper {
10455
// aui 为display:inline-block height: 100%;
10556
// 100%会让元素不能对齐， 该div比前面的check-box高，所以去掉它。
10657
// inline-block 会让业务的插槽传入的flex-basis不生效。 aui要求业务整改了。 回头改为 inline-block
10758
display: flex;
59+
align-items: center;
10860

10961
&.calc-width {
11062
width: calc(100% - 24px);
@@ -113,52 +65,41 @@
11365
&.full-width {
11466
width: 100%;
11567
}
116-
}
11768

118-
& &-label {
119-
display: inline-block;
120-
width: 100%;
121-
overflow: hidden;
122-
text-overflow: ellipsis;
123-
white-space: nowrap;
124-
}
125-
126-
&.selected {
127-
color: var(--ti-option-selected-text-color);
128-
background-color: var(--ti-option-selected-bg-color);
129-
font-weight: var(--ti-option-selected-font-weight);
130-
131-
&:hover {
132-
background-color: var(--ti-option-selected-bg-color-hover);
69+
.@{option-prefix-cls}-label {
70+
display: inline-block;
71+
width: 100%;
72+
overflow: hidden;
73+
text-overflow: ellipsis;
74+
white-space: nowrap;
13375
}
13476
}
13577

136-
.@{checkbox-prefix-cls} {
137-
vertical-align: middle;
138-
margin-bottom: 2px;
139-
}
140-
141-
.tiny-svg-size {
142-
fill: var(--ti-option-multi-svg-border-color);
143-
font-size: 16px;
144-
margin-right: 8px;
145-
146-
&:hover {
147-
fill: var(--ti-option-multi-svg-hover-border-color);
148-
}
78+
&.hover,
79+
&:hover {
80+
background-color: var(--tv-Option-bg-color-hover);
14981
}
15082

151-
&.selected .tiny-svg-size,
152-
.checked-sur.tiny-svg-size,
153-
.halfselect.tiny-svg-size {
154-
fill: var(--ti-option-multi-svg-icon-color);
83+
&:not(:has(.tiny-option__checkbox-wrap)).selected {
84+
color: var(--tv-Option-text-color-selected);
15585
}
15686

15787
&.memorize-highlight {
158-
color: var(--ti-option-highlight-text-color);
88+
color: var(--tv-Option-text-color-highlight);
15989
}
16090

161-
&.memorize-highlight.selected {
162-
color: var(--ti-option-highlight-selected-text-color);
91+
&.is-disabled {
92+
color: var(--tv-Option-text-color-disabled);
93+
cursor: not-allowed;
94+
95+
.tiny-svg {
96+
fill: var(--tv-Option-icon-color-checked-disabled);
97+
98+
&.check {
99+
path:first-of-type {
100+
fill: var(--tv-Option-icon-bg-color-disabled);
101+
}
102+
}
103+
}
163104
}
164105
}

0 commit comments

Comments
 (0)