Skip to content

Commit 5fbaf49

Browse files
MomoPoppyMomoPoppy
authored
refactor(dropdown-menu): [dropdown] refactor DropdownMenu and DropdownItem vars and style (#2208)
* refactor(dropdowm-menu): [dropdown] modify variable names and add refactor styles for dropdowm-menu * feat(dropdown-item): [dropdown] add size className * refactor(dropdowm-item): [dropdown] modify variable names and add refactor styles for dropdowm-item * test(dropdown): modify test cases
1 parent f391eb8 commit 5fbaf49

File tree

7 files changed

+160
-315
lines changed

7 files changed

+160
-315
lines changed

‎examples/sites/demos/pc/app/dropdown/visible-arrow.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@ test('显示箭头', async ({ page }) => {
1717
await dropdownTrigger.hover()
1818
await expect(dropDownMenu).toBeVisible()
1919
await expect(arrow).toBeVisible()
20-
await expect(arrow).toHaveCSS('top', '-6px')
20+
await expect(arrow).toHaveCSS('top', '-8px')
2121
})

‎packages/renderless/src/dropdown-item/vue.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const api = [
5858
'getTip'
5959
]
6060

61-
const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm }) => {
61+
const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm, dropdownVm }) => {
6262
const state: IDropdownItemState = reactive({
6363
checkedStatus: dropdownMenuVm?.checkedStatus,
6464
sort: props.modelValue,
@@ -78,6 +78,7 @@ const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm }) =
7878
currentIndex: props.currentIndex,
7979
textField: dropdownMenuVm?.textField || props.textField,
8080
popperClass: dropdownMenuVm?.popperClass || '',
81+
sizeClass: dropdownVm?.size ? `tiny-dropdown-item--${dropdownVm?.size}` : '',
8182
getIcon: computed(() => api.computedGetIcon()),
8283
children: []
8384
})
@@ -117,7 +118,8 @@ export const renderless = (
117118
): IDropdownItemApi => {
118119
const api = {} as IDropdownItemApi
119120
const dropdownMenuVm = inject('dropdownMenuVm', null) as IDropdownMenuVm
120-
const state: IDropdownItemState = initState({ reactive, computed, api, props, parent, dropdownMenuVm })
121+
const dropdownVm = inject('dropdownVm', null)
122+
const state: IDropdownItemState = initState({ reactive, computed, api, props, parent, dropdownMenuVm, dropdownVm })
121123

122124
initApi({ api, state, emit, props, parent, dispatch, vm, constants, designConfig })
123125

‎packages/theme/src/dropdown-item/index.less

Lines changed: 52 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,44 @@
2020
.component-css-vars-dropdown-item();
2121

2222
list-style: none;
23-
font-size: var(--ti-dropdown-item-font-size);
24-
color: var(--ti-dropdown-item-text-color);
23+
font-size: var(--tv-DropdownItem-font-size);
24+
height: var(--tv-DropdownItem-height);
25+
line-height: var(--tv-DropdownItem-line-height);
26+
color: var(--tv-DropdownItem-text-color);
2527
cursor: pointer;
2628
outline: 0;
2729
position: relative;
2830
word-break: break-all;
29-
max-width: var(--ti-dropdown-item-max-width);
31+
max-width: 100%;
32+
display: flex;
33+
align-items: center;
3034

3135
&[class*='tiny-'] {
32-
margin: var(--ti-dropdown-item-margin-top) var(--ti-dropdown-item-margin-right)
33-
var(--ti-dropdown-item-margin-bottom) var(--ti-dropdown-item-margin-left);
36+
padding: var(--tv-DropdownItem-padding);
3437

3538
&:last-of-type {
36-
margin-bottom: 0;
39+
margin-bottom: 0px;
3740
}
3841
}
3942

43+
.@{svg-prefix-cls} {
44+
font-size: var(--tv-DropdownItem-icon-size);
45+
fill: var(--tv-DropdownItem-icon-color);
46+
}
47+
48+
&:before {
49+
content: '';
50+
content: '';
51+
height: 0px;
52+
display: block;
53+
margin: 0px;
54+
}
55+
4056
&__wrap {
41-
line-height: var(--ti-dropdown-item-line-height);
42-
margin: var(--ti-dropdown-item-margin-vertical) var(--ti-dropdown-item-margin-horizontal);
43-
height: var(--ti-dropdown-item-height);
4457
display: flex;
4558
align-items: center;
59+
height: 100%;
60+
width: 100%;
4661

4762
.@{dropdown-item-prefix-cls}--child {
4863
position: absolute;
@@ -54,13 +69,7 @@
5469
.@{dropdown-item-prefix-cls}__expand {
5570
display: flex;
5671
align-items: center;
57-
58-
.@{svg-prefix-cls} {
59-
fill: var(--ti-dropdown-item-icon-color);
60-
font-size: var(--ti-dropdown-item-expand-icon-size);
61-
margin-left: var(--ti-dropdown-item-expand-svg-margin-left);
62-
margin-right: var(--ti-dropdown-item-expand-svg-margin-right);
63-
}
72+
margin-right: var(--tv-DropdownItem-expand-margin-right);
6473

6574
& + .@{dropdown-item-prefix-cls}__content {
6675
margin-left: 0;
@@ -78,24 +87,21 @@
7887
white-space: nowrap;
7988
}
8089

81-
.@{svg-prefix-cls} {
82-
margin-right: 4px;
83-
fill: var(--ti-dropdown-item-icon-color);
90+
.@{dropdown-item-prefix-cls}__pre-icon {
91+
margin-right: var(--tv-DropdownItem-pre-icon-margin-right);
8492
}
8593
}
8694
}
8795

8896
&:focus,
8997
&:not(.is-disabled):hover {
90-
background-color: var(--ti-dropdown-item-hover-bg-color);
91-
color: var(--ti-dropdown-item-hover-text-color);
92-
border-radius: var(--ti-dropdown-item-border-radius);
98+
background-color: var(--tv-DropdownItem-bg-color-hover);
9399

94100
& > .@{dropdown-item-prefix-cls}__wrap {
95101
& > .@{dropdown-item-prefix-cls}__expand,
96102
& > .@{dropdown-item-prefix-cls}__content {
97103
.@{svg-prefix-cls} {
98-
fill: var(--ti-dropdown-item-icon-color-hover);
104+
fill: var(--tv-DropdownItem-icon-color-hover);
99105
}
100106
}
101107

@@ -105,66 +111,47 @@
105111
}
106112
}
107113

108-
&:not(.is-disabled):active {
109-
background-color: var(--ti-dropdown-item-active-bg-color);
110-
color: var(--ti-dropdown-item-active-text-color);
111-
border-radius: var(--ti-dropdown-item-border-radius);
112-
113-
& > .@{dropdown-item-prefix-cls}__wrap {
114-
& > .@{dropdown-item-prefix-cls}__expand,
115-
& > .@{dropdown-item-prefix-cls}__content {
116-
.@{svg-prefix-cls} {
117-
fill: var(--ti-dropdown-item-icon-color-active);
118-
}
119-
}
120-
}
121-
}
122-
114+
// 展开项悬浮激活态
123115
&:not(.is-disabled).has-children:hover {
124-
color: var(--ti-dropdown-item-content-text-hover);
125-
background-color: var(--ti-dropdown-item-content-bg-hover);
126-
127-
& > .@{dropdown-item-prefix-cls}__wrap {
128-
& > .@{dropdown-item-prefix-cls}__content {
129-
font-weight: var(--ti-dropdown-item-content-font-weight-hover);
130-
}
131-
}
116+
color: var(--tv-DropdownItem-text-color-active);
117+
background-color: transparent;
132118
}
133119

120+
// 禁用
134121
&.is-disabled {
135122
cursor: not-allowed;
136-
color: var(--ti-dropdown-item-disabled-text-color);
123+
color: var(--tv-DropdownItem-text-color-disabled);
137124

138125
& > .@{dropdown-item-prefix-cls}__wrap {
139126
& > .@{dropdown-item-prefix-cls}__expand,
140127
& > .@{dropdown-item-prefix-cls}__content {
141128
svg {
142-
fill: var(--ti-dropdown-item-icon-color-disabled);
129+
fill: var(--tv-DropdownItem-icon-color-disabled);
143130
}
144131
}
145132
}
146133
}
147-
}
148134

149-
.@{dropdown-item-prefix-cls}--divided {
150-
position: relative;
135+
// 选中态
136+
&--check-status {
137+
color: var(--tv-DropdownItem-text-color-active);
138+
font-weight: var(--tv-DropdownItem-font-weight-checked);
139+
}
140+
141+
// 分割线
142+
&--divided {
143+
position: relative;
151144

152-
.@{dropdown-item-prefix-cls}__wrap {
153-
border-top: var(--ti-dropdown-item-divided-border-weight) var(--ti-dropdown-item-divided-border-style)
154-
var(--ti-dropdown-item-divided-border-color);
145+
.@{dropdown-item-prefix-cls}__wrap {
146+
border-top: var(--tv-DropdownItem-border-divider);
147+
}
155148
}
156149

157-
&:before {
158-
content: '';
159-
height: var(--ti-dropdown-item-before-height);
160-
display: block;
161-
margin: var(--ti-dropdown-item-before-margin-vertical) var(--ti-dropdown-item-before-margin-horizontal);
162-
background-color: var(--ti-dropdown-item-before-bg-color);
150+
&--small {
151+
height: var(--tv-DropdownItem-height-sm);
163152
}
164-
}
165153

166-
.@{dropdown-item-prefix-cls}--check-status {
167-
background-color: var(--ti-dropdown-item-bg-color-selected);
168-
color: var(--ti-dropdown-item-text-color-selected);
169-
font-weight: var(--ti-dropdown-item-font-weight-selected);
154+
&--mini {
155+
height: var(--tv-DropdownItem-height-xs);
156+
}
170157
}

‎packages/theme/src/dropdown-item/vars.less

Lines changed: 48 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -11,122 +11,52 @@
1111
*/
1212

1313
.component-css-vars-dropdown-item() {
14-
// 下拉菜单项高度
15-
--ti-dropdown-item-height: var(--ti-common-size-height-normal, 32px);
16-
// 下拉菜单项悬浮背景色
17-
--ti-dropdown-item-hover-bg-color: var(--ti-common-color-bg-normal, #f5f5f5);
18-
// 下拉菜单项选中背景色
19-
--ti-dropdown-item-bg-color-selected: var(--ti-common-color-bg-white-normal, #ffffff);
20-
// 下拉菜单项选中文本字重
21-
--ti-dropdown-item-font-weight-selected: var(--ti-common-font-weight-6, 600);
22-
// 下拉菜单项选中文本色
23-
--ti-dropdown-item-text-color-selected: #1476ff;
24-
// 下拉菜单非禁用项悬浮文本色
25-
--ti-dropdown-item-hover-text-color: var(--ti-common-color-text-primary, #191919);
26-
// 下拉菜单项点击瞬间背景色
27-
--ti-dropdown-item-active-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
28-
// 下拉菜单项点击瞬间文本色
29-
--ti-dropdown-item-active-text-color: #1476ff;
30-
// 下拉菜单项禁用文本色
31-
--ti-dropdown-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
32-
// 下拉菜单项文本色
33-
--ti-dropdown-item-text-color: var(--ti-common-color-text-primary, #191919);
34-
// 下拉菜单项字号
35-
--ti-dropdown-item-font-size: var(--ti-common-font-size-base, 14px);
36-
// 默认尺寸下拉菜单项的行高
37-
--ti-dropdown-item-line-height: var(--ti-common-line-height-number, 1.5);
38-
// 下拉菜单项垂直外边距
39-
--ti-dropdown-item-margin-vertical: var(--ti-common-space-0, 0px);
40-
// 下拉菜单项水平外边距
41-
--ti-dropdown-item-margin-horizontal: var(--ti-common-space-4x, 16px);
42-
// 拉菜单项底部外边距
43-
--ti-dropdown-item-margin-bottom: var(--ti-common-space-0, 0px);
44-
// 拉菜单项左边外边距
45-
--ti-dropdown-item-margin-left: var(--ti-common-space-0, 0px);
46-
// 拉菜单项右边外边距
47-
--ti-dropdown-item-margin-right: var(--ti-common-space-0, 0px);
48-
// 拉菜单项顶部外边距
49-
--ti-dropdown-item-margin-top: var(--ti-common-space-0, 0px);
50-
// 下拉菜单项边框圆角
51-
--ti-dropdown-item-border-radius: var(--ti-common-border-radius-0, 0);
52-
// 下拉菜单项最大宽度
53-
--ti-dropdown-item-max-width: var(--ti-common-size-auto, auto);
54-
// 下拉项图标默认填充色
55-
--ti-dropdown-item-icon-color: var(--ti-common-color-icon-normal, #808080);
56-
//下拉项图标悬浮填充色
57-
--ti-dropdown-item-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
58-
// 下拉项图标激活时填充色
59-
--ti-dropdown-item-icon-color-active: var(--ti-common-color-icon-white, #fff);
60-
// 下拉项图标禁用填充色
61-
--ti-dropdown-item-icon-color-disabled: var(--ti-common-color-icon-disabled, #c2c2c2);
62-
// 下拉项展开图标的左侧外边距
63-
--ti-dropdown-item-expand-svg-margin-left: var(--ti-common-space-0, 0px);
64-
// 下拉项展开图标的右侧外边距
65-
--ti-dropdown-item-expand-svg-margin-right: var(--ti-common-space-2x, 8px);
66-
// 下拉项内容的左侧外边距
67-
--ti-dropdown-item-content-margin-left: calc(var(--ti-dropdown-item-expand-icon-size) + var(--ti-common-space-2x));
68-
// 下拉项内容悬浮时的字重
69-
--ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4, normal);
70-
// 有二级菜单下拉项内容悬浮时的文本色
71-
--ti-dropdown-item-content-text-hover: #1476ff;
72-
// 有二级菜单下拉项内容悬浮时的背景色
73-
--ti-dropdown-item-content-bg-hover: transparent;
74-
// 下拉项分割线尺寸
75-
--ti-dropdown-item-divided-border-weight: var(--ti-common-border-weight-normal, 1px);
76-
// 下拉项分割线样式
77-
--ti-dropdown-item-divided-border-style: var(--ti-common-border-style-solid, solid);
78-
// 下拉项分割线颜色
79-
--ti-dropdown-item-divided-border-color: var(--ti-common-color-line-dividing, #f0f0f0);
80-
// 下拉项前置伪元素的填充色
81-
--ti-dropdown-item-before-bg-color: transparent;
82-
// 下拉项前置伪元素的垂直外边距
83-
--ti-dropdown-item-before-margin-vertical: var(--ti-common-space-0, 0px);
84-
// 下拉项前置伪元素的水平外边距
85-
--ti-dropdown-item-before-margin-horizontal: var(--ti-common-space-0, 0px);
86-
// 中尺寸下拉项前置伪元素的水平外边距
87-
--ti-dropdown-item-medium-before-margin-horizontal: var(--ti-common-space-0, 0px);
88-
// 小尺寸下拉项前置伪元素的水平外边距
89-
--ti-dropdown-item-small-before-margin-horizontal: var(--ti-common-space-0, 0px);
90-
// 迷你尺寸下拉项前置伪元素的水平外边距
91-
--ti-dropdown-item-mini-before-margin-horizontal: var(--ti-common-space-0, 0px);
92-
// 下拉项前置伪元素的高度
93-
--ti-dropdown-item-before-height: 0; // TINY-TODO 等设计图出来再优化为变量
94-
// 中尺寸下拉项前置伪元素的高度
95-
--ti-dropdown-item-medium-before-height: 6px;
96-
// 小尺寸下拉项前置伪元素的高度
97-
--ti-dropdown-item-small-before-height: var(--ti-common-size-base, 4px);
98-
// 迷你尺寸下拉项前置伪元素的高度
99-
--ti-dropdown-item-mini-before-height: 3px;
100-
// 中尺寸下拉菜单菜单项的行高
101-
--ti-dropdown-item-medium-line-height: var(--ti-common-size-height-normal, 32px);
102-
// 中尺寸下拉菜单菜单项的字号
103-
--ti-dropdown-item-medium-font-size: var(--ti-common-font-size-1, 14px);
104-
// 中尺寸下拉菜单菜单项的垂直内边距
105-
--ti-dropdown-item-medium-padding-vertical: var(--ti-common-space-0, 0px);
106-
// 中尺寸下拉菜单菜单项的水平内边距
107-
--ti-dropdown-item-medium-padding-horizontal: var(--ti-common-space-4x, 16px);
108-
// 中尺寸下拉菜单菜单项分割线的顶部外边距
109-
--ti-dropdown-item-medium-divided-margin-top: var(--ti-common-space-6, 6px);
110-
// 小尺寸下拉菜单菜单项的行高
111-
--ti-dropdown-item-small-line-height: var(--ti-common-line-height-5, 36px);
112-
// 小尺寸下拉菜单菜单项的垂直内边距
113-
--ti-dropdown-item-small-padding-vertical: var(--ti-common-space-0, 0px);
114-
// 小尺寸下拉菜单菜单项的水平内边距
115-
--ti-dropdown-item-small-padding-horizontal: var(--ti-common-space-4x, 16px);
116-
// 小尺寸下拉菜单菜单项的字号
117-
--ti-dropdown-item-small-font-size: var(--ti-common-font-size-base, 14px);
118-
// 小尺寸下拉菜单菜单项分割线的顶部外边距
119-
--ti-dropdown-item-small-divided-margin-top: var(--ti-common-space-base, 4px);
120-
// 迷你尺寸下拉菜单菜单项的行高
121-
--ti-dropdown-item-mini-line-height: var(--ti-common-line-height-5, 36px);
122-
// 迷你尺寸下拉菜单菜单项的垂直内边距
123-
--ti-dropdown-item-mini-padding-vertical: var(--ti-common-space-0, 0px);
124-
// 迷你尺寸下拉菜单菜单项的水平内边距
125-
--ti-dropdown-item-mini-padding-horizontal: var(--ti-common-space-10, 10px);
126-
// 迷你尺寸下拉菜单菜单项的字号
127-
--ti-dropdown-item-mini-font-size: var(--ti-common-font-size-base, 14px);
128-
// 迷你尺寸下拉菜单菜单项分割线的顶部外边距
129-
--ti-dropdown-item-mini-divided-margin-top: calc(var(--ti-common-space-1, 1px) * 3);
130-
// 展开图标尺寸
131-
--ti-dropdown-item-expand-icon-size: var(--ti-common-font-size-2, 16px);
14+
// 默认字号
15+
--tv-DropdownItem-font-size: var(--tv-font-size-md, 14px);
16+
// 默认行高
17+
--tv-DropdownItem-line-height: var(--tv-line-height-number, 1.5);
18+
// 默认文本色
19+
--tv-DropdownItem-text-color: var(--tv-color-text, #191919);
20+
// 选中 / （展开项）激活文本色
21+
--tv-DropdownItem-text-color-active: var(--tv-color-text-active, #1476ff);
22+
// 禁用文本色
23+
--tv-DropdownItem-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
24+
// 选中文本字重
25+
--tv-DropdownItem-font-weight-checked: var(--tv-font-weight-bold, 600);
26+
27+
// 默认图标尺寸
28+
--tv-DropdownItem-icon-size: var(--tv-icon-size, 16px);
29+
// 默认图标色
30+
--tv-DropdownItem-icon-color: var(--tv-color-icon, #808080);
31+
//图标悬浮色
32+
--tv-DropdownItem-icon-color-hover: var(--tv-color-icon-hover, #191919);
33+
// 图标禁用色
34+
--tv-DropdownItem-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
35+
36+
// 菜单项内边距
37+
--tv-DropdownItem-padding: 0px var(--tv-space-xl, 16px);
38+
// 展开图标的右侧外边距
39+
--tv-DropdownItem-expand-margin-right: var(--tv-space-md, 8px);
40+
// 前置图标的右侧外边距
41+
--tv-DropdownItem-pre-icon-margin-right: var(--tv-space-sm, 4px);
42+
// 菜单项内容区的左侧外边距
43+
--tv-DropdownItem-content-margin-left: calc(
44+
var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-expand-margin-right)
45+
);
46+
// 菜单项文本的左侧外边距
47+
--tv-DropdownItem-label-margin-left: calc(
48+
var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-pre-icon-margin-right)
49+
);
50+
51+
// 菜单项高度(默认）
52+
--tv-DropdownItem-height: var(--tv-size-height-md, 32px);
53+
// 菜单项高度(small）
54+
--tv-DropdownItem-height-sm: var(--tv-size-height-sm, 28px);
55+
// 菜单项高度(mini）
56+
--tv-DropdownItem-height-xs: var(--tv-size-height-mi, 24px);
57+
58+
// 菜单项悬浮背景色
59+
--tv-DropdownItem-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
60+
// 菜单项分割线
61+
--tv-DropdownItem-border-divider: var(--tv-border-width, 1px) solid var(--tv-color-border-divider, #f0f0f0);
13262
}

0 commit comments

Comments
 (0)