Skip to content

Commit 3650182

Browse files
SisIvanovaSisIvanova
authored
Merge branch 'master' into didimmova/fix-chip-styles
2 parents 8192898 + 08f89b4 commit 3650182

File tree

13 files changed

+363
-337
lines changed

13 files changed

+363
-337
lines changed

‎.storybook/preview.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export default {
164164
},
165165
parameters: {
166166
backgrounds: {
167-
disable: true,
167+
disabled: true,
168168
},
169169
},
170170
decorators: [themeProvider, withActions, localeProvider],

‎package-lock.json‎

Lines changed: 239 additions & 269 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,14 @@
6060
"lit": "^3.3.1"
6161
},
6262
"devDependencies": {
63-
"@biomejs/biome": "~2.2.6",
63+
"@biomejs/biome": "~2.3.2",
6464
"@custom-elements-manifest/analyzer": "^0.10.10",
6565
"@igniteui/material-icons-extended": "^3.1.0",
6666
"@open-wc/testing": "^4.0.0",
67-
"@storybook/addon-a11y": "^9.1.13",
68-
"@storybook/addon-docs": "^9.1.13",
69-
"@storybook/addon-links": "^9.1.13",
70-
"@storybook/web-components-vite": "^9.1.13",
67+
"@storybook/addon-a11y": "^10.0.1",
68+
"@storybook/addon-docs": "^10.0.1",
69+
"@storybook/addon-links": "^10.0.1",
70+
"@storybook/web-components-vite": "^10.0.1",
7171
"@types/mocha": "^10.0.10",
7272
"@web/dev-server-esbuild": "^1.0.4",
7373
"@web/test-runner": "^0.20.2",
@@ -84,7 +84,7 @@
8484
"igniteui-i18n-resources": "0.6.0-alpha.4",
8585
"igniteui-theming": "^21.0.2",
8686
"keep-a-changelog": "^2.7.1",
87-
"lint-staged": "^16.2.5",
87+
"lint-staged": "^16.2.6",
8888
"lit-analyzer": "^2.0.3",
8989
"madge": "^8.0.0",
9090
"node-watch": "^0.7.4",
@@ -94,7 +94,7 @@
9494
"rimraf": "^6.0.1",
9595
"sass-embedded": "~1.93.2",
9696
"sinon": "^21.0.0",
97-
"storybook": "^9.1.13",
97+
"storybook": "^10.0.1",
9898
"stylelint": "^16.25.0",
9999
"stylelint-config-standard-scss": "^16.0.0",
100100
"stylelint-prettier": "^5.0.3",
@@ -104,13 +104,13 @@
104104
"typedoc": "~0.27.9",
105105
"typedoc-plugin-localization": "^3.0.6",
106106
"typescript": "^5.8.3",
107-
"vite": "^7.1.11"
107+
"vite": "^7.1.12"
108108
},
109109
"peerDependencies": {
110110
"dompurify": "^3.3.0",
111111
"marked": "^16.4.1",
112112
"marked-shiki": "^1.2.1",
113-
"shiki": "^3.13.0"
113+
"shiki": "^3.14.0"
114114
},
115115
"browserslist": [
116116
"defaults"

‎scripts/report.mjs‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { stdout } from 'node:process';
2-
import { format } from 'node:util';
2+
import { format, styleText } from 'node:util';
33

44
export default {
5-
error: (s) => console.error('\x1b[31m%s\x1b[0m', s),
6-
success: (s) => console.info('\x1b[32m%s\x1b[0m', s),
7-
warn: (s) => console.warn('\x1b[33m%s\x1b[0m', s),
8-
info: (s) => console.info('\x1b[36m%s\x1b[0m', s),
5+
error: (s) => console.error(styleText('red', s)),
6+
success: (s) => console.info(styleText('green', s)),
7+
warn: (s) => console.warn(styleText('yellow', s)),
8+
info: (s) => console.info(styleText('cyan', s)),
99

1010
stdout: {
1111
clearLine: () => {
1212
stdout.clearLine(0);
1313
stdout.cursorTo(0);
1414
},
15-
success: (s) => stdout.write(format('\x1b[32m%s\x1b[0m', s)),
16-
warn: (s) => stdout.write(format('\x1b[33m%s\x1b[0m', s)),
17-
info: (s) => stdout.write(format('\x1b[36m%s\x1b[0m', s)),
15+
success: (s) => stdout.write(format(styleText('green', s))),
16+
warn: (s) => stdout.write(format(styleText('yellow', s))),
17+
info: (s) => stdout.write(format(styleText('cyan', s))),
1818
},
1919
};

‎src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,9 @@ $theme: $bootstrap;
5353
}
5454

