Skip to content

Commit 5220b07

Browse files
MomoPoppyMomoPoppy
authored
fix(checkbox): [checkbox,select,base-select] change the checkbox icon and synchronously modify the checkbox style (#3258)
* fix(checkbox): [checkbox] change the checkbox icon and synchronously modify the checkbox style * fix(checkbox): [checkbox] fix test
1 parent fb9fe3b commit 5220b07

File tree

5 files changed

+66
-20
lines changed

5 files changed

+66
-20
lines changed

‎examples/sites/demos/pc/app/checkbox/basic-usage.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ test('基础用法', async ({ page }) => {
55
await page.goto('checkbox#basic-usage')
66
const checkbox = await page.locator('.tiny-checkbox').first()
77
await expect(checkbox).toHaveClass(/is-checked/)
8-
await expect(checkbox.locator('.tiny-checkbox__inner svg path').nth(1)).toHaveCSS('fill', 'rgb(20, 118, 255)')
8+
await expect(checkbox.locator('.tiny-checkbox__inner svg path').nth(0)).toHaveCSS('fill', 'rgb(20, 118, 255)')
99
await checkbox.click()
1010
await expect(checkbox).not.toHaveClass(/is-checked/)
1111
})

‎packages/theme/src/checkbox/index.less‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -158,23 +158,29 @@
158158

159159
.icon-checked-sur,
160160
.icon-halfselect {
161-
fill: var(--tv-Checkbox-bg-color-active);
161+
path:first-child {
162+
fill: var(--tv-Checkbox-bg-color-active);
163+
}
162164

163165
path:last-child {
164166
fill: var(--tv-Checkbox-border-color-inverse);
165167
}
166168
}
167169

168170
.icon-check {
169-
fill: var(--tv-Checkbox-unchecked-border-color);
170-
171171
path:first-child {
172172
fill: transparent;
173173
}
174+
175+
path:nth-child(2) {
176+
fill: var(--tv-Checkbox-unchecked-border-color);
177+
}
174178
}
175179

176180
.icon-check:hover {
177-
fill: var(--tv-Checkbox-unchecked-border-color-hover);
181+
path:nth-child(2) {
182+
fill: var(--tv-Checkbox-unchecked-border-color-hover);
183+
}
178184
}
179185
}
180186
}
@@ -185,18 +191,22 @@
185191
.@{checkbox-prefix-cls}__inner {
186192
.icon-checked-sur,
187193
.icon-halfselect {
188-
fill: var(--tv-Checkbox-checked-disabled-bg-color);
194+
path:first-child {
195+
fill: var(--tv-Checkbox-checked-disabled-bg-color);
196+
}
189197

190198
path:last-child {
191199
fill: var(--tv-Checkbox-icon-inverse-disabled);
192200
}
193201
}
194202
.icon-check {
195-
fill: var(--tv-Checkbox-bg-color-disabled);
196-
197203
path:first-child {
198204
fill: var(--tv-Checkbox-bg-color-disabled);
199205
}
206+
207+
path:nth-child(2) {
208+
fill: var(--tv-Checkbox-border-color-disabled);
209+
}
200210
}
201211
}
202212
}

‎packages/theme/src/grid/checkbox.less‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,11 @@
7373

