Skip to content

Commit 2c850bc

Browse files
DiyanDimitrovgedinakovaastaevMPopovSisIvanova
authored
Tab Components Refactoring (#8912)
* feat(tabs): add initial implementation for refactored tabs * feat(tabs): add carousel animations for tab panels * feat(tabs): add tabs selection events * feat(tabs): rename old tabs folder * feat(tabs): rename new tabs folder * feat(tabs): swap the old and new tabs * feat(tabs): replace label and icon props with directives * feat(tabs): rename tabs base classes * feat(tabs): rename tabs base file * feat(tabs): add headerResizing prop for tabs component * feat(tabs): scroll tab header into view when selected * feat(tabs): add disableAnimation prop * feat(tabs): add selected indicator * feat(tabs): handle add/remove tabs * feat(Tabs): Adding Keyboard Navigation support. * chore(*): Fixing lint step * chore(*): rearrange code to fix lint * fix(Tabs): Updated KeyboardNav support * feat(tabs): ARIA support #8912 * fix(Tabs): KeyboardNav updated with space & enter * feat(tabs): Updating aria support * feat(Tabs): Moved Keyboard support to header comp * feat(tabs): remove nativeElement from tabs * feat(tabs): remove nativeElement from tabs * feat(tabs): keyboard navigation adjustments * feat(tabs): fix bottom nav demos * feat(tabs): aria support adjustments * fix(Tests): Porting tests from old tabs * feat(tabs): fix panel z-index * feat(tabs): add prefix/suffix support * feat(tabs): fix routing guard issue * fix(Tabs): Fixed exisiting tests * fix(Tabs): Use old tabs in other tests. * fix(Tests): Fixed component cleanup error * fix(Tests): Remove f from describe * fix(tests): Excluding old tabs' tests * fix(Tests): Fixed tests with old tabs * fix(tests): Removed fdescribe * fix(Tests): BottomNav tests updated * fix(tests): Adding IgxIconModule * test(Tabs): Adding events tests * feat(tabs): add tab alignment * fix(tabs): fix currentSlide for routing and disabled animations * fix(tabs) styling, initial commit * remove ripple from the tab header container * fix(tabs): realign indicator on alignment change * test(BottomNav): BottomNav + tab alignment tests * test(Tabs): Updated routing guards * test(Tabs): Adding a couple more tests * feat(bottom-nav): provide styling after component refactoring * fix some styling issues * fix(bottom-nav): selected item has no visual styling * change position to relative for the active panel * chore(*): fix strict templates check * change line ending to CRLF * chore(*): fix strict templates check * chore(*): fix eslint error * chore(*): fix line endings * chore(*): remove commented code * test(Tabs): Fixed three tests * feat(tabs): Adding migrations * chore(*): update changelog * chore(*): add API comments * Fix build styles. * chore(*): fix endEdit error * chore(*): delete old tabs and bottom nav * chore(readme): add readme for bottom-nav #8912 * chore(*): add components' api docs * chore(*): fix bottom nav api docs * chore(*): rename panel to content * chore(readme): add readme for tabs and update bottom-nav readme * refactor(themes): delete dead tabs code * fix(tabs): Update tabs migrations * test(Tabs): Fixed all tests. * test(Tabs): Adding one more test. * fix(migrations): Change isSelected to selected * feat(migration): Adding comment for each update * chore(readme): update readmes for bottom-nav and tabs * fix(Tabs): Changed nativeElement.click(). * fix(Tabs): Adding a pending test. * fix(migration): Add igx-tab selector change * fix(migration): Change tabsType to type * fix(tabs): address review comments * fix(tabs): rename slide to item * chore(*): Change migrations update comment/note * fix(tabs): extract common logic in helper method * fix(Tabs): Returned nativeElement.click() Co-authored-by: gedinakova <[email protected]> Co-authored-by: Anastas Staev <[email protected]> Co-authored-by: MPopov <[email protected]> Co-authored-by: Silvia Ivanova <[email protected]> Co-authored-by: Simeon Simeonoff <[email protected]> Co-authored-by: Ivan Zhostov <[email protected]> Co-authored-by: Konstantin Dinev <[email protected]> Co-authored-by: Anastas Staev <[email protected]>
1 parent 9b99250 commit 2c850bc

File tree

78 files changed

+5356
-5151
lines changed

Some content is hidden

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

78 files changed

+5356
-5151
lines changed

‎CHANGELOG.md

+8
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
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
99
- **Breaking Change** - The `locale` and `pipeArgs` parameters are removed from the `operate` method exposed by the `IgxNumberSummaryOperand`, `IgxDateSummaryOperand`, `IgxCurrencySummaryOperand` and `IgxPercentSummaryOperand`. They are now set in the `igx-grid-summary-cell` template. To change the locale and format setting of the `igx-grid-summary-cell` the user can use the new `summaryFormatter` property of the `IgxColumnComponent`.
10+
- `IgxTabs`, `IgxBottomNav`
11+
- **Breaking Change** - `IgxTabs` and `IgxBottomNav` components were completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. Please make sure to update via `ng update` in order to migrate the existing `igx-tabs` and `igx-bottom-nav` definitions to the new ones.
1012

1113
### New Features
1214
- `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -40,6 +42,12 @@ All notable changes for each version of this project will be documented in this
4042
- **Behavioral Change** - `Column Autosize` feature now does not handle templated headers where the first level children are sized based on parent like default `div` and etc. Autosizing for such headers will not result in change.
4143
- **Behavioral Change** - Calling `autosize` through the `IgxColumnComponent` API now takes into consideration the `minWidth` and `maxWidth` of the column.
4244
- A new `IgxColumnComponent` input property is exposed called `autosizeHeader`, which if false, allows the autosizing to ignore the header cell and autosize only based on content cells.
45+
- `IgxTabs`
46+
- The `tabAlignment` property of the `IgxTabs` component replaces the `type` property and enables you to set the tab alignment to `start`, `center`, `end` and `justify`.
47+
- The `igx-tab-header` supports `igx-prefix` and `igx-suffix` directives in its `ng-content`.
48+
- `IgxBottomNav`
49+
- The `IgxBottomNav` component exposes `disableAnimations` property which determines whether the contents should animate when switching the selected item. The property is set to `true` by default which means that the animations are disabled.
50+
4351
### Themes:
4452
- Breaking Changes:
4553
- `IgxButton` theme has been simplified. The number of theme params (`igx-button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). See the migration guide to update existing button themes. Updates performed with `ng update` will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.

