Skip to content

Commit

Permalink
refactor(dropdown-menu): [dropdown] refactor DropdownMenu and Dropdow…
Browse files Browse the repository at this point in the history 
…nItem 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
  • Loading branch information
@MomoPoppy
MomoPoppy authored Sep 30, 2024
1 parent f391eb8 commit 5fbaf49
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 315 deletions.
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/dropdown/visible-arrow.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@ test('显示箭头', async ({ page }) => {
await dropdownTrigger.hover()
await expect(dropDownMenu).toBeVisible()
await expect(arrow).toBeVisible()
await expect(arrow).toHaveCSS('top', '-6px')
await expect(arrow).toHaveCSS('top', '-8px')
})
6 changes: 4 additions & 2 deletions packages/renderless/src/dropdown-item/vue.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const api = [
'getTip'
]

const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm }) => {
const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm, dropdownVm }) => {
const state: IDropdownItemState = reactive({
checkedStatus: dropdownMenuVm?.checkedStatus,
sort: props.modelValue,
Expand All @@ -78,6 +78,7 @@ const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm }) =
currentIndex: props.currentIndex,
textField: dropdownMenuVm?.textField || props.textField,
popperClass: dropdownMenuVm?.popperClass || '',
sizeClass: dropdownVm?.size ? `tiny-dropdown-item--${dropdownVm?.size}` : '',
getIcon: computed(() => api.computedGetIcon()),
children: []
})
Expand Down Expand Up @@ -117,7 +118,8 @@ export const renderless = (
): IDropdownItemApi => {
const api = {} as IDropdownItemApi
const dropdownMenuVm = inject('dropdownMenuVm', null) as IDropdownMenuVm
const state: IDropdownItemState = initState({ reactive, computed, api, props, parent, dropdownMenuVm })
const dropdownVm = inject('dropdownVm', null)
const state: IDropdownItemState = initState({ reactive, computed, api, props, parent, dropdownMenuVm, dropdownVm })

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

Expand Down
117 changes: 52 additions & 65 deletions packages/theme/src/dropdown-item/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,29 +20,44 @@
.component-css-vars-dropdown-item();

list-style: none;
font-size: var(--ti-dropdown-item-font-size);
color: var(--ti-dropdown-item-text-color);
font-size: var(--tv-DropdownItem-font-size);
height: var(--tv-DropdownItem-height);
line-height: var(--tv-DropdownItem-line-height);
color: var(--tv-DropdownItem-text-color);
cursor: pointer;
outline: 0;
position: relative;
word-break: break-all;
max-width: var(--ti-dropdown-item-max-width);
max-width: 100%;
display: flex;
align-items: center;

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

&:last-of-type {
margin-bottom: 0;
margin-bottom: 0px;
}
}

.@{svg-prefix-cls} {
font-size: var(--tv-DropdownItem-icon-size);
fill: var(--tv-DropdownItem-icon-color);
}

&:before {
content: '';
content: '';
height: 0px;
display: block;
margin: 0px;
}

