[DM] React examples styles (#839)

* add data-page-id to Page to give all Table examples a fixed height
* BaseExample requires id prop, adds data-example-id attribute
IBaseExample interface re-used in docs example renderer.
BaseExample is the .kss-example, reducing element count by 1!
* move .docs-overlay-example-transition styles all to _examples
* sass example($name) function generates selector for react examples
* InputGroupExample uses flex box utility classes
* ContextMenuExample simpler render makes for simpler styles
* remove now unused section-name() and section-id() functions

packages/core/examples/common/baseExample.tsx

@@ -5,21 +5,27 @@
  * and https://github.com/palantir/blueprint/blob/master/PATENTS
  */
 
+import * as classNames from "classnames";
 import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 
+export interface IBaseExampleProps {
+    getTheme: () => string;
+    id: string;
+}
+
 /**
  * Starter class for all React example components.
  * Examples and options are rendered into separate containers.
  */
 @PureRender
-export default class BaseExample<S> extends React.Component<{ getTheme: () => string }, S> {
+export default class BaseExample<S> extends React.Component<IBaseExampleProps, S> {
     /** Define this prop to add a className to the example container */
     protected className: string;
 
     public render() {
         return (
-            <div className={this.className}>
+            <div className={classNames("kss-example", this.className)} data-example-id={this.props.id}>
                 <div className="docs-react-example">{this.renderExample()}</div>
                 <div className="docs-react-options">{this.actuallyRenderOptions()}</div>
             </div>

packages/core/examples/contextMenuExample.tsx

@@ -52,15 +52,7 @@ class GraphNode extends React.Component<{}, { isContextMenuOpen: boolean }> {
  */
 @ContextMenuTarget
 export class ContextMenuExample extends BaseExample<{}> {
-    public renderExample() {
-        return (
-            <div className="docs-context-menu-example">
-                <div className="context-menu-application">
-                    <GraphNode />
-                </div>
-            </div>
-        );
-    }
+    public className = "docs-context-menu-example";
 
     public renderContextMenu(e: React.MouseEvent<HTMLElement>) {
         return <Menu>
@@ -80,7 +72,11 @@ export class ContextMenuExample extends BaseExample<{}> {
         </Menu>;
     }
 
+    public renderExample() {
+        return <GraphNode />;
+    }
+
     protected renderOptions() {
-        return <p>Right-click on node or background.</p>;
+        return <span>Right-click on node or background.</span>;
     }
 }

packages/core/examples/index.ts

@@ -5,6 +5,8 @@
  * and https://github.com/palantir/blueprint/blob/master/PATENTS
  */
 
+export * from "./common/baseExample";
+
 export * from "./alertExample";
 export * from "./buttonsExample";
 export * from "./collapseExample";

packages/core/examples/inputGroupExample.tsx

@@ -81,8 +81,8 @@ export class InputGroupExample extends BaseExample<IInputGroupExampleState> {
         );
 
         return (
-            <div>
-                <div>
+            <div className="docs-input-group-example docs-flex-row">
+                <div className="docs-flex-column">
                     <InputGroup
                         className={largeClassName}
                         disabled={disabled}
@@ -100,7 +100,7 @@ export class InputGroupExample extends BaseExample<IInputGroupExampleState> {
                         type={showPassword ? "text" : "password"}
                     />
                 </div>
-                <div>
+                <div className="docs-flex-column">
                     <InputGroup
                         className={largeClassName}
                         disabled={disabled}

packages/docs/src/common/resolveExample.tsx

@@ -14,9 +14,8 @@ import * as TableExamples from "@blueprintjs/table/examples";
 import { getTheme } from "./theme";
 
 // tslint:disable-next-line no-empty-interface
-export interface IExampleComponentClass extends React.ComponentClass<{
-    getTheme: () => string,
-}> {};
+export interface IExampleComponentClass extends React.ComponentClass<CoreExamples.IBaseExampleProps> {
+}
 
 // construct a map of package name to all examples defined in that package.
 // packageName must match directory name as it is used to generate sourceUrl.
@@ -50,14 +49,13 @@ const SRC_HREF_BASE = "https://github.com/palantir/blueprint/blob/master/package
 
 export interface IExampleProps {
     component: IExampleComponentClass;
+    name: string;
     sourceUrl: string;
 }
 
 const Example: React.SFC<IExampleProps> = (props) => (
     <div className="kss-example-wrapper">
-        <div className="kss-example">
-            {React.createElement(props.component, { getTheme })}
-        </div>
+        {React.createElement(props.component, { getTheme, id: props.name })}
         <a className="view-example-source" href={props.sourceUrl} target="_blank">
             <span className="pt-icon-standard pt-icon-code">&nbsp;</span>View source on GitHub
         </a>
@@ -82,6 +80,7 @@ export function resolveExample(exampleName: string, key: React.Key) {
     return <Example
         component={component}
         key={key}
+        name={exampleName}
         sourceUrl={[SRC_HREF_BASE, packageName, "examples", fileName].join("/")}
     />;
 }

packages/docs/src/components/page.tsx

@@ -27,5 +27,5 @@ export const Page: React.SFC<IPageProps> = ({ tagRenderers, page }) => {
             return <h3><code>{ex.message}</code></h3>;
         }
     });
-    return <div className="docs-page">{pageContents}</div>;
+    return <div className="docs-page" data-page-id={page.reference}>{pageContents}</div>;
 };

packages/docs/src/styles/_examples.scss

@@ -64,10 +64,6 @@ $options-margin: $pt-grid-size * 3;
   .pt-slider:not(:last-child) {
     margin-bottom: $options-margin;
   }
-
-  :not(.pt-control-group) > .pt-input-group + .pt-input-group {
-    margin-top: $pt-grid-size * 2;
-  }
 }
 
 .docs-card-example {
@@ -144,25 +140,34 @@ $options-margin: $pt-grid-size * 3;
     $pt-transition-duration * 5,
     $before: "&"
   );
+
+  $overlay-example-width: $pt-grid-size * 40;
+
+  top: $overlay-example-width / 2;
+  left: calc(50% - #{$overlay-example-width / 2});
+  z-index: $pt-z-index-overlay + 1;
+  width: $overlay-example-width;
 }
 
 .docs-context-menu-example {
   $node-size: $pt-grid-size * 8;
   $icon-size: $pt-icon-size-standard * 2;
   $node-border-width: 4px;
 
-  height: $pt-grid-size * 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
-  .context-menu-application {
-    @include position(absolute, 0);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  border-radius: $pt-border-radius;
+  background: $light-gray3;
+  padding: $options-margin;
+
+  .pt-dark & {
+    background: $dark-gray5;
   }
 
   .context-menu-node {
-    margin-bottom: $options-margin;
     border: $node-border-width solid $white;
     border-radius: 50%;
     box-shadow: $pt-elevation-shadow-2;
@@ -186,6 +191,20 @@ $options-margin: $pt-grid-size * 3;
   }
 }
 
+.docs-input-group-example {
+  .docs-flex-column {
+    margin-right: $options-margin;
+  }
+
+  .pt-input-group {
+    width: $pt-grid-size * 30;
+
+    &:first-child {
+      margin-bottom: $options-margin;
+    }
+  }
+}
+
 .docs-progress-example {
   .docs-react-example {
     flex-direction: column;
@@ -213,10 +232,6 @@ $options-margin: $pt-grid-size * 3;
   padding: $pt-grid-size;
 }
 
-.slider-min-width {
-  min-width: 300px;
-}
-
 .docs-wiggle {
   animation: docs-wiggle-rotate $pt-transition-duration $pt-transition-ease infinite;
 }