Prefer attributes over CSS classes

angular-workspace/projects/example-client-app/src/app/app.module.ts

@@ -10,14 +10,12 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N
     NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioButtonModule } from '@ni/nimble-angular';
 import { AppComponent } from './app.component';
 import { CustomAppComponent } from './customapp/customapp.component';
-import { LoginComponent } from './login/login.component';
 import { HeaderComponent } from './header/header.component';
 import { NavDrawerComponent } from './nav-drawer/nav-drawer.component';
 
 @NgModule({
     declarations: [
         AppComponent,
-        LoginComponent,
         HeaderComponent,
         NavDrawerComponent,
         CustomAppComponent
@@ -57,8 +55,7 @@ import { NavDrawerComponent } from './nav-drawer/nav-drawer.component';
         NimbleRadioGroupModule,
         NimbleRadioButtonModule,
         RouterModule.forRoot([
-            { path: '', redirectTo: '/login', pathMatch: 'full' },
-            { path: 'login', component: LoginComponent },
+            { path: '', redirectTo: '/customapp', pathMatch: 'full' },
             { path: 'customapp', component: CustomAppComponent }
         ],
         { useHash: true })

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html

@@ -193,13 +193,13 @@ <h2>This is a dialog</h2>
                 <nimble-button id="anchor1">Default</nimble-button>
                 <nimble-tooltip anchor="anchor1">Tooltip label</nimble-tooltip>
                 <nimble-button id="anchor2">Fail</nimble-button>
-                <nimble-tooltip anchor="anchor2" class="fail">Tooltip label</nimble-tooltip>
+                <nimble-tooltip anchor="anchor2" severity="error">Tooltip label</nimble-tooltip>
                 <nimble-button id="anchor3">Information</nimble-button>
-                <nimble-tooltip anchor="anchor3" class="information">Tooltip label</nimble-tooltip>
+                <nimble-tooltip anchor="anchor3" severity="information">Tooltip label</nimble-tooltip>
                 <nimble-button id="anchor4">Fail Icon </nimble-button>
-                <nimble-tooltip anchor="anchor4" class="fail icon-visible">Tooltip label</nimble-tooltip>
+                <nimble-tooltip anchor="anchor4" severity="error" icon-visible>Tooltip label</nimble-tooltip>
                 <nimble-button id="anchor5">Information Icon</nimble-button>
-                <nimble-tooltip anchor="anchor5" class="information icon-visible">Tooltip label</nimble-tooltip>
+                <nimble-tooltip anchor="anchor5" severity="information" icon-visible>Tooltip label</nimble-tooltip>
             </div>
             <div class="sub-container">
                 <div class="container-label">Tree View</div>

angular-workspace/projects/example-client-app/src/app/header/header.component.html

@@ -13,7 +13,6 @@ <h1>User settings</h1>
         <nimble-button appearance="outline" (click)="onMenuButtonClick()">Menu</nimble-button>
         <nimble-menu class="menu" [hidden]="hideMenu">
             <nimble-menu-item (change)="onUserSettingsSelected()">User Settings</nimble-menu-item>
-            <nimble-menu-item (change)="onLogoutSelected()">Logout</nimble-menu-item>
         </nimble-menu>
     </div>
 </div>

angular-workspace/projects/example-client-app/src/app/header/header.component.ts

@@ -36,11 +36,6 @@ export class HeaderComponent {
         this.userSettingsDrawer.hide();
     }
 
-    public onLogoutSelected(): void {
-        this.toggleMenuHidden();
-        void this.router.navigate(['/login']);
-    }
-
     private toggleMenuHidden(): void {
         this.hideMenu = !this.hideMenu;
     }

angular-workspace/projects/ni/nimble-angular/build/generate-icons/source/index.js

@@ -52,6 +52,7 @@ for (const key of Object.keys(icons)) {
     const directiveFileContents = `${generatedFilePrefix}
 import { Directive } from '@angular/core';
 import type { ${className} } from '@ni/nimble-components/dist/esm/icons/${directoryName}';
+import { NimbleIconBaseDirective } from '../../icon-base/nimble-icon-base.directive';
 
 export type { ${className} };
 
@@ -61,7 +62,7 @@ export type { ${className} };
 @Directive({
     selector: '${elementName}'
 })
-export class ${directiveName} {
+export class ${directiveName} extends NimbleIconBaseDirective {
 }
 `;
     const directiveFileName = `${elementName}.directive`;

angular-workspace/projects/ni/nimble-angular/src/directives/breadcrumb/nimble-breadcrumb.directive.ts

@@ -1,7 +1,9 @@
-import { Directive } from '@angular/core';
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 import type { Breadcrumb } from '@ni/nimble-components/dist/esm/breadcrumb';
+import { BreadcrumbAppearance } from '@ni/nimble-components/dist/esm/breadcrumb/types';
 
 export type { Breadcrumb };
+export { BreadcrumbAppearance };
 
 /**
  * Directive to provide Angular integration for the breadcrumb.
@@ -10,4 +12,13 @@ export type { Breadcrumb };
     selector: 'nimble-breadcrumb'
 })
 export class NimbleBreadcrumbDirective {
+    public get appearance(): BreadcrumbAppearance {
+        return this.elementRef.nativeElement.appearance;
+    }
+
+    @Input() public set appearance(value: BreadcrumbAppearance) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'appearance', value);
+    }
+
+    public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<Breadcrumb>) {}
 }

angular-workspace/projects/ni/nimble-angular/src/directives/breadcrumb/tests/nimble-breadcrumb.directive.spec.ts

@@ -0,0 +1,166 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Breadcrumb, BreadcrumbAppearance, NimbleBreadcrumbDirective } from '../nimble-breadcrumb.directive';
+import { NimbleBreadcrumbModule } from '../nimble-breadcrumb.module';
+
+describe('Nimble breadcrumb', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [NimbleBreadcrumbModule]
+        });
+    });
+
+    it('custom element is defined', () => {
+        expect(customElements.get('nimble-breadcrumb')).not.toBeUndefined();
+    });
+
+    describe('with no values in template', () => {
+        @Component({
+            template: `
+                <nimble-breadcrumb #target></nimble-breadcrumb>
+            `
+        })
+        class TestHostComponent {
+            @ViewChild('target', { read: NimbleBreadcrumbDirective }) public directive: NimbleBreadcrumbDirective;
+            @ViewChild('target', { read: ElementRef }) public elementRef: ElementRef<Breadcrumb>;
+        }
+
+        let fixture: ComponentFixture<TestHostComponent>;
+        let directive: NimbleBreadcrumbDirective;
+        let nativeElement: Breadcrumb;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                declarations: [TestHostComponent],
+                imports: [NimbleBreadcrumbModule]
+            });
+            fixture = TestBed.createComponent(TestHostComponent);
+            fixture.detectChanges();
+            directive = fixture.componentInstance.directive;
+            nativeElement = fixture.componentInstance.elementRef.nativeElement;
+        });
+
+        it('has expected defaults for appearance', () => {
+            expect(directive.appearance).toBe(BreadcrumbAppearance.default);
+            expect(nativeElement.appearance).toBe(BreadcrumbAppearance.default);
+        });
+    });
+
+    describe('with template string values', () => {
+        @Component({
+            template: `
+                <nimble-breadcrumb #target
+                    appearance="prominent"
+                >
+                </nimble-breadcrumb>`
+        })
+        class TestHostComponent {
+            @ViewChild('target', { read: NimbleBreadcrumbDirective }) public directive: NimbleBreadcrumbDirective;
+            @ViewChild('target', { read: ElementRef }) public elementRef: ElementRef<Breadcrumb>;
+        }
+
+        let fixture: ComponentFixture<TestHostComponent>;
+        let directive: NimbleBreadcrumbDirective;
+        let nativeElement: Breadcrumb;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                declarations: [TestHostComponent],
+                imports: [NimbleBreadcrumbModule]
+            });
+            fixture = TestBed.createComponent(TestHostComponent);
+            fixture.detectChanges();
+            directive = fixture.componentInstance.directive;
+            nativeElement = fixture.componentInstance.elementRef.nativeElement;
+        });
+
+        it('will use template string values for appearance', () => {
+            expect(directive.appearance).toBe(BreadcrumbAppearance.prominent);
+            expect(nativeElement.appearance).toBe(BreadcrumbAppearance.prominent);
+        });
+    });
+
+    describe('with property bound values', () => {
+        @Component({
+            template: `
+                <nimble-breadcrumb #target
+                    [appearance]="appearance"
+                >
+                </nimble-breadcrumb>
+            `
+        })
+        class TestHostComponent {
+            @ViewChild('target', { read: NimbleBreadcrumbDirective }) public directive: NimbleBreadcrumbDirective;
+            @ViewChild('target', { read: ElementRef }) public elementRef: ElementRef<Breadcrumb>;
+            public appearance: BreadcrumbAppearance;
+        }
+
+        let fixture: ComponentFixture<TestHostComponent>;
+        let directive: NimbleBreadcrumbDirective;
+        let nativeElement: Breadcrumb;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                declarations: [TestHostComponent],
+                imports: [NimbleBreadcrumbModule]
+            });
+            fixture = TestBed.createComponent(TestHostComponent);
+            fixture.detectChanges();
+            directive = fixture.componentInstance.directive;
+            nativeElement = fixture.componentInstance.elementRef.nativeElement;
+        });
+
+        it('can be configured with property binding for appearance', () => {
+            expect(directive.appearance).toBe(BreadcrumbAppearance.default);
+            expect(nativeElement.appearance).toBe(BreadcrumbAppearance.default);
+
+            fixture.componentInstance.appearance = BreadcrumbAppearance.prominent;
+            fixture.detectChanges();
+
+            expect(directive.appearance).toBe(BreadcrumbAppearance.prominent);
+            expect(nativeElement.appearance).toBe(BreadcrumbAppearance.prominent);
+        });
+    });
+
+    describe('with attribute bound values', () => {
+        @Component({
+            template: `
+                <nimble-breadcrumb #target
+                    [attr.appearance]="appearance"
+                >
+                </nimble-breadcrumb>
+            `
+        })
+        class TestHostComponent {
+            @ViewChild('target', { read: NimbleBreadcrumbDirective }) public directive: NimbleBreadcrumbDirective;
+            @ViewChild('target', { read: ElementRef }) public elementRef: ElementRef<Breadcrumb>;
+            public appearance: BreadcrumbAppearance;
+        }
+
+        let fixture: ComponentFixture<TestHostComponent>;
+        let directive: NimbleBreadcrumbDirective;
+        let nativeElement: Breadcrumb;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                declarations: [TestHostComponent],
+                imports: [NimbleBreadcrumbModule]
+            });
+            fixture = TestBed.createComponent(TestHostComponent);
+            fixture.detectChanges();
+            directive = fixture.componentInstance.directive;
+            nativeElement = fixture.componentInstance.elementRef.nativeElement;
+        });
+
+        it('can be configured with attribute binding for appearance', () => {
+            expect(directive.appearance).toBe(BreadcrumbAppearance.default);
+            expect(nativeElement.appearance).toBe(BreadcrumbAppearance.default);
+
+            fixture.componentInstance.appearance = BreadcrumbAppearance.prominent;
+            fixture.detectChanges();
+
+            expect(directive.appearance).toBe(BreadcrumbAppearance.prominent);
+            expect(nativeElement.appearance).toBe(BreadcrumbAppearance.prominent);
+        });
+    });
+});

angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts

@@ -1,9 +1,11 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 import type { Button } from '@ni/nimble-components/dist/esm/button';
-import type { ButtonAppearance, ButtonType } from '@ni/nimble-components/dist/esm/button/types';
+import type { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types';
+import { ButtonType, ButtonAppearanceVariant } from '@ni/nimble-components/dist/esm/button/types';
 import { BooleanValueOrAttribute, toBooleanProperty } from '../utilities/template-value-helpers';
 
-export type { Button, ButtonType };
+export type { Button };
+export { ButtonType, ButtonAppearanceVariant };
 
 /**
  * Directive to provide Angular integration for the button.
@@ -20,6 +22,16 @@ export class NimbleButtonDirective {
         this.renderer.setProperty(this.elementRef.nativeElement, 'appearance', value);
     }
 
+    public get appearanceVariant(): ButtonAppearanceVariant {
+        return this.elementRef.nativeElement.appearanceVariant;
+    }
+
+    // Renaming because property should have camel casing, but attribute should not
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('appearance-variant') public set appearanceVariant(value: ButtonAppearanceVariant) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'appearanceVariant', value);
+    }
+
     public get disabled(): boolean {
         return this.elementRef.nativeElement.disabled;
     }
@@ -40,7 +52,7 @@ export class NimbleButtonDirective {
         return this.elementRef.nativeElement.contentHidden;
     }
 
-    // contentHidden property intentionally maps to the content-hidden attribute
+    // Renaming because property should have camel casing, but attribute should not
     // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('content-hidden') public set contentHidden(value: BooleanValueOrAttribute) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'contentHidden', toBooleanProperty(value));