refactor(theme): [filter-panel] refactor filter-panel theme vars (#2288)

* refactor(theme): [filter-panel] refactor filter-panel theme vars

* refactor(theme): [filter-panel] refactor filter-panel theme vars

Author: zzcr

examples/sites/demos/pc/app/filter-panel/basic-usage.spec.ts

@@ -13,7 +13,7 @@ test('基本用法', async ({ page }) => {
 
   await button.click()
   await popPanel.isVisible()
-  await page.getByRole('radio', { name: '等于' }).click()
+  await page.locator('label').filter({ hasText: '等于' }).click()
   await button.getByText('物品数量等于').isVisible()
   await inputEl.click()
   await inputEl.fill('10')

examples/sites/demos/pc/app/filter-panel/event.spec.ts

@@ -13,7 +13,7 @@ test('事件', async ({ page }) => {
   // handle-clear事件
   await button.click()
   await popPanel.isVisible()
-  await page.getByRole('radio', { name: '等于' }).click()
+  await page.locator('label').filter({ hasText: '等于' }).click()
   await expect(button).toHaveText('物品数量等于')
   await clear.click()
   await expect(button).toHaveText('物品数量')

packages/theme/src/filter-box/index.less

@@ -16,119 +16,117 @@
 @filter-box-prefix-cls: ~'@{css-prefix}filter-box';
 
 .@{filter-box-prefix-cls} {
-  .component-css-vars-filter-box();
+  .inject-FilterBox-vars();
 
   width: fit-content;
-  height: var(--ti-filter-box-btn-height);
-  line-height: var(--ti-filter-box-btn-height);
+  height: var(--tv-FilterBox-btn-height);
+  line-height: var(--tv-FilterBox-btn-height);
   border-radius: 4px;
-  background: var(--ti-filter-box-btn-bg-color);
-  color: #161e26;
-  padding: 4px var(--ti-filter-box-btn-padding-horizontal);
+  background: var(--tv-FilterBox-btn-bg-color);
+  color: var(--tv-FilterBox-btn-text-color);
+  padding: 4px var(--tv-FilterBox-btn-padding-x);
   display: flex;
   align-items: center;
-  font-size: 12px;
-
-  &:hover {
-    background: var(--ti-filter-box-btn-hover-bg-color);
-  }
+  font-size: var(--tv-FilterBox-btn-font-size);
 
   &.disabled {
     cursor: not-allowed;
 
     .title label {
-      color: #b5bbc1;
+      color: var(--tv-FilterBox-btn-disabled-text-color);
     }
 
     .value {
-      color: #5c6976;
+      color: var(--tv-FilterBox-btn-disabled-text-color);
     }
 
     svg.filter-box-icon {
-      fill: #b5bbce;
+      fill: var(--tv-FilterBox-icon-color-disabled);
       cursor: not-allowed;
     }
   }
 
   .title {
     height: inherit;
-    line-height: var(--ti-filter-box-btn-title-line-height);
-    font-size: var(--ti-filter-box-btn-font-size);
-    /* TODO: title 这个类名不符合组件类名规范，被公共样式污染，故在此处重置间距为 0.计划优化这个类名 */
-    margin-right: 0px;
+    line-height: var(--tv-FilterBox-btn-title-line-height);
+    font-size: var(--tv-FilterBox-btn-font-size);
+    margin-right: 0;
 
     label {
       display: inline-block;
       max-width: 100px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: var(--ti-filter-box-btn-text-color);
+      color: var(--tv-FilterBox-btn-text-color);
       margin-right: 8px;
       margin-top: 3px;
     }
 
     &.active label {
-      color: var(--ti-filter-box-btn-hover-text-color);
+      color: var(--tv-FilterBox-btn-active-text-color);
     }
 
+    // 问号图标
     svg {
-      width: 16px;
-      height: 16px;
-      margin-right: var(--ti-filter-box-help-btn-margin-right);
-      fill: var(--ti-filter-box-help-btn-icon-color);
+      width: var(--tv-FilterBox-icon-size);
+      height: var(--tv-FilterBox-icon-size);
+      margin-right: var(--tv-FilterBox-help-btn-margin-right);
+      fill: var(--tv-FilterBox-icon-color);
       position: relative;
-      top: var(--ti-filter-box-help-btn-position-top);
+      top: var(--tv-FilterBox-help-btn-position-top);
       vertical-align: super;
 
       &:hover {
-        fill: var(--ti-filter-box-btn-hover-text-color);
+        fill: var(--tv-FilterBox-icon-color-hover);
       }
     }
   }
 
   .value {
     max-width: 100px;
     height: inherit;
-    line-height: 1.5;
     margin-right: 4px;
+    vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 12px;
-    color: #161e26;
+    font-size: var(--tv-FilterBox-btn-font-size);
+    color: var(--tv-color-text);
 
     &.placeholder {
-      color: #aeaeae;
+      color: var(--tv-FilterBox-btn-text-color-placeholder);
     }
   }
 
   .filter-box-icon {
-    width: var(--ti-filter-box-expand-btn-icon-size);
-    height: var(--ti-filter-box-expand-btn-icon-size);
+    width: var(--tv-FilterBox-icon-size);
+    height: var(--tv-FilterBox-icon-size);
     cursor: pointer;
-    fill: var(--ti-filter-box-expand-btn-icon-color);
+    fill: var(--tv-FilterBox-icon-color);
     transition: transform 0.3s;
 
     &.is-reverse {
       transform: rotate(180deg);
     }
   }
 
-  &:hover {
-    .filter-box-icon {
-      fill: var(--ti-filter-box-expand-btn-icon-color-hover);
-    }
-  }
-
   .filter-icon-close {
-    width: 16px;
-    height: 16px;
+    width: var(--tv-FilterBox-icon-size);
+    height: var(--tv-FilterBox-icon-size);
     cursor: pointer;
-    fill: #b5bbc1;
+    fill: var(--tv-FilterBox-icon-color);
 
     &:hover {
-      fill: #78828d;
+      fill: var(--tv-FilterBox-icon-color-hover);
+    }
+  }
+
+  &:not(.disabled):hover {
+    background: var(--tv-FilterBox-btn-hover-bg-color);
+
+    .filter-box-icon {
+      fill: var(--tv-FilterBox-icon-color-hover);
     }
   }
 

packages/theme/src/filter-box/vars.less

@@ -9,33 +9,39 @@
 * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
 *
 */
-.component-css-vars-filter-box() {
+.inject-FilterBox-vars() {
   // 按钮高度
-  --ti-filter-box-btn-height: var(--ti-common-size-height-small, 24px);
+  --tv-FilterBox-btn-height: var(--tv-size-height-xs);
   // 按钮背景色
-  --ti-filter-box-btn-bg-color: var(--ti-common-color-bg-6, #f5f5f5);
-  // 按钮展开图标尺寸
-  --ti-filter-box-btn-hover-bg-color: var(--ti-common-color-bg-6, #f5f5f5);
+  --tv-FilterBox-btn-bg-color: var(--tv-color-bg);
+  // 按钮悬浮背景色
+  --tv-FilterBox-btn-hover-bg-color: var(--tv-color-bg-hover-1);
   // 按钮水平内边距
-  --ti-filter-box-btn-padding-horizontal: var(--ti-common-space-2x, 8px);
+  --tv-FilterBox-btn-padding-x: var(--tv-space-md);
   // 按钮文本色
-  --ti-filter-box-btn-text-color: var(--ti-common-color-text-weaken, #808080);
-  // 按钮悬浮文本色和图标色
-  --ti-filter-box-btn-hover-text-color: var(--ti-common-color-text-primary, #191919);
+  --tv-FilterBox-btn-text-color: var(--tv-color-text-weaken);
+  // 按钮占位文本色
+  --tv-FilterBox-btn-text-color-placeholder: var(--tv-color-text-placeholder);
+  // 按钮激活文本色
+  --tv-FilterBox-btn-active-text-color: var(--tv-color-text-active);
+  // 按钮文本禁用色
+  --tv-FilterBox-btn-disabled-text-color: var(--tv-color-text-disabled);
   // 按钮文本字号
-  --ti-filter-box-btn-font-size: var(--ti-common-font-size-0, 12px);
+  --tv-FilterBox-btn-font-size: var(--tv-font-size-sm);
   // 按钮文本行高
-  --ti-filter-box-btn-title-line-height: var(--ti-common-line-height-number, 1.5);
-  // 按钮问号图标色
-  --ti-filter-box-help-btn-icon-color: var(--ti-common-color-text-primary, #191919);
+  --tv-FilterBox-btn-title-line-height: var(--tv-line-height-number);
+
   // 按钮帮助图标右边距
-  --ti-filter-box-help-btn-margin-right: var(--ti-common-space-base, 4px);
-  // 按钮问号top定位(hide)
-  --ti-filter-box-help-btn-position-top: var(--ti-common-space-base, 4px);
-  // 按钮展开图标色
-  --ti-filter-box-expand-btn-icon-color: var(--ti-common-color-icon-normal, #808080);
-  // 按钮展开图标悬浮色
-  --ti-filter-box-expand-btn-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
-  // 按钮展开图标尺寸
-  --ti-filter-box-expand-btn-icon-size: var(--ti-common-font-size-2, 16px);
+  --tv-FilterBox-help-btn-margin-right: var(--tv-space-sm);
+  // 按钮帮助图标上边距
+  --tv-FilterBox-help-btn-position-top: var(--tv-space-sm);
+
+  // 按钮图标色
+  --tv-FilterBox-icon-color: var(--tv-color-icon);
+  // 按钮图标悬浮色
+  --tv-FilterBox-icon-color-hover: var(--tv-color-icon-hover);
+  // 按钮图标禁用色
+  --tv-FilterBox-icon-color-disabled: var(--tv-color-icon-disabled);
+  // 按钮图标尺寸
+  --tv-FilterBox-icon-size: var(--tv-icon-size);
 }

packages/theme/src/filter-panel/index.less

@@ -17,21 +17,21 @@
 
 .@{filter-panel-prefix-cls} {
   &__popover {
-    .component-css-vars-filter-panel();
+    .inject-FilterPanel-vars();
   }
 
   &__popover.tiny-popover.tiny-popper {
     min-width: 200px;
-    padding: var(--ti-filter-panel-padding-vertical) var(--ti-filter-panel-padding-horizontal);
+    padding: var(--tv-FilterPanel-padding-y) var(--tv-FilterPanel-padding-x);
 
     &[x-placement^='bottom'] {
-      margin-top: var(--ti-filter-panel-margin-top);
-      box-shadow: var(--ti-filter-panel-bottom-box-shadow);
+      margin-top: var(--tv-FilterPanel-margin-top);
+      box-shadow: var(--tv-FilterPanel-bottom-box-shadow);
     }
 
     &[x-placement^='top'] {
       margin-bottom: 4px;
-      box-shadow: var(--ti-filter-panel-top-box-shadow);
+      box-shadow: var(--tv-FilterPanel-top-box-shadow);
     }
   }
 }

packages/theme/src/filter-panel/vars.less

@@ -9,15 +9,15 @@
 * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
 *
 */
-.component-css-vars-filter-panel() {
+.inject-FilterPanel-vars() {
   // 面板上外边距
-  --ti-filter-panel-margin-top: var(--ti-common-space-2x, 8px);
+  --tv-FilterPanel-margin-top: var(--tv-space-md);
   // 面板垂直内边距
-  --ti-filter-panel-padding-vertical: var(--ti-common-space-6x, 24px);
+  --tv-FilterPanel-padding-y: 24px;
   // 面板水平内边距
-  --ti-filter-panel-padding-horizontal: var(--ti-common-space-6x, 24px);
+  --tv-FilterPanel-padding-x: 24px;
   // 朝下的面板阴影
-  --ti-filter-panel-bottom-box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
+  --tv-FilterPanel-bottom-box-shadow: var(--tv-shadow-4-down);
   // 朝上的面板阴影
-  --ti-filter-panel-top-box-shadow: 8px 0px 24px 0px rgba(0, 0, 0, 0.18);
+  --tv-FilterPanel-top-box-shadow: var(--tv-shadow-4-up);
 }