7474
&.icon-checked-sur {
7575
display: block;
76-
fill: var(--tv-Grid-bg-color-active);
76+
77+
path:first-child {
78+
fill: var(--tv-Grid-bg-color-active);
79+
}
80+
7781
path:last-child {
7882
fill: var(--tv-Grid-border-color-inverse);
7983
}
@@ -98,7 +102,10 @@
98102

99103
> svg {
100104
&.icon-half-select {
101-
fill: var(--tv-Grid-bg-color-active);
105+
path:first-child {
106+
fill: var(--tv-Grid-bg-color-active);
107+
}
108+
102109
path:last-child {
103110
fill: var(--tv-Grid-border-color-inverse);
104111
}
@@ -124,11 +131,13 @@
124131

125132
&:checked + .@{grid-checkbox-prefix-cls}__icon {
126133
> svg {
127-
fill: var(--tv-Grid-checkbox-border-color-disabled);
128-
129134
path:first-child {
130135
fill: var(--tv-Grid-checked-disabled-bg-color);
131136
}
137+
138+
path:nth-child(2) {
139+
fill: var(--tv-Grid-icon-inverse-disabled);
140+
}
132141
}
133142
}
134143
}
@@ -143,12 +152,29 @@
143152
fill: var(--tv-Grid-checkbox-border-color-disabled);
144153
}
145154
}
155+
156+
& + .@{grid-checkbox-prefix-cls}__icon {
157+
svg.icon-half-select {
158+
path:first-child {
159+
fill: var(--tv-Grid-checked-disabled-bg-color);
160+
}
161+
162+
path:nth-child(2) {
163+
fill: var(--tv-Grid-icon-inverse-disabled);
164+
}
165+
}
166+
}
146167
}
147168
}
148169
&.is__disabled > input:not(:checked) + .tiny-grid-checkbox__icon .icon-check {
149170
path:first-child {
150171
fill: var(--tv-Grid-bg-color-disabled);
151172
}
173+
174+
path:nth-child(2) {
175+
fill: var(--tv-Grid-border-color-disabled);
176+
}
177+
152178
&:hover {
153179
path:last-child {
154180
fill: var(--tv-Grid-unchecked-border-color);

‎packages/theme/src/grid/vars.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@
241241
// 复选框选中禁用边框色
242242
--tv-Grid-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive, #dbdbdb);
243243
// 复选框禁用反白色
244-
--tv-Grid-icon-inverse-disabled: var(--tv-color-icon-inverse);
244+
--tv-Grid-icon-inverse-disabled: var(--tv-color-bg-inverse-disabled, #fff);
245245
// 默认复选框未选中禁用背景色
246246
--tv-Grid-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
247247
}

‎packages/theme/src/option/index.less‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,22 +48,28 @@
4848
&.selected .tiny-svg,
4949
.checked-sur.tiny-svg,
5050
.halfselect.tiny-svg {
51-
fill: var(--tv-Option-icon-color-checked);
51+
path:first-child {
52+
fill: var(--tv-Option-icon-color-checked);
53+
}
5254

5355
path:last-child {
5456
fill: var(--tv-Option-icon-inverse-disabled);
5557
}
5658
}
5759

5860
.check.tiny-svg {
59-
fill: var(--tv-Option-icon-color-unchecked);
60-
6161
path:first-child {
6262
fill: transparent;
6363
}
6464

65+
path:nth-child(2) {
66+
fill: var(--tv-Option-icon-color-unchecked);
67+
}
68+
6569
&:hover {
66-
fill: var(--tv-Option-icon-color-hover);
70+
path:nth-child(2) {
71+
fill: var(--tv-Option-icon-color-hover);
72+
}
6773
}
6874
}
6975

@@ -113,19 +119,23 @@
113119
.tiny-svg {
114120
&.checked-sur,
115121
&.halfselect {
116-
fill: var(--tv-Option-checked-disabled-bg-color);
122+
path:first-child {
123+
fill: var(--tv-Option-checked-disabled-bg-color);
124+
}
117125

118126
path:last-child {
119127
fill: var(--tv-Option-icon-color-checked-disabled-inverse);
120128
}
121129
}
122130

123131
&.check {
124-
fill: var(--tv-Option-icon-color-unchecked-disabled);
125-
126132
path:first-child {
127133
fill: var(--tv-Option-bg-color-disabled);
128134
}
135+
136+
path:nth-child(2) {
137+
fill: var(--tv-Option-icon-color-unchecked-disabled);
138+
}
129139
}
130140
}
131141
}

0 commit comments

Comments
 (0)