Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(cascader): [cascader] refactor cascader's css vars #2318

Merged
merged 4 commits into from
Oct 21, 2024
Merged

refactor(cascader): [cascader] refactor cascader's css vars #2318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
992e605
refactor(cascader): refactor cascader's css vars
shenjunjian Oct 19, 2024
58e4e72
fix(cascader): fix
shenjunjian Oct 19, 2024
b3acee2
fix(cascader): fix e2e test
shenjunjian Oct 21, 2024
182f4c7
fix(cascader): fix e2e
shenjunjian Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ test('动态加载且父子级不相关联 lazyload & checkStrictly', async ({ p
const loadingSvg = page.getByRole('menuitem', { name: '选项1' }).locator('svg')
await expect(loadingSvg).toHaveClass(/tiny-cascader-node__postfix/)
await page.waitForTimeout(100)
await page.getByRole('menuitem', { name: '选项2' }).getByRole('radio').click()
await page.getByRole('menuitem', { name: '选项2' }).getByRole('radio').nth(0).click()
await page.getByRole('textbox', { name: '请选择' }).click()
const light = page.getByRole('menuitem', { name: '选项2' }).getByRole('radio')
const light = page.getByRole('menuitem', { name: '选项2' }).getByRole('radio').nth(0)
await expect(light).toHaveClass('tiny-radio is-checked')
})
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/cascader/check-strictly.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ test('父子级不相关联', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('cascader#check-strictly')
await page.getByRole('textbox', { name: '请选择' }).click()
await page.getByRole('menuitem', { name: '开发' }).getByRole('radio').click()
await page.getByRole('menuitem', { name: '开发' }).getByRole('radio').nth(0).click()
await page.getByRole('textbox', { name: '请选择' }).click()
const light = page.getByRole('menuitem', { name: '开发' }).getByRole('radio')
const light = page.getByRole('menuitem', { name: '开发' }).getByRole('radio').nth(0)
await expect(light).toHaveClass('tiny-radio is-checked')
})
16 changes: 8 additions & 8 deletions packages/theme/src/cascader-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
@cascader-node-prefix-cls: ~'@{css-prefix}cascader-node';

.@{cascader-menu-prefix-cls} {
.component-css-vars-cascader-menu();
.inject-CascaderMenu-vars();

min-width: var(--ti-cascader-menu-width);
min-width: var(--tv-CascaderMenu-width);
box-sizing: border-box;
color: var(--ti-cascader-menu-text-color);
border-right: solid 1px var(--ti-cascader-menu-border-color);
color: var(--tv-CascaderMenu-text-color);
border-right: solid 1px var(--tv-CascaderMenu-border-color);

&:last-child {
border-right: none;
Expand All @@ -39,10 +39,10 @@
& &__list {
position: relative;
min-height: 100%;
margin: var(--ti-cascader-menu-list-margin-vertical) var(--ti-cascader-menu-list-margin-horizontal);
margin: var(--tv-CascaderMenu-list-margin-vertical) var(--tv-CascaderMenu-list-margin-horizontal);
list-style: none;
box-sizing: border-box;
padding: var(--ti-cascader-menu-list-padding-vertical) var(--ti-cascader-menu-list-padding-horizontal);
padding: var(--tv-CascaderMenu-list-padding-y) var(--tv-CascaderMenu-list-padding-x);
}

&__hover-zone {
Expand All @@ -60,7 +60,7 @@
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--ti-cascader-menu-empty-text-color);
color: var(--tv-CascaderMenu-empty-text-color);
}

&__no-data {
Expand All @@ -69,6 +69,6 @@
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--ti-cascader-menu-empty-text-color);
color: var(--tv-CascaderMenu-empty-text-color);
}
}
14 changes: 7 additions & 7 deletions packages/theme/src/cascader-menu/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
*
*/

