fix(cascader): [cascader] update cascader's x design (#2158)

* fix(cascader): update cascader's x design * test(cascader): fix e2e
opentiny · Sep 23, 2024 · 4037cb3 · 4037cb3
1 parent 744c168
commit 4037cb3
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 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
@@ -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
@@ -9,7 +9,7 @@
       tip="提示"
       label="开发文档"
     ></tiny-cascader>
-    <div>
+    <div style="margin-top: 16px">
       <tiny-cascader v-model="value" :options="options" shape="filter" label="开发文档" blank></tiny-cascader>
     </div>
   </div>

diff --git 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="开发文档"
     ></tiny-cascader>
-    <div>
+    <div style="margin-top: 16px">
       <tiny-cascader v-model="value" :options="options" shape="filter" label="开发文档" blank></tiny-cascader>
     </div>
   </div>

diff --git 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
@@ -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
@@ -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
@@ -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);
   // 按钮问号图标色