bugfix(layouts): *breaking change* Rename title attribute on layouts (#…

…127)

* *breaking change* to rename title attribute on td-layouts to instead be displayTitle.  The attribute title was causing a tooltip on hover anywhere on the page to show the value passed in.  Renaming this removes the clashing with the native title attribute

* updated to use sidenavTitle and toolbarTitle instead of displayTitle and updated title and subTitle on td-layout-card-over to be cardTitle and cardSubTitle.  Updated all the documentation and ReadMe to reflect these new changes

* update(layout): allow title depreciated input to avoid breaking change

* fix(layout): specific css for sidenavs

- to allow usage of inner sidenavs in content

* update(card-over): allow title and cardWidth

* Allowing backwards compatibility of the title input. Using this input will output a deprecation warning to the console.

* renamed cardSubTitle -> cardSubtitle

* added td-layout preffix to manage-list and nav-list classes

src/app/app.component.html

@@ -1,4 +1,4 @@
-<td-layout #layout title="Covalent" logo="app/assets/icons/teradata.svg" displayName="">
+<td-layout #layout sidenavTitle="Covalent" logo="app/assets/icons/teradata.svg" displayName="">
   <md-nav-list menu-items>
     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
   </md-nav-list>

src/app/app.component.spec.ts

@@ -44,7 +44,7 @@ describe('Component: App', () => {
     let testComponent: DocsAppComponent = fixture.debugElement.componentInstance;
     let element: HTMLElement = fixture.nativeElement;
 
-    expect(element.querySelector('[title="Covalent"]')).toBeTruthy();
+    expect(element.querySelector('[sidenavTitle="Covalent"]')).toBeTruthy();
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       expect(element.querySelectorAll('md-nav-list[menu-items] a[md-list-item]').length)

src/app/components/components/components.component.html

@@ -1,4 +1,4 @@
-<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
+<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item 

src/app/components/docs/docs.component.html

@@ -1,4 +1,4 @@
-<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
+<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item 

src/app/components/layouts/card-over/card-over.component.html

@@ -1,4 +1,4 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
+<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <td-layout-card-over>
     <md-card-title>Card Over Layout</md-card-title>
     <md-card-subtitle>A card overlaying a toolbar (this page is using card over)</md-card-subtitle>
@@ -21,7 +21,7 @@ <h3 md-line><code>#layout</code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>sidenavTitle?: string</code></h3>
                     <p md-line>The title of your sidenav</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -63,7 +63,7 @@ <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>toolbarTitle?: string</code></h3>
                     <p md-line>The title of your toolbar</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -84,12 +84,12 @@ <h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>cardTitle?: string</code></h3>
                     <p md-line>The card title</p>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>subtitle?: string</code></h3>
+                    <h3 md-line><code>cardSubtitle?: string</code></h3>
                     <p md-line>The card subtitle</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -107,15 +107,15 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
           <h3 class="md-title">HTML</h3>
           <td-highlight lang="html">
             <![CDATA[
-            <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
+            <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
               <md-nav-list menu-items>
                 <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                   <md-icon>{ {item.icon} }</md-icon>
                   { {item.title} }
                 </a>
               </md-nav-list>
-              <td-layout-nav title="Toolbar Title" logo="path/to/toolbar-logo.svg">
-                <td-layout-card-over title="Card Title" subtitle="Card subtitle">
+              <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                <td-layout-card-over cardTitle="Card Title" cardSubtitle="Card subtitle">
                   <router-outlet></router-outlet>
                 </td-layout-card-over>
               </td-layout-nav>

src/app/components/layouts/manage-list/manage-list.component.html

@@ -1,4 +1,4 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
+<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <td-layout-manage-list #list>
     <md-nav-list list-items>
       <a md-list-item (click)="list.toggle()">
@@ -47,7 +47,7 @@ <h3 md-line><code>#layout</code></h3>
                     </md-list-item>
                     <md-divider></md-divider>
                     <md-list-item>
-                      <h3 md-line><code>title?: string</code></h3>
+                      <h3 md-line><code>sidenavTitle?: string</code></h3>
                       <p md-line>The title of your sidenav</p>
                     </md-list-item>
                     <md-divider></md-divider>
@@ -89,7 +89,7 @@ <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
                     </md-list-item>
                     <md-divider></md-divider>
                     <md-list-item>
-                      <h3 md-line><code>title?: string</code></h3>
+                      <h3 md-line><code>toolbarTitle?: string</code></h3>
                       <p md-line>The title of your toolbar</p>
                     </md-list-item>
                     <md-divider></md-divider>
@@ -154,14 +154,14 @@ <h3 md-line><code class="text-sm"><![CDATA[<button md-button class="md-icon-butt
             <h3 class="md-title">HTML</h3>
             <td-highlight lang="html">
                 <![CDATA[
-                <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
+                <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
                   <md-nav-list menu-items>
                     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                       <md-icon>{ {item.icon} }</md-icon>
                       { {item.title} }
                     </a>
                   </md-nav-list>
-                  <td-layout-nav title="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                  <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
                     <td-layout-manage-list #list>
                       <md-nav-list list-items>
                         <template let-item let-last="last" ngFor [ngForOf]="items">

src/app/components/layouts/nav-list/nav-list.component.html

@@ -1,4 +1,4 @@
-<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
+<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item (click)="list.toggle()">
@@ -35,7 +35,7 @@ <h3 md-line><code>#layout</code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>sidenavTitle?: string</code></h3>
                     <p md-line>The title of your sidenav</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -82,7 +82,7 @@ <h3 md-line><code>#list</code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>toolbarTitle?: string</code></h3>
                     <p md-line>The title of your toolbar</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -110,14 +110,14 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
           <h3 class="md-title">HTML</h3>
           <td-highlight lang="html">
               <![CDATA[
-              <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
+              <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
                 <md-nav-list menu-items>
                   <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                     <md-icon>{ {item.icon} }</md-icon>
                     { {item.title} }
                   </a>
                 </md-nav-list>
-                <td-layout-nav-list #list title="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                <td-layout-nav-list #list toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
                   <md-nav-list list-items>
                     <template let-item let-last="last" ngFor [ngForOf]="items">
                         <a md-list-item [routerLink]="[item.route]">

src/app/components/layouts/nav-view/nav-view.component.html

@@ -1,4 +1,4 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
+<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <div class="md-padding">
     <md-card>
       <md-card-title>Nav View</md-card-title>
@@ -22,7 +22,7 @@ <h3 md-line><code>#layout</code></h3>
                     </md-list-item>
                     <md-divider></md-divider>
                     <md-list-item>
-                      <h3 md-line><code>title?: string</code></h3>
+                      <h3 md-line><code>sidenavTitle?: string</code></h3>
                       <p md-line>The title of your sidenav</p>
                     </md-list-item>
                     <md-divider></md-divider>
@@ -64,7 +64,7 @@ <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
                     </md-list-item>
                     <md-divider></md-divider>
                     <md-list-item>
-                      <h3 md-line><code>title?: string</code></h3>
+                      <h3 md-line><code>toolbarTitle?: string</code></h3>
                       <p md-line>The title of your toolbar</p>
                     </md-list-item>
                     <md-divider></md-divider>
@@ -87,14 +87,14 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
             <h3 class="md-title">HTML</h3>
             <td-highlight lang="html">
                 <![CDATA[
-                <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
+                <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
                   <md-nav-list menu-items>
                     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                       <md-icon>{ {item.icon} }</md-icon>
                       { {item.title} }
                     </a>
                   </md-nav-list>
-                  <td-layout-nav title="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                  <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
                     <router-outlet></router-outlet>
                   </td-layout-nav>
                 </td-layout>

src/app/components/layouts/overview/overview.component.html

@@ -1,5 +1,5 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
-  <td-layout-card-over title="Layout Options" subtitle="We offer 4 Material Design layouts for you">
+<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+  <td-layout-card-over cardTitle="Layout Options" cardSubtitle="We offer 4 Material Design layouts for you">
     <md-card-content hide-xs>
       <p>For your entire app or for different sections of your app, select one of these Material Design layout options:</p>
       <div layout="row" layout-padding>

src/app/components/style-guide/logo/logo.component.html

@@ -28,7 +28,7 @@
   <md-card-title>Toolbar Placement</md-card-title>
   <md-divider></md-divider>
   <md-card-content>
-    <td-layout-nav logo="app/assets/icons/teradata.svg" title="App Title">
+    <td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="App Title">
     </td-layout-nav>
   </md-card-content>
 </md-card>

src/app/components/style-guide/style-guide.component.html

@@ -1,4 +1,4 @@
-<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
+<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <h3 md-subheader>Style Guide</h3>
     <template let-item let-last="last" ngFor [ngForOf]="items">

src/platform/core/README.md

@@ -35,7 +35,7 @@ Properties:
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `title` | `string` | Title to be displayed.
+| `sidenavTitle` | `string` | SideNav Title to be displayed.
 | `icon` | `string` | Uses material icon names.
 | `displayName` | `string` | Username to be displayed.
 | `logout` | `function()` | Function executed when logout it pressed.
@@ -56,8 +56,8 @@ Properties:
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `title` | `string` | Title in card to be displayed.
-| `subtitle` | `string` | Subtitle in card to be displayed.
+| `cardTitle` | `string` | Title in card to be displayed.
+| `cardSubtitle` | `string` | Subtitle in card to be displayed.
 
 #### td-layout-manage-items
 
@@ -73,7 +73,7 @@ Example Nav Layout / Main Layout combo:
   <menu-items>
     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
   </menu-items>
-  <td-layout-nav title="Toolbar Title">
+  <td-layout-nav toolbarTitle="Toolbar Title">
     <div toolbar-content layout="row" layout-align="center center" flex>
       <span>Title</span>
       <span flex></span>
@@ -127,12 +127,12 @@ Example for Manage List Layout / Nav Layout combo:
 Example for Card Over Layout / Nav Layout / Main Layout combo:
 
 ```html
-<td-layout #layout title="App Title" displayName="username">
+<td-layout #layout sidenavTitle="App Title" displayName="username">
   <menu-items>
     ...
   </menu-items>
-  <td-layout-nav title="Toolbar Title">
-    <td-layout-card-over title="Card Title" subtitle="Card subtitle">
+  <td-layout-nav toolbarTitle="Toolbar Title">
+    <td-layout-card-over cardTitle="Card Title" cardSubtitle="Card subtitle">
       <md-card-content>
         ...
       </md-card-content>

src/platform/core/layout/layout-card-over/layout-card-over.component.html

@@ -1,11 +1,11 @@
 <md-toolbar color="primary">
 </md-toolbar>
 <div layout-gt-xs="row" layout-align-gt-xs="center start" layout-fill class="margin">
-  <div flex-gt-xs="65">
+  <div [attr.flex-gt-xs]="cardWidth">
     <md-card>
-      <md-card-title *ngIf="title">{{title}}</md-card-title>
-      <md-card-subtitle *ngIf="subtitle">{{subtitle}}</md-card-subtitle>
-      <md-divider *ngIf="title || subtitle"></md-divider>
+      <md-card-title *ngIf="cardTitle">{{cardTitle}}</md-card-title>
+      <md-card-subtitle *ngIf="cardSubtitle">{{cardSubtitle}}</md-card-subtitle>
+      <md-divider *ngIf="cardTitle || cardSubtitle"></md-divider>
       <ng-content></ng-content>
     </md-card>
     <ng-content select="[after-card]"></ng-content>

src/platform/core/layout/layout-card-over/layout-card-over.component.ts

@@ -11,11 +11,53 @@ export class TdLayoutCardOverComponent {
   /**
    * title in card
    */
-  @Input('title') title: string;
+  @Input('cardTitle') cardTitle: string;
 
   /**
    * subtitle in card
    */
-  @Input('subtitle') subtitle: string;
+  @Input('cardSubtitle') cardSubtitle: string;
 
+  /**
+   * card flex width %
+   */
+  @Input('cardWidth') cardWidth: number = 70;
+
+  /**
+   * title in card
+   * @deprecated since 0.9, use cardTitle instead
+   */
+  @Input()
+  set title(title: string) {
+    /* tslint:disable-next-line */
+    console.warn("title is deprecated.  Please use cardTitle instead");
+    this.cardTitle = title;
+  }
+
+  /**
+   * title in card
+   * @deprecated since 0.9, use cardTitle instead
+   */
+  get title(): string {
+    return this.cardTitle;
+  }
+
+  /**
+   * subtitle in card
+   * @deprecated since 0.9, use cardSubtitle instead
+   */
+  @Input()
+  set subtitle(subtitle: string) {
+    /* tslint:disable-next-line */
+    console.warn("subtitle is deprecated.  Please use cardSubtitle instead");
+    this.cardSubtitle = subtitle;
+  }
+
+  /**
+   * subtitle in card
+   * @deprecated since 0.9, use cardSubtitle instead
+   */
+  get subtitle(): string {
+    return this.cardSubtitle;
+  }
 }

src/platform/core/layout/layout-manage-list/layout-manage-list.component.html

@@ -1,6 +1,6 @@
 <div class="md-content" layout="column" layout-fill>
-  <md-sidenav-layout class="md-content" flex layout="row" layout-fill>
-    <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1">
+  <md-sidenav-layout class="td-layout-manage-list md-content" flex layout="row" layout-fill>
+    <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left md-whiteframe-z1">
       <div flex class="md-content list">
         <ng-content select="[list-items]"></ng-content>
       </div>

src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss

@@ -12,20 +12,20 @@
   md-nav-list a[md-list-item] .md-list-item {
     font-size: 14px;
   }
-  md-sidenav-layout {
+  md-sidenav-layout.td-layout-manage-list {
     & > .md-sidenav-content {
       margin-left: 0 !important;
     }
   }
   @media (max-width: 599px) {
-    md-sidenav-layout {
+    md-sidenav-layout.td-layout-manage-list {
       & > md-sidenav {
         width: 100%;
       }
     }
   }
   @media (min-width: 600px) {
-    md-sidenav-layout {
+    md-sidenav-layout.td-layout-manage-list {
       height: 100%;
       display: flex;
       & > md-sidenav {

src/platform/core/layout/layout-nav-list/layout-nav-list.component.html

@@ -1,12 +1,12 @@
 <div layout="column" layout-fill>
   <div class="md-content" flex layout-fill>
-    <md-sidenav-layout layout="row" layout-fill>
-      <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1" flex-gt-xs="none">
+    <md-sidenav-layout class="td-layout-nav-list" layout="row" layout-fill>
+      <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left md-whiteframe-z1" flex-gt-xs="none">
         <md-toolbar color="primary" class="md-whiteframe-z1">
           <button md-button (click)="menuClick()" md-icon-button><md-icon class="md-24">menu</md-icon></button>
           <md-icon *ngIf="icon">{{icon}}</md-icon>
           <md-icon *ngIf="logo" class="md-icon-logo" svgSrc="{{logo}}"></md-icon>
-          <span>{{title}}</span>
+          <span>{{toolbarTitle}}</span>
           <ng-content select="[list-toolbar-content]"></ng-content>
         </md-toolbar>
         <div flex class="list md-content">