Skip to content

fix(radio): [radio,select,tree-select,checkbox,radio,button] fix the style of dark themes #3237

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

Merged
merged 6 commits into from
Apr 3, 2025
Merged

fix(radio): [radio,select,tree-select,checkbox,radio,button] fix the style of dark themes #3237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d5345c0
fix(select): [select] fix styles that have been disabled by the selec…
MomoPoppy Apr 2, 2025
be3a16a
fix(tree-select): [tree-select] repair horizontal spacing
MomoPoppy Apr 2, 2025
e5241f3
fix(checkbox): [select,checkbox] fix the style of the checkbox
MomoPoppy Apr 3, 2025
71891fd
fix(radio): [radio] fix the style of dark themes
MomoPoppy Apr 3, 2025
fa4e5e9
fix(button): [button] fix the style of dark themes
MomoPoppy Apr 3, 2025
2836b10
fix(test): [select,checkbox,button] fix test
MomoPoppy Apr 3, 2025
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
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ test('测试禁用状态是否生效', async ({ page }) => {
await expect(demo.locator('.tiny-button').first()).toBeDisabled()
await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(240, 240, 240)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(194, 194, 194)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(240, 240, 240)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
await expect(demo.getByRole('button', { name: '次要按钮' }).first()).toBeDisabled()
await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()
Expand Down
3 changes: 3 additions & 0 deletions examples/sites/demos/pc/app/button/loading-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div>
<tiny-button type="primary" loading>加载中</tiny-button>
<br />
<br />
<tiny-button loading>加载中</tiny-button>
</div>
</template>

Expand Down
3 changes: 3 additions & 0 deletions examples/sites/demos/pc/app/button/loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div>
<tiny-button type="primary" loading>加载中</tiny-button>
<br />
<br />
<tiny-button loading>加载中</tiny-button>
</div>
</template>

Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/checkbox/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ test('基础用法', async ({ page }) => {
await page.goto('checkbox#basic-usage')
const checkbox = await page.locator('.tiny-checkbox').first()
await expect(checkbox).toHaveClass(/is-checked/)
await expect(checkbox.locator('.tiny-checkbox__inner svg path').first()).toHaveCSS('fill', 'rgb(20, 118, 255)')
await expect(checkbox.locator('.tiny-checkbox__inner svg path').nth(1)).toHaveCSS('fill', 'rgb(20, 118, 255)')
await checkbox.click()
await expect(checkbox).not.toHaveClass(/is-checked/)
})
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,6 @@ test('下拉表格大数据', async ({ page }) => {
await expect(row).toHaveCount(6)
await row.nth(5).scrollIntoViewIfNeeded()
await expect(row).toHaveCount(6)
await page.waitForTimeout(500)
Copy link

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Added timeout before clicking on grid row to improve test stability.

Adding a fixed timeout of 500ms before clicking on a row element might help with test stability, but fixed timeouts can make tests flaky and unpredictable. Consider using explicit waiting conditions instead.

-  await page.waitForTimeout(500)
+  // Wait for element to be stable and ready for interaction instead of using a fixed timeout
+  await page.getByRole('row', { name: '华南区 12 广东省 广州市' }).waitFor({state: 'visible', timeout: 5000})

🏁 Script executed:

#!/bin/bash
# Check for other instances of waitForTimeout in the codebase that might benefit from similar improvements
cd examples/sites/demos/pc
rg "waitForTimeout" --type=ts

Length of output: 25658

Replace Fixed Timeout with Explicit Wait for Element Visibility

The current fixed timeout of 500 ms may boost stability in a quick fix, but it can ultimately lead to flakiness. It’s recommended to replace this fixed delay with an explicit wait that confirms the grid row element is visible and stable before interacting with it. For instance:

-  await page.waitForTimeout(500)
+  // Wait for the grid row element to become visible and stable before interaction
+  await page.getByRole('row', { name: '华南区 12 广东省 广州市' }).waitFor({ state: 'visible', timeout: 5000 })

This change not only targets a more reliable condition but also aligns with improvements observed in several other tests within the codebase. Please update this instance—and consider reviewing similar waitForTimeout usages—to enhance overall test stability.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await page.waitForTimeout(500)
// Wait for element to be stable and ready for interaction instead of using a fixed timeout
await page.getByRole('row', { name: '华南区 12 广东省 广州市' }).waitFor({ state: 'visible', timeout: 5000 })

await page.getByRole('row', { name: '华南区 12 广东省 广州市' }).getByRole('cell').first().click()
})
4 changes: 2 additions & 2 deletions packages/theme/src/base/dark-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,7 +328,7 @@
--tv-color-icon-checked-disabled: var(--tv-base-color-brand-4); // #264DAB 图标禁用色-1 checkbox选中且禁用
--tv-color-icon-control: var(--tv-base-color-common-4); //#B3B3B3 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
--tv-color-icon-control-active: var(--tv-base-color-brand-7); // #317AF7 控件图标激活色，主要在checkbox、radio图标激活场景
--tv-color-icon-control-disabled: rgba(255, 255, 255, 0.3); // rgba(255,255,255,0.15) 控件图标禁用色，主要在checkbox、radio图标禁用场景 (视觉效果是0.15透明度白色的边框和背景色重叠的效果，也就是0.3透明度）
--tv-color-icon-control-disabled: rgba(255, 255, 255, 0.15); // rgba(255,255,255,0.15) 控件图标禁用色，主要在checkbox、radio图标禁用场景
--tv-color-icon-link: var(--tv-base-color-brand-8); // #5291FF 链接图标色
--tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); // #ffb700 次要警告图标色 / 评分组件rate-图标色/状态图标-异常
// -- 暗色新增 --
Expand All @@ -346,7 +346,7 @@
--tv-color-bg-gray-2: rgba(255, 255, 255, 0.2); // rgba(255,255,255,0.2) 灰色背景-2：灰色标签背景色/进度条灰色背景
--tv-color-bg-header: var(--tv-base-color-common-10); // #262626 表头背景色
--tv-color-bg-mask: rgba(0, 0, 0, 70%); // 全局加载蒙层/抽屉弹窗蒙层
--tv-color-bg-mask-block: rgb(26, 26, 26, 70%); // 模块内容加载蒙层
--tv-color-bg-mask-block: rgba(26, 26, 26, 70%); // 模块内容加载蒙层
--tv-color-bg-dark: var(--tv-base-color-common-11); // #1A1A1A 深色背景色 顶部导航/ 深色tab


Expand Down
37 changes: 29 additions & 8 deletions packages/theme/src/button/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,12 +111,14 @@
&:active,
&:focus,
&:hover,
&.is-active {
&.is-active,
&.is-loading.is-loading.is-loading.is-loading.is-loading {
Copy link

Choose a reason for hiding this comment

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

The repeated class .is-loading.is-loading.is-loading.is-loading.is-loading seems to be a mistake. It should be corrected to a single .is-loading to avoid redundancy and potential issues.

background-color: e(@bg);
border-color: e(@border);
color: e(@c);
}
}

// 激活态： 叠加到 ghost 状态上。
.color-ghost-active-mixin(@theme) {
@border: %('var(--tv-Button-border-color-ghost-active-%a)', @theme);
Expand Down Expand Up @@ -221,9 +223,8 @@

// 禁用态+loading 优先级最高， 五优先级
&.is-disabled.is-disabled.is-disabled.is-disabled.is-disabled,
Copy link

Choose a reason for hiding this comment

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

The repeated class .is-disabled.is-disabled.is-disabled.is-disabled.is-disabled should be corrected to a single .is-disabled to avoid redundancy and potential issues.

&.is-loading.is-loading.is-loading.is-loading.is-loading,
&[disabled][disabled][disabled][disabled][disabled] {
color: var(--tv-Button-text-color-disabled);
color: var(--tv-Button-text-color-disabled);
background-color: var(--tv-Button-bg-color-disabled);
border-color: var(--tv-Button-border-color-disabled);
fill: var(--tv-Button-icon-color-disabled);
Expand All @@ -232,9 +233,29 @@
&.is-ghost {
border-color: var(--tv-Button-border-color-ghost-disabled);
}
// 仅图标，禁用时无背景

&.is-only-icon {
background-color: transparent;
.tiny-svg {
fill: var(--tv-Button-icon-color-disabled);
}
// 仅图标且无边框类型，禁用时无背景
&.tiny-button--text {
background-color: transparent;
}
}
}

&.is-loading {
&.@{button-prefix-cls}--default {
.tiny-svg {
fill: var(--tv-Button-icon-color-default-loading);
}
}

&.@{button-prefix-cls}--primary {
.tiny-svg {
fill: var(--tv-Button-icon-color-primary-loading);
}
}
}

Expand Down Expand Up @@ -316,7 +337,7 @@
background-color: var(--tv-Button-bg-color-only-icon-ontext);
// 无边框时的仅图标按钮，增加图标默认颜色
svg {
fill: var(--tv-Button-bg-color-only-icon)
fill: var(--tv-Button-bg-color-only-icon);
}
&:active,
&:focus,
Expand All @@ -325,7 +346,7 @@
background-color: var(--tv-Button-bg-color-only-icon-ontext-hover);
// 无边框时的仅图标按钮，增加图标悬浮颜色
svg {
fill: var(--tv-Button-bg-color-only-icon-hover)
fill: var(--tv-Button-bg-color-only-icon-hover);
}
}
// 不同的尺寸，icon大小 为高度。 原型稿不包含
Expand All @@ -352,7 +373,7 @@
&.is-disabled {
&:hover {
svg {
fill: var(--tv-Button-disabled-color-only-icon-hover)
fill: var(--tv-Button-disabled-color-only-icon-hover);
}
}
}
Expand Down
16 changes: 13 additions & 3 deletions packages/theme/src/button/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@
--tv-Button-border-color-default: var(--tv-color-border-secondary, #595959);
// 默认时按钮图标色
--tv-Button-icon-color-default: var(--tv-color-icon-control, #191919);
// 默认时按钮加载图标色
--tv-Button-icon-color-default-loading: var(--tv-color-icon-control, #191919);

// primary 主题时按钮文本色
--tv-Button-text-color-primary: var(--tv-color-act-primary-text-inverse-tint, #ffffff);
Expand All @@ -99,6 +101,8 @@
--tv-Button-border-color-primary: var(--tv-color-act-primary-border, #191919);
// primary 主题时按钮图标色
--tv-Button-icon-color-primary: var(--tv-color-icon-inverse-tint, #ffffff);
// primary 主题时按钮加载图标色
--tv-Button-icon-color-primary-loading: var(--tv-color-icon-inverse-tint, #ffffff);

// success 主题时按钮文本色
--tv-Button-text-color-success: var(--tv-color-act-success-text-white, #ffffff);
Expand Down Expand Up @@ -218,7 +222,10 @@
//------------------------------------------------------------------------------ // level 2结束 ----------------

// 默认时按钮激活的背景色
--tv-Button-bg-color-active-default: var(--tv-color-bg-hover-secondary, #ffffff); // 现规范，激活态时，只影响边框和背景
--tv-Button-bg-color-active-default: var(
--tv-color-bg-hover-secondary,
#ffffff
); // 现规范，激活态时，只影响边框和背景
// 默认时按钮激活的边框色
--tv-Button-border-color-active-default: var(--tv-color-border-secondary-hover, #c2c2c2);
// 默认时按钮激活的文本
Expand Down Expand Up @@ -308,11 +315,14 @@
--tv-Button-border-color-ghost-active-info: var(--tv-color-act-info-border-active-1, #deecff); // level3 结束------

// 禁用时按钮文本色
--tv-Button-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2); // 目前规则下，disabled优先级最高，所以变量少
--tv-Button-text-color-disabled: var(
--tv-color-text-disabled,
#c2c2c2
); // 目前规则下，disabled优先级最高，所以变量少
// 禁用时按钮背景色
--tv-Button-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
// 禁用时按钮边框色
--tv-Button-border-color-disabled: var(--tv-color-bg-disabled, #f0f0f0); // 设计边框是f0f0f0，没这个值，用背景色代替。
--tv-Button-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
// 禁用时, 幽灵按钮的边框色
--tv-Button-border-color-ghost-disabled: var(--tv-color-border-disabled, #dbdbdb);
// 禁用时按钮图标色
Expand Down
28 changes: 10 additions & 18 deletions packages/theme/src/checkbox/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,46 +150,43 @@
}
}

&__input {
&__input {
.@{checkbox-prefix-cls}__inner {
svg {
font-size: var(--tv-Checkbox-icon-size);
}

.icon-checked-sur,
.icon-halfselect {
fill: var(--tv-Checkbox-bg-color-active);

path:first-child {
fill: var(--tv-Checkbox-bg-color-active);
}
path:last-child {
fill: var(--tv-Checkbox-border-color-inverse);
}
}

.icon-check {
fill: var(--tv-Checkbox-unchecked-border-color);

path:first-child {
fill: transparent;
}
path:last-child {
fill: var(--tv-Checkbox-unchecked-border-color);
}
}

.icon-check:hover {
path:last-child {
fill: var(--tv-Checkbox-unchecked-border-color-hover);
}
fill: var(--tv-Checkbox-unchecked-border-color-hover);
}
}
}

&__input.is-disabled {
cursor: not-allowed;

.@{checkbox-prefix-cls}__inner {
.icon-checked-sur,
.icon-halfselect {
fill: var(--tv-Checkbox-checked-disabled-bg-color);

path:first-child {
fill: var(--tv-Checkbox-checked-disabled-bg-color);
}
path:last-child {
fill: var(--tv-Checkbox-icon-inverse-disabled);
}
Expand All @@ -200,11 +197,6 @@
path:first-child {
fill: var(--tv-Checkbox-bg-color-disabled);
}
&:hover {
path:last-child {
fill: var(--tv-Checkbox-unchecked-border-color);
}
}
}
}
}
Expand Down
25 changes: 11 additions & 14 deletions packages/theme/src/option/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,19 +49,21 @@
.checked-sur.tiny-svg,
.halfselect.tiny-svg {
fill: var(--tv-Option-icon-color-checked);
path:first-child {
fill: var(--tv-Option-icon-color-checked);
}

path:last-child {
fill: var(--tv-Option-icon-inverse-disabled);
}
}

.check.tiny-svg {
fill: var(--tv-Option-icon-color-unchecked);

path:first-child {
fill: transparent;
}
path:last-child {
fill: var(--tv-Option-unchecked-border-color);

&:hover {
fill: var(--tv-Option-icon-color-hover);
}
}

Expand Down Expand Up @@ -112,23 +114,18 @@
&.checked-sur,
&.halfselect {
fill: var(--tv-Option-checked-disabled-bg-color);
path:first-child {
fill: var(--tv-Option-bg-color-active);
}

path:last-child {
fill: var(--tv-Option-icon-inverse-disabled);
fill: var(--tv-Option-icon-color-checked-disabled-inverse);
}
}

&.check {
fill: var(--tv-Option-icon-color-unchecked-disabled);

path:first-child {
fill: var(--tv-Option-bg-color-disabled);
}
&:hover {
path:last-child {
fill: var(--tv-Option-unchecked-border-color);
}
}
}
}
}
Expand Down
5 changes: 3 additions & 2 deletions packages/theme/src/option/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
--tv-Option-icon-color-unchecked: var(--tv-color-border, #c2c2c2);
// 复选框选中色
--tv-Option-icon-color-checked: var(--tv-color-icon-control-active, #1476ff);
// 复选框悬浮色
--tv-Option-icon-color-hover: var(--tv-color-icon-hover, #191919);
// 复选框禁用色（选中）
--tv-Option-icon-color-checked-disabled: var(--tv-color-icon-checked-disabled, #dbdbdb);
// 复选框图标中心path禁用反色（选中）
Expand Down Expand Up @@ -57,8 +59,7 @@
--tv-Option-border-color-inverse: var(--tv-color-text-inverse, #ffffff);
// 复选框未选边框色
--tv-Option-unchecked-border-color: var(--tv-color-border, #c2c2c2);
// 复选框未选边框hover色
--tv-Option-unchecked-border-color-hover: var(--tv-color-border-active, #191919);

// 复选框选中禁用背景色
--tv-Option-checked-disabled-bg-color: var(--tv-color-icon-checked-disabled, #dbdbdb);
// 复选框选中禁用边框色
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/radio/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
// 单选框为选中且禁用状态时的背景色
--tv-Radio-input-checked-disabled-bg-color: var(--tv-color-bg-secondary, #ffffff);
// 单选框为选中且禁用状态时的边框色
--tv-Radio-input-checked-disabled-border-color: var(--tv-color-border-disabled); // dark: 264dab, smb: #dbdbdb
--tv-Radio-input-checked-disabled-border-color: var(--tv-color-icon-checked-disabled, #dbdbdb);
// 单选框为输入框样式时禁用状态时的文本色
--tv-Radio-input-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
// 单选框单选按钮的背景色
Expand Down
7 changes: 3 additions & 4 deletions packages/theme/src/tree/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@
content: '';
position: absolute;
top: calc(-1 * var(--tv-Tree-node-content-height) / 2);
left: calc(var(--tv-Tree-node-padding-left) + var(--tv-Tree-node-showline-icon-size) / 2);
left: calc(var(--tv-Tree-node-padding-x) + var(--tv-Tree-node-showline-icon-size) / 2);
height: 100%;
border-left: 1px solid var(--tv-Tree-node-guide-line-border-color);
}
Expand All @@ -249,7 +249,7 @@
&::before {
content: '';
position: absolute;
left: calc(var(--tv-Tree-node-padding-left) + var(--tv-Tree-node-showline-icon-size) / 2);
left: calc(var(--tv-Tree-node-padding-x) + var(--tv-Tree-node-showline-icon-size) / 2);
top: 0;
width: var(--tv-Tree-node-guide-line-width);
height: calc(var(--tv-Tree-node-content-height) / 2);
Expand Down Expand Up @@ -337,7 +337,6 @@
.@{tree-node-prefix-cls}__content-right {
background-color: var(--tv-Tree-node-content-hover-bg-color);
}

}

& label.@{css-prefix}checkbox,
Expand All @@ -358,7 +357,7 @@
flex: 1 1 auto;
height: 100%;
overflow: hidden;
padding-left: var(--tv-Tree-node-padding-left);
padding: 0 var(--tv-Tree-node-padding-x);

& > svg {
fill: var(--tv-Tree-node-operate-icon-color);
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/tree/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
--tv-Tree-node-checked-icon-color: var(--tv-color-icon-hover, #191919);

// 节点左内边距
--tv-Tree-node-padding-left: var(--tv-space-xl, 16px);
--tv-Tree-node-padding-x: var(--tv-space-xl, 16px);
// 节点高亮背景色
--tv-Tree-node-highlight-bg-color: var(--tv-color-bg-active, #f5f5f5);
// 节点内容高度
Expand Down
Loading