5555
:host(:hover) {
56-
[part~='control']::after {
56+
[part='control']::after {
5757
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'empty-color-hover');
5858
}
59-
60-
[part='control checked']::after {
61-
background: var-get($theme, 'fill-color-hover');
62-
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'fill-color-hover');
63-
}
6459
}
6560

6661
:host(:focus-visible) ,

‎src/components/checkbox/themes/shared/checkbox/checkbox.common.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
@use 'styles/utilities' as *;
22
@use '../../light/checkbox/themes' as *;
33

4-
$theme: $base;
4+
$theme: $material;
55

66
[part~='label'] {
77
@include type-style('body-2');
88

99
color: var-get($theme, 'label-color');
1010
}
1111

12+
:host(:not([disabled], :state(ig-invalid)):hover),
13+
:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
14+
[part~='label'] {
15+
color: var-get($theme, 'label-color-hover');
16+
}
17+
18+
[part='control checked']::after {
19+
background: var-get($theme, 'fill-color-hover');
20+
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'fill-color-hover');
21+
}
22+
}
23+
1224
[part~='control'] {
1325
background: var-get($theme, 'empty-fill-color');
1426
}

‎src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,6 @@ $disabled-color: var-get($theme, 'disabled-color');
5555
}
5656
}
5757

58-
:host(:hover) [part='control checked'] {
59-
&::after {
60-
background: $checked-hover-color;
61-
box-shadow: inset 0 0 0 rem(1px) $checked-hover-color;
62-
}
63-
}
64-
6558
:host([indeterminate]) {
6659
[part~='indicator'] {
6760
display: none;
@@ -198,6 +191,12 @@ $disabled-color: var-get($theme, 'disabled-color');
198191
}
199192
}
200193

194+
:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
195+
[part='control checked']::after {
196+
background: transparent;
197+
}
198+
}
199+
201200
[part~='focused'] {
202201
position: relative;
203202

‎src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -58,21 +58,14 @@ $error-color-hover: var-get($theme, 'error-color-hover');
5858
}
5959

6060
:host(:hover) {
61-
[part~='label'] {
62-
color: var-get($theme, 'label-color-hover');
63-
}
64-
65-
[part~='control'] {
61+
[part='control'] {
6662
&::after {
6763
border-color: var-get($theme, 'empty-color-hover');
6864
}
6965
}
7066

71-
[part='control checked'] {
72-
&::after {
73-
background: $fill-color-hover;
74-
border-color: $fill-color-hover;
75-
}
67+
[part='control checked']::after {
68+
border-color: var-get($theme, 'fill-color-hover');
7669
}
7770
}
7871

@@ -119,7 +112,8 @@ $error-color-hover: var-get($theme, 'error-color-hover');
119112
}
120113
}
121114

122-
:host([indeterminate]:focus-visible) {
115+
:host([indeterminate]:focus-visible),
116+
:host([indeterminate]) [part='base focused'] {
123117
[part~='control'] {
124118
box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused');
125119
}
@@ -146,7 +140,9 @@ $error-color-hover: var-get($theme, 'error-color-hover');
146140
}
147141
}
148142

149-
[part='base focused'] {
143+
[part='base focused'],
144+
&:focus-visible,
145+
[part='base checked focused'] {
150146
[part~='control'],
151147
[part='control checked'] {
152148
box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');

‎src/components/checkbox/themes/shared/checkbox/checkbox.material.scss‎

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ $theme: $material;
1212
}
1313
}
1414

15+
:host(:not([disabled], :state(ig-invalid)):hover),
16+
:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
17+
[part='control checked']::after {
18+
border-color: var-get($theme, 'fill-color-hover');
19+
}
20+
}
21+
1522
[part~='label'] {
1623
@include type-style('subtitle-1');
1724
}
@@ -62,7 +69,7 @@ $theme: $material;
6269
&:hover {
6370
[part~='control'] {
6471
&::before {
65-
background: var-get($theme, 'fill-color');
72+
background: var-get($theme, 'fill-color-hover');
6673
opacity: .06;
6774
}
6875
}
@@ -89,6 +96,12 @@ $theme: $material;
8996
opacity: .12;
9097
}
9198
}
99+
100+
&:hover [part~='control'] {
101+
&::before {
102+
background: var-get($theme, 'fill-color-hover');
103+
}
104+
}
92105
}
93106

94107
:host([indeterminate]) {
@@ -99,7 +112,6 @@ $theme: $material;
99112
}
100113
}
101114

102-
[part='base']:hover,
103115
[part='base']:focus-visible,
104116
[part='base focused'] {
105117
[part~='control']::before {
@@ -108,6 +120,17 @@ $theme: $material;
108120
}
109121
}
110122

