Skip to content

Commit c3098e7

Browse files
kdinevkdinev
authored
Merge branch 'master' into angular-19
2 parents 0c6b934 + a197299 commit c3098e7

File tree

13 files changed

+119
-58
lines changed

13 files changed

+119
-58
lines changed

‎projects/igniteui-angular/migrations/migration-collection.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,11 @@
201201
"version": "18.2.0",
202202
"description": "Updates Ignite UI for Angular from v18.1.x to v18.2.0",
203203
"factory": "./update-18_2_0"
204+
},
205+
"migration-41": {
206+
"version": "18.2.3",
207+
"description": "Updates Ignite UI for Angular from v18.2.0 to v18.2.3",
208+
"factory": "./update-18_2_3"
204209
}
205210
}
206211
}

‎projects/igniteui-angular/migrations/update-18_2_3/changes/theme-changes.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"$schema": "../../common/schema/theme-changes.schema.json",
3+
"changes": [
4+
{
5+
"name": "$header-time-period-color",
6+
"remove": true,
7+
"owner": "time-picker-theme",
8+
"type":"property"
9+
}
10+
]
11+
}

‎projects/igniteui-angular/migrations/update-18_2_3/index.spec.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as path from 'path';
2+
3+
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
4+
import { setupTestTree } from '../common/setup.spec';
5+
6+
const version = '18.2.3';
7+
8+
describe(`Update to ${version}`, () => {
9+
let appTree: UnitTestTree;
10+
const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
11+
12+
beforeEach(() => {
13+
appTree = setupTestTree();
14+
});
15+
16+
const migrationName = 'migration-41';
17+
18+
it('should remove the $header-time-period-color property from the time-picker-theme', async () => {
19+
appTree.create(
20+
`/testSrc/appPrefix/component/test.component.scss`,
21+
`$custom-time-picker: time-picker-theme(
22+
$text-color: red,
23+
$header-time-period-color: pink
24+
);`
25+
);
26+
27+
const tree = await schematicRunner
28+
.runSchematic(migrationName, {}, appTree);
29+
30+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
31+
`$custom-time-picker: time-picker-theme(
32+
$text-color: red
33+
);`
34+
);
35+
});
36+
});

‎projects/igniteui-angular/migrations/update-18_2_3/index.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type {
2+
Rule,
3+
SchematicContext,
4+
Tree
5+
} from '@angular-devkit/schematics';
6+
import { UpdateChanges } from '../common/UpdateChanges';
7+
8+
const version = '18.2.3';
9+
10+
export default (): Rule => async (host: Tree, context: SchematicContext) => {
11+
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
12+
const update = new UpdateChanges(__dirname, host, context);
13+
update.applyChanges();
14+
};

‎projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
@include css-vars($theme);
8888

8989
$variant: map.get($theme, '_meta', 'variant');
90-
$bootstrap-theme: map.get($theme, variant) == 'bootstrap';
90+
$bootstrap-theme: map.get($theme, '_meta', 'variant') == 'bootstrap';
9191

9292
$dialog-min-width: map.get((
9393
'material': rem(280px),
@@ -96,21 +96,21 @@
9696
), $variant);
9797

9898
$dialog-title-padding: map.get((
99-
'material': rem(24px) rem(24px) rem(12px) rem(24px),
99+
'material': rem(16px) rem(24px) rem(0px) rem(24px),
100100
'fluent': rem(16px) rem(24px) rem(24px) rem(24px),
101101
'bootstrap': rem(16px),
102102
'indigo': rem(24px) rem(24px) 0 rem(24px),
103103
), $variant);
104104

105105
$dialog-message-padding: map.get((
106-
'material': rem(12px) rem(24px),
106+
'material': rem(14px) rem(24px),
107107
'fluent': 0 rem(24px) rem(20px) rem(24px),
108108
'bootstrap': rem(16px),
109109
'indigo': rem(16px) rem(24px),
110110
), $variant);
111111

112112
$dialog-actions-padding: map.get((
113-
'material': rem(8px),
113+
'material': 0 rem(8px) rem(8px),
114114
'fluent': 0 rem(24px) rem(24px) rem(24px),
115115
'bootstrap': rem(16px),
116116
'indigo': rem(16px) rem(24px) rem(24px) rem(24px),
@@ -180,23 +180,16 @@
180180
flex-flow: row nowrap;
181181
justify-content: flex-end;
182182
padding: $dialog-actions-padding;
183+
gap: if($variant == 'indigo', rem(16px), rem(8px));
183184

184185
@if $bootstrap-theme {
185186
border-top: rem(1px) solid var-get($theme, 'border-color');
186187
}
187188

188-
button + button {
189-
margin-inline-start: rem(8px);
190-
}
191-
192189
@if $variant == 'indigo' {
193190
.igx-button {
194191
--ig-size: 2;
195192
}
196-
197-
button + button {
198-
margin-inline-start: rem(16px);
199-
}
200193
}
201194
}
202195
}

