Skip to content

Commit cc47914

Browse files
kdinevkdinev
authored
Merge pull request #13579 from IgniteUI/16.1.x
Merging 16.1.x into master
2 parents de8de4a + 96f899c commit cc47914

File tree

81 files changed

+337
-304
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+337
-304
lines changed

‎.github/workflows/nodejs.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ jobs:
1616

1717
strategy:
1818
matrix:
19-
node-version: [16.x, 18.x, 20.5.x]
19+
node-version: [18.x, 20.5.x]
2020

2121
steps:
2222
- name: Checkout
@@ -55,7 +55,7 @@ jobs:
5555
- name: Bundle Tree-Shake Test
5656
run: npm run build:bundletest
5757
- name: Publish to coveralls.io
58-
if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '16.x'
58+
if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '18.x'
5959
uses: coverallsapp/[email protected]
6060
with:
6161
github-token: ${{ github.token }}

‎CHANGELOG.md

+30
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,33 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 16.1.4
6+
### New Features
7+
- `Themes`:
8+
- **Experimental** - Added the ability to configure the base font-size used to calculate the rem values in all component themes. This allows for proper scaling of components when a different document font-size is used.
9+
10+
- Code example:
11+
12+
```scss
13+
// Configure the base font-size
14+
@use 'igniteui-theming/sass/config' as * with (
15+
$base-font-size: 10px // <-- 10px == 1rem
16+
);
17+
18+
// Standard imports and theme declarations
19+
@use 'igniteui-angular/src/lib/core/styles/themes' as *;
20+
21+
// This change also adds a new CSS variable `--ig-base-font-size`
22+
// that you can use to configure your own stylesheets:
23+
html {
24+
font-size: var(--ig-base-font-size); // 10px
25+
}
26+
27+
@include core();
28+
@include typography();
29+
@include theme();
30+
```
31+
532
## 16.1.0
633
### New Features
734
- `IgxSelect`:
@@ -79,6 +106,9 @@ All notable changes for each version of this project will be documented in this
79106
- **Behavioral Change** When there are already grouped columns, the group drop area now shows after dragging of a column starts and not when only click actions are performed.
80107
- `IgxCombo`, `IgxSimpleCombo`:
81108
- **Breaking Change** The `selection` property returns an array of the selected items even when a value key is provided and the `value` property returns an array of value keys instead of display keys. Automatic migrations are available and will be applied on `ng update`.
109+
- Improved tree-shaking support for the `@igniteui/material-icons-extended` package.
110+
- Improved tree-shaking support for the `igniteui-angular-i18n` package.
111+
- Improved tree-shaking support for all grids.
82112

83113
## 16.0.0
84114

‎azure-pipelines.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ pool:
44
steps:
55
- task: NodeTool@0
66
inputs:
7-
versionSpec: '16.x'
7+
versionSpec: '18.x'
88
displayName: 'Install Node.js'
99

1010
- script: npm ci

‎package-lock.json

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"@types/source-map": "0.5.2",
6868
"fflate": "^0.7.3",
6969
"hammerjs": "^2.0.8",
70-
"igniteui-theming": "^3.1.1",
70+
"igniteui-theming": "^3.3.0",
7171
"igniteui-trial-watermark": "^3.0.2",
7272
"lodash-es": "^4.17.21",
7373
"rxjs": "^6.6.7",

