From c6eb025ab4fadff6ae27f1d51bde49987aba055a Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Fri, 11 May 2018 14:06:33 -0700 Subject: [PATCH 01/75] basic example frame --- packages/docs-theme/src/styles/_examples.scss | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss index d50a91361f..d8cc178354 100644 --- a/packages/docs-theme/src/styles/_examples.scss +++ b/packages/docs-theme/src/styles/_examples.scss @@ -3,14 +3,20 @@ // Base Styles for All Examples +.docs-example { + border-radius: $pt-border-radius; + box-shadow: $pt-elevation-shadow-1; + overflow: hidden; +} + .docs-react-example, -.docs-react-example-row, .docs-react-options, { @include pt-flex-container(row, $pt-grid-size * 5); + padding: $pt-grid-size * 2; } .docs-react-options { - margin-top: $options-margin; + border-top: 1px solid $pt-divider-black; text-align: left; // hide when empty (div is always rendered) @@ -19,8 +25,8 @@ } } -.docs-react-options-column .#{$ns}-control:not(.#{$ns}-inline) { - margin-right: 0; +.docs-react-options-column > :last-child { + margin-bottom: 0; } .docs-inline-example { From c7758eab0b1986b97d65ee114f55f31ff45d7ac3 Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Fri, 11 May 2018 16:46:52 -0700 Subject: [PATCH 02/75] massive redesign of example frame t support JS and CSS examples --- packages/docs-theme/src/styles/_content.scss | 73 -------------- packages/docs-theme/src/styles/_examples.scss | 98 +++++++++++++++++-- packages/docs-theme/src/styles/_props.scss | 8 +- packages/docs-theme/src/tags/reactExample.tsx | 2 +- 4 files changed, 93 insertions(+), 88 deletions(-) diff --git a/packages/docs-theme/src/styles/_content.scss b/packages/docs-theme/src/styles/_content.scss index 1bbe20dbbd..ff7aecf020 100644 --- a/packages/docs-theme/src/styles/_content.scss +++ b/packages/docs-theme/src/styles/_content.scss @@ -53,79 +53,6 @@ $dark-example-background-color: $dark-content-background-color; } } -.view-example-source { - display: inline-block; - margin-bottom: $pt-grid-size * 2; - - &:hover { - text-decoration: none; - } - - .#{$ns}-icon { - margin-right: $pt-grid-size / 2; - } -} - -// full-bleed wrapper for example -.docs-example-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - - position: relative; - margin-top: $content-padding * 2; - - &:empty { - display: none; - } - - .#{$ns}-dark & { - border-color: $pt-dark-divider-black; - background-color: $dark-example-background-color; - } -} - -// example itself inside the wrapper -.docs-example { - display: inline-block; - flex-basis: 100%; - - margin-bottom: $example-padding; - width: 100%; - max-width: 100%; - vertical-align: top; - - > code { - display: inline-block; - margin-bottom: $pt-grid-size; - - &:empty { - display: none; - } - } - - &[data-modifier="default"]:last-child > code { - display: none; - } -} - -[data-modifier] > code { - white-space: nowrap; -} - -// color the modifier label depending on modifier type -[data-modifier="default"] > code { - color: $gray3; -} - -[data-modifier^=":"] > code { - color: $attribute-modifier-color; -} - -[data-modifier^="."] > code { - color: $class-modifier-color; -} - .docs-markup .editor { margin: 0; } diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss index d8cc178354..e3b62e1caf 100644 --- a/packages/docs-theme/src/styles/_examples.scss +++ b/packages/docs-theme/src/styles/_examples.scss @@ -3,20 +3,67 @@ // Base Styles for All Examples -.docs-example { + + +// full-bleed wrapper for example +.docs-example-frame { + display: flex; + position: relative; + margin-top: $content-padding * 2; + border-radius: $pt-border-radius; box-shadow: $pt-elevation-shadow-1; + width: 100%; overflow: hidden; + + &:empty { + display: none; + } + + .#{$ns}-dark & { + border-color: $pt-dark-divider-black; + background-color: $dark-example-background-color; + } } -.docs-react-example, -.docs-react-options, { - @include pt-flex-container(row, $pt-grid-size * 5); - padding: $pt-grid-size * 2; +.docs-example-wrapper { + @include pt-flex-container(column, $fill: ".docs-example"); + flex: 1 1 auto; + // explicit 0 width ensures options column takes up its space first, + // then the rest is filled by this element + width: 0; + + .editor { + flex: 0 0 auto; + margin: 0; + border-top: 1px solid $pt-divider-black; + box-shadow: none; + } } -.docs-react-options { - border-top: 1px solid $pt-divider-black; +.docs-example { + display: flex; + flex: 1 1 auto; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + background: $white; + padding-top: $pt-grid-size * 2; + padding-left: $pt-grid-size * 2; + // other sides set below to space out children: + + > * { + margin-right: $pt-grid-size * 2; + margin-bottom: $pt-grid-size * 2; + } +} + +.docs-example-options { + @include pt-flex-container(column, $pt-grid-size); + flex: 0 0 auto; + border-left: 1px solid $pt-divider-black; + max-width: $pt-grid-size * 30; + padding: $pt-grid-size * 2; text-align: left; // hide when empty (div is always rendered) @@ -25,7 +72,7 @@ } } -.docs-react-options-column > :last-child { +.docs-example-options-column > :last-child { margin-bottom: 0; } @@ -38,3 +85,38 @@ margin-right: 0; } } + +.view-example-source { + display: inline-block; + margin-bottom: $pt-grid-size * 2; + + &:hover { + text-decoration: none; + } + + .#{$ns}-icon { + margin-right: $pt-grid-size / 2; + } +} + + +[data-modifier] > code { + white-space: nowrap; +} + +// color the modifier label depending on modifier type +[data-modifier="default"] > code { + color: $gray3; +} + +[data-modifier="default"]:last-child > code { + display: none; +} + +[data-modifier^=":"] > code { + color: $attribute-modifier-color; +} + +[data-modifier^="."] > code { + color: $class-modifier-color; +} diff --git a/packages/docs-theme/src/styles/_props.scss b/packages/docs-theme/src/styles/_props.scss index 3882926407..77012613a3 100644 --- a/packages/docs-theme/src/styles/_props.scss +++ b/packages/docs-theme/src/styles/_props.scss @@ -25,7 +25,7 @@ } .docs-prop-description { - margin-top: $pt-grid-size; + margin-top: $pt-grid-size / 2; p:last-child { margin: 0; @@ -33,14 +33,10 @@ } .docs-prop-tags { - $tag-top-margin: ($pt-grid-size / 10) * 3; - - margin: ($pt-grid-size - $tag-top-margin) 0 0; - &:empty { display: none; } .#{$ns}-tag { - margin-top: $tag-top-margin; + margin-top: $pt-grid-size / 2; margin-right: $pt-grid-size; } } diff --git a/packages/docs-theme/src/tags/reactExample.tsx b/packages/docs-theme/src/tags/reactExample.tsx index d06ab7a75d..5cea0dc5fd 100644 --- a/packages/docs-theme/src/tags/reactExample.tsx +++ b/packages/docs-theme/src/tags/reactExample.tsx @@ -25,7 +25,7 @@ export interface IExampleProps { } export const ReactExample: React.SFC = props => ( -
+
{props.example.render({ id: props.name })} Date: Fri, 11 May 2018 16:47:30 -0700 Subject: [PATCH 03/75] new CssExample compoent lets you toggle modifiers via switches! no more repetition --- packages/docs-theme/src/tags/css.tsx | 75 ++++++++++++++++------------ 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/packages/docs-theme/src/tags/css.tsx b/packages/docs-theme/src/tags/css.tsx index 8fcb3047c3..57e4a4a667 100644 --- a/packages/docs-theme/src/tags/css.tsx +++ b/packages/docs-theme/src/tags/css.tsx @@ -4,17 +4,21 @@ * Licensed under the terms of the LICENSE file distributed with this project. */ -import { Classes, Code } from "@blueprintjs/core"; +import { Classes, Code, Switch } from "@blueprintjs/core"; import { IKssPluginData, ITag } from "documentalist/dist/client"; import * as React from "react"; import { DocumentationContextTypes, IDocumentationContext } from "../common/context"; -import { ModifierTable } from "../components/modifierTable"; + +export interface ICssExampleState { + modifiers: Set; +} export class CssExample extends React.PureComponent { public static contextTypes = DocumentationContextTypes; public static displayName = "Docs2.CssExample"; public context: IDocumentationContext; + public state: ICssExampleState = { modifiers: new Set() }; public render() { const { value } = this.props; @@ -23,47 +27,52 @@ export class CssExample extends React.PureComponent { return null; } const { markup, markupHtml, modifiers, reference } = css[value]; - const examples = modifiers.map(modifier => ( - - - {modifier.name} - - - + const options = modifiers.map(modifier => ( + + {modifier.name} +
+ )); return ( -
- {examples.length > 0 && {examples}} +
- {this.renderMarkupExample(markup)} - {modifiers.map(mod => this.renderMarkupExample(markup, mod.name))} +
+
-
+
{options}
); } - private renderMarkupExample(markup: string, modifierName = "default") { - return ( -
- {modifierName} - {this.renderMarkupForModifier(markup, modifierName)} -
- ); - } - - private renderMarkupForModifier(markup: string, modifierName: string) { - const html = markup.replace(MODIFIER_PLACEHOLDER_REGEXP, (_, prefix: string) => { - if (prefix && modifierName.charAt(0) === prefix) { - return modifierName.slice(1); - } else if (!prefix) { - return modifierName; + private getModifierToggleHandler(modifier: string) { + return () => { + const modifiers = new Set(this.state.modifiers); + if (modifiers.has(modifier)) { + modifiers.delete(modifier); } else { - return ""; + modifiers.add(modifier); } - }); - return
; + this.setState({ modifiers }); + }; + } + + private renderExample(markup: string) { + const classes = this.getModifiers("."); + const attrs = this.getModifiers(":"); + return { __html: markup.replace(MODIFIER_ATTR_REGEXP, attrs).replace(MODIFIER_CLASS_REGEXP, classes) }; + } + + private getModifiers(prefix: "." | ":") { + return Array.from(this.state.modifiers.keys()) + .filter(mod => mod.charAt(0) === prefix) + .map(mod => mod.slice(1)) + .join(" "); } } -const MODIFIER_PLACEHOLDER_REGEXP = /\{\{([.:]?)modifier\}\}/g; +const MODIFIER_ATTR_REGEXP = /\{\{:modifier}}/g; +const MODIFIER_CLASS_REGEXP = /\{\{\.modifier}}/g; From 6e386f1301752d33dd57466e88440348cf8ac869 Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Fri, 11 May 2018 16:47:41 -0700 Subject: [PATCH 04/75] update other docs-theme components for new styles --- packages/docs-theme/src/components/baseExample.tsx | 6 +++--- .../docs-theme/src/components/typescript/enumTable.tsx | 10 ++++------ .../src/components/typescript/interfaceTable.tsx | 2 +- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/docs-theme/src/components/baseExample.tsx b/packages/docs-theme/src/components/baseExample.tsx index eeedf6f0cf..3cd7fd3c49 100644 --- a/packages/docs-theme/src/components/baseExample.tsx +++ b/packages/docs-theme/src/components/baseExample.tsx @@ -62,9 +62,9 @@ export class BaseExample extends React.Component { return null; } return ( -
-
{this.renderExample()}
-
{this.actuallyRenderOptions()}
+
+
{this.renderExample()}
+
{this.actuallyRenderOptions()}
); } diff --git a/packages/docs-theme/src/components/typescript/enumTable.tsx b/packages/docs-theme/src/components/typescript/enumTable.tsx index 5f21cb0a5d..37f405735d 100644 --- a/packages/docs-theme/src/components/typescript/enumTable.tsx +++ b/packages/docs-theme/src/components/typescript/enumTable.tsx @@ -4,7 +4,7 @@ * Licensed under the terms of the LICENSE file distributed with this project. */ -import { Classes, IProps } from "@blueprintjs/core"; +import { IProps } from "@blueprintjs/core"; import classNames from "classnames"; import { ITsEnum, ITsEnumMember } from "documentalist/dist/client"; import * as React from "react"; @@ -41,12 +41,11 @@ export class EnumTable extends React.PureComponent { private renderPropRow = (entry: ITsEnumMember) => { const { renderBlock } = this.context; - const { flags: { isDeprecated, isExternal, isOptional }, name } = entry; + const { flags: { isDeprecated, isExternal }, name } = entry; const classes = classNames("docs-prop-name", { "docs-prop-is-deprecated": !!isDeprecated, "docs-prop-is-internal": !isExternal, - "docs-prop-is-required": !isOptional, }); // tslint:disable:blueprint-html-components - this is inside RUNNING_TEXT @@ -57,11 +56,10 @@ export class EnumTable extends React.PureComponent { - {entry.name} - {entry.defaultValue} + {entry.defaultValue}
{renderBlock(entry.documentation)}
-

{this.renderTags(entry)}

+
{this.renderTags(entry)}
); diff --git a/packages/docs-theme/src/components/typescript/interfaceTable.tsx b/packages/docs-theme/src/components/typescript/interfaceTable.tsx index c20571fd84..a2872c28a6 100644 --- a/packages/docs-theme/src/components/typescript/interfaceTable.tsx +++ b/packages/docs-theme/src/components/typescript/interfaceTable.tsx @@ -75,7 +75,7 @@ export class InterfaceTable extends React.PureComponent { {typeInfo}
{renderBlock(documentation)}
-

{this.renderTags(entry)}

+
{this.renderTags(entry)}
); From 160d76b0607906e2c031bf52d9c8ce816dfad823 Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Fri, 11 May 2018 16:48:01 -0700 Subject: [PATCH 05/75] enable use of Set and Map in typescript (missing lib) --- config/tsconfig.base.json | 1 + 1 file changed, 1 insertion(+) diff --git a/config/tsconfig.base.json b/config/tsconfig.base.json index 1dafb6e391..5b1726c311 100644 --- a/config/tsconfig.base.json +++ b/config/tsconfig.base.json @@ -11,6 +11,7 @@ "dom", "dom.iterable", "es5", + "es2015.collection", "es2015.iterable" ], "module": "es2015", From 09821392cd31b445c966bb9ee2ee9335dd99fd80 Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Fri, 11 May 2018 18:15:45 -0700 Subject: [PATCH 06/75] example frame dark theme, css modifier colors --- packages/docs-theme/src/styles/_content.scss | 6 +-- packages/docs-theme/src/styles/_examples.scss | 52 +++++++------------ 2 files changed, 22 insertions(+), 36 deletions(-) diff --git a/packages/docs-theme/src/styles/_content.scss b/packages/docs-theme/src/styles/_content.scss index ff7aecf020..9ee4403782 100644 --- a/packages/docs-theme/src/styles/_content.scss +++ b/packages/docs-theme/src/styles/_content.scss @@ -10,9 +10,9 @@ $link-icon-padding: $pt-grid-size; $class-modifier-color: $rose4; $attribute-modifier-color: $violet5; -$example-padding: $content-padding; -$example-background-color: $content-background-color; -$dark-example-background-color: $dark-content-background-color; +$example-padding: $pt-grid-size * 2; +$example-background-color: $white; +$dark-example-background-color: $dark-gray4; // title of a section .docs-title { diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss index e3b62e1caf..e03ac9b91e 100644 --- a/packages/docs-theme/src/styles/_examples.scss +++ b/packages/docs-theme/src/styles/_examples.scss @@ -3,7 +3,7 @@ // Base Styles for All Examples - +// TODO: dark support // full-bleed wrapper for example .docs-example-frame { @@ -21,8 +21,7 @@ } .#{$ns}-dark & { - border-color: $pt-dark-divider-black; - background-color: $dark-example-background-color; + box-shadow: $pt-dark-elevation-shadow-1; } } @@ -38,6 +37,10 @@ margin: 0; border-top: 1px solid $pt-divider-black; box-shadow: none; + + .#{$ns}-dark & { + border-top-color: $pt-dark-divider-black; + } } } @@ -47,7 +50,8 @@ flex-wrap: wrap; align-items: center; justify-content: space-around; - background: $white; + max-width: 100%; + background: $example-background-color; padding-top: $pt-grid-size * 2; padding-left: $pt-grid-size * 2; // other sides set below to space out children: @@ -56,12 +60,17 @@ margin-right: $pt-grid-size * 2; margin-bottom: $pt-grid-size * 2; } + + .#{$ns}-dark & { + background: $dark-example-background-color; + } } .docs-example-options { @include pt-flex-container(column, $pt-grid-size); flex: 0 0 auto; - border-left: 1px solid $pt-divider-black; + border-left: 1px solid; + border-color: $pt-divider-black; max-width: $pt-grid-size * 30; padding: $pt-grid-size * 2; text-align: left; @@ -70,19 +79,9 @@ &:empty { display: none; } -} - -.docs-example-options-column > :last-child { - margin-bottom: 0; -} - -.docs-inline-example { - display: inline-block; - margin-right: $options-margin * 2; - vertical-align: top; - &:last-child { - margin-right: 0; + .#{$ns}-dark & { + border-color: $pt-dark-divider-black; } } @@ -99,24 +98,11 @@ } } - -[data-modifier] > code { - white-space: nowrap; -} - -// color the modifier label depending on modifier type -[data-modifier="default"] > code { - color: $gray3; -} - -[data-modifier="default"]:last-child > code { - display: none; -} - -[data-modifier^=":"] > code { +// colors for CSS modifiers +[data-modifier^=":"] { color: $attribute-modifier-color; } -[data-modifier^="."] > code { +[data-modifier^="."] { color: $class-modifier-color; } From 233ef2367fb0a5f91ef51c3a09fd86b179c83e2d Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Fri, 11 May 2018 18:17:34 -0700 Subject: [PATCH 07/75] refactor most examples (React & CSS) so they look correct. remove nearly all overrides in docs-app! --- packages/core/src/components/card/_card.scss | 24 +- packages/core/src/components/menu/_menu.scss | 4 +- packages/core/src/components/tag/_tag.scss | 23 +- .../examples/core-examples/alertExample.tsx | 4 +- .../examples/core-examples/buttonsExample.tsx | 4 +- .../core-examples/common/iconSelect.tsx | 6 +- .../core-examples/contextMenuExample.tsx | 15 +- .../examples/core-examples/dialogExample.tsx | 4 +- .../examples/core-examples/hotkeyPiano.tsx | 4 +- .../examples/core-examples/iconExample.tsx | 6 +- .../core-examples/inputGroupExample.tsx | 70 ++--- .../examples/core-examples/menuExample.tsx | 4 +- .../core-examples/nonIdealStateExample.tsx | 15 +- .../core-examples/popoverPositionExample.tsx | 47 ++- .../core-examples/popoverSizingExample.tsx | 6 +- .../core-examples/progressExample.tsx | 2 - .../core-examples/rangeSliderExample.tsx | 22 +- .../examples/core-examples/sliderExample.tsx | 16 +- .../src/examples/core-examples/tagExample.tsx | 6 +- .../examples/core-examples/toastExample.tsx | 4 +- .../datetime-examples/dateInputExample.tsx | 4 +- .../dateRangeInputExample.tsx | 4 +- .../table-examples/tableLoadingExample.tsx | 2 - packages/docs-app/src/styles/_examples.scss | 226 +++++++------- packages/docs-app/src/styles/_sections.scss | 281 ++---------------- .../docs-theme/src/styles/_overrides.scss | 4 - 26 files changed, 263 insertions(+), 544 deletions(-) diff --git a/packages/core/src/components/card/_card.scss b/packages/core/src/components/card/_card.scss index 9fa7fe2289..7748580d58 100644 --- a/packages/core/src/components/card/_card.scss +++ b/packages/core/src/components/card/_card.scss @@ -70,19 +70,17 @@ $dark-elevation-shadows: ( Interactive cards Markup: -
-
-
Data fusion platforms
-

Back-end infrastructure for integrating, managing, and securing data of any kind, from any source, at massive scale.

-
-
-
Analytical applications
-

User interfaces that enable people to interact smoothly with data, ask better questions, and make better decisions.

-
-
-
For any data problem
-

Proven technology that can be deployed today, adapts to any domain, and produces operational results in weeks.

-
+
+
Data fusion platforms
+
Back-end infrastructure for integrating, managing, and securing data of any kind, from any source, at massive scale.
+
+
+
Analytical applications
+
User interfaces that enable people to interact smoothly with data, ask better questions, and make better decisions.
+
+
+
For any data problem
+
Proven technology that can be deployed today, adapts to any domain, and produces operational results in weeks.
Styleguide card-interactive diff --git a/packages/core/src/components/menu/_menu.scss b/packages/core/src/components/menu/_menu.scss index 30ba620d73..9f64d3bc70 100644 --- a/packages/core/src/components/menu/_menu.scss +++ b/packages/core/src/components/menu/_menu.scss @@ -122,11 +122,11 @@ Menu headers Markup:
    -
  • Layouts
    • +
  • Layouts
    • -
  • Views
    • +
  • Views
    • diff --git a/packages/core/src/components/tag/_tag.scss b/packages/core/src/components/tag/_tag.scss index 88d7b68a91..19839e6477 100644 --- a/packages/core/src/components/tag/_tag.scss +++ b/packages/core/src/components/tag/_tag.scss @@ -8,18 +8,16 @@ Tags Markup: -

    - 125 - Done - - Tracking - - - - Crushed - - -

    +125 +Done + + Tracking + + + + Crushed + + A rather long string of text that wraps to multiple lines demonstrates the position of the remove button. @@ -27,6 +25,7 @@ Markup: .#{$ns}-large - Large +.#{$ns}-minimal - Minimal appearance .#{$ns}-round - Rounded corners, ideal for badges .#{$ns}-interactive - Hover and active effects .#{$ns}-intent-primary - Primary intent diff --git a/packages/docs-app/src/examples/core-examples/alertExample.tsx b/packages/docs-app/src/examples/core-examples/alertExample.tsx index c3cfdcacf1..907bef4e68 100644 --- a/packages/docs-app/src/examples/core-examples/alertExample.tsx +++ b/packages/docs-app/src/examples/core-examples/alertExample.tsx @@ -32,7 +32,7 @@ export class AlertExample extends BaseExample<{}> { protected renderExample() { const { isOpen, isOpenError, ...switchProps } = this.state; return ( -
    + <>
    + ); } diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx index 12cb445f55..5f2ec6ccdf 100644 --- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx +++ b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx @@ -52,7 +52,7 @@ export class ButtonsExample extends BaseExample { const { iconOnly, wiggling, ...buttonProps } = this.state; return ( -
    + <>

    Button @@ -79,7 +79,7 @@ export class ButtonsExample extends BaseExample { {...buttonProps} />

    -
    + ); } diff --git a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx index 3b25a1db75..e8a303f4c1 100644 --- a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx +++ b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx @@ -4,7 +4,7 @@ * Licensed under the terms of the LICENSE file distributed with this project. */ -import { Button, Classes, MenuItem } from "@blueprintjs/core"; +import { Alignment, Button, Classes, MenuItem } from "@blueprintjs/core"; import { IconName, IconNames } from "@blueprintjs/icons"; import { ItemRenderer, Select } from "@blueprintjs/select"; import * as React from "react"; @@ -26,7 +26,7 @@ export class IconSelect extends React.PureComponent { const { iconName } = this.props; return (
-
+ ); } diff --git a/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx b/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx index 8ba8e07636..1f6aa24b04 100644 --- a/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx +++ b/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx @@ -342,14 +342,14 @@ export class HotkeyPiano extends BaseExample { if (AUDIO_CONTEXT == null) { return ( -
+
Oops! This browser does not support the WebAudio API needed for this example.
); } return ( -
+
diff --git a/packages/docs-app/src/examples/core-examples/iconExample.tsx b/packages/docs-app/src/examples/core-examples/iconExample.tsx index 96c6e13195..4c998127b4 100644 --- a/packages/docs-app/src/examples/core-examples/iconExample.tsx +++ b/packages/docs-app/src/examples/core-examples/iconExample.tsx @@ -23,11 +23,7 @@ export class IconExample extends BaseExample { }; protected renderExample() { - return ( -
- -
- ); + return ; } protected renderOptions() { diff --git a/packages/docs-app/src/examples/core-examples/inputGroupExample.tsx b/packages/docs-app/src/examples/core-examples/inputGroupExample.tsx index 8a113def61..209368378f 100644 --- a/packages/docs-app/src/examples/core-examples/inputGroupExample.tsx +++ b/packages/docs-app/src/examples/core-examples/inputGroupExample.tsx @@ -80,43 +80,39 @@ export class InputGroupExample extends BaseExample { const resultsTag = {Math.floor(10000 / Math.max(1, Math.pow(tagValue.length, 2)))}; return ( -
-
- - -
-
- - -
-
+ <> + + + + + ); } diff --git a/packages/docs-app/src/examples/core-examples/menuExample.tsx b/packages/docs-app/src/examples/core-examples/menuExample.tsx index 54b63c2878..e38a8ead86 100644 --- a/packages/docs-app/src/examples/core-examples/menuExample.tsx +++ b/packages/docs-app/src/examples/core-examples/menuExample.tsx @@ -14,7 +14,7 @@ export class MenuExample extends BaseExample<{}> { protected renderExample() { return (
- + } text="Custom SVG icon" /> @@ -23,7 +23,7 @@ export class MenuExample extends BaseExample<{}> { } text="Settings..." /> - + diff --git a/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx b/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx index 9e4429bc00..1fbcecabac 100644 --- a/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx +++ b/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx @@ -17,15 +17,12 @@ export class NonIdealStateExample extends BaseExample<{}> { ); return ( - // empty wrapper div to cancel parent flexbox styles -
- } - /> -
+ } + /> ); } } diff --git a/packages/docs-app/src/examples/core-examples/popoverPositionExample.tsx b/packages/docs-app/src/examples/core-examples/popoverPositionExample.tsx index cf61e0d4ba..e25aa72e4d 100644 --- a/packages/docs-app/src/examples/core-examples/popoverPositionExample.tsx +++ b/packages/docs-app/src/examples/core-examples/popoverPositionExample.tsx @@ -4,26 +4,13 @@ * Licensed under the terms of the LICENSE file distributed with this project. */ -import classNames from "classnames"; import * as React from "react"; -import { Button, Code, Popover, Position } from "@blueprintjs/core"; +import { Button, Classes, Code, Popover, Position } from "@blueprintjs/core"; import { BaseExample } from "@blueprintjs/docs-theme"; const EXAMPLE_CLASS = "docs-popover-position-example"; -// Avoid interpolation to ensure these values remain grep-able. -const BUTTON_CLASS = "docs-popover-position-example-button"; -const INSTRUCTIONS_CLASS = "docs-popover-position-example-instructions"; - -const TABLE_CLASS = "docs-popover-position-example-table"; -const ROW_CLASS = "docs-popover-position-example-row"; -const CELL_CLASS = "docs-popover-position-example-cell"; - -const CELL_LEFT_CLASS = "docs-popover-position-example-cell-left"; -const CELL_CENTER_CLASS = "docs-popover-position-example-cell-center"; -const CELL_RIGHT_CLASS = "docs-popover-position-example-cell-right"; - const SIDE_LABEL_CLASS = "docs-popover-position-label-side"; const ALIGNMENT_LABEL_CLASS = "docs-popover-position-label-alignment"; @@ -33,42 +20,42 @@ export class PopoverPositionExample extends BaseExample<{}> { protected renderExample() { return ( // tslint:disable-next-line:blueprint-html-components - +
- - + - - - + - - - - + -
- +
+ {this.renderPopover(Position.BOTTOM_LEFT, "BOTTOM", "LEFT")} {this.renderPopover(Position.BOTTOM, "BOTTOM")} {this.renderPopover(Position.BOTTOM_RIGHT, "BOTTOM", "RIGHT")} +
+
{this.renderPopover(Position.RIGHT_TOP, "RIGHT", "TOP")} {this.renderPopover(Position.RIGHT, "RIGHT")} {this.renderPopover(Position.RIGHT_BOTTOM, "RIGHT", "BOTTOM")} - + + Button positions are flipped here so that all popovers open inward. - + + {this.renderPopover(Position.LEFT_TOP, "LEFT", "TOP")} {this.renderPopover(Position.LEFT, "LEFT")} {this.renderPopover(Position.LEFT_BOTTOM, "LEFT", "BOTTOM")}
- +
+ {this.renderPopover(Position.TOP_LEFT, "TOP", "LEFT")} {this.renderPopover(Position.TOP, "TOP")} {this.renderPopover(Position.TOP_RIGHT, "TOP", "RIGHT")} +
@@ -107,7 +94,7 @@ export class PopoverPositionExample extends BaseExample<{}> { return ( - + ); } diff --git a/packages/docs-app/src/examples/core-examples/popoverSizingExample.tsx b/packages/docs-app/src/examples/core-examples/popoverSizingExample.tsx index 93845f2dff..cd739f3d58 100644 --- a/packages/docs-app/src/examples/core-examples/popoverSizingExample.tsx +++ b/packages/docs-app/src/examples/core-examples/popoverSizingExample.tsx @@ -14,11 +14,7 @@ export class PopoverSizingExample extends BaseExample<{}> { protected renderExample() { return (
- } - position={Position.BOTTOM_LEFT} - usePortal={false} - > + } position={Position.BOTTOM_LEFT}>
diff --git a/packages/docs-app/src/examples/core-examples/progressExample.tsx b/packages/docs-app/src/examples/core-examples/progressExample.tsx index b4abdf1f1e..3c21c623b4 100644 --- a/packages/docs-app/src/examples/core-examples/progressExample.tsx +++ b/packages/docs-app/src/examples/core-examples/progressExample.tsx @@ -24,8 +24,6 @@ export class ProgressExample extends BaseExample { value: 0.7, }; - protected className = "docs-progress-example"; - private handleIndeterminateChange = handleBooleanChange(hasValue => this.setState({ hasValue })); private handleModifierChange = handleStringChange((intent: Intent) => this.setState({ intent })); diff --git a/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx b/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx index 9c03e92299..d32e042bca 100644 --- a/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx +++ b/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx @@ -15,6 +15,8 @@ export interface IRangeSliderExampleState { } export class RangeSliderExample extends BaseExample { + public className = "docs-slider-example"; + public state: IRangeSliderExampleState = { range: [36, 72], vertical: false, @@ -24,17 +26,15 @@ export class RangeSliderExample extends BaseExample { protected renderExample() { return ( -
- -
+ ); } diff --git a/packages/docs-app/src/examples/core-examples/sliderExample.tsx b/packages/docs-app/src/examples/core-examples/sliderExample.tsx index 60d82b6ce0..bfff1eb03f 100644 --- a/packages/docs-app/src/examples/core-examples/sliderExample.tsx +++ b/packages/docs-app/src/examples/core-examples/sliderExample.tsx @@ -4,7 +4,6 @@ * Licensed under the terms of the LICENSE file distributed with this project. */ -import classNames from "classnames"; import * as React from "react"; import { Slider, Switch } from "@blueprintjs/core"; @@ -18,6 +17,8 @@ export interface ISliderExampleState { } export class SliderExample extends BaseExample { + public className = "docs-slider-example"; + public state: ISliderExampleState = { value1: 0, value2: 2.5, @@ -29,13 +30,8 @@ export class SliderExample extends BaseExample { protected renderExample() { const { vertical } = this.state; - - const rootClasses = classNames("docs-slider-example", { - "docs-slider-example-vertical": vertical, - }); - return ( -
+ <> { value={this.state.value3} vertical={vertical} /> -
+ ); } protected renderOptions() { - return [ - [], - ]; + return ; } private getChangeHandler(key: string) { diff --git a/packages/docs-app/src/examples/core-examples/tagExample.tsx b/packages/docs-app/src/examples/core-examples/tagExample.tsx index e13879cab9..3e25fb0dc8 100644 --- a/packages/docs-app/src/examples/core-examples/tagExample.tsx +++ b/packages/docs-app/src/examples/core-examples/tagExample.tsx @@ -38,8 +38,8 @@ export class TagExample extends BaseExample { private handleInteractiveChange = handleBooleanChange(interactive => this.setState({ interactive })); protected renderExample() { - const { removable, ...tagProps } = this.state; - const tags = this.state.tags.map(tag => { + const { removable, tags, ...tagProps } = this.state; + const tagElements = tags.map(tag => { const onRemove = () => this.setState({ tags: this.state.tags.filter(t => t !== tag) }); return ( @@ -47,7 +47,7 @@ export class TagExample extends BaseExample { ); }); - return
{tags}
; + return <>{tagElements}; } protected renderOptions() { diff --git a/packages/docs-app/src/examples/core-examples/toastExample.tsx b/packages/docs-app/src/examples/core-examples/toastExample.tsx index 974417eec8..6dabc195e6 100644 --- a/packages/docs-app/src/examples/core-examples/toastExample.tsx +++ b/packages/docs-app/src/examples/core-examples/toastExample.tsx @@ -95,11 +95,11 @@ export class ToastExample extends BaseExample { protected renderExample() { return ( -
+ <> {this.TOAST_BUILDERS.map(this.renderToastDemo, this)}
+ ); } diff --git a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx index db39fbe409..db05f4dcf2 100644 --- a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx +++ b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx @@ -46,7 +46,7 @@ export class DateInputExample extends BaseExample { protected renderExample() { const { date, format, ...spreadProps } = this.state; return ( - <> +
{
- +
); } diff --git a/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx index 5e1eddbc70..6a53467ded 100644 --- a/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx +++ b/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx @@ -57,7 +57,7 @@ export class DateRangeInputExample extends BaseExample +
- +
); } diff --git a/packages/docs-app/src/examples/table-examples/tableLoadingExample.tsx b/packages/docs-app/src/examples/table-examples/tableLoadingExample.tsx index 634a2361e3..8689435ee4 100644 --- a/packages/docs-app/src/examples/table-examples/tableLoadingExample.tsx +++ b/packages/docs-app/src/examples/table-examples/tableLoadingExample.tsx @@ -30,8 +30,6 @@ export class TableLoadingExample extends BaseExample rowHeadersLoading: true, }; - protected className = "docs-table-loading-example"; - private handleCellsLoading = handleBooleanChange(cellsLoading => this.setState({ cellsLoading })); private handleColumnHeadersLoading = handleBooleanChange(columnHeadersLoading => { diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss index 7ee1071a3a..2996dfcb37 100644 --- a/packages/docs-app/src/styles/_examples.scss +++ b/packages/docs-app/src/styles/_examples.scss @@ -6,41 +6,22 @@ // Specific Example Customizations -.docs-example-wrapper { - .#{$ns}-slider:not(:last-child) { - margin-bottom: $options-margin; - } - - .#{$ns}-callout { - margin: 0; - } -} - .docs-card-example { - display: flex; - justify-content: space-between; + @include pt-flex-container(row, $pt-grid-size * 2); .#{$ns}-card { - width: floor(($content-width - $pt-grid-size * 10) / 3); + flex: 1 1 auto; &:hover a { text-decoration: underline; } - - p { - margin: 0; - } } } .docs-datetime-example { - > .#{$ns}-datepicker { - margin-bottom: $pt-grid-size * 2; - } - - > .#{$ns}-datetimepicker { - display: inline-block; - margin-bottom: $pt-grid-size * 2; + > :last-child:not(:first-child) { + // space above date tags, if present + margin-top: $pt-grid-size * 2; } .#{$ns}-icon-arrow-right { @@ -48,16 +29,6 @@ } } -.docs-dialog-example { - display: flex; - align-items: center; - height: $pt-grid-size * 6; - - .#{$ns}-button + .#{$ns}-button { - margin-left: $pt-grid-size; - } -} - .docs-editable-text-example { width: 100%; @@ -97,24 +68,16 @@ } .docs-context-menu-example { - $node-size: $pt-grid-size * 8; - $icon-size: $pt-icon-size-standard * 2; - $node-border-width: 4px; - - display: flex; - flex-direction: column; - align-items: center; + @include pt-flex-container(column, $pt-grid-size * 2); justify-content: center; - - border-radius: $pt-border-radius; - background: $light-gray3; - padding: $options-margin; - - .#{$ns}-dark & { - background: $dark-gray5; - } + align-items: center; + height: $pt-grid-size * 20; .context-menu-node { + $node-size: $pt-grid-size * 8; + $icon-size: $pt-icon-size-standard * 2; + $node-border-width: 4px; + border: $node-border-width solid $white; border-radius: 50%; box-shadow: $pt-elevation-shadow-2; @@ -138,6 +101,67 @@ } } +.docs-hotkey-piano-example { + opacity: 0.5; + + &:focus { + opacity: 1; + } + + > :first-child { + margin-bottom: $pt-grid-size * 2; + } + + .piano-key { + display: inline-block; + position: relative; + z-index: 1; + + > div { + margin-right: $pt-grid-size/2; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + background-color: $white; + width: $pt-grid-size * 8; + height: $pt-grid-size * 24; + color: $black; + } + } + + .piano-key-sharp { + z-index: 2; + width: 0; + overflow: visible; + vertical-align: top; + + > div { + position: absolute; + top: 0; + left: $pt-grid-size * -4; + background-color: $black; + height: $pt-grid-size * 16; + color: $white; + } + } + + .piano-key-pressed > div { + background-color: $pt-intent-primary; + color: $white; + } + + .piano-key-text { + position: absolute; + right: 0; + bottom: 5px; + left: 0; + text-align: center; + } + + .piano-key-note { + opacity: 0.5; + } +} + .docs-input-group-example { .docs-flex-column { margin-right: $options-margin; @@ -152,22 +176,13 @@ } } -.docs-progress-example { - .docs-react-example { - flex-direction: column; - } -} - .docs-slider-example { - width: 100%; - - &.docs-slider-example-vertical { - display: flex; - - .#{$ns}-slider { - margin-right: $pt-grid-size * 10; - margin-bottom: 0; - } + .docs-example { + // more padding because slider labels bleed outside container + padding-left: $pt-grid-size * 4; + padding-top: $pt-grid-size * 4; + padding-right: $pt-grid-size * 2; + padding-bottom: $pt-grid-size * 2; } } @@ -175,31 +190,16 @@ line-height: $pt-navbar-height; } -.docs-example-wrapper .#{$ns}-navbar { - position: static; - width: 100%; -} - -.docs-tag-example .#{$ns}-tag:not(:last-child) { - margin-right: $pt-grid-size * 0.5; -} - .#{$ns}-progress-bar.docs-toast-progress { margin-top: $pt-grid-size / 2; margin-bottom: 0; } .docs-popover-example { - .docs-react-example { - border-radius: $pt-border-radius; - background: $light-gray3; - width: 100%; - height: 350px; + .docs-example { + display: block; + max-height: 700px; overflow: scroll; - - .#{$ns}-dark & { - background: $dark-gray5; - } } .docs-popover-example-scroll { @@ -207,8 +207,8 @@ flex-direction: column; align-items: center; justify-content: center; - min-width: 200%; - min-height: 200%; + width: 1000px; + height: 1500px; } .#{$ns}-popover & { @@ -217,7 +217,7 @@ } .docs-popover-position-example { - .docs-popover-position-example-instructions { + em { display: inline-block; max-width: 25 * $pt-grid-size; color: $pt-text-color-muted; @@ -228,26 +228,20 @@ } } - .docs-popover-position-example-button { - font-family: $pt-font-family-monospace; - } - - .docs-popover-position-example-table { - margin: 0 auto; - } - - .docs-popover-position-example-cell-right, - .docs-popover-position-example-cell-left { + td:first-child { display: flex; flex-direction: column; + align-items: flex-end; } - .docs-popover-position-example-cell-center { + td:nth-child(2) { text-align: center; } - .docs-popover-position-example-cell-left { - align-items: flex-end; + td:nth-child(3) { + display: flex; + flex-direction: column; + align-items: flex-start; } .#{$ns}-popover-wrapper { @@ -342,18 +336,37 @@ } } + +.docs-popover-position-example { + .docs-popover-position-value-code-block { + text-align: center; + font-size: $pt-font-size-large; + font-weight: 600; + } + + .docs-popover-position-label-side { + color: $cobalt3; + + .#{$ns}-dark & { + color: $cobalt5; + } + } + + .docs-popover-position-label-alignment { + color: $forest3; + + .#{$ns}-dark & { + color: $forest5; + } + } +} + .docs-tooltip-example { > div { margin-bottom: $pt-grid-size; } } -.docs-icon-example { - display: flex; - align-items: center; - justify-content: center; -} - .docs-menu-example .#{$ns}-menu { max-width: 280px; } @@ -363,11 +376,6 @@ align-items: center; } -// only for date input and date range input examples -.#{$ns}-popover-wrapper + .docs-date-range { - margin-left: $pt-grid-size * 2; -} - .docs-wiggle { animation: docs-wiggle-rotate $pt-transition-duration $pt-transition-ease infinite; } diff --git a/packages/docs-app/src/styles/_sections.scss b/packages/docs-app/src/styles/_sections.scss index 94517a356f..5a426b16d1 100644 --- a/packages/docs-app/src/styles/_sections.scss +++ b/packages/docs-app/src/styles/_sections.scss @@ -8,294 +8,49 @@ @return "[data-page-id#{$comparator}\"#{$ref}\"]"; } -// Generate a selector for a KSS example by reference -@function reference($ref, $comparator: "=") { - @return "[data-reference#{$comparator}\"#{$ref}\"]"; -} - -// Generate a selector for KSS examples that match or are nested inside this reference. -@function reference-all($ref) { - // exact reference + children, not a simple prefix. - // so "button" captures "button-minimal", not "button-group" - @return reference($ref, "^="); -} - // 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. -// `.#{$ns}-fill` modifiers will always occupy an entire row. -// (Default styles give flex-basis of 100% to each example.) -@mixin examples-per-row($amount) { - .docs-example { - $width: floor(100% / $amount); - flex-basis: $width; - width: $width; - padding-right: $pt-grid-size * 2; - - &[data-modifier=".#{$ns}-fill"] { - flex-basis: 100%; - padding-right: 0; - } - } +@function example($NameExample, $comparator: "=") { + @return "[data-example-id#{$comparator}\"#{$NameExample}\"]"; } // CSS examples -#{reference("ui-text")}, -#{reference("running-text")}, -#{reference("file-input")}, -#{reference("label")}, -#{reference("menu")}, -#{reference("select-inline")}, -#{reference("skeleton")}, -#{reference("tag")}, -#{reference("tag-minimal")} { - @include examples-per-row(2); -} - -#{reference("lists")}, -#{reference-all("input")}, -#{reference("button")}, -#{reference("button-minimal")}, -#{reference("card")}, -#{reference("input-group")}, -#{reference("progress-bar")}, -#{reference("spinner")}, -#{reference("textarea")} { - @include examples-per-row(3); -} - -#{reference("checkbox")}, -#{reference("radio")}, -#{reference("switch")} { - .docs-example { - flex-basis: 10%; - } -} - -#{page("button")}, -#{example("AlertExample")}, -#{example("ToastExample")} { - // put more space between buttons in all button sections - .#{$ns}-button + .#{$ns}-button:not(.#{$ns}-fill) { - margin-left: $pt-grid-size; - } - - .#{$ns}-button.#{$ns}-fill + .#{$ns}-button.#{$ns}-fill { - margin-top: $pt-grid-size; - } -} - -#{reference("button-group-vertical")} { - .#{$ns}-button-group { - margin-right: $pt-grid-size * 2; - } -} - -#{reference-all("control-group")} { - display: flex; - flex-direction: column; - justify-content: space-between; - - .#{$ns}-control-group:not(:last-child) { - margin-bottom: $pt-grid-size * 2; - } -} - -#{reference("input-group")} { - .#{$ns}-input-group { - margin-bottom: $pt-grid-size; - } -} - -#{reference("select")} { - @include examples-per-row(4); - - .docs-example { - padding-right: 0; - } -} - -#{reference("select-inline")} { - justify-content: initial; - - .docs-example { - flex-basis: $pt-grid-size * 25; - margin-right: $options-margin; - } -} - -#{reference("menu")}, -#{reference("menu-header")} { - justify-content: initial; - - .docs-example { - flex-basis: $pt-grid-size * 15; - margin-right: $pt-grid-size * 8; - padding-right: 0; - - &:last-child { - margin-right: 0; - } - } -} - -#{reference("spinner")} { - .docs-react-example > svg { - width: $pt-grid-size * 10; - height: $pt-grid-size * 10; - } -} - -#{reference("tree")} { - .#{$ns}-tree { - background-color: $white; - width: $pt-grid-size * 35; - - .#{$ns}-dark & { - background-color: $dark-gray4; - } - } +#{page("tree")} .#{$ns}-tree { + width: $pt-grid-size * 35; } // React examples #{example("CollapseExample")} { - .docs-react-example { - height: $pt-grid-size * 18; - } -} - -#{example("HotkeyPiano")} { - height: auto; - - .piano-example { - opacity: 0.5; - } - - .piano-example:focus { - opacity: 1; - } - - .piano-example > :first-child { - margin-bottom: $pt-grid-size * 2; - } - - .piano-key { - display: inline-block; - position: relative; - z-index: 1; - } - - .piano-key > div { - margin-right: $pt-grid-size/2; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - background-color: $white; - width: $pt-grid-size * 8; - height: $pt-grid-size * 24; - color: $black; - } - - .piano-key-sharp { - z-index: 2; - width: 0; - overflow: visible; - vertical-align: top; - } - - .piano-key-sharp > div { - position: absolute; - top: 0; - left: $pt-grid-size * -4; - background-color: $black; - height: $pt-grid-size * 16; - color: $white; - } - - .piano-key-pressed > div { - background-color: $pt-intent-primary; - color: $white; - } - - .piano-key-text { - position: absolute; - right: 0; - bottom: 5px; - left: 0; - text-align: center; - } - - .piano-key-note { - opacity: 0.5; - } -} - -#{example("HotkeyTester")} .#{$ns}-key-combo { - display: inline-block; -} - -#{example("NumericInputBasicExample")} { - .docs-react-example { - // abandon display:flex to ensure pt-fill displays properly - display: block; + .docs-example { + justify-content: unset; } } #{example("NumericInputExtendedExample")} { - .docs-react-example input { + .#{$ns}-numeric-input input { width: $pt-grid-size * 23; } } -#{example("TreeExample")} { - .#{$ns}-tree { - background-color: $white; - width: $pt-grid-size * 35; +#{example("SliderExample")} - .#{$ns}-dark & { - background-color: $dark-gray4; - } +// give all Table examples a fixed height +#{page("table", "^=")} { + .docs-example-frame { + flex-direction: column; } -} -// give all Table examples a fixed height -#{page("table")}, -#{page("features")} { - .docs-react-example { - width: 100%; - height: $pt-grid-size * 30; + .docs-example-options { + border-left: none; + border-top-style: solid; + border-top-width: 1px; + max-width: unset; } // make all tables the same width .#{$ns}-table-container { width: 100%; - } -} - -#{page("popover")} { - .docs-popover-position-value-code-block { - text-align: center; - font-size: $pt-font-size-large; - font-weight: 600; - } - - .docs-popover-position-label-side { - color: $cobalt3; - - .#{$ns}-dark & { - color: $cobalt5; - } - } - - .docs-popover-position-label-alignment { - color: $forest3; - - .#{$ns}-dark & { - color: $forest5; - } + height: $pt-grid-size * 36; } } diff --git a/packages/docs-theme/src/styles/_overrides.scss b/packages/docs-theme/src/styles/_overrides.scss index 48274a29e6..68730e38ce 100644 --- a/packages/docs-theme/src/styles/_overrides.scss +++ b/packages/docs-theme/src/styles/_overrides.scss @@ -5,10 +5,6 @@ table { width: 100%; } -.#{$ns}-progress-bar { - margin-bottom: $pt-grid-size; -} - // override normalize.css input[type="search"] { box-sizing: border-box; From 6264c76a839c5d5aafc0cf7da37d29369ee87eaf Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Fri, 11 May 2018 18:17:51 -0700 Subject: [PATCH 08/75] Page component uses route instead of reference for data-page-id --- packages/docs-theme/src/components/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-theme/src/components/page.tsx b/packages/docs-theme/src/components/page.tsx index 36eeb5953c..f3b773f7f7 100644 --- a/packages/docs-theme/src/components/page.tsx +++ b/packages/docs-theme/src/components/page.tsx @@ -20,7 +20,7 @@ export const Page: React.SFC = ({ tagRenderers, page }) => { // apply running text styles to blocks in pages (but not on blocks in examples) const pageContents = renderBlock(page, tagRenderers, Classes.TEXT_LARGE); return ( -
+
{pageContents}
); From 90ff7fdf5f589c89be39b4b47dbe9ae106765d78 Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Fri, 11 May 2018 18:18:10 -0700 Subject: [PATCH 09/75] small changes to Label, Navbar, NIS styles to support new usage --- packages/core/src/components/forms/_label.scss | 3 ++- packages/core/src/components/navbar/_navbar.scss | 1 + .../core/src/components/non-ideal-state/_non-ideal-state.scss | 1 - 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/forms/_label.scss b/packages/core/src/components/forms/_label.scss index 1881852371..2f1ff95f3a 100644 --- a/packages/core/src/components/forms/_label.scss +++ b/packages/core/src/components/forms/_label.scss @@ -29,7 +29,8 @@ Styleguide label // stylelint-disable-next-line selector-no-qualifying-type label.#{$ns}-label { display: block; - margin: 0 0 ($pt-grid-size * 1.5); + margin-top: 0; + margin-bottom: ($pt-grid-size * 1.5); .#{$ns}-input, .#{$ns}-select, diff --git a/packages/core/src/components/navbar/_navbar.scss b/packages/core/src/components/navbar/_navbar.scss index 467fd194ba..1baf028c69 100644 --- a/packages/core/src/components/navbar/_navbar.scss +++ b/packages/core/src/components/navbar/_navbar.scss @@ -37,6 +37,7 @@ $dark-navbar-background-color: $dark-gray5 !default; z-index: $pt-z-index-content; box-shadow: $pt-elevation-shadow-1; background-color: $navbar-background-color; + width: 100%; height: $pt-navbar-height; padding: 0 $navbar-padding; diff --git a/packages/core/src/components/non-ideal-state/_non-ideal-state.scss b/packages/core/src/components/non-ideal-state/_non-ideal-state.scss index 4394227ded..b8c3881b9b 100644 --- a/packages/core/src/components/non-ideal-state/_non-ideal-state.scss +++ b/packages/core/src/components/non-ideal-state/_non-ideal-state.scss @@ -23,7 +23,6 @@ Styleguide non-ideal-state @include pt-flex-container(column, $pt-grid-size * 2); align-items: center; justify-content: center; - margin: 0 auto; width: 100%; max-width: $pt-grid-size * 40; height: 100%; From d3d77ce5f625b0f460d16367f6b2d8d7ef26c2f3 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:20:05 -0700 Subject: [PATCH 10/75] move example variables to example file --- packages/docs-theme/src/styles/_content.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/docs-theme/src/styles/_content.scss b/packages/docs-theme/src/styles/_content.scss index 9ee4403782..b93796c8c5 100644 --- a/packages/docs-theme/src/styles/_content.scss +++ b/packages/docs-theme/src/styles/_content.scss @@ -11,8 +11,6 @@ $class-modifier-color: $rose4; $attribute-modifier-color: $violet5; $example-padding: $pt-grid-size * 2; -$example-background-color: $white; -$dark-example-background-color: $dark-gray4; // title of a section .docs-title { From d6679908abd8a66a40ba59552826aaafb655078f Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:24:45 -0700 Subject: [PATCH 11/75] remove duplicate variable --- packages/docs-theme/src/styles/_content.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/docs-theme/src/styles/_content.scss b/packages/docs-theme/src/styles/_content.scss index b93796c8c5..05dfc337c6 100644 --- a/packages/docs-theme/src/styles/_content.scss +++ b/packages/docs-theme/src/styles/_content.scss @@ -10,8 +10,6 @@ $link-icon-padding: $pt-grid-size; $class-modifier-color: $rose4; $attribute-modifier-color: $violet5; -$example-padding: $pt-grid-size * 2; - // title of a section .docs-title { position: relative; From 7786b0780e1531e51002192235388ce595972133 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:25:40 -0700 Subject: [PATCH 12/75] remove options specific variables --- packages/docs-app/src/styles/_examples.scss | 14 -------------- packages/docs-theme/src/styles/_variables.scss | 3 --- 2 files changed, 17 deletions(-) diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss index 2996dfcb37..540dfc87f9 100644 --- a/packages/docs-app/src/styles/_examples.scss +++ b/packages/docs-app/src/styles/_examples.scss @@ -162,20 +162,6 @@ } } -.docs-input-group-example { - .docs-flex-column { - margin-right: $options-margin; - } - - .#{$ns}-input-group { - width: $pt-grid-size * 30; - - &:first-child { - margin-bottom: $options-margin; - } - } -} - .docs-slider-example { .docs-example { // more padding because slider labels bleed outside container diff --git a/packages/docs-theme/src/styles/_variables.scss b/packages/docs-theme/src/styles/_variables.scss index b53be991b5..c23b549706 100644 --- a/packages/docs-theme/src/styles/_variables.scss +++ b/packages/docs-theme/src/styles/_variables.scss @@ -16,6 +16,3 @@ $content-width: $container-width - $sidebar-width; $content-padding: $pt-grid-size * 2; $content-background-color: $light-gray5; $dark-content-background-color: $dark-gray3; - -$options-width: $pt-grid-size * 18; -$options-margin: $pt-grid-size * 3; From 84ea31e9e6f38917b7cd9b9f3302e607fea8aeab Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:26:31 -0700 Subject: [PATCH 13/75] tweak base styles of examples, add variables --- packages/docs-theme/src/styles/_examples.scss | 60 +++++++++++-------- 1 file changed, 36 insertions(+), 24 deletions(-) diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss index e03ac9b91e..fb9024880d 100644 --- a/packages/docs-theme/src/styles/_examples.scss +++ b/packages/docs-theme/src/styles/_examples.scss @@ -1,32 +1,34 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the terms of the LICENSE file distributed with this project. -// Base Styles for All Examples +// Base styles for all examples -// TODO: dark support +$example-frame-spacing: $pt-grid-size; +$example-frame-border-radius: $pt-border-radius * 2; +$example-spacing: $pt-grid-size * 4; + +$example-background-color: $white; +$code-background-color: $light-gray4; +$options-background-color: $light-gray4; + +$dark-example-background-color: $dark-gray2; +$dark-code-background-color: $dark-gray4; +$dark-options-background-color: $dark-gray4; // full-bleed wrapper for example .docs-example-frame { - display: flex; + @include pt-flex-container(row, $fill: ".docs-example"); position: relative; margin-top: $content-padding * 2; - - border-radius: $pt-border-radius; - box-shadow: $pt-elevation-shadow-1; width: 100%; - overflow: hidden; &:empty { display: none; } - - .#{$ns}-dark & { - box-shadow: $pt-dark-elevation-shadow-1; } -} .docs-example-wrapper { - @include pt-flex-container(column, $fill: ".docs-example"); + @include pt-flex-container(column, $example-frame-spacing, $fill: ".docs-example"); flex: 1 1 auto; // explicit 0 width ensures options column takes up its space first, // then the rest is filled by this element @@ -35,11 +37,13 @@ .editor { flex: 0 0 auto; margin: 0; - border-top: 1px solid $pt-divider-black; + border-radius: $example-frame-border-radius; box-shadow: none; + background: $code-background-color; .#{$ns}-dark & { - border-top-color: $pt-dark-divider-black; + box-shadow: none; + background: $dark-code-background-color; } } } @@ -50,15 +54,13 @@ flex-wrap: wrap; align-items: center; justify-content: space-around; - max-width: 100%; + border-radius: $example-frame-border-radius; background: $example-background-color; - padding-top: $pt-grid-size * 2; - padding-left: $pt-grid-size * 2; - // other sides set below to space out children: + max-width: 100%; + padding: $example-spacing / 2; > * { - margin-right: $pt-grid-size * 2; - margin-bottom: $pt-grid-size * 2; + margin: $example-spacing / 2; } .#{$ns}-dark & { @@ -67,21 +69,31 @@ } .docs-example-options { - @include pt-flex-container(column, $pt-grid-size); + @include pt-flex-container(column, $pt-grid-size * 2); flex: 0 0 auto; - border-left: 1px solid; - border-color: $pt-divider-black; + border-radius: $example-frame-border-radius; + background-color: $options-background-color; max-width: $pt-grid-size * 30; padding: $pt-grid-size * 2; text-align: left; + margin-left: $example-frame-spacing; // hide when empty (div is always rendered) &:empty { display: none; } + .#{$ns}-label:last-child, + .#{$ns}-control:last-child { + margin-bottom: 0; + } + + .docs-prop-description { + font-size: $pt-font-size-small; + } + .#{$ns}-dark & { - border-color: $pt-dark-divider-black; + background-color: $dark-options-background-color; } } From b4f9d1c32fb26ecc01a7e190cbf1695fb6be5130 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:27:21 -0700 Subject: [PATCH 14/75] tweak style of view source button, to fit with example frame --- packages/docs-theme/src/styles/_examples.scss | 19 +++++++++++++------ packages/docs-theme/src/tags/reactExample.tsx | 2 ++ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss index fb9024880d..fbb9faaa2e 100644 --- a/packages/docs-theme/src/styles/_examples.scss +++ b/packages/docs-theme/src/styles/_examples.scss @@ -97,16 +97,23 @@ $dark-options-background-color: $dark-gray4; } } -.view-example-source { - display: inline-block; +.docs-example-view-source { + display: block; + margin-top: $example-frame-spacing; margin-bottom: $pt-grid-size * 2; + border-radius: $example-frame-border-radius; - &:hover { - text-decoration: none; + &.#{$ns}-button { + height: $pt-button-height-large; + transition: background-color $pt-transition-duration $pt-transition-ease; } - .#{$ns}-icon { - margin-right: $pt-grid-size / 2; + &:not(:hover):not(:active) { + background-color: $code-background-color; + + .#{$ns}-dark & { + background-color: $dark-code-background-color; + } } } diff --git a/packages/docs-theme/src/tags/reactExample.tsx b/packages/docs-theme/src/tags/reactExample.tsx index 5cea0dc5fd..f93bd9759c 100644 --- a/packages/docs-theme/src/tags/reactExample.tsx +++ b/packages/docs-theme/src/tags/reactExample.tsx @@ -28,6 +28,8 @@ export const ReactExample: React.SFC = props => (
{props.example.render({ id: props.name })} Date: Sun, 13 May 2018 09:28:27 -0700 Subject: [PATCH 15/75] increase specificity of modifier colors so it works on dark --- packages/docs-theme/src/styles/_examples.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss index fbb9faaa2e..cd5f8d6b64 100644 --- a/packages/docs-theme/src/styles/_examples.scss +++ b/packages/docs-theme/src/styles/_examples.scss @@ -25,7 +25,7 @@ $dark-options-background-color: $dark-gray4; &:empty { display: none; } - } +} .docs-example-wrapper { @include pt-flex-container(column, $example-frame-spacing, $fill: ".docs-example"); @@ -118,10 +118,10 @@ $dark-options-background-color: $dark-gray4; } // colors for CSS modifiers -[data-modifier^=":"] { +.#{$ns}-code[data-modifier^=":"] { color: $attribute-modifier-color; } -[data-modifier^="."] { +.#{$ns}-code[data-modifier^="."] { color: $class-modifier-color; } From 670e570a711ea6e117e3d877931be5b5f9f74d73 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:33:57 -0700 Subject: [PATCH 16/75] tweak table example frame layout --- packages/docs-app/src/styles/_sections.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/docs-app/src/styles/_sections.scss b/packages/docs-app/src/styles/_sections.scss index 5a426b16d1..fe49cd2a99 100644 --- a/packages/docs-app/src/styles/_sections.scss +++ b/packages/docs-app/src/styles/_sections.scss @@ -33,8 +33,6 @@ } } -#{example("SliderExample")} - // give all Table examples a fixed height #{page("table", "^=")} { .docs-example-frame { @@ -42,9 +40,8 @@ } .docs-example-options { - border-left: none; - border-top-style: solid; - border-top-width: 1px; + margin-top: $pt-grid-size; + margin-left: 0; max-width: unset; } From 8303c58ae777d984cd7fc5b95d95032828671286 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:34:56 -0700 Subject: [PATCH 17/75] change regex matching of page function to more common use case --- packages/docs-app/src/styles/_sections.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs-app/src/styles/_sections.scss b/packages/docs-app/src/styles/_sections.scss index fe49cd2a99..39a93dae9f 100644 --- a/packages/docs-app/src/styles/_sections.scss +++ b/packages/docs-app/src/styles/_sections.scss @@ -4,13 +4,13 @@ @import "~@blueprintjs/core/src/common/variables"; // Generate a selector for a page ID by reference -@function page($ref, $comparator: "=") { - @return "[data-page-id#{$comparator}\"#{$ref}\"]"; +@function page($ref, $comparator: "$=") { + @return '[data-page-id#{$comparator}"#{$ref}"]'; } // Generate a selector for a React example by name @function example($NameExample, $comparator: "=") { - @return "[data-example-id#{$comparator}\"#{$NameExample}\"]"; + @return '[data-example-id#{$comparator}"#{$NameExample}"]'; } // CSS examples From 61b0e06fa2ce5a5a0918638e3a230b4304d3c26e Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:35:16 -0700 Subject: [PATCH 18/75] fixed size for collapse example so it doesn't overflow --- packages/docs-app/src/styles/_sections.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/docs-app/src/styles/_sections.scss b/packages/docs-app/src/styles/_sections.scss index 39a93dae9f..914a7d704e 100644 --- a/packages/docs-app/src/styles/_sections.scss +++ b/packages/docs-app/src/styles/_sections.scss @@ -25,6 +25,11 @@ .docs-example { justify-content: unset; } + + .#{$ns}-code-block { + width: $pt-grid-size * 40; + overflow: hidden; + } } #{example("NumericInputExtendedExample")} { From d42a8ea06914f3bf491e1553d1ec5205bada2ae5 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:35:50 -0700 Subject: [PATCH 19/75] tweak button group example markup --- .../src/components/button/_button-group.scss | 48 ++++++++++--------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/packages/core/src/components/button/_button-group.scss b/packages/core/src/components/button/_button-group.scss index 03d59802e7..0c414edd91 100644 --- a/packages/core/src/components/button/_button-group.scss +++ b/packages/core/src/components/button/_button-group.scss @@ -9,29 +9,31 @@ Button groups Markup: -
- Queries - Functions - - Options - -
-

-
- - - - - - - - - -
-

-
- - +
+
+ Queries + Functions + + Options + +
+


+
+ + + + + + + + + +
+


+
+ + +
.#{$ns}-large - Use large buttons From 684e2189a27693c0dfe357926974540a43e58d9f Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:36:32 -0700 Subject: [PATCH 20/75] misc scss syntax --- packages/docs-app/src/styles/_examples.scss | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss index 540dfc87f9..568e3fd1c0 100644 --- a/packages/docs-app/src/styles/_examples.scss +++ b/packages/docs-app/src/styles/_examples.scss @@ -4,7 +4,7 @@ @import "~@blueprintjs/icons/src/icons"; @import "~@blueprintjs/core/src/common/react-transition"; -// Specific Example Customizations +// Specific example customizations .docs-card-example { @include pt-flex-container(row, $pt-grid-size * 2); @@ -37,6 +37,7 @@ } } +// prettier-ignore .docs-overlay-example-transition { $overlay-example-width: $pt-grid-size * 40; $enter: ( @@ -61,6 +62,7 @@ $pt-transition-duration * 5, $before: "&" ); + top: 0; left: calc(50% - #{$overlay-example-width / 2}); margin: 10vh 0; @@ -322,7 +324,6 @@ } } - .docs-popover-position-example { .docs-popover-position-value-code-block { text-align: center; @@ -367,8 +368,16 @@ } @keyframes docs-wiggle-rotate { - 0% { transform: rotate(0); } - 25% { transform: rotate(-3deg); } - 75% { transform: rotate(3deg); } - 100% { transform: rotate(0); } + 0% { + transform: rotate(0); + } + 25% { + transform: rotate(-3deg); + } + 75% { + transform: rotate(3deg); + } + 100% { + transform: rotate(0); + } } From d6d27724b0a917ae7ebd68294454e4dd040aff07 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:36:47 -0700 Subject: [PATCH 21/75] remove unnecessary spacing between overlay options --- packages/docs-app/src/examples/core-examples/overlayExample.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/docs-app/src/examples/core-examples/overlayExample.tsx b/packages/docs-app/src/examples/core-examples/overlayExample.tsx index 7c3bd70570..267043a860 100644 --- a/packages/docs-app/src/examples/core-examples/overlayExample.tsx +++ b/packages/docs-app/src/examples/core-examples/overlayExample.tsx @@ -96,8 +96,6 @@ export class OverlayExample extends BaseExample { Use Portal , - ], - [ Date: Sun, 13 May 2018 09:37:02 -0700 Subject: [PATCH 22/75] remove unnecessary label in button example --- .../docs-app/src/examples/core-examples/buttonsExample.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx index 5f2ec6ccdf..bc8fe8083a 100644 --- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx +++ b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx @@ -86,9 +86,6 @@ export class ButtonsExample extends BaseExample { protected renderOptions() { return [ [ - , , Date: Sun, 13 May 2018 09:37:46 -0700 Subject: [PATCH 23/75] tweak markup of headings so they look better in example frame --- packages/core/src/_typography.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss index 6154f4ee07..fbff31c87f 100644 --- a/packages/core/src/_typography.scss +++ b/packages/core/src/_typography.scss @@ -11,12 +11,14 @@ Headings Markup: +

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading
+
Styleguide headings */ From b5325f4547dc46faa987774325e503477ba506d2 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:38:05 -0700 Subject: [PATCH 24/75] tweak markup of pre so they look better in example frame --- packages/core/src/_typography.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss index fbff31c87f..39574dbde5 100644 --- a/packages/core/src/_typography.scss +++ b/packages/core/src/_typography.scss @@ -221,17 +221,20 @@ a { Preformatted text Markup: +

Use the <code> tag for snippets of code.

Use the <pre> tag for blocks of code.
// code sample
-export function hasModifier(modifiers: ts.ModifiersArray, ...modifierKinds: ts.SyntaxKind[]) {
+export function hasModifier(
+  modifiers: ts.ModifiersArray,
+  ...modifierKinds: ts.SyntaxKind[],
+) {
   if (modifiers == null || modifierKinds == null) {
     return false;
   }
-  return modifiers.some((m) => {
-    return modifierKinds.some((k) => m.kind === k);
-  });
+  return modifiers.some(m => modifierKinds.some(k => m.kind === k));
 }
+
Styleguide preformatted */ From 0b8ffa25f42633475035f3261489ddc3c8188217 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:38:46 -0700 Subject: [PATCH 25/75] longer, better UI text example text --- packages/core/src/_typography.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss index 39574dbde5..a0a213535c 100644 --- a/packages/core/src/_typography.scss +++ b/packages/core/src/_typography.scss @@ -55,7 +55,10 @@ UI text Markup:
- Blueprint components react overlay date picker. Breadcrumbs dialog progress non-ideal state. + More than a decade ago, we set out to create products that would transform + the way organizations use their data. Today, our products are deployed at + the most critical government, commercial, and non-profit institutions in + the world to solve problems we hadn’t even dreamed of back then.
.#{$ns}-ui-text - Default Blueprint font styles, applied to the `` tag and available as a class for nested resets. From 6a7e0b58af01ffe48c0044ca8063d0ee755e0aef Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:39:24 -0700 Subject: [PATCH 26/75] remove blockquote wrapper in running text example --- packages/core/src/_typography.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss index a0a213535c..bf916c0481 100644 --- a/packages/core/src/_typography.scss +++ b/packages/core/src/_typography.scss @@ -98,7 +98,6 @@ Running text Markup:
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -113,7 +112,6 @@ Markup: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
.#{$ns}-text-large - Use larger font size. From 531100742e957f8157e92dbe34f2f12b46be29b5 Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:40:57 -0700 Subject: [PATCH 27/75] add small text modifier to typogaphy example --- packages/core/src/_typography.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss index bf916c0481..92d666bcaa 100644 --- a/packages/core/src/_typography.scss +++ b/packages/core/src/_typography.scss @@ -65,6 +65,7 @@ Markup: .#{$ns}-monospace-text - Use a monospace font (ideal for code). .#{$ns}-running-text - Increase line height ideal for longform text. See [Running text](#core/typography.running-text) below for additional features. .#{$ns}-text-large - Use a larger font size. +.#{$ns}-text-small - Use a smaller font size. .#{$ns}-text-muted - Change text color to a gentler gray. .#{$ns}-text-overflow-ellipsis - Truncate a single line of text with an ellipsis if it overflows its container. @@ -172,12 +173,17 @@ Styleguide running-text } } -// NOTE: this must be defined after .@ns-running-text in order to override font-size. +// NOTE: these must be defined after .@ns-running-text in order to override font-size. .#{$ns}-text-large { font-size: $pt-font-size-large; // line-height comes from .@ns-(ui|running)-text } +.#{$ns}-text-small { + font-size: $pt-font-size-small; + // line-height comes from .@ns-(ui|running)-text +} + /* Links From 79d445cabdd9b8162aa067a3b6d87f4efb5c12ad Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Sun, 13 May 2018 09:41:27 -0700 Subject: [PATCH 28/75] add disabled text to typography example --- packages/core/src/_typography.scss | 55 +++++++++++++++++------------- 1 file changed, 32 insertions(+), 23 deletions(-) diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss index 92d666bcaa..cc2aea4e21 100644 --- a/packages/core/src/_typography.scss +++ b/packages/core/src/_typography.scss @@ -12,12 +12,12 @@ Headings Markup:
-

H1 heading

-

H2 heading

-

H3 heading

-

H4 heading

-
H5 heading
-
H6 heading
+

H1 heading

+

H2 heading

+

H3 heading

+

H4 heading

+
H5 heading
+
H6 heading
Styleguide headings @@ -67,6 +67,7 @@ Markup: .#{$ns}-text-large - Use a larger font size. .#{$ns}-text-small - Use a smaller font size. .#{$ns}-text-muted - Change text color to a gentler gray. +.#{$ns}-text-disabled - Change text color to a transparent, faded gray. .#{$ns}-text-overflow-ellipsis - Truncate a single line of text with an ellipsis if it overflows its container. Styleguide ui-text @@ -90,6 +91,14 @@ Styleguide ui-text } } +.#{$ns}-text-disabled { + color: $pt-text-color-disabled; + + .#{$ns}-dark & { + color: $pt-dark-text-color-disabled; + } +} + .#{$ns}-text-overflow-ellipsis { @include overflow-ellipsis(); } @@ -99,20 +108,20 @@ Running text Markup:
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. -

-
    -
  • Item the first.
    • -
  • Item the second.
    • -
  • Item the third.
    • -
-

New section

-

- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. -

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
    +
  • Item the first.
    • +
  • Item the second.
    • +
  • Item the third.
    • +
+

New section

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. +

.#{$ns}-text-large - Use larger font size. @@ -229,9 +238,9 @@ Preformatted text Markup:
-

Use the <code> tag for snippets of code.

-
Use the <pre> tag for blocks of code.
-
// code sample
+  
Use the <code> tag for snippets of code.

+  
Use the <pre> tag for blocks of code.

+  
// code sample
 export function hasModifier(
   modifiers: ts.ModifiersArray,
   ...modifierKinds: ts.SyntaxKind[],

From 210368644e1f008af2d05636e34fa4f6998118df Mon Sep 17 00:00:00 2001
From: Antoine Llorca 
Date: Sun, 13 May 2018 10:02:51 -0700
Subject: [PATCH 29/75] sentence case

---
 packages/core/src/components/button/button-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/button/button-group.md b/packages/core/src/components/button/button-group.md
index 5a7c4f41a6..a3919b2710 100644
--- a/packages/core/src/components/button/button-group.md
+++ b/packages/core/src/components/button/button-group.md
@@ -54,7 +54,7 @@ It exposes shorthand props for CSS modifier classes and supports the full range
 
 @reactExample ButtonGroupExample
 
-@### Usage with Popovers
+@### Usage with popovers
 
 `Button`s inside a `ButtonGroup` can optionally be wrapped with a [`Popover`](#core/components/popover). The following example demonstrates this composition:
 

From bd1604653a19da8ff6b150112cb4972aaef7b2f1 Mon Sep 17 00:00:00 2001
From: Antoine Llorca 
Date: Sun, 13 May 2018 10:07:11 -0700
Subject: [PATCH 30/75] more spacing below view source link

---
 packages/docs-theme/src/styles/_examples.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss
index cd5f8d6b64..eb1769cf95 100644
--- a/packages/docs-theme/src/styles/_examples.scss
+++ b/packages/docs-theme/src/styles/_examples.scss
@@ -100,7 +100,7 @@ $dark-options-background-color: $dark-gray4;
 .docs-example-view-source {
   display: block;
   margin-top: $example-frame-spacing;
-  margin-bottom: $pt-grid-size * 2;
+  margin-bottom: $pt-grid-size * 4;
   border-radius: $example-frame-border-radius;
 
   &.#{$ns}-button {

From cf924e3ec216f08dd0ceb4dbdda0d344566bfade Mon Sep 17 00:00:00 2001
From: Antoine Llorca 
Date: Sun, 13 May 2018 12:44:03 -0700
Subject: [PATCH 31/75] lint

---
 packages/docs-app/src/examples/core-examples/buttonsExample.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
index bc8fe8083a..b7c9772d0e 100644
--- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 
-import { AnchorButton, Button, Classes, Code, Intent, Switch } from "@blueprintjs/core";
+import { AnchorButton, Button, Code, Intent, Switch } from "@blueprintjs/core";
 import { BaseExample, handleBooleanChange, handleStringChange } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";

From 43fe45ef538eb58abeebeb038903a34f2737ffed Mon Sep 17 00:00:00 2001
From: Antoine Llorca 
Date: Sun, 13 May 2018 13:03:59 -0700
Subject: [PATCH 32/75] simplify text example markup

---
 .../src/examples/core-examples/textExample.tsx        | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/textExample.tsx b/packages/docs-app/src/examples/core-examples/textExample.tsx
index e886a305da..2b86e3a5b0 100644
--- a/packages/docs-app/src/examples/core-examples/textExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/textExample.tsx
@@ -25,18 +25,13 @@ export class TextExample extends BaseExample {
 
     protected renderExample() {
         return (
-            

+            <>
                 
                     {this.state.textContent}
                      
                 
-