Skip to content

Commit f101993

Browse files
dkamburovdkamburov
authored
Merge branch 'master' into mkirova/ssr-improvements
2 parents 06a9153 + d01b020 commit f101993

29 files changed

+504
-428
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
"@types/source-map": "0.5.2",
7575
"express": "^4.21.1",
7676
"fflate": "^0.8.1",
77-
"igniteui-theming": "^17.0.0",
77+
"igniteui-theming": "^17.1.0",
7878
"igniteui-trial-watermark": "^3.0.2",
7979
"lodash-es": "^4.17.21",
8080
"rxjs": "^7.8.2",

‎projects/igniteui-angular/migrations/update-19_2_0/changes/theme-changes.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"$schema": "../../common/schema/theme-changes.schema.json",
3+
"changes": [
4+
{
5+
"name": "$label-invalid-color",
6+
"remove": true,
7+
"owner": "switch-theme",
8+
"type": "property"
9+
},
10+
{
11+
"name": "$track-error-color",
12+
"remove": true,
13+
"owner": "switch-theme",
14+
"type": "property"
15+
},
16+
{
17+
"name": "$thumb-on-error-color",
18+
"remove": true,
19+
"owner": "switch-theme",
20+
"type": "property"
21+
},
22+
{
23+
"name": "$error-color",
24+
"remove": true,
25+
"owner": "switch-theme",
26+
"type": "property"
27+
},
28+
{
29+
"name": "$error-color-hover",
30+
"remove": true,
31+
"owner": "switch-theme",
32+
"type": "property"
33+
}
34+
]
35+
}