‎projects/igniteui-angular/migrations/common/UpdateChanges.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -478,7 +478,7 @@ export class UpdateChanges {
478478
protected updateSassVariables(entryPath: string) {
479479
let fileContent = this.host.read(entryPath).toString();
480480
let overwrite = false;
481-
const allowedStartCharacters = new RegExp('(\:|\,)\s?', 'g');
481+
const allowedStartCharacters = new RegExp(/(:|,)\s?/, 'g');
482482
// eslint-disable-next-line no-control-regex
483483
const allowedEndCharacters = new RegExp('[;),: \r\n]', 'g');
484484
for (const change of this.themeChanges.changes) {

‎projects/igniteui-angular/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"igniteui-trial-watermark": "^3.0.2",
7777
"lodash-es": "^4.17.21",
7878
"uuid": "^9.0.0",
79-
"igniteui-theming": "^3.1.1",
79+
"igniteui-theming": "^3.3.0",
8080
"@igniteui/material-icons-extended": "^3.0.0"
8181
},
8282
"peerDependencies": {

‎projects/igniteui-angular/src/lib/action-strip/action-strip.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<ng-content #content></ng-content>
33
<ng-container *ngIf="menuItems.length > 0">
44
<button
5+
type="button"
56
igxButton="icon"
67
igxRipple
78
[igxToggleAction]="dropdown"

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<ng-container *ngIf="!asMenuItem">
2-
<button [title]="labelText" igxButton="icon" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
2+
<button type="button" [title]="labelText" igxButton="icon" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
33
<igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
44
<igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
55
</button>
66
</ng-container>
77

88
<ng-template #menuItemTemplate>
99
<ng-container *ngIf="asMenuItem">
10-
<div #container [className]='containerClass'>
10+
<div #container [className]="containerClass">
1111
<igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
1212
<igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
1313
<label igxLabel>{{labelText}}</label>
1414
</div>
1515
</ng-container>
16-
</ng-template>
16+
</ng-template>

‎projects/igniteui-angular/src/lib/banner/banner.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</div>
1313
<div class="igx-banner__actions">
1414
<ng-container *ngIf="useDefaultTemplate">
15-
<button igxButton="flat" igxRipple (click)="close()">
15+
<button type="button" igxButton="flat" igxRipple (click)="close()">
1616
{{ resourceStrings.igx_banner_button_dismiss }}
1717
</button>
1818
</ng-container>

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
4444
* <igx-banner #banner>
4545
* Our privacy settings have changed.
4646
* <igx-banner-actions>
47-
* <button igxButton="raised">Read More</button>
48-
* <button igxButton="raised">Accept and Continue</button>
47+
* <button type="button" igxButton="raised">Read More</button>
48+
* <button type="button" igxButton="raised">Accept and Continue</button>
4949
* </igx-banner-actions>
5050
* </igx-banner>
5151
* ```
@@ -220,7 +220,7 @@ export class IgxBannerComponent implements IToggleView {
220220
* <igx-banner #banner>
221221
* ...
222222
* </igx-banner>
223-
* <button (click)="banner.open()">Open Banner</button>
223+
* <button type="button" (click)="banner.open()">Open Banner</button>
224224
* ```
225225
*/
226226
public open(event?: Event) {
@@ -249,7 +249,7 @@ export class IgxBannerComponent implements IToggleView {
249249
* <igx-banner #banner>
250250
* ...
251251
* </igx-banner>
252-
* <button (click)="banner.close()">Close Banner</button>
252+
* <button type="button" (click)="banner.close()">Close Banner</button>
253253
* ```
254254
*/
255255
public close(event?: Event) {
@@ -278,7 +278,7 @@ export class IgxBannerComponent implements IToggleView {
278278
* <igx-banner #banner>
279279
* ...
280280
* </igx-banner>
281-
* <button (click)="banner.toggle()">Toggle Banner</button>
281+
* <button type="button" (click)="banner.toggle()">Toggle Banner</button>
282282
* ```
283283
*/
284284
public toggle(event?: Event) {

‎projects/igniteui-angular/src/lib/card/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ Supporting directives and components:
2828
</igx-card-content>
2929

3030
<igx-card-actions>
31-
<button igxButton (click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button>
32-
<button igxButton (click)="openUrl('https://twitter.com/elonmusk')">Share</button>
31+
<button type="button" igxButton (click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button>
32+
<button type="button" igxButton (click)="openUrl('https://twitter.com/elonmusk')">Share</button>
3333
</igx-card-actions>
3434
</igx-card>
3535
```

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,8 @@ export class IgxCardFooterDirective {
187187
* <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
188188
* </igx-card-header>
189189
* <igx-card-actions>
190-
* <button igxButton igxRipple>Share</button>
191-
* <button igxButton igxRipple>Play Album</button>
190+
* <button type="button" igxButton igxRipple>Share</button>
191+
* <button type="button" igxButton igxRipple>Play Album</button>
192192
* </igx-card-actions>
193193
* </igx-card>
194194
* ```

‎projects/igniteui-angular/src/lib/carousel/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ The **IgxCarousel** supports templating indicators and navigation buttons
6161
<igx-carousel #carousel>
6262
...
6363
<ng-template igxCarouselNextButton let-disabled>
64-
<button igxButton="fab" igxRipple="white" [disabled]="disabled">
64+
<button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
6565
<igx-icon>add</igx-icon>
6666
</button>
6767
</ng-template>
@@ -73,7 +73,7 @@ The **IgxCarousel** supports templating indicators and navigation buttons
7373
<igx-carousel #carousel>
7474
...
7575
<ng-template igxCarouselPrevButton let-disabled>
76-
<button igxButton="fab" igxRipple="white" [disabled]="disabled">
76+
<button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
7777
<igx-icon>remove</igx-icon>
7878
</button>
7979
</ng-template>

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -269,9 +269,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
269269
* <igx-carousel #carousel>
270270
* ...
271271
* <ng-template igxCarouselNextButton let-disabled>
272-
* <button igxButton="fab" igxRipple="white" [disabled]="disabled">
273-
* <igx-icon>add</igx-icon>
274-
* </button>
272+
* <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
273+
* <igx-icon>add</igx-icon>
274+
* </button>
275275
* </ng-template>
276276
* </igx-carousel>
277277
* ```
@@ -292,9 +292,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
292292
* <igx-carousel #carousel>
293293
* ...
294294
* <ng-template igxCarouselPrevButton let-disabled>
295-
* <button igxButton="fab" igxRipple="white" [disabled]="disabled">
296-
* <igx-icon>remove</igx-icon>
297-
* </button>
295+
* <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
296+
* <igx-icon>remove</igx-icon>
297+
* </button>
298298
* </ng-template>
299299
* </igx-carousel>
300300
* ```

‎projects/igniteui-angular/src/lib/combo/combo.common.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -650,7 +650,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
650650
* <igx-combo #combo>
651651
* ...
652652
* <ng-template igxComboAddItem>
653-
* <button class="combo__add-button">
653+
* <button type="button" igxButton="raised" class="combo__add-button">
654654
* Click to add item
655655
* </button>
656656
* </ng-template>
@@ -1032,7 +1032,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
10321032
* A method that opens/closes the combo.
10331033
*
10341034
* ```html
1035-
* <button (click)="combo.toggle()">Toggle Combo</button>
1035+
* <button type="button" (click)="combo.toggle()">Toggle Combo</button>
10361036
* <igx-combo #combo></igx-combo>
10371037
* ```
10381038
*/
@@ -1052,7 +1052,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
10521052
* A method that opens the combo.
10531053
*
10541054
* ```html
1055-
* <button (click)="combo.open()">Open Combo</button>
1055+
* <button type="button" (click)="combo.open()">Open Combo</button>
10561056
* <igx-combo #combo></igx-combo>
10571057
* ```
10581058
*/
@@ -1070,7 +1070,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
10701070
* A method that closes the combo.
10711071
*
10721072
* ```html
1073-
* <button (click)="combo.close()">Close Combo</button>
1073+
* <button type="button" (click)="combo.close()">Close Combo</button>
10741074
* <igx-combo #combo></igx-combo>
10751075
* ```
10761076
*/

‎projects/igniteui-angular/src/lib/combo/combo.component.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<input igxInput #comboInput name="comboInput" type="text" [value]="displayValue.join(', ')" readonly
1212
[attr.placeholder]="placeholder" [disabled]="disabled"
1313
role="combobox" aria-haspopup="listbox"
14-
[attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
15-
[attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"
14+
[attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
15+
[attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
1616
(blur)="onBlur()" />
1717
<ng-container ngProjectAs="igx-suffix">
1818
<ng-content select="igx-suffix"></ng-content>
@@ -28,15 +28,15 @@
2828
</igx-suffix>
2929
<igx-suffix class="igx-combo__toggle-button">
3030
<ng-container *ngIf="toggleIconTemplate">
31-
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
31+
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
3232
</ng-container>
3333
<igx-icon *ngIf="!toggleIconTemplate">
3434
{{ toggleIcon }}
3535
</igx-icon>
3636
</igx-suffix>
3737
</igx-input-group>
3838
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
39-
[labelledBy]="this.ariaLabelledBy || this.label?.id || this.placeholder || ''"
39+
[labelledBy]="ariaLabelledBy || label?.id || placeholder || ''"
4040
[width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
4141
(opened)="handleOpened()" (closed)="handleClosed()">
4242
<div class="igx-combo__search">
@@ -57,8 +57,8 @@
5757
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
5858
[style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
5959
[tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
60-
[attr.aria-activedescendant]="this.activeDescendant">
61-
<igx-combo-item [itemHeight]='itemHeight' *igxFor="let item of data
60+
[attr.aria-activedescendant]="activeDescendant">
61+
<igx-combo-item [itemHeight]="itemHeight" *igxFor="let item of data
6262
| comboFiltering:filterValue:displayKey:filteringOptions:filterFunction
6363
| comboGrouping:groupKey:valueKey:groupSortingDirection;
6464
index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
@@ -102,7 +102,7 @@
102102
<span>{{resourceStrings.igx_combo_empty_message}}</span>
103103
</ng-template>
104104
<ng-template #addItemDefault let-control>
105-
<button igxButton="flat" igxRipple>Add item</button>
105+
<button type="button" igxButton="flat" igxRipple>Add item</button>
106106
</ng-template>
107107
<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
108108
{{ item[key] }}

‎projects/igniteui-angular/src/lib/combo/combo.directives.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export class IgxComboHeaderItemDirective { }
125125
* @example
126126
* <igx-combo #combo>
127127
* <ng-template igxComboAddItem>
128-
* <button class="combo__add-button">
128+
* <button type="button" class="combo__add-button">
129129
* Click to add item
130130
* </button>
131131
* </ng-template>

‎projects/igniteui-angular/src/lib/core/navigation/directives.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { IgxNavigationService } from './nav.service';
66
*
77
* Usage:
88
* ```
9-
* <button igxNavToggle="ID"> Toggle </button>
9+
* <button type="button" igxNavToggle="ID">Toggle</button>
1010
* ```
1111
* Where the `ID` matches the ID of compatible `IToggleView` component.
1212
*/
@@ -34,7 +34,7 @@ export class IgxNavigationToggleDirective {
3434
*
3535
* Usage:
3636
* ```
37-
* <button igxNavClose="ID"> Close </button>
37+
* <button type="button" igxNavClose="ID">Close</button>
3838
* ```
3939
* Where the `ID` matches the ID of compatible `IToggleView` component.
4040
*/

‎projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
}
5353

5454
igc-rating::part(value-label) {
55-
color: color(null, 'gray', 900);
55+
color: var-get($theme, 'value-label');
5656
}
5757

5858
igc-rating[disabled]::part(label),
@@ -61,9 +61,9 @@
6161
}
6262

6363
igc-rating[disabled] {
64-
--symbol-empty-color: var(--disabled-empty-symbol-color);
65-
--symbol-full-color: var(--disabled-full-symbol-color);
66-
--symbol-empty-filter: grayscale(100%) opacity(50%);
67-
--symbol-full-filter: grayscale(50%);
64+
--symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')};
65+
--symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')};
66+
--disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')};
67+
--disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')};
6868
}
6969
}

0 commit comments

Comments
 (0)