‎projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -404,16 +404,16 @@
404404
}
405405
}
406406

407-
/// Adds typography styles for the igx-list component.
408-
/// Uses the 'caption' and 'subtitle-2'
407+
/// Adds typography styles for the igx-drop-down component.
408+
/// Uses the 'overline', 'body-2', 'subtitle-1'
409409
/// categories from the typographic scale.
410410
/// @group typography
411-
/// @param {Map} $categories [(header: 'overline', item: 'body-2', select-item: 'subtitle-1')] - The categories from the typographic scale used for type styles.
411+
/// @param {Map} $categories [(header: 'overline', item: 'body-2', select-item: 'body-2')] - The categories from the typographic scale used for type styles.
412412
@mixin drop-down-typography(
413413
$categories: (
414414
header: 'overline',
415415
item: 'body-2',
416-
select-item: 'subtitle-1'
416+
select-item: 'body-2'
417417
)
418418
) {
419419
$header: map.get($categories, 'header');
@@ -432,4 +432,10 @@
432432
margin: 0;
433433
}
434434
}
435+
436+
%igx-drop-down__item--selected {
437+
@include type-style($select-item) {
438+
margin: 0;
439+
}
440+
}
435441
}

‎projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,6 @@
2424
@extend %time-picker__wrapper !optional;
2525
}
2626

27-
@include e(header-ampm) {
28-
@extend %time-picker__header-ampm !optional;
29-
}
30-
3127
@include e(header-hour){
3228
@extend %time-picker__header-hour !optional;
3329
}

‎projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
/// @param {Color} $disabled-item-background [null] - The background color for disabled values .
2424
/// @param {Color} $header-background [null] - The header background color of a time picker.
2525
/// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker.
26-
/// @param {Color} $header-time-period-color [null] - The header AM/PM text color of a time picker.
2726
/// @param {Color} $background-color [null] - The time-picker panel background color.
2827
/// @param {Number} $time-item-size [null] - The height of the time item.
2928
/// @param {Color} $divider-color [null] - The color for the actions area divider.
@@ -56,7 +55,6 @@
5655
$disabled-item-background: null,
5756
$header-background: null,
5857
$header-hour-text-color: null,
59-
$header-time-period-color: null,
6058
$background-color: null,
6159
$modal-shadow: null,
6260
$dropdown-shadow: null,
@@ -85,12 +83,6 @@
8583
$header-hour-text-color: text-contrast($header-background);
8684
}
8785

88-
@if not($header-time-period-color) and $header-background {
89-
@if meta.type-of($header-background) == 'color' {
90-
$header-time-period-color: rgba(text-contrast($header-background), .8);
91-
}
92-
}
93-
9486
@if not($selected-text-color) and $active-item-background {
9587
$selected-text-color: text-contrast($active-item-background);
9688
}
@@ -135,7 +127,6 @@
135127
disabled-item-background: $disabled-item-background,
136128
header-background: $header-background,
137129
header-hour-text-color: $header-hour-text-color,
138-
header-time-period-color: $header-time-period-color,
139130
background-color: $background-color,
140131
modal-shadow: $modal-shadow,
141132
dropdown-shadow: $dropdown-shadow,
@@ -162,15 +153,15 @@
162153
$picker-buttons-padding: map.get((
163154
'material': rem(8px),
164155
'fluent': rem(8px),
165-
'bootstrap': rem(16px),
156+
'bootstrap': rem(8px),
166157
'indigo': rem(8px) rem(16px),
167158
), $variant);
168159

169160
$picker-header-padding: map.get((
170-
'material': rem(24px) rem(16px),
161+
'material': rem(16px) rem(24px),
171162
'fluent': rem(16px),
172163
'bootstrap': rem(16px),
173-
'indigo': rem(16px) rem(24px) ,
164+
'indigo': rem(16px),
174165
), $variant);
175166

176167
%time-picker-display {
@@ -287,7 +278,7 @@
287278
}
288279

289280
%time-picker__item {
290-
width: if($variant == 'indigo', rem(46px), rem(54px));
281+
width: rem(46px);
291282
padding: rem(5px) rem(10px);
292283
border-radius: var-get($theme, 'active-item-border-radius');
293284
height: var-get($theme, 'time-item-size');
@@ -355,10 +346,6 @@
355346
}
356347
}
357348