&__wrap {
line-height: var(--ti-dropdown-item-line-height);
margin: var(--ti-dropdown-item-margin-vertical) var(--ti-dropdown-item-margin-horizontal);
height: var(--ti-dropdown-item-height);
display: flex;
align-items: center;
height: 100%;
width: 100%;

.@{dropdown-item-prefix-cls}--child {
position: absolute;
Expand All @@ -54,13 +69,7 @@
.@{dropdown-item-prefix-cls}__expand {
display: flex;
align-items: center;

.@{svg-prefix-cls} {
fill: var(--ti-dropdown-item-icon-color);
font-size: var(--ti-dropdown-item-expand-icon-size);
margin-left: var(--ti-dropdown-item-expand-svg-margin-left);
margin-right: var(--ti-dropdown-item-expand-svg-margin-right);
}
margin-right: var(--tv-DropdownItem-expand-margin-right);

& + .@{dropdown-item-prefix-cls}__content {
margin-left: 0;
Expand All @@ -78,24 +87,21 @@
white-space: nowrap;
}

.@{svg-prefix-cls} {
margin-right: 4px;
fill: var(--ti-dropdown-item-icon-color);
.@{dropdown-item-prefix-cls}__pre-icon {
margin-right: var(--tv-DropdownItem-pre-icon-margin-right);
}
}
}

&:focus,
&:not(.is-disabled):hover {
background-color: var(--ti-dropdown-item-hover-bg-color);
color: var(--ti-dropdown-item-hover-text-color);
border-radius: var(--ti-dropdown-item-border-radius);
background-color: var(--tv-DropdownItem-bg-color-hover);

& > .@{dropdown-item-prefix-cls}__wrap {
& > .@{dropdown-item-prefix-cls}__expand,
& > .@{dropdown-item-prefix-cls}__content {
.@{svg-prefix-cls} {
fill: var(--ti-dropdown-item-icon-color-hover);
fill: var(--tv-DropdownItem-icon-color-hover);
}
}

Expand All @@ -105,66 +111,47 @@
}
}

&:not(.is-disabled):active {
background-color: var(--ti-dropdown-item-active-bg-color);
color: var(--ti-dropdown-item-active-text-color);
border-radius: var(--ti-dropdown-item-border-radius);

& > .@{dropdown-item-prefix-cls}__wrap {
& > .@{dropdown-item-prefix-cls}__expand,
& > .@{dropdown-item-prefix-cls}__content {
.@{svg-prefix-cls} {
fill: var(--ti-dropdown-item-icon-color-active);
}
}
}
}

// 展开项悬浮激活态
&:not(.is-disabled).has-children:hover {
color: var(--ti-dropdown-item-content-text-hover);
background-color: var(--ti-dropdown-item-content-bg-hover);

& > .@{dropdown-item-prefix-cls}__wrap {
& > .@{dropdown-item-prefix-cls}__content {
font-weight: var(--ti-dropdown-item-content-font-weight-hover);
}
}
color: var(--tv-DropdownItem-text-color-active);
background-color: transparent;
}

// 禁用
&.is-disabled {
cursor: not-allowed;
color: var(--ti-dropdown-item-disabled-text-color);
color: var(--tv-DropdownItem-text-color-disabled);

& > .@{dropdown-item-prefix-cls}__wrap {
& > .@{dropdown-item-prefix-cls}__expand,
& > .@{dropdown-item-prefix-cls}__content {
svg {
fill: var(--ti-dropdown-item-icon-color-disabled);
fill: var(--tv-DropdownItem-icon-color-disabled);
}
}
}
}
}

.@{dropdown-item-prefix-cls}--divided {
position: relative;
// 选中态
&--check-status {
color: var(--tv-DropdownItem-text-color-active);
font-weight: var(--tv-DropdownItem-font-weight-checked);
}

// 分割线
&--divided {
position: relative;

.@{dropdown-item-prefix-cls}__wrap {
border-top: var(--ti-dropdown-item-divided-border-weight) var(--ti-dropdown-item-divided-border-style)
var(--ti-dropdown-item-divided-border-color);
.@{dropdown-item-prefix-cls}__wrap {
border-top: var(--tv-DropdownItem-border-divider);
}
}

&:before {
content: '';
height: var(--ti-dropdown-item-before-height);
display: block;
margin: var(--ti-dropdown-item-before-margin-vertical) var(--ti-dropdown-item-before-margin-horizontal);
background-color: var(--ti-dropdown-item-before-bg-color);
&--small {
height: var(--tv-DropdownItem-height-sm);
}
}

.@{dropdown-item-prefix-cls}--check-status {
background-color: var(--ti-dropdown-item-bg-color-selected);
color: var(--ti-dropdown-item-text-color-selected);
font-weight: var(--ti-dropdown-item-font-weight-selected);
&--mini {
height: var(--tv-DropdownItem-height-xs);
}
}
166 changes: 48 additions & 118 deletions packages/theme/src/dropdown-item/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,122 +11,52 @@
*/

.component-css-vars-dropdown-item() {
// 下拉菜单项高度
--ti-dropdown-item-height: var(--ti-common-size-height-normal, 32px);
// 下拉菜单项悬浮背景色
--ti-dropdown-item-hover-bg-color: var(--ti-common-color-bg-normal, #f5f5f5);
// 下拉菜单项选中背景色
--ti-dropdown-item-bg-color-selected: var(--ti-common-color-bg-white-normal, #ffffff);
// 下拉菜单项选中文本字重
--ti-dropdown-item-font-weight-selected: var(--ti-common-font-weight-6, 600);
// 下拉菜单项选中文本色
--ti-dropdown-item-text-color-selected: #1476ff;
// 下拉菜单非禁用项悬浮文本色
--ti-dropdown-item-hover-text-color: var(--ti-common-color-text-primary, #191919);
// 下拉菜单项点击瞬间背景色
--ti-dropdown-item-active-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
// 下拉菜单项点击瞬间文本色
--ti-dropdown-item-active-text-color: #1476ff;
// 下拉菜单项禁用文本色
--ti-dropdown-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
// 下拉菜单项文本色
--ti-dropdown-item-text-color: var(--ti-common-color-text-primary, #191919);
// 下拉菜单项字号
--ti-dropdown-item-font-size: var(--ti-common-font-size-base, 14px);
// 默认尺寸下拉菜单项的行高
--ti-dropdown-item-line-height: var(--ti-common-line-height-number, 1.5);
// 下拉菜单项垂直外边距
--ti-dropdown-item-margin-vertical: var(--ti-common-space-0, 0px);
// 下拉菜单项水平外边距
--ti-dropdown-item-margin-horizontal: var(--ti-common-space-4x, 16px);
// 拉菜单项底部外边距
--ti-dropdown-item-margin-bottom: var(--ti-common-space-0, 0px);
// 拉菜单项左边外边距
--ti-dropdown-item-margin-left: var(--ti-common-space-0, 0px);
// 拉菜单项右边外边距
--ti-dropdown-item-margin-right: var(--ti-common-space-0, 0px);
// 拉菜单项顶部外边距
--ti-dropdown-item-margin-top: var(--ti-common-space-0, 0px);
// 下拉菜单项边框圆角
--ti-dropdown-item-border-radius: var(--ti-common-border-radius-0, 0);
// 下拉菜单项最大宽度
--ti-dropdown-item-max-width: var(--ti-common-size-auto, auto);
// 下拉项图标默认填充色
--ti-dropdown-item-icon-color: var(--ti-common-color-icon-normal, #808080);
//下拉项图标悬浮填充色
--ti-dropdown-item-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
// 下拉项图标激活时填充色
--ti-dropdown-item-icon-color-active: var(--ti-common-color-icon-white, #fff);
// 下拉项图标禁用填充色
--ti-dropdown-item-icon-color-disabled: var(--ti-common-color-icon-disabled, #c2c2c2);
// 下拉项展开图标的左侧外边距
--ti-dropdown-item-expand-svg-margin-left: var(--ti-common-space-0, 0px);
// 下拉项展开图标的右侧外边距
--ti-dropdown-item-expand-svg-margin-right: var(--ti-common-space-2x, 8px);
// 下拉项内容的左侧外边距
--ti-dropdown-item-content-margin-left: calc(var(--ti-dropdown-item-expand-icon-size) + var(--ti-common-space-2x));
// 下拉项内容悬浮时的字重
--ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4, normal);
// 有二级菜单下拉项内容悬浮时的文本色
--ti-dropdown-item-content-text-hover: #1476ff;
// 有二级菜单下拉项内容悬浮时的背景色
--ti-dropdown-item-content-bg-hover: transparent;
// 下拉项分割线尺寸
--ti-dropdown-item-divided-border-weight: var(--ti-common-border-weight-normal, 1px);
// 下拉项分割线样式
--ti-dropdown-item-divided-border-style: var(--ti-common-border-style-solid, solid);
// 下拉项分割线颜色
--ti-dropdown-item-divided-border-color: var(--ti-common-color-line-dividing, #f0f0f0);
// 下拉项前置伪元素的填充色
--ti-dropdown-item-before-bg-color: transparent;
// 下拉项前置伪元素的垂直外边距
--ti-dropdown-item-before-margin-vertical: var(--ti-common-space-0, 0px);
// 下拉项前置伪元素的水平外边距
--ti-dropdown-item-before-margin-horizontal: var(--ti-common-space-0, 0px);
// 中尺寸下拉项前置伪元素的水平外边距
--ti-dropdown-item-medium-before-margin-horizontal: var(--ti-common-space-0, 0px);
// 小尺寸下拉项前置伪元素的水平外边距
--ti-dropdown-item-small-before-margin-horizontal: var(--ti-common-space-0, 0px);
// 迷你尺寸下拉项前置伪元素的水平外边距
--ti-dropdown-item-mini-before-margin-horizontal: var(--ti-common-space-0, 0px);
// 下拉项前置伪元素的高度
--ti-dropdown-item-before-height: 0; // TINY-TODO 等设计图出来再优化为变量
// 中尺寸下拉项前置伪元素的高度
--ti-dropdown-item-medium-before-height: 6px;
// 小尺寸下拉项前置伪元素的高度
--ti-dropdown-item-small-before-height: var(--ti-common-size-base, 4px);
// 迷你尺寸下拉项前置伪元素的高度
--ti-dropdown-item-mini-before-height: 3px;
// 中尺寸下拉菜单菜单项的行高
--ti-dropdown-item-medium-line-height: var(--ti-common-size-height-normal, 32px);
// 中尺寸下拉菜单菜单项的字号
--ti-dropdown-item-medium-font-size: var(--ti-common-font-size-1, 14px);
// 中尺寸下拉菜单菜单项的垂直内边距
--ti-dropdown-item-medium-padding-vertical: var(--ti-common-space-0, 0px);
// 中尺寸下拉菜单菜单项的水平内边距
--ti-dropdown-item-medium-padding-horizontal: var(--ti-common-space-4x, 16px);
// 中尺寸下拉菜单菜单项分割线的顶部外边距
--ti-dropdown-item-medium-divided-margin-top: var(--ti-common-space-6, 6px);
// 小尺寸下拉菜单菜单项的行高
--ti-dropdown-item-small-line-height: var(--ti-common-line-height-5, 36px);
// 小尺寸下拉菜单菜单项的垂直内边距
--ti-dropdown-item-small-padding-vertical: var(--ti-common-space-0, 0px);
// 小尺寸下拉菜单菜单项的水平内边距
--ti-dropdown-item-small-padding-horizontal: var(--ti-common-space-4x, 16px);
// 小尺寸下拉菜单菜单项的字号
--ti-dropdown-item-small-font-size: var(--ti-common-font-size-base, 14px);
// 小尺寸下拉菜单菜单项分割线的顶部外边距
--ti-dropdown-item-small-divided-margin-top: var(--ti-common-space-base, 4px);
// 迷你尺寸下拉菜单菜单项的行高
--ti-dropdown-item-mini-line-height: var(--ti-common-line-height-5, 36px);
// 迷你尺寸下拉菜单菜单项的垂直内边距
--ti-dropdown-item-mini-padding-vertical: var(--ti-common-space-0, 0px);
// 迷你尺寸下拉菜单菜单项的水平内边距
--ti-dropdown-item-mini-padding-horizontal: var(--ti-common-space-10, 10px);
// 迷你尺寸下拉菜单菜单项的字号
--ti-dropdown-item-mini-font-size: var(--ti-common-font-size-base, 14px);
// 迷你尺寸下拉菜单菜单项分割线的顶部外边距
--ti-dropdown-item-mini-divided-margin-top: calc(var(--ti-common-space-1, 1px) * 3);
// 展开图标尺寸
--ti-dropdown-item-expand-icon-size: var(--ti-common-font-size-2, 16px);
// 默认字号
--tv-DropdownItem-font-size: var(--tv-font-size-md, 14px);
// 默认行高
--tv-DropdownItem-line-height: var(--tv-line-height-number, 1.5);
// 默认文本色
--tv-DropdownItem-text-color: var(--tv-color-text, #191919);
// 选中 / （展开项）激活文本色
--tv-DropdownItem-text-color-active: var(--tv-color-text-active, #1476ff);
// 禁用文本色
--tv-DropdownItem-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
// 选中文本字重
--tv-DropdownItem-font-weight-checked: var(--tv-font-weight-bold, 600);

// 默认图标尺寸
--tv-DropdownItem-icon-size: var(--tv-icon-size, 16px);
// 默认图标色
--tv-DropdownItem-icon-color: var(--tv-color-icon, #808080);
//图标悬浮色
--tv-DropdownItem-icon-color-hover: var(--tv-color-icon-hover, #191919);
// 图标禁用色
--tv-DropdownItem-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);

// 菜单项内边距
--tv-DropdownItem-padding: 0px var(--tv-space-xl, 16px);
// 展开图标的右侧外边距
--tv-DropdownItem-expand-margin-right: var(--tv-space-md, 8px);
// 前置图标的右侧外边距
--tv-DropdownItem-pre-icon-margin-right: var(--tv-space-sm, 4px);
// 菜单项内容区的左侧外边距
--tv-DropdownItem-content-margin-left: calc(
var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-expand-margin-right)
);
// 菜单项文本的左侧外边距
--tv-DropdownItem-label-margin-left: calc(
var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-pre-icon-margin-right)
);

// 菜单项高度(默认）
--tv-DropdownItem-height: var(--tv-size-height-md, 32px);
// 菜单项高度(small）
--tv-DropdownItem-height-sm: var(--tv-size-height-sm, 28px);
// 菜单项高度(mini）
--tv-DropdownItem-height-xs: var(--tv-size-height-mi, 24px);

// 菜单项悬浮背景色
--tv-DropdownItem-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
// 菜单项分割线
--tv-DropdownItem-border-divider: var(--tv-border-width, 1px) solid var(--tv-color-border-divider, #f0f0f0);
}
Loading

0 comments on commit 5fbaf49

Please sign in to comment.