-+- 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. +
+first.+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. +
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[]) {
+
+ 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[],
+) {
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
*/
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:
-
-
-
-
-
-
-
+
.#{$ns}-large - Use large buttons
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:
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/dialog/dialog.md b/packages/core/src/components/dialog/dialog.md
index 3d05dbc9c5..0e06b64a82 100644
--- a/packages/core/src/components/dialog/dialog.md
+++ b/packages/core/src/components/dialog/dialog.md
@@ -27,51 +27,13 @@ There are two ways to render dialogs:
`Dialog` is a stateless React component. The children you provide to this component
are rendered as contents inside the `.@ns-dialog` element.
-```tsx
-interface IDialogExampleState {
- isOpen: boolean;
-}
-
-class DialogExample extends React.Component<{}, IDialogExampleState> {
- public state = { isOpen: false };
-
- public render() {
- return (
-
-
-
-
- );
- }
-
- private toggleDialog = () => this.setState({ isOpen: !this.state.isOpen });
-}
-```
-
@interface IDialogProps
@## CSS API
You can create dialogs manually using the HTML markup and `@ns-dialog-*` classes below.
-However, you should use the dialog [JavaScript APIs](#core/components/dialog.javascript-api) whenever possible,
-as they automatically generate some of this markup.
+However, you should use the dialog [JavaScript APIs](#core/components/dialog.javascript-api)
+whenever possible, as they automatically generate some of this markup.
More examples of dialog content are shown below.
diff --git a/packages/core/src/components/forms/_controls.scss b/packages/core/src/components/forms/_controls.scss
index e154d37148..6dc76e55c7 100644
--- a/packages/core/src/components/forms/_controls.scss
+++ b/packages/core/src/components/forms/_controls.scss
@@ -285,6 +285,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
&.#{$ns}-align-right {
padding-right: $switch-width + $pt-grid-size;
+ padding-left: 0;
}
input:checked ~ .#{$ns}-control-indicator {
@@ -402,6 +403,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
&.#{$ns}-align-right {
padding-right: $switch-width-large + $pt-grid-size;
+ padding-left: 0;
}
}
}
@@ -541,22 +543,24 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
Inline labels
Markup:
-
-
-
-
+
+
+
+
+
+
Styleguide checkbox-inline
*/
diff --git a/packages/core/src/components/forms/_form-group.scss b/packages/core/src/components/forms/_form-group.scss
index bfd101017d..c1d24faff3 100644
--- a/packages/core/src/components/forms/_form-group.scss
+++ b/packages/core/src/components/forms/_form-group.scss
@@ -8,93 +8,95 @@
Form groups
Markup:
-
-
-
-
- Helper text with details / user feedback
+
+
+
+
+
+ Helper text with details / user feedback
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Please enter a value
- Please enter a value
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Helper text with details / user feedback
- Helper text with details / user feedback
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Helper text with details / user feedback
- Helper text with details / user feedback
-
-
-
-
-
-
-
-
-
diff --git a/packages/core/src/components/forms/_label.scss b/packages/core/src/components/forms/_label.scss
index 1881852371..47119f5b2c 100644
--- a/packages/core/src/components/forms/_label.scss
+++ b/packages/core/src/components/forms/_label.scss
@@ -7,19 +7,21 @@
Labels
Markup:
-
-
+
+
+
+
.#{$ns}-inline - Inline
@@ -29,7 +31,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,
@@ -74,27 +77,29 @@ label.#{$ns}-label {
Disabled labels
Markup:
-
-
-
+
+
+
+
+
Styleguide label-disabled
*/
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
- 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/core/src/components/tree/tree.md b/packages/core/src/components/tree/tree.md
index fb71ebdea0..91d749ef7b 100644
--- a/packages/core/src/components/tree/tree.md
+++ b/packages/core/src/components/tree/tree.md
@@ -6,8 +6,8 @@ Trees display hierarchical data.
@## CSS API
-See below for the [JavaScript API](#core/components/tree.javascript-api) for the `Tree` React component. However, you
-may also use the provided styles by themselves, without using the component.
+See below for the [JavaScript API](#core/components/tree.javascript-api) for the `Tree` React
+component. However, you may also use the provided styles by themselves, without using the component.
Note that the following examples set a maximum width and background color for the tree;
@@ -22,8 +22,8 @@ The `Tree` component is available in the **@blueprintjs/core** package.
Make sure to review the [getting started docs for installation info](#blueprint/getting-started).
`Tree` is a stateless component. Its contents are dictated by the `contents` prop, which is an array
-of `ITreeNode`s (see [below](#components/tree.tree-node-interface)). The tree is multi-rooted if `contents`
-contains more than one top-level object.
+of `ITreeNode`s (see [below](#components/tree.tree-node-interface)). The tree is multi-rooted if
+`contents` contains more than one top-level object.
A variety of interaction callbacks are also exposed as props. All interaction callbacks supply a
parameter `nodePath`, which is an array of numbers representing a node's position in the tree. For
@@ -33,7 +33,7 @@ example, `[2, 0]` represents the first child (`0`) of the third top-level node (
@### Instance methods
-Tree
+Tree
* `getNodeContentElement(nodeId: string | number): HTMLElement | undefined` –
Returns the underlying HTML element of the `Tree` node with an id of `nodeId`.
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 (
-
+ <>
{
(this.toaster = ref)} />
-
+
);
}
diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
index 12cb445f55..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";
@@ -52,7 +52,7 @@ export class ButtonsExample extends BaseExample {
const { iconOnly, wiggling, ...buttonProps } = this.state;
return (
-
+ <>
Button
@@ -79,16 +79,13 @@ export class ButtonsExample extends BaseExample {
{...buttonProps}
/>
-
+
);
}
protected renderOptions() {
return [
[
- ,
{
const { iconName } = this.props;
return (
+
);
}
protected renderOptions() {
const options = super.renderOptions();
// delete "hasBackdrop" switch from option controls
- options[1].splice(2, 1);
+ options[0].splice(-1, 1);
return options;
}
}
diff --git a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
index 2831246306..9fa0ef739e 100644
--- a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
@@ -84,7 +84,7 @@ export class EditableTextExample extends BaseExample
onChange={this.toggleSelectAll}
/>,
- Swap keypress for confirm and newline
(multiline only)
+ Swap keypress for confirm and newline (multiline only)
,
],
];
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 (
-
+
{
- public state: IHotkeyTesterState = { combo: null };
+ public state: IHotkeyTesterState = {
+ combo: null,
+ };
protected renderExample() {
return (
-
+
{this.renderKeyCombo()}
);
@@ -30,9 +32,10 @@ export class HotkeyTester extends BaseExample {
return "Click here then press a key combo";
} else {
return (
-
- {combo}
-
+ <>
+ {combo}
+
);
}
}
@@ -44,4 +47,6 @@ export class HotkeyTester extends BaseExample {
const combo = getKeyComboString(e.nativeEvent as KeyboardEvent);
this.setState({ combo });
};
+
+ private handleBlur = () => this.setState({ combo: null });
}
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 (
-
- {
const resultsTag = {Math.floor(10000 / Math.max(1, Math.pow(tagValue.length, 2)))} ;
return (
-
-
-
Use Portal
,
@@ -199,13 +199,14 @@ export class PopoverExample extends BaseExample {
options={INTERACTION_KINDS}
onChange={this.handleInteractionChange}
/>,
+ ],
+ [
,
],
[
Modifiers
,
@@ -240,11 +241,19 @@ export class PopoverExample extends BaseExample {
,
- ,
+ ,
],
];
}
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 (
- {
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..d35f922d98 100644
--- a/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx
@@ -24,17 +24,15 @@ export class RangeSliderExample extends BaseExample {
protected renderExample() {
return (
-
- {
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 [
- [ {
- Tabs Example
+ Tabs example
{/* controlled mode & no panels (see h1 below): */}
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/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}
-
-
+
+
);
}
}
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)}
{
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
+
{
protected renderOptions() {
return [
[
+ Props
,
{
/>,
],
[
+ Example
,
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/index.scss b/packages/docs-app/src/index.scss
index c8ff480806..6e1a88cf5c 100644
--- a/packages/docs-app/src/index.scss
+++ b/packages/docs-app/src/index.scss
@@ -26,7 +26,6 @@ Licensed under the terms of the LICENSE file distributed with this project.
@import "styles/icons";
@import "styles/nav";
@import "styles/resources";
-@import "styles/sections";
.docs-releases-menu .#{$ns}-menu {
diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
index 7ee1071a3a..94379443b0 100644
--- a/packages/docs-app/src/styles/_examples.scss
+++ b/packages/docs-app/src/styles/_examples.scss
@@ -4,57 +4,48 @@
@import "~@blueprintjs/icons/src/icons";
@import "~@blueprintjs/core/src/common/react-transition";
-// Specific Example Customizations
-
-.docs-example-wrapper {
- .#{$ns}-slider:not(:last-child) {
- margin-bottom: $options-margin;
- }
+// Generate a selector for a page ID by reference
+@function page($ref, $comparator: "$=") {
+ @return '[data-page-id#{$comparator}"#{$ref}"]';
+}
- .#{$ns}-callout {
- margin: 0;
- }
+// Generate a selector for a React example by name
+@function example($NameExample, $comparator: "=") {
+ @return '[data-example-id#{$comparator}"#{$NameExample}"]';
}
-.docs-card-example {
- display: flex;
- justify-content: space-between;
+// Specific example customizations
- .#{$ns}-card {
- width: floor(($content-width - $pt-grid-size * 10) / 3);
+//
+// CORE
+//
- &:hover a {
- text-decoration: underline;
- }
-
- p {
- margin: 0;
- }
- }
+@keyframes docs-wiggle-rotate {
+ 0% { transform: rotate(0); }
+ 25% { transform: rotate(-3deg); }
+ 75% { transform: rotate(3deg); }
+ 100% { transform: rotate(0); }
}
-.docs-datetime-example {
- > .#{$ns}-datepicker {
- margin-bottom: $pt-grid-size * 2;
- }
+#{page("tree")} .#{$ns}-tree {
+ width: $pt-grid-size * 35;
+}
- > .#{$ns}-datetimepicker {
- display: inline-block;
- margin-bottom: $pt-grid-size * 2;
- }
-
- .#{$ns}-icon-arrow-right {
- margin: 0 ($pt-grid-size / 2);
+#{example("ButtonsExample")} {
+ .docs-wiggle {
+ animation: docs-wiggle-rotate $pt-transition-duration $pt-transition-ease infinite;
}
}
-.docs-dialog-example {
- display: flex;
- align-items: center;
- height: $pt-grid-size * 6;
+.docs-card-example {
+ @include pt-flex-container(row, $pt-grid-size * 2);
- .#{$ns}-button + .#{$ns}-button {
- margin-left: $pt-grid-size;
+ .#{$ns}-card {
+ flex: 1 1 auto;
+
+ &:hover a {
+ text-decoration: underline;
+ }
}
}
@@ -66,55 +57,28 @@
}
}
-.docs-overlay-example-transition {
- $overlay-example-width: $pt-grid-size * 40;
- $enter: (
- transform: (translateY(-50vh) rotate(-10deg), translateY(0) rotate(0deg))
- );
- $leave: (
- transform: (translateY(150vh) rotate(-20deg), translateY(0) rotate(0deg))
- );
+#{example("CollapseExample")} {
+ .docs-example {
+ justify-content: unset;
+ }
- @include react-transition-phase(
- "#{$ns}-overlay",
- "enter",
- $enter,
- $pt-transition-duration * 3,
- $pt-transition-ease-bounce,
- $before: "&"
- );
- @include react-transition-phase(
- "#{$ns}-overlay",
- "exit",
- $leave,
- $pt-transition-duration * 5,
- $before: "&"
- );
- top: 0;
- left: calc(50% - #{$overlay-example-width / 2});
- margin: 10vh 0;
- width: $overlay-example-width;
+ .#{$ns}-code-block {
+ width: $pt-grid-size * 40;
+ overflow: hidden;
+ }
}
.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;
+ @include pt-flex-container(column, $pt-grid-size * 2);
align-items: center;
justify-content: center;
-
- border-radius: $pt-border-radius;
- background: $light-gray3;
- padding: $options-margin;
-
- .#{$ns}-dark & {
- background: $dark-gray5;
- }
+ 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,68 +102,151 @@
}
}
-.docs-input-group-example {
- .docs-flex-column {
- margin-right: $options-margin;
+.docs-hotkey-piano-example {
+ opacity: 0.4;
+ transition: opacity ($pt-transition-duration * 2) $pt-transition-ease;
+
+ &:hover {
+ opacity: 0.6;
+ cursor: pointer;
}
- .#{$ns}-input-group {
- width: $pt-grid-size * 30;
+ &:focus {
+ opacity: 1;
+ cursor: default;
+ }
- &:first-child {
- margin-bottom: $options-margin;
+ > :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;
}
}
-}
-.docs-progress-example {
- .docs-react-example {
- flex-direction: column;
+ .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-slider-example {
- width: 100%;
+#{example("HotkeyTester")} {
+ .docs-hotkey-tester {
+ @include pt-flex-container(column, $pt-grid-size);
+ flex: 1 1;
+ align-items: center;
+ justify-content: space-around;
+ opacity: 0.4;
+ border: 2px solid rgba($gray3, 0.8);
+ border-radius: $pt-border-radius * 2;
+ background: rgba($gray3, 0.2);
+ max-width: 70%;
+ min-height: $pt-grid-size * 12;
+ padding: $pt-grid-size * 2;
+ transition: all $pt-transition-duration $pt-transition-ease;
- &.docs-slider-example-vertical {
- display: flex;
+ &:hover {
+ opacity: 0.6;
+ cursor: pointer;
+ }
- .#{$ns}-slider {
- margin-right: $pt-grid-size * 10;
- margin-bottom: 0;
+ &:focus {
+ opacity: 1;
+ border: 2px solid rgba($blue3, 0.6);
+ background: rgba($blue3, 0.1);
+ cursor: default;
+ color: map-get($pt-intent-text-colors, "primary");
+
+ .#{$ns}-dark & {
+ border: 2px solid rgba($blue4, 0.6);
+ background: rgba($blue4, 0.1);
+ color: map-get($pt-dark-intent-text-colors, "primary");
+ }
}
}
}
-.docs-tabs-example .#{$ns}-navbar .#{$ns}-tab {
- line-height: $pt-navbar-height;
+.docs-menu-example .#{$ns}-menu {
+ max-width: 280px;
}
-.docs-example-wrapper .#{$ns}-navbar {
- position: static;
- width: 100%;
-}
+// prettier-ignore
+.docs-overlay-example-transition {
+ $overlay-example-width: $pt-grid-size * 40;
+ $enter: (
+ transform: (translateY(-50vh) rotate(-10deg), translateY(0) rotate(0deg))
+ );
+ $leave: (
+ transform: (translateY(150vh) rotate(-20deg), translateY(0) rotate(0deg))
+ );
-.docs-tag-example .#{$ns}-tag:not(:last-child) {
- margin-right: $pt-grid-size * 0.5;
-}
+ @include react-transition-phase(
+ "#{$ns}-overlay",
+ "enter",
+ $enter,
+ $pt-transition-duration * 3,
+ $pt-transition-ease-bounce,
+ $before: "&"
+ );
+ @include react-transition-phase(
+ "#{$ns}-overlay",
+ "exit",
+ $leave,
+ $pt-transition-duration * 5,
+ $before: "&"
+ );
-.#{$ns}-progress-bar.docs-toast-progress {
- margin-top: $pt-grid-size / 2;
- margin-bottom: 0;
+ top: 0;
+ left: calc(50% - #{$overlay-example-width / 2});
+ margin: 10vh 0;
+ width: $overlay-example-width;
}
.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 +254,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
- min-width: 200%;
- min-height: 200%;
+ width: 1000px;
+ height: 1500px;
}
.#{$ns}-popover & {
@@ -217,7 +264,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 +275,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 {
@@ -272,6 +313,28 @@
font-weight: 600;
}
}
+
+ .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-popover-minimal-example {
@@ -342,20 +405,48 @@
}
}
+.#{$ns}-progress-bar.docs-toast-progress {
+ margin-top: $pt-grid-size / 2;
+ margin-bottom: 0;
+}
+
+.docs-tabs-example .#{$ns}-navbar .#{$ns}-tab {
+ line-height: $pt-navbar-height;
+}
+
.docs-tooltip-example {
> div {
margin-bottom: $pt-grid-size;
}
}
-.docs-icon-example {
+//
+// DATETIME
+//
+
+#{example("DateRangePickerExample")} {
+ flex-direction: column;
+
+ .docs-example-options {
+ margin-top: $pt-grid-size;
+ margin-left: 0;
+ max-width: unset;
+ }
+}
+
+.docs-datetime-example {
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: center;
-}
-.docs-menu-example .#{$ns}-menu {
- max-width: 280px;
+ > :last-child:not(:first-child) {
+ // space above date tags, if present
+ margin-top: $pt-grid-size * 2;
+ }
+
+ .#{$ns}-icon-arrow-right {
+ margin: 0 ($pt-grid-size / 2);
+ }
}
.docs-date-range {
@@ -363,18 +454,25 @@
align-items: center;
}
-// only for date input and date range input examples
-.#{$ns}-popover-wrapper + .docs-date-range {
- margin-left: $pt-grid-size * 2;
-}
+//
+// TABLE
+//
-.docs-wiggle {
- animation: docs-wiggle-rotate $pt-transition-duration $pt-transition-ease infinite;
-}
+#{page("table", "^=")} {
+ // make all tables the same width & height
+ .#{$ns}-table-container {
+ width: 100%;
+ height: $pt-grid-size * 36;
+ }
-@keyframes docs-wiggle-rotate {
- 0% { transform: rotate(0); }
- 25% { transform: rotate(-3deg); }
- 75% { transform: rotate(3deg); }
- 100% { transform: rotate(0); }
+ // options appear below table (so tables can occupy full width)
+ .docs-example-frame {
+ flex-direction: column;
+ }
+
+ .docs-example-options {
+ margin-top: $pt-grid-size;
+ margin-left: 0;
+ max-width: unset;
+ }
}
diff --git a/packages/docs-app/src/styles/_icons.scss b/packages/docs-app/src/styles/_icons.scss
index b9d7d4ccc3..71e94d7454 100644
--- a/packages/docs-app/src/styles/_icons.scss
+++ b/packages/docs-app/src/styles/_icons.scss
@@ -20,9 +20,9 @@ $icons-per-row: 5;
justify-content: space-between;
margin-bottom: $pt-grid-size * 5;
- h3 {
+ .#{$ns}-heading {
flex: 1 1 100%;
- margin-top: 0;
+ margin: 0 0 $pt-grid-size * 2;
text-transform: capitalize;
}
}
diff --git a/packages/docs-app/src/styles/_nav.scss b/packages/docs-app/src/styles/_nav.scss
index a3e129ec2d..0b57b4082c 100644
--- a/packages/docs-app/src/styles/_nav.scss
+++ b/packages/docs-app/src/styles/_nav.scss
@@ -4,27 +4,27 @@
$pkg-icon-width: 24px;
$package-colors: (
- "blueprint": $gray1,
- "core": $blue3,
- "datetime": $red3,
- "icons": $gold4,
- "select": $cobalt3,
- "table": $forest3,
- "timezone": $vermilion4,
- "labs": $indigo3,
- "resources": $orange3,
+ "blueprint": ($gray1, $black),
+ "core": ($blue3, $blue2),
+ "datetime": ($red3, $red2),
+ "icons": ($gold4, $gold3),
+ "select": ($cobalt3, $cobalt2),
+ "table": ($forest3, $forest2),
+ "timezone": ($vermilion4, $vermilion3),
+ "labs": ($indigo3, $indigo2),
+ "resources": ($orange3, $orange2),
);
$dark-package-colors: (
- "blueprint": $gray3,
- "core": $blue4,
- "datetime": $red4,
- "icons": $gold4,
- "select": $cobalt4,
- "table": $forest4,
- "timezone": $vermilion5,
- "labs": $indigo4,
- "resources": $orange5,
+ "blueprint": ($gray3, $white),
+ "core": ($blue4, $blue5),
+ "datetime": ($red4, $red5),
+ "icons": ($gold4, $gold5),
+ "select": ($cobalt4, $cobalt5),
+ "table": ($forest4, $forest5),
+ "timezone": ($vermilion5, $vermilion5),
+ "labs": ($indigo4, $indigo5),
+ "resources": ($orange5, $orange5),
);
.docs-logo {
@@ -80,13 +80,16 @@ $dark-package-colors: (
.#{$ns}-menu-item {
flex: 1 1 auto;
+ background-color: transparent;
text-transform: uppercase;
font-weight: 600;
}
@each $package-name in map-keys($package-colors) {
- $color: map-get($package-colors, $package-name);
- $dark-color: map-get($dark-package-colors, $package-name);
+ $color: nth(map-get($package-colors, $package-name), 1);
+ $dark-color: nth(map-get($dark-package-colors, $package-name), 1);
+ $text-color: nth(map-get($package-colors, $package-name), 2);
+ $dark-text-color: nth(map-get($dark-package-colors, $package-name), 2);
&[data-route="#{$package-name}"] {
.docs-nav-package-icon {
@@ -104,10 +107,10 @@ $dark-package-colors: (
&.docs-nav-expanded {
.#{$ns}-menu-item,
+ .docs-nav-menu .#{$ns}-menu-item.#{$ns}-active {
- color: $color;
+ color: $text-color;
.#{$ns}-dark & {
- color: $dark-color;
+ color: $dark-text-color;
}
}
diff --git a/packages/docs-app/src/styles/_sections.scss b/packages/docs-app/src/styles/_sections.scss
deleted file mode 100644
index 94517a356f..0000000000
--- a/packages/docs-app/src/styles/_sections.scss
+++ /dev/null
@@ -1,301 +0,0 @@
-// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the terms of the LICENSE file distributed with this project.
-
-@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}\"]";
-}
-
-// 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;
- }
- }
-}
-
-// 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;
- }
- }
-}
-
-// 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;
- }
-}
-
-#{example("NumericInputExtendedExample")} {
- .docs-react-example input {
- width: $pt-grid-size * 23;
- }
-}
-
-#{example("TreeExample")} {
- .#{$ns}-tree {
- background-color: $white;
- width: $pt-grid-size * 35;
-
- .#{$ns}-dark & {
- background-color: $dark-gray4;
- }
- }
-}
-
-// give all Table examples a fixed height
-#{page("table")},
-#{page("features")} {
- .docs-react-example {
- width: 100%;
- height: $pt-grid-size * 30;
- }
-
- // 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;
- }
- }
-}
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/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}
);
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..f35d150339 100644
--- a/packages/docs-theme/src/components/typescript/interfaceTable.tsx
+++ b/packages/docs-theme/src/components/typescript/interfaceTable.tsx
@@ -6,7 +6,15 @@
import { Classes, Intent, IProps, Tag } from "@blueprintjs/core";
import classNames from "classnames";
-import { isTsProperty, ITsClass, ITsInterface, ITsMethod, ITsProperty, ITsSignature } from "documentalist/dist/client";
+import {
+ isTag,
+ isTsProperty,
+ ITsClass,
+ ITsInterface,
+ ITsMethod,
+ ITsProperty,
+ ITsSignature,
+} from "documentalist/dist/client";
import * as React from "react";
import { DocumentationContextTypes, IDocumentationContext } from "../../common/context";
import { ModifierTable } from "../modifierTable";
@@ -50,6 +58,11 @@ export class InterfaceTable extends React.PureComponent {
const { flags: { isDeprecated, isExternal, isOptional }, name } = entry;
const { documentation } = isTsProperty(entry) ? entry : entry.signatures[0];
+ // ignore props marked with `@internal` tag (this tag is in contents instead of in flags)
+ if (documentation.contents.some(val => isTag(val) && val.tag === "internal")) {
+ return null;
+ }
+
const classes = classNames("docs-prop-name", {
"docs-prop-is-deprecated": isDeprecated === true || typeof isDeprecated === "string",
"docs-prop-is-internal": !isExternal,
@@ -75,7 +88,7 @@ export class InterfaceTable extends React.PureComponent {
{typeInfo}
{renderBlock(documentation)}
- {this.renderTags(entry)}
+ {this.renderTags(entry)}
);
diff --git a/packages/docs-theme/src/styles/_content.scss b/packages/docs-theme/src/styles/_content.scss
index 1bbe20dbbd..05dfc337c6 100644
--- a/packages/docs-theme/src/styles/_content.scss
+++ b/packages/docs-theme/src/styles/_content.scss
@@ -10,10 +10,6 @@ $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;
-
// title of a section
.docs-title {
position: relative;
@@ -53,79 +49,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 d50a91361f..f372d48e0b 100644
--- a/packages/docs-theme/src/styles/_examples.scss
+++ b/packages/docs-theme/src/styles/_examples.scss
@@ -1,34 +1,125 @@
// 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
-.docs-react-example,
-.docs-react-example-row,
-.docs-react-options, {
- @include pt-flex-container(row, $pt-grid-size * 5);
+$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-gray3;
+$dark-code-background-color: $dark-gray5;
+$dark-options-background-color: $dark-gray5;
+
+// full-bleed wrapper for example
+.docs-example-frame {
+ @include pt-flex-container(row, $fill: ".docs-example");
+ position: relative;
+ margin-top: $content-padding * 2;
+ width: 100%;
+
+ &:empty {
+ display: none;
+ }
}
-.docs-react-options {
- margin-top: $options-margin;
+.docs-example {
+ display: flex;
+ flex: 1 1 auto;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-around;
+ border-radius: $example-frame-border-radius;
+ background: $example-background-color;
+ // https://css-tricks.com/flexbox-truncated-text/#article-header-id-3
+ min-width: 0;
+ max-width: 100%;
+ padding: $example-spacing / 2;
+
+ .#{$ns}-dark & {
+ background: $dark-example-background-color;
+ }
+
+ > * {
+ margin: $example-spacing / 2;
+ }
+}
+
+.docs-example-options {
+ @include pt-flex-container(column, $pt-grid-size);
+ flex: 0 0 auto;
+ margin-left: $example-frame-spacing;
+ 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;
// hide when empty (div is always rendered)
&:empty {
display: none;
}
+
+ .docs-prop-description {
+ font-size: $pt-font-size-small;
+ }
+
+ .#{$ns}-control:last-child,
+ .#{$ns}-form-group:last-child,
+ .#{$ns}-label:last-child {
+ margin-bottom: 0;
+ }
+
+ .#{$ns}-dark & {
+ background-color: $dark-options-background-color;
+ }
}
-.docs-react-options-column .#{$ns}-control:not(.#{$ns}-inline) {
- margin-right: 0;
+.docs-example-markup {
+ margin-top: $example-frame-spacing;
+
+ .editor {
+ margin: 0;
+ border-radius: $example-frame-border-radius;
+ box-shadow: none;
+ background: $code-background-color;
+
+ .#{$ns}-dark & {
+ box-shadow: none;
+ background: $dark-code-background-color;
+ }
+ }
}
-.docs-inline-example {
- display: inline-block;
- margin-right: $options-margin * 2;
- vertical-align: top;
+.docs-example-view-source {
+ display: block;
+ margin-top: $example-frame-spacing;
+ margin-bottom: $pt-grid-size * 4;
+ border-radius: $example-frame-border-radius;
- &:last-child {
- margin-right: 0;
+ &.#{$ns}-button {
+ height: $pt-button-height-large;
+ transition: background-color $pt-transition-duration $pt-transition-ease;
}
+
+ &:not(:hover):not(:active) {
+ background-color: $code-background-color;
+
+ .#{$ns}-dark & {
+ background-color: $dark-code-background-color;
+ }
+ }
+}
+
+// colors for CSS modifiers
+.#{$ns}-code[data-modifier^=":"] {
+ color: $attribute-modifier-color;
+}
+
+.#{$ns}-code[data-modifier^="."] {
+ color: $class-modifier-color;
}
diff --git a/packages/docs-theme/src/styles/_layout.scss b/packages/docs-theme/src/styles/_layout.scss
index 024cfd5d77..582cbafef3 100644
--- a/packages/docs-theme/src/styles/_layout.scss
+++ b/packages/docs-theme/src/styles/_layout.scss
@@ -144,7 +144,6 @@ Lefthand navigation menu
}
.docs-nav-section {
- opacity: 0.5;
margin-top: $pt-grid-size * 2;
margin-bottom: $pt-grid-size;
text-transform: uppercase;
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;
diff --git a/packages/docs-theme/src/styles/_props.scss b/packages/docs-theme/src/styles/_props.scss
index 3882926407..a43686468d 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;
}
}
@@ -111,6 +107,10 @@
}
.docs-modifiers-table {
+ .docs-section & .#{$ns}-html-table {
+ margin-top: $pt-grid-size;
+ }
+
th:first-child,
td:first-child {
padding-left: 0;
diff --git a/packages/docs-theme/src/styles/_variables.scss b/packages/docs-theme/src/styles/_variables.scss
index b53be991b5..b30ee0a5fc 100644
--- a/packages/docs-theme/src/styles/_variables.scss
+++ b/packages/docs-theme/src/styles/_variables.scss
@@ -10,12 +10,9 @@ $container-padding: $pt-grid-size / 2;
$sidebar-width: $pt-grid-size * 27;
$sidebar-padding: $pt-grid-size * 1.5;
$sidebar-background-color: $white;
-$dark-sidebar-background-color: $dark-gray4;
+$dark-sidebar-background-color: $dark-gray5;
$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;
+$dark-content-background-color: $dark-gray4;
diff --git a/packages/docs-theme/src/tags/css.tsx b/packages/docs-theme/src/tags/css.tsx
index 8fcb3047c3..328d5242e2 100644
--- a/packages/docs-theme/src/tags/css.tsx
+++ b/packages/docs-theme/src/tags/css.tsx
@@ -4,17 +4,22 @@
* Licensed under the terms of the LICENSE file distributed with this project.
*/
-import { Classes, Code } from "@blueprintjs/core";
+import { Checkbox, Classes, Code } from "@blueprintjs/core";
+import classNames from "classnames";
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 +28,55 @@ 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;
diff --git a/packages/docs-theme/src/tags/reactExample.tsx b/packages/docs-theme/src/tags/reactExample.tsx
index d06ab7a75d..64c4c6c322 100644
--- a/packages/docs-theme/src/tags/reactExample.tsx
+++ b/packages/docs-theme/src/tags/reactExample.tsx
@@ -25,9 +25,11 @@ export interface IExampleProps {
}
export const ReactExample: React.SFC = props => (
-
+ <>
{props.example.render({ id: props.name })}
= props => (
target="_blank"
text="View source on GitHub"
/>
-
+
);
ReactExample.displayName = "Docs2.ReactExample";