358-
%time-picker__header-ampm {
359-
color: var-get($theme, 'header-time-period-color');
360-
}
361-
362349
%time-picker__header--vertical {
363350
@if $variant == 'indigo' {
364351
min-width: rem(136px);
@@ -371,18 +358,14 @@
371358
%time-picker__header-hour {
372359
display: flex;
373360
color: var-get($theme, 'header-hour-text-color');
361+
margin: 0;
374362

375363
[dir='rtl'] & {
376364
flex-direction: row-reverse;
377365
justify-content: flex-end;
378366
}
379367
}
380368

381-
%time-picker__header-ampm,
382-
%time-picker__header-hour {
383-
margin: 0;
384-
}
385-
386369
%time-picker__buttons {
387370
display: flex;
388371
min-height: sizable(rem(40px), rem(44px), rem(48px));
@@ -413,24 +396,20 @@
413396
header-hour: 'h4',
414397
selected-time: 'h5'
415398
)) {
416-
$time-period: map.get($categories, 'header-time-period');
417399
$header-hour: map.get($categories, 'header-hour');
418400
$selected-time: map.get($categories, 'selected-time');
419401

420-
421-
%time-picker__header-ampm {
422-
@include type-style($time-period, false);
423-
}
424-
425402
%time-picker__header-hour {
426403
@include type-style($header-hour, false) {
427404
margin-top: 0;
405+
margin-bottom: 0;
428406
}
429407
}
430408

431409
%time-picker__item--selected {
432410
@include type-style($selected-time) {
433411
margin-top: 0;
412+
margin-bottom: 0;
434413
}
435414
}
436415
}

‎projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,9 @@
6464
));
6565
@include dock-manager-typography();
6666
@include drop-down-typography($categories: (
67-
header: 'body-1',
68-
item: 'body-1',
69-
select-item: 'body-1'
67+
header: 'overline',
68+
item: 'body-2',
69+
select-item: 'body-2'
7070
));
7171
@include expansion-panel-typography($categories: (
7272
title: 'h5',
@@ -103,7 +103,6 @@
103103
));
104104
@include tabs-typography();
105105
@include time-picker-typography($categories: (
106-
header-time-period: 'subtitle-1',
107106
header-hour: 'h4',
108107
selected-time: 'h4'
109108
));

‎projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,16 @@
6161
));
6262
@include column-actions-typography();
6363
@include date-range-typography();
64-
@include dialog-typography();
64+
@include dialog-typography($categories: (
65+
title: 'h6',
66+
content: 'body-2'
67+
));
6568
@include dock-manager-typography();
66-
@include drop-down-typography();
69+
@include drop-down-typography($categories: (
70+
header: 'subtitle-2',
71+
item: 'body-2',
72+
select-item: 'body-2'
73+
));
6774
@include expansion-panel-typography($categories: (
6875
title: 'subtitle-1',
6976
description: 'body-2',

‎projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@
106106
label: 'subtitle-2',
107107
));
108108
@include time-picker-typography($categories: (
109-
header-time-period: 'subtitle-1',
110109
header-hour: 'h5',
111110
selected-time: 'h6'
112111
));

‎projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -637,6 +637,22 @@ describe('IgxSlider', () => {
637637
expect(slider.value.upper).toBe(60);
638638
});
639639

640+
it('should reach max value with upper thumb in RANGE mode with decimal steps', () => {
641+
slider.minValue = 0;
642+
slider.maxValue = 10;
643+
slider.step = 0.1;
644+
slider.type = IgxSliderType.RANGE;
645+
slider.value = { lower: 0, upper: 10 };
646+
fixture.detectChanges();
647+
648+
const toThumb = fixture.nativeElement.querySelector(THUMB_TO_CLASS);
649+
toThumb.focus();
650+
651+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', toThumb, true);
652+
fixture.detectChanges();
653+
654+
expect((slider.value as IRangeSliderValue).upper).toBe(10);
655+
});
640656
});
641657

642658
describe('Slider - List View', () => {

‎projects/igniteui-angular/src/lib/slider/slider.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1353,11 +1353,11 @@ export class IgxSliderComponent implements
13531353
private normalizeByStep(value: IRangeSliderValue | number) {
13541354
if (this.isRange) {
13551355
this._value = {
1356-
lower: (value as IRangeSliderValue).lower - ((value as IRangeSliderValue).lower % this.step),
1357-
upper: (value as IRangeSliderValue).upper - ((value as IRangeSliderValue).upper % this.step)
1356+
lower: Math.floor((value as IRangeSliderValue).lower / this.step) * this.step,
1357+
upper: Math.floor((value as IRangeSliderValue).upper / this.step) * this.step
13581358
};
13591359
} else {
1360-
this._value = (value as number) - ((value as number) % this.step);
1360+
this._value = Math.floor((value as number) / this.step) * this.step;
13611361
}
13621362
}
13631363

0 commit comments

Comments
 (0)