Skip to content

Commit

Permalink
refactor(theme): [filter-panel] refactor filter-panel theme vars (#2288)
Browse files Browse the repository at this point in the history 
* refactor(theme): [filter-panel] refactor filter-panel theme vars

* refactor(theme): [filter-panel] refactor filter-panel theme vars
  • Loading branch information
@zzcr
zzcr authored Oct 18, 2024
1 parent 7667e14 commit ca5cdbf
Show file tree
Hide file tree
Showing 6 changed files with 82 additions and 78 deletions.
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/filter-panel/basic-usage.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/filter-panel/event.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('物品数量')
Expand Down
84 changes: 41 additions & 43 deletions packages/theme/src/filter-box/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
50 changes: 28 additions & 22 deletions packages/theme/src/filter-box/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
10 changes: 5 additions & 5 deletions packages/theme/src/filter-panel/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
12 changes: 6 additions & 6 deletions packages/theme/src/filter-panel/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

0 comments on commit ca5cdbf

Please sign in to comment.