‎projects/igniteui-angular/migrations/update-12_0_0/changes/inputs.json

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{
2+
"@scheme": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "type",
6+
"remove": true,
7+
"owner": {
8+
"selector": "igx-tabs",
9+
"type": "component"
10+
}
11+
},
12+
{
13+
"name": "label",
14+
"remove": true,
15+
"owner": {
16+
"selector": "igx-tab-item",
17+
"type": "component"
18+
}
19+
},
20+
{
21+
"name": "icon",
22+
"remove": true,
23+
"owner": {
24+
"selector": "igx-tab-item",
25+
"type": "component"
26+
}
27+
},
28+
{
29+
"name": "routerLink",
30+
"remove": true,
31+
"owner": {
32+
"selector": "igx-tab-item",
33+
"type": "component"
34+
}
35+
},
36+
{
37+
"name": "label",
38+
"remove": true,
39+
"owner": {
40+
"selector": "igx-bottom-nav-item",
41+
"type": "component"
42+
}
43+
},
44+
{
45+
"name": "icon",
46+
"remove": true,
47+
"owner": {
48+
"selector": "igx-bottom-nav-item",
49+
"type": "component"
50+
}
51+
},
52+
{
53+
"name": "routerLink",
54+
"remove": true,
55+
"owner": {
56+
"selector": "igx-bottom-nav-item",
57+
"type": "component"
58+
}
59+
},
60+
{
61+
"name": "isSelected",
62+
"replaceWith": "selected",
63+
"owner": {
64+
"selector": "igx-bottom-nav-item",
65+
"type": "component"
66+
}
67+
},
68+
{
69+
"name": "isSelected",
70+
"replaceWith": "selected",
71+
"owner": {
72+
"selector": "igx-tab-item",
73+
"type": "component"
74+
}
75+
}
76+
]
77+
}

‎projects/igniteui-angular/migrations/update-12_0_0/changes/selectors.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"$schema": "../../common/schema/selector.schema.json",
3+
"changes": [
4+
{
5+
"type": "component",
6+
"selector": "igx-tab-panel",
7+
"replaceWith": "igx-bottom-nav-item"
8+
},
9+
{
10+
"type": "component",
11+
"selector": "igx-tab",
12+
"replaceWith": "igx-bottom-nav-item"
13+
},
14+
{
15+
"type": "component",
16+
"selector": "igx-tabs-group",
17+
"replaceWith": "igx-tab-item"
18+
}
19+
]
20+
}

