fix(docs-api): tables overflow screen width on mobile

- fix docs-api layouts to work down to 360px width
  - fixes Observers, Accessibility, Drag and Drop, Platform, and Overlay layouts
- fix DeprecatedconnectedTo to Deprecated connectedTo display issue
- update footer copyright
- fix exception trying to unsubscribe to undefined routeParamSubscription
- change how sidenav is closed on mobile after selecting a nav item

Fixes #550

Author: Splaktar

src/app/pages/component-category-list/component-category-list.ts

@@ -38,7 +38,9 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.routeParamSubscription.unsubscribe();
+    if (this.routeParamSubscription) {
+      this.routeParamSubscription.unsubscribe();
+    }
   }
 }
 

src/app/pages/component-sidenav/_component-sidenav-theme.scss

@@ -31,7 +31,7 @@
       border-top: solid 1px rgba(mat-color($foreground, secondary-text), .1)
     }
 
-    button {
+    a {
       color: mat-color($foreground, secondary-text);
 
       &.docs-component-viewer-sidenav-item-selected,

src/app/pages/component-sidenav/component-nav.html

@@ -10,12 +10,12 @@
       </button>
       <mat-nav-list dense [@bodyExpansion]="panel.expanded ? 'expanded' : 'collapsed'"
                     id="panel-{{category.id}}" [attr.aria-label]="category.name">
-        <button mat-list-item *ngFor="let component of category.items"
-           [ngClass]="{'docs-component-viewer-sidenav-item-selected': currentItemId === component.id}"
-           [attr.aria-current]="currentItemId === component.id ? 'page': 'false'"
-           (click)="selectNavItem(component.id)">
+        <a mat-list-item *ngFor="let component of category.items"
+           [routerLink]="'/' + (params | async)?.section+ '/' + component.id"
+           routerLinkActive="docs-component-viewer-sidenav-item-selected"
+           [attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
           {{component.name}}
-        </button>
+        </a>
       </mat-nav-list>
       <hr *ngIf="!last" />
     </div>

src/app/pages/component-sidenav/component-sidenav.service.ts

@@ -11,12 +11,12 @@ import {
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {MatIconModule} from '@angular/material/icon';
 import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
-import {ActivatedRoute, Params, Router, RouterModule, Routes} from '@angular/router';
+import {ActivatedRoute, NavigationEnd, Params, Router, RouterModule, Routes} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {ComponentHeaderModule} from '../component-page-header/component-page-header';
 import {FooterModule} from '../../shared/footer/footer';
 import {combineLatest, Observable, Subject} from 'rxjs';
-import {map, startWith, switchMap, takeUntil} from 'rxjs/operators';
+import {filter, map, startWith, switchMap, takeUntil} from 'rxjs/operators';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {BreakpointObserver} from '@angular/cdk/layout';
@@ -29,18 +29,25 @@ import {
   ComponentApi,
   ComponentExamples,
   ComponentOverview,
-  ComponentViewer, ComponentViewerModule
+  ComponentViewer,
+  ComponentViewerModule
 } from '../component-viewer/component-viewer';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {FormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import {StackBlitzButtonModule} from '../../shared/stack-blitz';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {ExampleModule} from '@angular/components-examples';
-import {ComponentSidenavService} from './component-sidenav.service';
 import {MatDrawerToggleResult} from '@angular/material/sidenav/drawer';
 import {MatListModule} from '@angular/material/list';
 
+// These constants are used by the ComponentSidenav for orchestrating the MatSidenav in a responsive
+// way. This includes hiding the sidenav, defaulting it to open, changing the mode from over to
+// side, determining the size of the top gap, and whether the sidenav is fixed in the viewport.
+// The values were determined through the combination of Material Design breakpoints and careful
+// testing of the application across a range of common device widths (360px+).
+// These breakpoint values need to stay in sync with the related Sass variables in
+// src/styles/_constants.scss.
 const EXTRA_SMALL_WIDTH_BREAKPOINT = 720;
 const SMALL_WIDTH_BREAKPOINT = 959;
 
@@ -58,7 +65,7 @@ export class ComponentSidenav implements OnInit {
 
   constructor(public docItems: DocumentationItems,
               private _route: ActivatedRoute,
-              private componentSidenavService: ComponentSidenavService,
+              private _router: Router,
               zone: NgZone,
               breakpoints: BreakpointObserver) {
     this.isExtraScreenSmall =
@@ -72,11 +79,20 @@ export class ComponentSidenav implements OnInit {
     // Combine params from all of the path into a single object.
     this.params = combineLatest(
         this._route.pathFromRoot.map(route => route.params), Object.assign);
+
+    this._router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      map((event) => this.isScreenSmall)
+    ).subscribe((shouldCloseSideNav) => {
+        if (shouldCloseSideNav && this.sidenav) {
+          this.sidenav.close();
+        }
+      }
+    );
   }
 
   toggleSidenav(sidenav: MatSidenav): Promise<MatDrawerToggleResult> {
-    this.componentSidenavService.sidenav = sidenav;
-    return this.componentSidenavService.sidenav.toggle();
+    return sidenav.toggle();
   }
 }
 
@@ -97,8 +113,7 @@ export class ComponentNav implements OnInit, OnDestroy {
   currentItemId: string;
   private _onDestroy = new Subject<void>();
 
-  constructor(public docItems: DocumentationItems, private _router: Router,
-              private componentSidenavService: ComponentSidenavService) {}
+  constructor(public docItems: DocumentationItems, private _router: Router) {}
 
   ngOnInit() {
     this._router.events.pipe(
@@ -147,28 +162,6 @@ export class ComponentNav implements OnInit, OnDestroy {
   getExpanded(category: string): boolean {
     return this.expansions[category] === undefined ? true : this.expansions[category];
   }
-
-  /**
-   * If the component sidenav can be resolved, then close it, and wait for it to be closed,
-   * before navigating to avoid jank.
-   * @param path component.id sub-path to use for navigation
-   */
-  selectNavItem(path: string): void {
-    if (this.componentSidenavService.sidenav) {
-      this.componentSidenavService.sidenav.close().then(() => this.openNavItem(path));
-    } else {
-      this.openNavItem(path);
-    }
-  }
-
-  /**
-   * @param path component.id sub-path to use for navigation
-   */
-  openNavItem(path: string) {
-    this.params.subscribe((params: Params) => {
-      this._router.navigateByUrl(`/${params.section}/${path}`);
-    });
-  }
 }
 
 const routes: Routes = [ {

src/app/pages/component-sidenav/component-sidenav.ts

@@ -3,19 +3,17 @@
     API for {{docItem?.id}}
   </span>
 
-  <span>
-    <doc-viewer
-      documentUrl="/docs-content/api-docs/{{docItem?.packageName}}-{{docItem?.id}}.html"
-      class="docs-component-view-text-content docs-component-api"
-      (contentRendered)="updateTableOfContents(docItem!.name, $event)">
-    </doc-viewer>
+  <doc-viewer
+    documentUrl="/docs-content/api-docs/{{docItem?.packageName}}-{{docItem?.id}}.html"
+    class="docs-component-view-text-content docs-component-api"
+    (contentRendered)="updateTableOfContents(docItem!.name, $event)">
+  </doc-viewer>
 
-    <doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs"
-      documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
-      class="docs-component-view-text-content docs-component-api"
-      (contentRendered)="updateTableOfContents(additionalApiDoc.name, $event)">
-    </doc-viewer>
-  </span>
+  <doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs"
+    documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
+    class="docs-component-view-text-content docs-component-api"
+    (contentRendered)="updateTableOfContents(additionalApiDoc.name, $event)">
+  </doc-viewer>
 
   <table-of-contents #toc
       *ngIf="showToc | async"

src/app/pages/component-viewer/component-api.html

@@ -11,6 +11,13 @@
   }
 }
 
+.docs-api-type-alias-name,
+.docs-api-class-name {
+  @media (max-width: 399px) {
+    word-break: break-word;
+  }
+}
+
 .docs-api-h3 {
   font-weight: 300;
   font-size: 24px;

src/app/pages/component-viewer/component-api.scss

@@ -18,7 +18,7 @@
 
     <div class="docs-footer-copyright">
       <div>
-        <span>Powered by Google ©2010-2019.</span>
+        <span>Powered by Google ©2010-2020.</span>
         <a href="https://github.com/angular/components/blob/master/LICENSE">Code licensed under an MIT-style License.</a>
         <span>Documentation licensed under CC BY 4.0.</span>
       </div>

src/app/shared/footer/footer.html

@@ -1,5 +1,9 @@
 // Styles for API docs generated via dgeni from material2 source JsDocs.
 
+.docs-api {
+  max-width: 100%;
+}
+
 // Top header, e.g., "API documentation for dialog".
 .docs-api-h2 {
   font-size: 30px;
@@ -62,6 +66,10 @@
   font-size: 12px;
 }
 
+.docs-api-deprecated-marker {
+  margin-right: 8px;
+}
+
 .docs-api-module-import,
 .docs-api-class-selector-name,
 .docs-api-class-export-name {

src/styles/_api.scss

@@ -1,6 +1,13 @@
 @import '../../node_modules/@angular/material/theming';
 
+// The values were determined through the combination of Material Design breakpoints and careful
+// testing of the application across a range of common device widths (360px+).
+// These breakpoint values need to stay in sync with the related constants in
+// src/app/pages/component-sidenav/component-sidenav.ts.
+// The extra small breakpoint is used for styling the guides and certain aspects of the tables.
 $extra-small-breakpoint-width: 720px;
+// The small breakpoint is used for the component category and component list pages, the component
+// pages, the component sidenav, and certain aspects of the tables.
 $small-breakpoint-width: 959px;
 
 /* For desktop, the content should be aligned with the page title. */

src/styles/_constants.scss

@@ -22,6 +22,16 @@
 .docs-markdown-td {
   font-weight: 400;
   padding: 8px 16px;
+
+  @media (max-width: $extra-small-breakpoint-width) {
+    &.docs-api-properties-name-cell,
+    &.docs-api-method-parameter-cell,
+    &.docs-api-method-returns-type-cell,
+    &.docs-api-method-description-cell {
+      min-width: 80px;
+      word-break: break-word;
+    }
+  }
 }