Skip to content

Commit 945b238

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Merge from master.
2 parents 80f1986 + bfd52b8 commit 945b238

File tree

10 files changed

+279
-52
lines changed

10 files changed

+279
-52
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ All notable changes for each version of this project will be documented in this
77
### General
88
- `igxCombo`
99
- **Behavioral Change** - Change default positioning strategy from `ConnectedPositioningStrategy` to `AutoPositionStrategy`. The [`Auto`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay_position.html#auto) strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. If after flipping direction the content goes out of the view, auto strategy will revert to initial start point and direction and will push the content into the view. Note after pushing the content it may hide the combo's input.
10+
- `IgxNavbar`:
11+
- **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
1012

1113
### New Features
1214
- `IgxGridState` directive
@@ -20,6 +22,8 @@ All notable changes for each version of this project will be documented in this
2022
- `IgxSnackbar`
2123
- `message` property has been deprecated. You can place the *message text* in the snackbar content or pass it as parameter to `show` method instead.
2224
- An optional string parameter `message` has been added to `show()` method.
25+
- `IgxNavbar`
26+
- Added new `igx-navbar-title, igxNavbarTitle` directive that can be used to provide custom content for navbar title. It would override the value of `title` input property.
2327

2428
## 10.0.0
2529

‎projects/igniteui-angular/migrations/update-10_1_0/changes/classes.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"$schema": "../../common/schema/class.schema.json",
3+
"changes": [
4+
{
5+
"name": "IgxActionIconDirective",
6+
"replaceWith": "IgxNavbarActionDirective"
7+
}
8+
]
9+
}

‎projects/igniteui-angular/migrations/update-10_1_0/changes/selectors.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"$schema": "../../common/schema/selector.schema.json",
3+
"changes": [
4+
{
5+
"type": "component",
6+
"selector": "igx-action-icon",
7+
"replaceWith": "igx-navbar-action"
8+
}
9+
]
10+
}

‎projects/igniteui-angular/migrations/update-10_1_0/index.spec.ts

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,51 @@ describe('Update 10.1.0', () => {
2121
prefix: 'appPrefix'
2222
}
2323
}
24-
};
24+
};
2525

2626
beforeEach(() => {
2727
appTree = new UnitTestTree(new EmptyTree());
2828
appTree.create('/angular.json', JSON.stringify(configJson));
2929
});
3030

