From 1022e03464e149d7deab60f167da909b6d5b710e Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Wed, 15 Mar 2017 17:38:57 -0700 Subject: [PATCH] [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 | 10 +- packages/core/examples/contextMenuExample.tsx | 16 +-- packages/core/examples/index.ts | 2 + packages/core/examples/inputGroupExample.tsx | 6 +- packages/docs/src/common/resolveExample.tsx | 11 +- packages/docs/src/components/page.tsx | 2 +- packages/docs/src/styles/_examples.scss | 47 ++++--- packages/docs/src/styles/_sections.scss | 123 +++++------------- 8 files changed, 88 insertions(+), 129 deletions(-) diff --git a/packages/core/examples/common/baseExample.tsx b/packages/core/examples/common/baseExample.tsx index 3e800842f6..03a69cd0fb 100644 --- a/packages/core/examples/common/baseExample.tsx +++ b/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 extends React.Component<{ getTheme: () => string }, S> { +export default class BaseExample extends React.Component { /** Define this prop to add a className to the example container */ protected className: string; public render() { return ( -
+
{this.renderExample()}
{this.actuallyRenderOptions()}
diff --git a/packages/core/examples/contextMenuExample.tsx b/packages/core/examples/contextMenuExample.tsx index 7c8d83bbe7..bc8c0ab4a7 100644 --- a/packages/core/examples/contextMenuExample.tsx +++ b/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 ( -
-
- -
-
- ); - } + public className = "docs-context-menu-example"; public renderContextMenu(e: React.MouseEvent) { return @@ -80,7 +72,11 @@ export class ContextMenuExample extends BaseExample<{}> { ; } + public renderExample() { + return ; + } + protected renderOptions() { - return

Right-click on node or background.

; + return Right-click on node or background.; } } diff --git a/packages/core/examples/index.ts b/packages/core/examples/index.ts index e745725949..5fa2e1cef0 100644 --- a/packages/core/examples/index.ts +++ b/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"; diff --git a/packages/core/examples/inputGroupExample.tsx b/packages/core/examples/inputGroupExample.tsx index 41ef2f08bf..636e3dc37f 100644 --- a/packages/core/examples/inputGroupExample.tsx +++ b/packages/core/examples/inputGroupExample.tsx @@ -81,8 +81,8 @@ export class InputGroupExample extends BaseExample { ); return ( -
-
+
+
{ type={showPassword ? "text" : "password"} />
-
+
string, -}> {}; +export interface IExampleComponentClass extends React.ComponentClass { +} // 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 = (props) => (
-
- {React.createElement(props.component, { getTheme })} -
+ {React.createElement(props.component, { getTheme, id: props.name })}  View source on GitHub @@ -82,6 +80,7 @@ export function resolveExample(exampleName: string, key: React.Key) { return ; } diff --git a/packages/docs/src/components/page.tsx b/packages/docs/src/components/page.tsx index dad2f2f8a1..9dd5146262 100644 --- a/packages/docs/src/components/page.tsx +++ b/packages/docs/src/components/page.tsx @@ -27,5 +27,5 @@ export const Page: React.SFC = ({ tagRenderers, page }) => { return

{ex.message}

; } }); - return
{pageContents}
; + return
{pageContents}
; }; diff --git a/packages/docs/src/styles/_examples.scss b/packages/docs/src/styles/_examples.scss index af2510c7bf..3fadbf35a5 100644 --- a/packages/docs/src/styles/_examples.scss +++ b/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,6 +140,13 @@ $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 { @@ -151,18 +154,20 @@ $options-margin: $pt-grid-size * 3; $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; } diff --git a/packages/docs/src/styles/_sections.scss b/packages/docs/src/styles/_sections.scss index 57223287ca..cc4928e8f1 100644 --- a/packages/docs/src/styles/_sections.scss +++ b/packages/docs/src/styles/_sections.scss @@ -5,23 +5,9 @@ @import "variables"; -// using single quotes to avoid escaping double quotes -// stylelint-disable string-quotes - -// Generate a selector for a section by name. -// Optional $comparator arg affects the selector comparator (default is "=") -@function section-name($name, $comparator: "=") { - @return '[data-section-name#{$comparator}"#{$name}"]'; -} - -// Generate a selector for a section by ID. -@function section-id($id, $comparator: "=") { - @return '[data-section-id#{$comparator}"#{$id}"]'; -} - // Generate a selector for a KSS example by reference @function reference($ref, $comparator: "=") { - @return '.kss-example-wrapper[data-reference#{$comparator}"#{$ref}"]'; + @return "[data-reference#{$comparator}\"#{$ref}\"]"; } // Generate a selector for KSS examples that match or are nested inside this reference. @@ -31,7 +17,10 @@ @return reference($ref), reference($ref + ".", "^="); } -// stylelint-enable string-quotes +// Generate a selector for a React example by name +@function example($NameExample) { + @return "[data-example-id=\"#{$NameExample}\"]"; +} // Adjust the flex-basis of examples to fit X per row. // `.pt-fill` modifiers will always occupy an entire row. @@ -48,7 +37,7 @@ } } -// Section-Specific Styles +// CSS examples #{reference("pt-file-upload")}, #{reference("pt-label")}, @@ -63,6 +52,7 @@ #{reference("pt-button")}, #{reference("pt-button.pt-minimal")}, #{reference("pt-card")}, +#{reference("pt-input-group")}, #{reference("pt-progress-bar")}, #{reference("pt-spinner")}, #{reference("pt-textarea")} { @@ -77,7 +67,9 @@ } } -#{reference-all("pt-button")} { +#{reference-all("pt-button")}, +#{example("AlertExample")}, +#{example("ToastExample")} { // put more space between buttons in all button sections .pt-button + .pt-button:not(.pt-fill) { margin-left: $pt-grid-size; @@ -172,62 +164,22 @@ } } - - -#{section-name("Alerts")} { - .pt-button + .pt-button { - margin-left: $pt-grid-size; - } -} - -#{section-name("Collapse")} { - .docs-react-example > div { +// React examples +#{example("CollapseExample")} { + .docs-react-example { height: $pt-grid-size * 18; } } -#{section-name("Context menus")} { - .kss-example-wrapper { - margin-bottom: $options-margin; - border-radius: $pt-border-radius; - background: $light-gray3; - - .pt-dark & { - background: $dark-gray5; - } - } - - .docs-react-options { - text-align: center; - - > p { - width: 100%; - } - } -} - -#{section-id("components.datetime.daterangepicker")} { +#{example("DateRangePickerExample")} { .docs-react-options-column { flex: 0 0 270px; } } -#{section-id("components.forms.input-group.js")} { - // target the two children div examples - .docs-react-example > div > div { - display: inline-block; - margin-right: $options-margin; - width: $pt-grid-size * 25; - } -} +#{example("HotkeyPiano")} { + height: auto; -#{section-id("components.forms.numeric-input.extended-example")} { - .docs-react-example input { - width: $pt-grid-size * 23; - } -} - -#{section-id("components.hotkeys")} { .piano-example { opacity: 0.5; } @@ -289,41 +241,30 @@ opacity: 0.5; } - .hotkey-tester-example .pt-key-combo { - display: inline-block; - } - - .kss-example { - height: auto; - } -} - -#{section-id("components.table-js")} { - .bp-table-container, - .docs-react-example { - width: 100%; - height: $pt-grid-size * 30; - } } -.docs-overlay-example-transition { - $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; +#{example("HotkeyTester")} .pt-key-combo { + display: inline-block; } -#{section-name("Toasts")} { - .pt-button + .pt-button { - margin-left: $pt-grid-size; - vertical-align: top; +#{example("NumericInputExtendedExample")} { + .docs-react-example input { + width: $pt-grid-size * 23; } } -#{section-name("Popovers")} { +#{example("PopoverExample")} { + // wider lines for this example so labels wrap less .pt-label { width: $pt-grid-size * 21; } } + +// give all Table examples a fixed height +[data-page-id="table-js"] { + .bp-table-container, + .docs-react-example { + width: 100%; + height: $pt-grid-size * 30; + } +}