.component-css-vars-cascader-menu() {
.inject-CascaderMenu-vars() {
// 下拉菜单文本色
--ti-cascader-menu-text-color: var(--ti-common-color-text-primary, #191919);
--tv-CascaderMenu-text-color: var(--tv-color-text, #191919);
// 下拉菜单边框色
--ti-cascader-menu-border-color: #f5f5f5;
--tv-CascaderMenu-border-color: #f5f5f5; // 无对应变量
// 下拉菜单为空时的文本色
--ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken, #808080);
--tv-CascaderMenu-empty-text-color: var(--tv-color-text-weaken, #808080);
// 下拉菜单列表垂直方向的内边距
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-2x, 8px);
--tv-CascaderMenu-list-padding-y: var(--tv-space-md, 8px);
// 下拉菜单列表水平方向的内边距
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
--tv-CascaderMenu-list-padding-x: 0;
// 下拉菜单的宽度
--ti-cascader-menu-width: 159px;
--tv-CascaderMenu-width: 159px;
}
44 changes: 22 additions & 22 deletions packages/theme/src/cascader-node/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,30 @@
@checkbox-prefix-cls: ~'@{css-prefix}checkbox';

.@{cascader-node-prefix-cls} {
.component-css-vars-cascader-node();
.inject-CascaderNode-vars();

&.is-selectable.in-active-path {
color: var(--ti-cascader-node-text-color);
color: var(--tv-CascaderNode-text-color);
}

&.in-active-path,
&.is-active {
background: var(--ti-cascader-node-selectable-active-bg-color);
color: var(--ti-cascader-node-selectable-text-color);
background: var(--tv-CascaderNode-selectable-active-bg-color);
color: var(--tv-CascaderNode-selectable-text-color);
&:hover {
background: var(--ti-cascader-node-selectable-hover-bg-color);
background: var(--tv-CascaderNode-selectable-hover-bg-color);
}
}

&.in-active-path:hover {
background: var(--ti-cascader-node-selectable-hover-bg-color);
background: var(--tv-CascaderNode-selectable-hover-bg-color);
}

&:not(.is-disabled):not(.in-active-path):not(.is-active) {
&:focus,
&:hover {
background: var(--ti-cascader-node-hover-bg-color);
color: var(--ti-cascader-node-hover-text-color);
background: var(--tv-CascaderNode-hover-bg-color);
color: var(--tv-CascaderNode-hover-text-color);
}
}

Expand All @@ -50,29 +50,29 @@
}

&.is-disabled {
color: var(--ti-cascader-node-disabled-text-color);
fill: var(--ti-cascader-node-disabled-text-color);
background-color: var(--ti-cascader-node-disabled-bg-color);
color: var(--tv-CascaderNode-disabled-text-color);
fill: var(--tv-CascaderNode-disabled-text-color);
background-color: var(--tv-CascaderNode-disabled-bg-color);
cursor: not-allowed;
.@{cascader-node-prefix-cls}__prefix,
.@{cascader-node-prefix-cls}__postfix {
fill: var(--ti-cascader-node-disabled-icon-color);
fill: var(--tv-CascaderNode-disabled-icon-color);
}
}

&__prefix,
&__postfix {
font-size: var(--ti-cascader-node-icon-font-size);
fill: var(--ti-cascader-node-icon-color);
font-size: var(--tv-CascaderNode-icon-font-size);
fill: var(--tv-CascaderNode-icon-color);
}

&.in-active-path,
&.is-active {
.@{cascader-node-prefix-cls}__postfix {
fill: var(--ti-cascader-node-active-icon-color);
fill: var(--tv-CascaderNode-active-icon-color);
}
.@{cascader-node-prefix-cls}__label {
font-weight: var(--ti-cascader-node-active-font-weight);
font-weight: var(--tv-CascaderNode-active-font-weight);
}
}

Expand All @@ -81,21 +81,21 @@
left: 10px;
top: 50%;
transform: translateY(-50%);
display: var(--ti-cascader-node-prefix-display) !important;
display: var(--tv-CascaderNode-prefix-display) !important;
}

&__postfix {
position: absolute;
top: 50%;
right: var(--ti-cascader-node-postfix-right);
right: var(--tv-CascaderNode-postfix-right);
transform: translateY(-50%);
}

&__label {
max-width: var(--ti-cascader-node-label-max-width);
max-width: var(--tv-CascaderNode-label-max-width);
flex: 1;
flex-basis: auto\9;
padding: var(--ti-cascader-node-label-padding-vertical) var(--ti-cascader-node-label-padding-horizontal);
padding: var(--tv-CascaderNode-label-padding-y) var(--tv-CascaderNode-label-padding-x);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -107,13 +107,13 @@
}

& > .@{radio-prefix-cls} {
margin-right: var(--ti-cascader-node-radio-margin-right);
margin-right: var(--tv-CascaderNode-radio-margin-right);
.@{radio-prefix-cls}__label {
padding-left: 0;
}
}

& > .@{checkbox-prefix-cls} {
margin-right: var(--ti-cascader-node-radio-margin-right);
margin-right: var(--tv-CascaderNode-radio-margin-right);
}
}
40 changes: 20 additions & 20 deletions packages/theme/src/cascader-node/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,43 +10,43 @@
*
*/

.component-css-vars-cascader-node() {
.inject-CascaderNode-vars() {
// 下拉列表子项的背景色
--ti-cascader-node-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f0f0f0);
--tv-CascaderNode-hover-bg-color: var(--tv-color-bg-secondary, #f0f0f0);
// 下拉列表子项悬浮时的文本色
--ti-cascader-node-hover-text-color: var(--ti-common-color-primary-normal, #191919);
--tv-CascaderNode-hover-text-color: var(--tv-color-text, #191919);
// 下拉列表子项的文本色
--ti-cascader-node-text-color: var(--ti-common-color-primary-normal, #191919);
--tv-CascaderNode-text-color: var(--tv-color-text, #191919);
// 下拉列表子项选中后悬浮时的背景色
--ti-cascader-node-selectable-hover-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
--tv-CascaderNode-selectable-hover-bg-color: var(--tv-color-bg, #f5f5f5);
// 下拉列表子项选中时的文本色
--ti-cascader-node-selectable-text-color: var(--ti-common-color-text-primary, #191919);
--tv-CascaderNode-selectable-text-color: var(--tv-color-text, #191919);
// 下拉列表子项禁用状态时的文本色
--ti-cascader-node-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
--tv-CascaderNode-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
// 下拉列表子项禁用状态时的背景色
--ti-cascader-node-disabled-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
--tv-CascaderNode-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
// 下拉列表子项的icon图标的字体大小
--ti-cascader-node-icon-font-size: var(--ti-common-font-size-0, 12px);
--tv-CascaderNode-icon-font-size: var(--tv-font-size-sm, 12px);
// 下拉列表子项的icon图标的色
--ti-cascader-node-icon-color: var(--ti-common-color-icon-normal, #808080);
--tv-CascaderNode-icon-color: var(--tv-color-icon, #808080);
// 下拉列表子项禁用时的icon图标的色
--ti-cascader-node-disabled-icon-color: var(--ti-common-color-text-link-darkbg-hover, #c2c2c2);
--tv-CascaderNode-disabled-icon-color: var(--tv-color-icon-disabled, #c2c2c2);
// 下拉列表子项的选中时icon图标的色
--ti-cascader-node-active-icon-color: var(--ti-common-color-primary-normal, #191919);
--tv-CascaderNode-active-icon-color: var(--tv-color-icon-hover, #191919);
// 下拉列表子项的前缀display
--ti-cascader-node-prefix-display: none;
--tv-CascaderNode-prefix-display: none;
// 下拉列表子项的标签的垂直方向的内边距
--ti-cascader-node-label-padding-vertical: var(--ti-common-space-0, 0px);
--tv-CascaderNode-label-padding-y: 0;
// 下拉列表子项的标签的水平方向的内边距
--ti-cascader-node-label-padding-horizontal: var(--ti-common-space-0, 0px);
--tv-CascaderNode-label-padding-x: 0;
// 下拉列表子项的单选按钮右侧外边距
--ti-cascader-node-radio-margin-right: var(--ti-common-space-base, 4px);
--tv-CascaderNode-radio-margin-right: var(--tv-space-sm, 4px);
// 下拉列表子项聚焦时的背景色
--ti-cascader-node-selectable-active-bg-color: var(--ti-common-color-bg-navigation, #ffffff);
--tv-CascaderNode-selectable-active-bg-color: var(--tv-color-bg-secondary, #ffffff);
// 下拉列表子项icon距离右侧距离
--ti-cascader-node-postfix-right: var(--ti-common-space-4x, 16px);
--tv-CascaderNode-postfix-right: var(--tv-space-xl, 16px);
// 下拉列表子项最大宽度
--ti-cascader-node-label-max-width: calc(var(--ti-common-space-2, 2px) * 53 + 1px);
--tv-CascaderNode-label-max-width: 107px;
// 下拉列表子项高亮时字重
--ti-cascader-node-active-font-weight: var(--ti-common-font-weight-normal, 400);
--tv-CascaderNode-active-font-weight: var(--tv-font-weight-regular, 400);
}
22 changes: 11 additions & 11 deletions packages/theme/src/cascader-panel/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,26 @@
@cascader-node-prefix-cls: ~'@{css-prefix}cascader-node';

.@{cascader-panel-prefix-cls} {
.component-css-vars-cascader-panel();
.inject-CascaderPanel-vars();

display: flex;
border-radius: var(--ti-cascader-panel-border-radius);
font-size: var(--ti-cascader-panel-font-size);
border-radius: var(--tv-CascaderPanel-border-radius);
font-size: var(--tv-CascaderPanel-font-size);
&.is-bordered {
border: 1px solid var(--ti-cascader-panel-border-color);
border-radius: var(--ti-cascader-panel-border-radius);
border: 1px solid var(--tv-CascaderPanel-border-color);
border-radius: var(--tv-CascaderPanel-border-radius);
}

.@{cascader-node-prefix-cls} {
position: relative;
display: flex;
align-items: center;
padding: var(--ti-cascader-panel-node-label-padding-vertical) var(--ti-cascader-panel-node-label-padding-right)
var(--ti-cascader-panel-node-label-padding-vertical) var(--ti-cascader-panel-node-label-padding-left);
height: var(--ti-cascader-panel-node-height);
line-height: var(--ti-cascader-panel-node-height);
padding: var(--tv-CascaderPanel-node-label-padding-x) var(--tv-CascaderPanel-node-label-padding-right)
var(--tv-CascaderPanel-node-label-padding-x) var(--tv-CascaderPanel-node-label-padding-left);
height: var(--tv-CascaderPanel-node-height);
line-height: var(--tv-CascaderPanel-node-height);
outline: 0;
border-radius: var(--ti-cascader-panel-node-border-radius);
margin-top: var(--ti-cascader-panel-node-margin-top);
border-radius: var(--tv-CascaderPanel-node-border-radius);
margin-top: var(--tv-CascaderPanel-node-margin-top);
}
}
20 changes: 10 additions & 10 deletions packages/theme/src/cascader-panel/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,23 @@
*
*/

.component-css-vars-cascader-panel() {
.inject-CascaderPanel-vars() {
// 下拉菜单面板的边框圆角
--ti-cascader-panel-border-radius: var(--ti-common-border-radius-normal, 6px);
--tv-CascaderPanel-border-radius: var(--tv-border-radius-md, 6px);
// 下拉菜单面板的边框色
--ti-cascader-panel-border-color: var(--ti-common-color-line-disabled, #dbdbdb);
--tv-CascaderPanel-border-color: var(--tv-color-border-disabled, #dbdbdb);
// 下拉菜单面板的字体大小
--ti-cascader-panel-font-size: var(--ti-common-font-size-base, 14px);
--tv-CascaderPanel-font-size: var(--tv-font-size-md, 14px);
// 下拉菜单面板子项的高度
--ti-cascader-panel-node-height: var(--ti-common-size-height-normal, 32px);
--tv-CascaderPanel-node-height: 32px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Use the common height variable instead of hardcoding 32px.

The value 32px removes the reference to the standardized height variable --tv-size-height-md, which is used across multiple components for consistency. To maintain uniformity, please update the value to var(--tv-size-height-md, 32px).

🔗 Analysis chain

Variable name updated, but consider maintaining reference to a common height variable.

The change from --ti-cascader-panel-node-height to --tv-CascaderPanel-node-height aligns with the new naming convention, which is good.

However, the value has been simplified from var(--ti-common-size-height-normal, 32px) to 32px. This removes the reference to a common height variable, which could make it harder to maintain consistent heights across components. Consider keeping a reference to a common height variable, such as var(--tv-size-md, 32px), if such a variable exists in the new system.

To verify if a common height variable exists, you can run the following command:

If a suitable common variable is found, consider using it instead of the hardcoded value.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for common height variables in Less files
rg --type less '(--tv-size-\w+|--tv-height-\w+).*32px'

Length of output: 1016

// 下拉菜单面板中子项的顶部外边距
--ti-cascader-panel-node-margin-top: var(--ti-common-space-0, 0px);
--tv-CascaderPanel-node-margin-top: 0;
// 下拉菜单面板中子项的垂直方向的外边距
--ti-cascader-panel-node-label-padding-vertical: var(--ti-common-space-0, 0px);
--tv-CascaderPanel-node-label-padding-x: 0;
// 下拉菜单面板中子项的标签的右侧内边距
--ti-cascader-panel-node-label-padding-right: 16px;
--tv-CascaderPanel-node-label-padding-right: var(----tv-space-xl, 16px);
// 下拉菜单面板中子项的标签的左侧内边距
--ti-cascader-panel-node-label-padding-left: 16px;
--tv-CascaderPanel-node-label-padding-left: var(----tv-space-xl, 16px);
// 下拉菜单面板中子项的边框圆角
--ti-cascader-panel-node-border-radius: 0px;
--tv-CascaderPanel-node-border-radius: 0;
}
Loading
Loading