From 4037cb3d61d1f77271ad92c38f84579ca9b2a8cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Mon, 23 Sep 2024 10:03:12 +0800
Subject: [PATCH] fix(cascader): [cascader] update cascader's x design (#2158)
* fix(cascader): update cascader's x design
* test(cascader): fix e2e
---
.../demos/pc/app/cascader/check-strictly-multiple.spec.ts | 4 ----
.../demos/pc/app/cascader/filter-mode-composition-api.vue | 2 +-
examples/sites/demos/pc/app/cascader/filter-mode.vue | 2 +-
examples/sites/demos/pc/app/cascader/size.spec.ts | 3 +--
packages/theme/src/cascader-node/vars.less | 4 ++--
packages/theme/src/filter-box/index.less | 2 +-
packages/theme/src/filter-box/vars.less | 2 +-
7 files changed, 7 insertions(+), 12 deletions(-)
diff --git a/examples/sites/demos/pc/app/cascader/check-strictly-multiple.spec.ts b/examples/sites/demos/pc/app/cascader/check-strictly-multiple.spec.ts
index c581a9122b..d336b07252 100644
--- a/examples/sites/demos/pc/app/cascader/check-strictly-multiple.spec.ts
+++ b/examples/sites/demos/pc/app/cascader/check-strictly-multiple.spec.ts
@@ -6,8 +6,4 @@ test('多选选择任意一级选项', async ({ page }) => {
await page.getByText('指南 /安装指南 /开发 /引入组件').click()
await page.getByRole('menuitem', { name: '开发' }).locator('span').nth(1).click()
await page.getByRole('menuitem', { name: '安装' }).click()
- const kaifa = page.getByRole('menuitem', { name: '开发' }).locator('span').nth(1)
- const anzhuang = page.getByRole('menuitem', { name: '安装' }).locator('span').nth(1)
- await expect(kaifa).toHaveCSS('background-color', 'rgb(94, 124, 224)')
- await expect(anzhuang).toHaveCSS('background-color', 'rgb(94, 124, 224)')
})
diff --git a/examples/sites/demos/pc/app/cascader/filter-mode-composition-api.vue b/examples/sites/demos/pc/app/cascader/filter-mode-composition-api.vue
index e4f3cb2b71..8b9b23a675 100644
--- a/examples/sites/demos/pc/app/cascader/filter-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/filter-mode-composition-api.vue
@@ -9,7 +9,7 @@
tip="提示"
label="开发文档"
>
-
diff --git a/examples/sites/demos/pc/app/cascader/filter-mode.vue b/examples/sites/demos/pc/app/cascader/filter-mode.vue
index c8c9de8ae5..f512399eba 100644
--- a/examples/sites/demos/pc/app/cascader/filter-mode.vue
+++ b/examples/sites/demos/pc/app/cascader/filter-mode.vue
@@ -9,7 +9,7 @@
tip="提示"
label="开发文档"
>
-
diff --git a/examples/sites/demos/pc/app/cascader/size.spec.ts b/examples/sites/demos/pc/app/cascader/size.spec.ts
index 122790523c..1102accf41 100644
--- a/examples/sites/demos/pc/app/cascader/size.spec.ts
+++ b/examples/sites/demos/pc/app/cascader/size.spec.ts
@@ -6,8 +6,7 @@ test('size', async ({ page }) => {
await expect(page.locator('.tiny-cascader.tiny-cascader--mini input')).toHaveCSS('height', '24px')
- await expect(page.locator('.tiny-cascader.tiny-cascader--small input')).toHaveCSS('height', '32px')
+ await expect(page.locator('.tiny-cascader.tiny-cascader--small input')).toHaveCSS('height', '28px')
await expect(page.locator('.tiny-cascader.tiny-cascader--medium input')).toHaveCSS('height', '40px')
-
})
diff --git a/packages/theme/src/cascader-node/vars.less b/packages/theme/src/cascader-node/vars.less
index cb18ac9004..f8eb848ea9 100644
--- a/packages/theme/src/cascader-node/vars.less
+++ b/packages/theme/src/cascader-node/vars.less
@@ -20,7 +20,7 @@
// 下拉列表子项选中后悬浮时的背景色
--ti-cascader-node-selectable-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
// 下拉列表子项选中时的文本色
- --ti-cascader-node-selectable-text-color: var(--ti-common-color-text-highlight);
+ --ti-cascader-node-selectable-text-color: var(--ti-common-color-text-primary);
// 下拉列表子项禁用状态时的文本色
--ti-cascader-node-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
// 下拉列表子项禁用状态时的背景色
@@ -48,5 +48,5 @@
// 下拉列表子项最大宽度
--ti-cascader-node-label-max-width: calc(var(--ti-common-space-2) * 53 + 1px);
// 下拉列表子项高亮时字重
- --ti-cascader-node-active-font-weight: var(--ti-common-font-weight-bold);
+ --ti-cascader-node-active-font-weight: var(--ti-common-font-weight-normal);
}
diff --git a/packages/theme/src/filter-box/index.less b/packages/theme/src/filter-box/index.less
index d7a5c7834c..dc29eb075a 100644
--- a/packages/theme/src/filter-box/index.less
+++ b/packages/theme/src/filter-box/index.less
@@ -87,7 +87,7 @@
.value {
max-width: 100px;
height: inherit;
- line-height: inherit;
+ line-height: 1.5;
margin-right: 4px;
overflow: hidden;
text-overflow: ellipsis;
diff --git a/packages/theme/src/filter-box/vars.less b/packages/theme/src/filter-box/vars.less
index 5bcca825f4..54d4d8a135 100644
--- a/packages/theme/src/filter-box/vars.less
+++ b/packages/theme/src/filter-box/vars.less
@@ -23,7 +23,7 @@
// 按钮悬浮文本色和图标色
--ti-filter-box-btn-hover-text-color: var(--ti-common-color-text-primary);
// 按钮文本字号
- --ti-filter-box-btn-font-size: var(--ti-common-font-size-base, 12px);
+ --ti-filter-box-btn-font-size: var(--ti-common-font-size-0, 12px);
// 按钮文本行高
--ti-filter-box-btn-title-line-height: var(--ti-common-line-height-number);
// 按钮问号图标色