Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Side Navigation styles markup adaptation (#2490)
* feat: Side Navigation styles markup adaptation * Add tests * Fix comments * Update package-lock.json * Add comments, fix rtl on side nav condensed popover * remove focused tests * Add PR comments * remove focus outline overrides * add PR comments * Add transparent button * Remove non-direct imports, add tests for aggregated directives * Remove public accessors, remove unused imports, move properties * fix tests * update styles * Remove unused parameter on host listener * Fix focus on children elements for parent item * dd selection on click, remove arrowright/left handling * remove focused test * Fix lint * fix tests for side nav keyboard support * Fix programatically changed example * fix selected state in object generated examples Co-authored-by: Mike O'Donnell <mikerodonnell89@users.noreply.github.com>
- Loading branch information
1 parent
1853117
commit ecd6c25
Showing
40 changed files
with
1,200 additions
and
378 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
...e-navigation-non-selectable-example/side-navigation-non-selectable-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <fd-side-nav [selectable]="false"> | ||
| <div fd-side-nav-main> | ||
| <ul fd-nested-list [textOnly]="true"> | ||
| <li fd-nested-list-item> | ||
| <a fd-nested-list-link> | ||
| <span fd-nested-list-title>Link 1</span> | ||
| </a> | ||
| </li> | ||
| <li fd-nested-list-item> | ||
| <a fd-nested-list-link [selected]="true"> | ||
| <span fd-nested-list-title>Link 2</span> | ||
| </a> | ||
| </li> | ||
| <li fd-nested-list-item> | ||
| <a fd-nested-list-link> | ||
| <span fd-nested-list-title>Link 3</span> | ||
| </a> | ||
| </li> | ||
| <li fd-nested-list-item> | ||
| <a fd-nested-list-link> | ||
| <span fd-nested-list-title>Link 4</span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div fd-side-nav-utility> | ||
| <ul fd-nested-list [textOnly]="true"> | ||
| <li fd-nested-list-item> | ||
| <a fd-nested-list-link> | ||
| <span fd-nested-list-title>Link 1</span> | ||
| </a> | ||
| </li> | ||
| <li fd-nested-list-item> | ||
| <a fd-nested-list-link> | ||
| <span fd-nested-list-title>Link 2</span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </fd-side-nav> |
8 changes: 8 additions & 0 deletions
8
...ide-navigation-non-selectable-example/side-navigation-non-selectable-example.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'fd-side-navigation-non-selectable-example', | ||
| templateUrl: './side-navigation-non-selectable-example.component.html' | ||
| }) | ||
| export class SideNavigationNonSelectableExampleComponent { | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 6 additions & 6 deletions
12
...mponent-docs/side-navigation/side-navigation-header/side-navigation-header.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
69 changes: 69 additions & 0 deletions
69
libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { NestedListContentDirective } from './nested-list-content.directive'; | ||
| import { Component, ViewChild } from '@angular/core'; | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { NestedListModule } from '../nested-list.module'; | ||
| import { NestedListStateService } from '../nested-list-state.service'; | ||
| import { NestedListExpandIconDirective } from '../nested-list-directives'; | ||
| import { NestedItemService } from '../nested-item/nested-item.service'; | ||
|
|
||
| @Component({ | ||
| template: ` | ||
| <div fd-nested-list-content> | ||
| <a fd-nested-list-link> | ||
| <span fd-nested-list-icon [glyph]="'settings'"></span> | ||
| <span fd-nested-list-title>Link 1</span> | ||
| </a> | ||
| <a fd-nested-list-expand-icon></a> | ||
| </div> | ||
| ` | ||
| }) | ||
| class TestNestedContainerComponent { | ||
| @ViewChild(NestedListContentDirective) | ||
| directiveElement: NestedListContentDirective; | ||
|
|
||
| @ViewChild(NestedListExpandIconDirective) | ||
| iconElement: NestedListExpandIconDirective; | ||
| } | ||
|
|
||
| describe('NestedContentDirective', () => { | ||
| let component: TestNestedContainerComponent; | ||
| let directiveElement: NestedListContentDirective; | ||
| let iconElement: NestedListExpandIconDirective; | ||
| let fixture: ComponentFixture<TestNestedContainerComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [NestedListModule], | ||
| declarations: [TestNestedContainerComponent], | ||
| providers: [NestedListStateService, NestedItemService] | ||
| }).compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(TestNestedContainerComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| directiveElement = component.directiveElement; | ||
| iconElement = component.iconElement; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('Should have good classes', () => { | ||
| const classList = (directiveElement as any)._elementRef.nativeElement.classList; | ||
| expect(classList.contains('has-child')).toBeFalsy(); | ||
| expect(classList.contains('is-selected')).toBeFalsy(); | ||
|
|
||
| directiveElement.selected = true; | ||
|
|
||
| fixture.detectChanges(); | ||
|
|
||
| expect(classList.contains('is-selected')).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('Should propagate expanded state to icon', () => { | ||
| expect(iconElement.expanded).toBeFalsy(); | ||
| directiveElement.changeExpandedState(true); | ||
| fixture.detectChanges(); | ||
| expect(iconElement.expanded).toBeTruthy(); | ||
| }); | ||
| }); |
Oops, something went wrong.