‎projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts

+172-8
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import * as path from 'path';
33
import { EmptyTree } from '@angular-devkit/schematics';
44
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
55

6-
describe('Update to 12.0.0', () => {
6+
const version = '12.0.0';
7+
8+
describe(`Update to ${version}`, () => {
79
let appTree: UnitTestTree;
8-
const runner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
10+
const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
911
const configJson = {
1012
defaultProject: 'testProj',
1113
projects: {
@@ -21,6 +23,8 @@ describe('Update to 12.0.0', () => {
2123
};
2224

2325
const migrationName = 'migration-20';
26+
// eslint-disable-next-line max-len
27+
const noteText = `<!--NOTE: This component has been updated by Infragistics migration: v${version}\nPlease check your template whether all bindings/event handlers are correct.-->`;
2428

2529
beforeEach(() => {
2630
appTree = new UnitTestTree(new EmptyTree());
@@ -30,7 +34,7 @@ describe('Update to 12.0.0', () => {
3034
it('should update avatar theme args', async () => {
3135
appTree.create(
3236
`/testSrc/appPrefix/component/test.component.scss`,
33-
`
37+
`
3438
$theme: igx-avatar-theme(
3539
$initials-background: white,
3640
$icon-background: green,
@@ -43,14 +47,14 @@ $theme: igx-avatar-theme(
4347
`
4448
);
4549

46-
const tree = await runner
50+
const tree = await schematicRunner
4751
.runSchematicAsync(migrationName, {}, appTree)
4852
.toPromise();
4953

5054
expect(
5155
tree.readContent('/testSrc/appPrefix/component/test.component.scss')
5256
).toEqual(
53-
`
57+
`
5458
$theme: igx-avatar-theme(
5559
$background: white,
5660
$color: black,
@@ -63,25 +67,185 @@ $theme: igx-avatar-theme(
6367
it('should update onColumnChange', async () => {
6468
appTree.create(
6569
`/testSrc/appPrefix/component/test.component.html`,
66-
`
70+
`
6771
<igx-grid>
6872
<igx-column (onColumnChange)="columnChanged()"></igx-column>
6973
</igx-grid>
7074
`
7175
);
7276

73-
const tree = await runner
77+
const tree = await schematicRunner
7478
.runSchematicAsync(migrationName, {}, appTree)
7579
.toPromise();
7680

7781
expect(
7882
tree.readContent('/testSrc/appPrefix/component/test.component.html')
7983
).toEqual(
80-
`
84+
`
8185
<igx-grid>
8286
<igx-column (columnChange)="columnChanged()"></igx-column>
8387
</igx-grid>
8488
`
8589
);
8690
});
91+
92+
// IgxTabs
93+
it('Should update igx-tab-group to igx-tab-item', async () => {
94+
appTree.create(
95+
'/testSrc/appPrefix/component/custom.component.html', `
96+
<igx-tabs type="contentFit" [selectedIndex]="0">
97+
<igx-tabs-group label="Tab1" icon="home">
98+
<div>Some Content</div>
99+
</igx-tabs-group>
100+
</igx-tabs>`);
101+
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
102+
.toPromise();
103+
104+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
105+
.toEqual(`
106+
${noteText}
107+
<igx-tabs [selectedIndex]="0" tabAlignment="start">
108+
<igx-tab-item>
109+
<igx-tab-header>
110+
<igx-icon igxTabHeaderIcon>home</igx-icon>
111+
<span igxTabHeaderLabel>Tab1</span>
112+
</igx-tab-header>
113+
<igx-tab-content>
114+
<div>Some Content</div>
115+
</igx-tab-content>
116+
</igx-tab-item>
117+
</igx-tabs>`);
118+
});
119+
120+
it('Should insert routerLink to igx-tab-header', async () => {
121+
appTree.create(
122+
'/testSrc/appPrefix/component/custom.component.html', `
123+
<igx-tabs type="fixed">
124+
<igx-tab-item label="Tab1" icon="folder" routerLink="view1" [isSelected]="true">
125+
</igx-tab-item>
126+
</igx-tabs>`);
127+
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
128+
.toPromise();
129+
130+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
131+
.toEqual(`
132+
${noteText}
133+
<igx-tabs tabAlignment="justify">
134+
<igx-tab-item [selected]="true">
135+
<igx-tab-header routerLink="view1">
136+
<igx-icon igxTabHeaderIcon>folder</igx-icon>
137+
<span igxTabHeaderLabel>Tab1</span>
138+
</igx-tab-header>
139+
</igx-tab-item>
140+
</igx-tabs>`);
141+
});
142+
143+
it('Should insert ng-template content into igx-tab-header', async () => {
144+
appTree.create(
145+
'/testSrc/appPrefix/component/custom.component.html', `
146+
<igx-tabs type="fixed">
147+
<igx-tabs-group>
148+
<ng-template igxTab>
149+
<span>Tab1</span>
150+
</ng-template>
151+
<div>Tab Content</div>
152+
</igx-tabs-group>
153+
</igx-tabs>`);
154+
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
155+
.toPromise();
156+
157+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
158+
.toEqual(`
159+
${noteText}
160+
<igx-tabs tabAlignment="justify">
161+
<igx-tab-item>
162+
<igx-tab-header>
163+
<span>Tab1</span>
164+
</igx-tab-header>
165+
<igx-tab-content>
166+
<div>Tab Content</div>
167+
</igx-tab-content>
168+
</igx-tab-item>
169+
</igx-tabs>`);
170+
});
171+
172+
// IgxBottomNav
173+
it('Should update igx-tab-panel to igx-bottom-nav-item', async () => {
174+
appTree.create(
175+
'/testSrc/appPrefix/component/custom.component.html', `
176+
<igx-bottom-nav>
177+
<igx-tab-panel label="Tab1" icon="folder" [isSelected]="true">
178+
Some Content
179+
</igx-tab-panel>
180+
</igx-bottom-nav>`);
181+
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
182+
.toPromise();
183+
184+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
185+
.toEqual(`
186+
${noteText}
187+
<igx-bottom-nav>
188+
<igx-bottom-nav-item [selected]="true">
189+
<igx-bottom-nav-header>
190+
<igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
191+
<span igxBottomNavHeaderLabel>Tab1</span>
192+
</igx-bottom-nav-header>
193+
<igx-bottom-nav-content>
194+
Some Content
195+
</igx-bottom-nav-content>
196+
</igx-bottom-nav-item>
197+
</igx-bottom-nav>`);
198+
});
199+
200+
it('Should insert routerLink to igx-bottom-nav-header', async () => {
201+
appTree.create(
202+
'/testSrc/appPrefix/component/custom.component.html', `
203+
<igx-bottom-nav>
204+
<igx-tab label="Tab1" icon="folder" routerLink="view1">
205+
</igx-tab>
206+
</igx-bottom-nav>`);
207+
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
208+
.toPromise();
209+
210+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
211+
.toEqual(`
212+
${noteText}
213+
<igx-bottom-nav>
214+
<igx-bottom-nav-item>
215+
<igx-bottom-nav-header routerLink="view1">
216+
<igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
217+
<span igxBottomNavHeaderLabel>Tab1</span>
218+
</igx-bottom-nav-header>
219+
</igx-bottom-nav-item>
220+
</igx-bottom-nav>`);
221+
});
222+
223+
it('Should insert ng-template content into igx-bottom-nav-header', async () => {
224+
appTree.create(
225+
'/testSrc/appPrefix/component/custom.component.html', `
226+
<igx-bottom-nav>
227+
<igx-tab-panel>
228+
<ng-template igxTab>
229+
<div>Tab1</div>
230+
</ng-template>
231+
<div>Tab Content</div>
232+
</igx-tab-panel>
233+
</igx-bottom-nav>`);
234+
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
235+
.toPromise();
236+
237+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
238+
.toEqual(`
239+
${noteText}
240+
<igx-bottom-nav>
241+
<igx-bottom-nav-item>
242+
<igx-bottom-nav-header>
243+
<div>Tab1</div>
244+
</igx-bottom-nav-header>
245+
<igx-bottom-nav-content>
246+
<div>Tab Content</div>
247+
</igx-bottom-nav-content>
248+
</igx-bottom-nav-item>
249+
</igx-bottom-nav>`);
250+
});
87251
});

0 commit comments

Comments
 (0)