31-
it('should update DropPosition.None', async() => {
31+
it('should upgrade the igx-action-icon to igx-navbar-action', async () => {
32+
appTree.create(
33+
'/testSrc/appPrefix/component/custom.component.html',
34+
`<igx-navbar title="Test title">
35+
<igx-action-icon>
36+
<igx-icon>arrow_back</igx-icon>
37+
</igx-action-icon>
38+
</igx-navbar>`);
39+
const tree = await schematicRunner.runSchematicAsync('migration-16', {}, appTree)
40+
.toPromise();
41+
42+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
43+
.toEqual(
44+
`<igx-navbar title="Test title">
45+
<igx-navbar-action>
46+
<igx-icon>arrow_back</igx-icon>
47+
</igx-navbar-action>
48+
</igx-navbar>`);
49+
});
50+
51+
it('should update IgxActionIconDirective to IgxNavbarActionDirective', async () => {
52+
appTree.create('/testSrc/appPrefix/component/custom.component.ts',
53+
`import { IgxActionIconDirective } from 'igniteui-angular';
54+
export class TestNavbar {
55+
@ViewChild(IgxActionIconDirective, { read: IgxActionIconDirective })
56+
private actionIcon: IgxActionIconDirective; }`);
57+
58+
const tree = await schematicRunner.runSchematicAsync('migration-16', {}, appTree).toPromise();
59+
60+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.ts'))
61+
.toEqual(
62+
`import { IgxNavbarActionDirective } from 'igniteui-angular';
63+
export class TestNavbar {
64+
@ViewChild(IgxNavbarActionDirective, { read: IgxNavbarActionDirective })
65+
private actionIcon: IgxNavbarActionDirective; }`);
66+
});
67+
68+
it('should update DropPosition.None', async () => {
3269
const origFileContent =
3370
`import { Component, Injectable, ViewChild } from "@angular/core";` +
3471
`import { IgxGridComponent, DropPosition } from "igniteui-angular";` +
@@ -45,20 +82,20 @@ describe('Update 10.1.0', () => {
4582
` }` +
4683
`}`;
4784
const expectedFileContent =
48-
`import { Component, Injectable, ViewChild } from "@angular/core";` +
49-
`import { IgxGridComponent, DropPosition } from "igniteui-angular";` +
50-
`import { IgxColumnComponent } from "igniteui-angular";\r\n` +
51-
`@Component({` +
52-
` providers: [RemoteService]` +
53-
`})` +
54-
`export class GridSampleComponent {` +
55-
` @ViewChild("grid1", { read: IgxGridComponent }) public grid1: IgxGridComponent;` +
56-
` public move() {` +
57-
` const column: IgxColumnComponent = this.grid1.columns[0];` +
58-
` const column2: IgxColumnComponent = this.grid1.columns[1];` +
59-
` this.grid1.moveColumn(col1, col2, DropPosition.AfterDropTarget);` +
60-
` }` +
61-
`}`;
85+
`import { Component, Injectable, ViewChild } from "@angular/core";` +
86+
`import { IgxGridComponent, DropPosition } from "igniteui-angular";` +
87+
`import { IgxColumnComponent } from "igniteui-angular";\r\n` +
88+
`@Component({` +
89+
` providers: [RemoteService]` +
90+
`})` +
91+
`export class GridSampleComponent {` +
92+
` @ViewChild("grid1", { read: IgxGridComponent }) public grid1: IgxGridComponent;` +
93+
` public move() {` +
94+
` const column: IgxColumnComponent = this.grid1.columns[0];` +
95+
` const column2: IgxColumnComponent = this.grid1.columns[1];` +
96+
` this.grid1.moveColumn(col1, col2, DropPosition.AfterDropTarget);` +
97+
` }` +
98+
`}`;
6299
appTree.create(
63100
'/testSrc/appPrefix/component/drop.component.ts',
64101
origFileContent);
@@ -67,4 +104,5 @@ describe('Update 10.1.0', () => {
67104
expect(tree.readContent('/testSrc/appPrefix/component/drop.component.ts'))
68105
.toEqual(expectedFileContent);
69106
});
107+
70108
});

‎projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-component.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,10 @@
1616
}
1717

1818
@include e(left) {
19-
@extend %igx-navbar-bundle !optional;
20-
@extend %igx-navbar-icon-display !optional;
19+
@extend %igx-navbar-left !optional;
2120
}
2221

2322
@include e(right) {
24-
@extend %igx-navbar-bundle !optional;
25-
@extend %igx-navbar-icon-display !optional;
23+
@extend %igx-navbar-right !optional;
2624
}
2725
}

‎projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@
9090
@mixin igx-navbar($theme) {
9191
@include igx-root-css-vars($theme);
9292

93-
$navbar-padding: 0 em(16px);
94-
$navbar-title-fz: em(18px, 16px);
95-
$navbar-title-lh: em(18px, 16px);
93+
$navbar-padding: 0 rem(16px);
94+
$navbar-title-fz: rem(18px, 16px);
95+
$navbar-title-lh: rem(18px, 16px);
9696
$navbar-title-margin: 0;
9797
$left: if-ltr(left, right);
9898

@@ -111,17 +111,23 @@
111111
z-index: 4;
112112
}
113113

114+
%igx-navbar-part {
115+
display: flex;
116+
align-items: center;
117+
}
118+
114119
%igx-navbar-title {
115120
margin: $navbar-title-margin;
121+
flex-grow: 1;
122+
user-select: text;
116123
}
117124

118125
%igx-navbar-bundle {
119-
display: flex;
120-
align-items: center;
126+
@extend %igx-navbar-part;
121127
user-select: none;
122128

123129
> * + * {
124-
margin-#{$left}: 16px;
130+
margin-#{$left}: rem(16px);
125131
}
126132
}
127133

@@ -137,9 +143,26 @@
137143
}
138144
}
139145

140-
igx-action-icon {
141-
display: flex;
142-
align-items: center;
146+
%igx-navbar-left {
147+
@extend %igx-navbar-bundle;
148+
@extend %igx-navbar-icon-display;
149+
flex-grow: 1;
150+
}
151+
152+
%igx-navbar-right {
153+
@extend %igx-navbar-bundle;
154+
@extend %igx-navbar-icon-display;
155+
}
156+
157+
igx-navbar-action,
158+
[igxNavbarAction] {
159+
@extend %igx-navbar-part;
160+
}
161+
162+
igx-navbar-title,
163+
[igxNavbarTitle] {
164+
@extend %igx-navbar-part;
165+
@extend %igx-navbar-title;
143166
}
144167
}
145168

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
<nav class="igx-navbar" role="navigation" [attr.aria-labelledby]="titleId">
22
<div class="igx-navbar__left">
3-
<igx-icon (click)="_triggerAction()" fontSet="material" *ngIf="isActionButtonVisible">{{actionButtonIcon}}</igx-icon>
4-
<ng-content select="igx-action-icon"></ng-content>
5-
<h1 class="igx-navbar__title" [attr.id]="titleId">{{ title }}</h1>
3+
<igx-icon
4+
(click)="_triggerAction()"
5+
fontSet="material"
6+
*ngIf="isActionButtonVisible">
7+
{{actionButtonIcon}}
8+
</igx-icon>
9+
<ng-content select="igx-navbar-action, [igxNavbarAction]"></ng-content>
10+
<h1
11+
*ngIf="!isTitleContentVisible"
12+
class="igx-navbar__title"
13+
[attr.id]="titleId">
14+
{{ title }}
15+
</h1>
16+
<ng-content select="igx-navbar-title, [igxNavbarTitle]"></ng-content>
617
</div>
718
<div class="igx-navbar__right">
819
<ng-content></ng-content>

0 commit comments

Comments
 (0)