123+
:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
124+
[part~='control']::after {
125+
background: var-get($theme, 'fill-color-hover');
126+
border-color: var-get($theme, 'fill-color-hover');
127+
}
128+
129+
[part~='control']::before {
130+
background: var-get($theme, 'fill-color-hover');
131+
}
132+
}
133+
111134
:host(:not([disabled]):state(ig-invalid)),
112135
:host(:not(:disabled):state(ig-invalid)) {
113136
[part~='control'] {
@@ -122,17 +145,52 @@ $theme: $material;
122145
}
123146
}
124147

125-
[part~='base']:hover {
148+
[part='base focused'] {
126149
[part~='control']::before {
127150
background: var-get($theme, 'error-color');
128151
}
129152
}
130153

131-
[part='base focused'] {
154+
[part='base checked']:focus-visible,
155+
[part='base checked focused'] {
132156
[part~='control']::before {
157+
background: var-get($theme, 'error-color');
158+
opacity: .12;
159+
}
160+
}
161+
}
162+
163+
:host(:not([disabled]):state(ig-invalid):hover),
164+
:host(:not(:disabled):state(ig-invalid):hover),
165+
:host(:not([disabled]):state(ig-invalid)[indeterminate]:hover),
166+
:host(:not(:disabled):state(ig-invalid)[indeterminate]:hover) {
167+
[part~='control'] {
168+
&::after {
169+
border-color: var-get($theme, 'error-color-hover');
170+
}
171+
}
172+
173+
[part='control checked'] {
174+
&::after {
133175
background: var-get($theme, 'error-color-hover');
134176
}
135177
}
178+
179+
[part~='control']::before {
180+
background: var-get($theme, 'error-color-hover');
181+
}
182+
183+
[part='base checked']:focus-visible,
184+
[part='base checked focused'] {
185+
[part~='control'] {
186+
&::before {
187+
background: var-get($theme, 'error-color-hover');
188+
}
189+
190+
&::after {
191+
border-color: var-get($theme, 'error-color-hover');}
192+
}
193+
}
136194
}
137195

138196
:host(:not([disabled]):state(ig-invalid)[indeterminate]),
@@ -145,14 +203,11 @@ $theme: $material;
145203
}
146204

147205
[part~='base']:hover {
148-
[part~='control']::before {
149-
background: var-get($theme, 'error-color-hover');
150-
}
151-
}
152-
153-
[part='base focused'] {
154-
[part~='control']::before {
155-
background: var-get($theme, 'error-color-hover');
206+
[part~='control'] {
207+
&::after {
208+
border-color: var-get($theme, 'error-color-hover');
209+
background: var-get($theme, 'error-color-hover');
210+
}
156211
}
157212
}
158213
}

‎src/components/date-range-picker/date-range-picker.common.spec.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -380,15 +380,15 @@ describe('Date range picker - common tests for single and two inputs mode', () =
380380

381381
const predefinedArea = picker.renderRoot.querySelector(
382382
IgcPredefinedRangesAreaComponent.tagName
383-
);
383+
)!;
384384

385385
for (const test of tests) {
386386
expect(predefinedArea?.resourceStrings[test.key]).to.equal(
387387
test.value
388388
);
389389
}
390390

391-
const chipElements = predefinedArea?.shadowRoot!.querySelectorAll(
391+
const chipElements = predefinedArea.renderRoot.querySelectorAll(
392392
'igc-chip'
393393
) as NodeListOf<IgcChipComponent>;
394394
for (const test of tests) {
@@ -420,14 +420,14 @@ describe('Date range picker - common tests for single and two inputs mode', () =
420420

421421
const predefinedArea = picker.renderRoot.querySelector(
422422
IgcPredefinedRangesAreaComponent.tagName
423-
);
423+
)!;
424424
for (const test of tests) {
425425
expect(predefinedArea?.resourceStrings[test.key]).to.equal(
426426
test.value
427427
);
428428
}
429429

430-
const chipElements = predefinedArea?.shadowRoot!.querySelectorAll(
430+
const chipElements = predefinedArea.renderRoot.querySelectorAll(
431431
'igc-chip'
432432
) as NodeListOf<IgcChipComponent>;
433433
for (const test of tests) {
@@ -708,7 +708,7 @@ describe('Date range picker - common tests for single and two inputs mode', () =
708708
function getPredefinedArea() {
709709
return picker.renderRoot.querySelector(
710710
IgcPredefinedRangesAreaComponent.tagName
711-
);
711+
)!;
712712
}
713713

714714
function getPopover() {
@@ -726,7 +726,7 @@ describe('Date range picker - common tests for single and two inputs mode', () =
726726
}
727727

728728
function getRangeChips() {
729-
return getPredefinedArea()?.renderRoot.querySelectorAll(
729+
return getPredefinedArea().renderRoot.querySelectorAll(
730730
IgcChipComponent.tagName
731731
)!;
732732
}

0 commit comments

Comments
 (0)