‎projects/igniteui-angular/migrations/update-19_2_0/index.spec.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,28 @@ describe(`Update to ${version}`, () => {
3434
`
3535
);
3636
});
37+
38+
it('should remove the properties related to invalid state from the switch theme', async () => {
39+
const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
40+
41+
appTree.create(
42+
testFilePath,
43+
`$invalid-switch-theme: switch-theme(
44+
$label-color: orange,
45+
$label-invalid-color: red,
46+
$track-error-color: red,
47+
$thumb-on-error-color: darkred,
48+
$error-color: red,
49+
$error-color-hover: darkred,
50+
);`
51+
);
52+
53+
const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
54+
55+
expect(tree.readContent(testFilePath)).toEqual(
56+
`$invalid-switch-theme: switch-theme(
57+
$label-color: orange,
58+
);`
59+
);
60+
});
3761
});

‎projects/igniteui-angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"tslib": "^2.3.0",
7474
"igniteui-trial-watermark": "^3.0.2",
7575
"lodash-es": "^4.17.21",
76-
"igniteui-theming": "^17.0.0",
76+
"igniteui-theming": "^17.1.0",
7777
"@igniteui/material-icons-extended": "^3.1.0"
7878
},
7979
"peerDependencies": {

‎projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,6 @@
114114
$not-material-theme: $variant != 'material';
115115

116116
$card-heading-padding: rem(16px, 16px);
117-
$card-content-padding: rem(16px);
118-
$card-actions-padding: rem(8px);
119117

120118
$card-tgroup-margin: 0 em(16px);
121119

@@ -159,7 +157,7 @@
159157
%igx-card-header {
160158
display: flex;
161159
flex-flow: row wrap;
162-
align-content: flex-start;
160+
align-items: center;
163161
width: 100%;
164162
padding: $card-heading-padding;
165163
color: var-get($theme, 'header-text-color');
@@ -168,10 +166,6 @@
168166
display: block;
169167
padding: 0;
170168
}
171-
172-
@if $variant == 'fluent' {
173-
padding: rem(16px) rem(8px);
174-
}
175169
}
176170

177171
%igx-card-header--vertical {
@@ -195,7 +189,6 @@
195189
}
196190

197191
%igx-card-header-thumbnail {
198-
align-self: flex-start;
199192
margin-inline-end: rem(16px);
200193

201194
@if $variant == 'indigo' {
@@ -235,7 +228,7 @@
235228
%igx-card-content {
236229
display: block;
237230
width: 100%;
238-
padding: $card-content-padding;
231+
padding: rem(16px);
239232
color: var-get($theme, 'content-text-color');
240233
overflow: auto;
241234
}
@@ -259,6 +252,14 @@
259252
}
260253

261254
%igx-card-actions {
255+
$card-actions-padding: map.get((
256+
'material': rem(8px) rem(16px),
257+
'fluent': rem(8px) rem(16px),
258+
'bootstrap': rem(16px),
259+
'indigo': rem(16px),
260+
), $variant);
261+
262+
262263
display: flex;
263264
flex-flow: row wrap;
264265
justify-content: space-between;
@@ -283,29 +284,26 @@
283284

284285
@if $variant == 'bootstrap' {
285286
%igx-card-content {
286-
@if $variant == 'bootstrap' {
287-
padding-block: rem(16px) rem(24px);
288-
padding-inline: rem(24px);
289-
}
290-
}
291-
292-
%igx-card-actions {
293-
padding: rem(16px);
287+
padding-block-end: rem(24px);
294288
}
295289
}
296290

297291
@if $variant == 'indigo' {
298-
%igx-card-content,
299-
%igx-card-actions {
300-
padding: rem(16px);
292+
%igx-card-content {
293+
padding-block-end: rem(8px);
294+
}
295+
296+
%igx-card-content:last-child {
297+
padding-block-end: rem(16px);
301298
}
302299

303-
%igx-card-content + %igx-card-actions {
304-
padding-block-start: rem(8px);
300+
%igx-card-header {
301+
padding-block-end: 0;
305302
}
306303

307-
%igx-card-header + %igx-card-content {
308-
padding-block-start: 0;
304+
%igx-card-header:last-child,
305+
%igx-card-header:first-child {
306+
padding-block-end: rem(16px);
309307
}
310308
}
311309

‎projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -268,14 +268,14 @@
268268
$box-shadow-focus: map.get((
269269
'material': null,
270270
'fluent': null,
271-
'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-outline-color'),
271+
'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-outline-color'),
272272
'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-outline-color')
273273
), $variant);
274274

275275
$box-shadow-focus-selected: map.get((
276276
'material': null,
277277
'fluent': null,
278-
'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-selected-outline-color'),
278+
'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-selected-outline-color'),
279279
'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color')
280280
), $variant);
281281

@@ -378,19 +378,21 @@
378378
}
379379

380380
igx-avatar,
381-
igx-circular-bar,
382381
igx-icon {
383382
--component-size: var(--chip-size);
384383
}
385384

385+
igx-circular-bar {
386+
--diameter: #{sizable(rem(14px), rem(18px), rem(24px))};
387+
}
388+
386389
@if $variant == 'indigo' {
387390
igx-icon {
388391
--size: #{sizable(rem(14px), rem(14px), rem(16px))}
389392
}
390393
}
391394

392-
igx-avatar,
393-
igx-circular-bar {
395+
igx-avatar {
394396
max-height: 100%;
395397
width: sizable(rem(14px), rem(18px), rem(24px));
396398
max-width: sizable(rem(14px), rem(18px), rem(24px));
@@ -427,9 +429,17 @@
427429
%igx-chip%igx-chip--primary {
428430
&:focus {
429431
%igx-chip__item {
430-
color: contrast-color($color: 'primary', $variant: 800);
431-
background: color($color: 'primary', $variant: 800);
432-
border-color: color($color: 'primary', $variant: 800);
432+
@if $variant != 'bootstrap' and $variant != 'indigo' {
433+
color: contrast-color($color: 'primary', $variant: 800);
434+
background: color($color: 'primary', $variant: 800);
435+
border-color: color($color: 'primary', $variant: 800);
436+
}
437+
438+
@if $variant == "bootstrap" {
439+
color: contrast-color($color: 'primary', $variant: 500);
440+
background: color($color: 'primary', $variant: 500);
441+
border-color: color($color: 'primary', $variant: 500);
442+
}
433443

434444
@if $variant == 'indigo' {
435445
color: contrast-color($color: 'primary', $variant: 900);
@@ -439,7 +449,7 @@
439449
}
440450

441451
@if $variant == 'bootstrap' {
442-
box-shadow: 0 0 0 rem(2px) color($color: 'primary', $variant: 200);
452+
box-shadow: 0 0 0 rem(4px) color($color: 'primary', $variant: 500, $opacity: .38);
443453
}
444454
}
445455
}
@@ -472,15 +482,18 @@
472482
background: color($color: 'info', $variant: 800);
473483
border-color: color($color: 'info', $variant: 800);
474484

475-
@if $variant == 'indigo' {
485+
@if $variant == 'indigo' or $variant == 'bootstrap' {
476486
color: contrast-color($color: 'info', $variant: 500);
477487
background: color($color: 'info', $variant: 500);
478488
border-color: color($color: 'info', $variant: 500);
489+
}
490+
491+
@if $variant == 'indigo' {
479492
box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: if($theme-variant == 'light', 100, 800));
480493
}
481494

482495
@if $variant == 'bootstrap' {
483-
box-shadow: 0 0 0 rem(2px) color($color: 'info', $variant: 200);
496+
box-shadow: 0 0 0 rem(4px) color($color: 'info', $variant: 500, $opacity: .38);
484497
}
485498
}
486499
}
@@ -517,15 +530,19 @@
517530
background: color($color: 'success', $variant: 800);
518531
border-color: color($color: 'success', $variant: 800);
519532

520-
@if $variant == 'indigo' {
521-
color: contrast-color($color: 'success', $variant: 900);
533+
@if $variant == 'indigo' or $variant == 'bootstrap' {
522534
background: color($color: 'success', $variant: 500);
523535
border-color: color($color: 'success', $variant: 500);
524536
box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 800));
525537
}
526538

539+
@if $variant == 'indigo' {
540+
color: contrast-color($color: 'success', $variant: 900);
541+
}
542+
527543
@if $variant == 'bootstrap' {
528-
box-shadow: 0 0 0 rem(2px) color($color: 'success', $variant: 200);
544+
color: contrast-color($color: 'success', $variant: 600);
545+
box-shadow: 0 0 0 rem(4px) color($color: 'success', $variant: 500, $opacity: .38);
529546
}
530547
}
531548
}
@@ -558,15 +575,18 @@
558575
background: color($color: 'warn', $variant: 800);
559576
border-color: color($color: 'warn', $variant: 800);
560577

561-
@if $variant == 'indigo' {
578+
@if $variant == 'indigo' or $variant == 'bootstrap' {
562579
color: contrast-color($color: 'warn', $variant: 900);
563580
background: color($color: 'warn', $variant: 500);
564581
border-color: color($color: 'warn', $variant: 500);
582+
}
583+
584+
@if $variant == 'indigo' {
565585
box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: if($theme-variant == 'light', 100, 900));
566586
}
567587

568588
@if $variant == 'bootstrap' {
569-
box-shadow: 0 0 0 rem(2px) color($color: 'warn', $variant: 200);
589+
box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: .38);
570590
}
571591
}
572592
}
@@ -603,15 +623,19 @@
603623
background: color($color: 'error', $variant: 800);
604624
border-color: color($color: 'error', $variant: 800);
605625

606-
@if $variant == 'indigo' {
607-
color: contrast-color($color: 'error', $variant: 900);
626+
@if $variant == 'indigo' or $variant == 'bootstrap' {
608627
background: color($color: 'error', $variant: 500);
609628
border-color: color($color: 'error', $variant: 500);
629+
}
630+
631+
@if $variant == 'indigo' {
632+
color: contrast-color($color: 'error', $variant: 900);
610633
box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: if($theme-variant == 'light', 100, 900));
611634
}
612635

613636
@if $variant == 'bootstrap' {
614-
box-shadow: 0 0 0 rem(2px) color($color: 'error', $variant: 200);
637+
color: contrast-color($color: 'error', $variant: 600);
638+
box-shadow: 0 0 0 rem(4px) color($color: 'error', $variant: 500, $opacity: .38);
615639
}
616640
}
617641
}

0 commit comments

Comments
 (0)