[docs] tags on pages appear in nav (#2740)

* pages can define `tag: message` in metadata to appear next to nav item

* mark some pages as new

* remove intent import

packages/core/src/components/html/html.md

@@ -1,5 +1,6 @@
 ---
 reference: html
+tag: new
 ---
 
 @# HTML elements

packages/core/src/components/overflow-list/overflow-list.md

@@ -1,3 +1,7 @@
+---
+tag: new
+---
+
 @# Overflow list
 
 `OverflowList` takes a generic list of items and renders as many items as can

packages/core/src/components/slider/sliders.md

@@ -1,3 +1,7 @@
+---
+tag: new
+---
+
 @# Slider
 
 A slider is a numeric input for choosing numbers between lower and upper bounds.

packages/core/src/docs/classes.md

@@ -1,3 +1,7 @@
+---
+tag: new
+---
+
 @# Classes
 
 Blueprint packages provide React components in JS files and associated styles in a CSS file. Each package exports a `Classes` constants object in JavaScript that contains keys of the form `NAMED_CONSTANT` for every CSS class used. This separation allows us to change CSS classes between versions without breaking downstream users (although in practice this happens very rarely).

packages/docs-app/src/components/blueprintDocs.tsx

@@ -4,7 +4,7 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { AnchorButton, Classes, setHotkeysDialogProps } from "@blueprintjs/core";
+import { AnchorButton, Classes, setHotkeysDialogProps, Tag } from "@blueprintjs/core";
 import { IDocsCompleteData } from "@blueprintjs/docs-data";
 import { Documentation, IDocumentationProps, INavMenuItemProps, NavMenuItem } from "@blueprintjs/docs-theme";
 import classNames from "classnames";
@@ -82,21 +82,26 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN
 
     private renderNavMenuItem = (props: INavMenuItemProps) => {
         const { route, title } = props.section;
-        if (isPageNode(props.section) && props.section.level === 1) {
-            return (
-                <div className={classNames("docs-nav-package", props.className)} data-route={route}>
-                    <a className={Classes.MENU_ITEM} href={props.href} onClick={props.onClick}>
-                        <NavIcon route={route} />
-                        <span>{title}</span>
-                    </a>
-                    {this.maybeRenderPackageLink(`@blueprintjs/${route}`)}
-                </div>
-            );
-        }
         if (isNavSection(props.section)) {
             // non-interactive header that expands its menu
             return <div className="docs-nav-section docs-nav-expanded">{title}</div>;
         }
+        if (isPageNode(props.section)) {
+            if (props.section.level === 1) {
+                return (
+                    <div className={classNames("docs-nav-package", props.className)} data-route={route}>
+                        <a className={Classes.MENU_ITEM} href={props.href} onClick={props.onClick}>
+                            <NavIcon route={route} />
+                            <span>{title}</span>
+                        </a>
+                        {this.maybeRenderPackageLink(`@blueprintjs/${route}`)}
+                    </div>
+                );
+            } else {
+                // pages can define `tag: message` in metadata to appear next to nav item.
+                return <NavMenuItem {...props}>{this.maybeRenderPageTag(props.section.reference)}</NavMenuItem>;
+            }
+        }
         return <NavMenuItem {...props} />;
     };
 
@@ -112,6 +117,18 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN
         );
     }
 
+    private maybeRenderPageTag(reference: string) {
+        const tag = this.props.docs.pages[reference].metadata.tag;
+        if (tag == null) {
+            return null;
+        }
+        return (
+            <Tag className="docs-nav-tag" minimal={true} intent={tag === "new" ? "success" : "none"}>
+                {tag}
+            </Tag>
+        );
+    }
+
     private renderViewSourceLinkText(entry: ITsDocBase) {
         return `@blueprintjs/${entry.fileName.split("/", 2)[1]}`;
     }

packages/docs-app/src/styles/_nav.scss

@@ -69,6 +69,11 @@ $dark-package-colors: (
   overflow: auto;
 }
 
+.docs-nav-tag {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .docs-nav-package-icon {
   margin-right: $pt-grid-size;
   border-radius: $pt-border-radius * 3;

packages/docs-app/src/whats-new-3.0.md

@@ -1,3 +1,7 @@
+---
+tag: new
+---
+
 @# What's new in 3.0
 
 Blueprint 3.0 supports multiple major versions of Blueprint on the same page through removing global styles and deconflicting selectors by changing the namespace. It also restores support for React 15 in most packages.

packages/docs-theme/src/components/navMenuItem.tsx

@@ -10,9 +10,6 @@ import { IHeadingNode, IPageNode } from "documentalist/dist/client";
 import * as React from "react";
 
 export interface INavMenuItemProps {
-    /** This element never receives `children`. */
-    children?: never;
-
     /** CSS classes to apply to the root element, for proper appearance in the tree. */
     className: string;
 
@@ -36,7 +33,8 @@ export const NavMenuItem: React.SFC<INavMenuItemProps> = props => {
     const { className, isActive, isExpanded, section, ...htmlProps } = props;
     return (
         <a className={classNames(Classes.MENU_ITEM, className)} {...htmlProps}>
-            <span className={Classes.FILL}>{section.title}</span>
+            <span>{section.title}</span>
+            {props.children}
         </a>
     );
 };