[docs] new example frame! #2489

giladgray · 2018-05-12T00:40:45Z

slick container for examples puts options in a column on the right:

completely revamp CSS example renderer so it works like the React examples, with switches for every modifier:

next steps:

review examples carefully. let's fix any that look weird.

to do

~~Large buttons with icon only are broken--46px wide instead of 40px~~ separate PR please
Tabs example produces console errors
Dialog prop table hasBackdrop throws Unknown @tag: internal
~~“Loading column” select in Table example too wide~~ that's just flex
DatePicker example is oversized
ensureElement doesn't work with fragments (seen in NIS example)
~~Move Usage with popovers markup to example frame~~ not in this pr

…re repetition

giladgray · 2018-05-12T00:41:57Z

packages/docs-theme/src/styles/_content.scss

@@ -53,79 +53,6 @@ $dark-example-background-color: $dark-content-background-color;
  }
 }

-.view-example-source {


all this moved to _examples.scss below

giladgray · 2018-05-12T00:42:19Z

packages/docs-theme/src/styles/_examples.scss

+}
+
+
+[data-modifier] > code {


i think these styles aren't used now?

I think you're right, the ones from the code snippets are handled elsewhere

blueprint-bot · 2018-05-12T00:43:40Z

enable use of Set and Map in typescript (missing lib)

Preview: documentation | landing | table

remove nearly all overrides in docs-app!

giladgray · 2018-05-12T01:19:43Z

@llorca time to review all examples carefully! i pushed fixes for most everything but I'm sure there are still loose ends.

blueprint-bot · 2018-05-12T01:22:54Z

small changes to Label, Navbar, NIS styles to support new usage

Preview: documentation | landing | table

giladgray · 2018-05-14T17:21:27Z

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

-    padding-left: $pt-grid-size * 4;
-    padding-top: $pt-grid-size * 4;
-    padding-right: $pt-grid-size * 2;
-    padding-bottom: $pt-grid-size * 2;


yo i added this for a reason... see comment above.

giladgray · 2018-05-14T17:23:59Z

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

@@ -42,6 +42,42 @@
  }
 }

+#{example("HotkeyTester")} {
+  .docs-hotkey-tester {


either class or example(), def don't need both (redundant)

giladgray · 2018-05-14T17:24:17Z

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

@@ -42,6 +42,23 @@
  }
 }

+#{example("HotkeyPiano")} {
+  .docs-hotkey-piano-example {


there's already code for this in another file. please merge.

giladgray · 2018-05-14T17:46:29Z

packages/core/src/components/tree/tree.md

@@ -33,7 +33,7 @@ example, `[2, 0]` represents the first child (`0`) of the third top-level node (

 @### Instance methods

-<div class="docs-interface-name">Tree</div>
+<div class="@ns-monospace-text">Tree</div>


use backticks. Tree. should be a code element.

I don't want a code tho. I want a large text monospace element, without the border. Also <code> always enforces 12px so can't be combined with .pt-text-large :(

giladgray · 2018-05-14T18:01:42Z

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

+  "table": $forest5,
+  "timezone": $vermilion5,
+  "labs": $indigo5,
+  "resources": $orange5,


would prefer merging with the other map so it's "table": (bg, fg)

blueprint-bot · 2018-05-14T18:32:10Z

move custom example styles to _examples

Preview: documentation | landing | table

blueprint-bot · 2018-05-14T18:40:23Z

refactor package color variables in nav

Preview: documentation | landing | table

…le-frame

blueprint-bot · 2018-05-14T20:13:11Z

css examples: checkbox instead of switch, ignore modifier description

Preview: documentation | landing | table

blueprint-bot · 2018-05-14T20:32:54Z

fix docs-example sizing (see overflow-ellipsis in typography)

Preview: documentation | landing | table

blueprint-bot · 2018-05-14T20:35:56Z

lint

Preview: documentation | landing | table

llorca · 2018-05-14T21:21:53Z

re:

~~“Loading column” select in Table example too wide~~ that's just flex

right, but it's still ugly and it'd like to give it an appropriate size. should just modify that specific select with custom example styles?

giladgray · 2018-05-14T21:31:31Z

@llorca no this is a general problem with any example that puts its options underneath (see all Tables and DRP). i think we should not worry about it just yet and address in follow ups.

blueprint-bot · 2018-05-14T21:31:33Z

hide props marked `@internal`

Preview: documentation | landing | table

blueprint-bot · 2018-05-14T21:56:57Z

bring pack CSS modifier description

Preview: documentation | landing | table

unwrap control group examples (cuz they have no internal margin)

blueprint-bot · 2018-05-14T22:35:01Z

bring back padding around examples unwrap control group examples (cuz they have no internal margin)

Preview: documentation | landing | table

Gilad Gray added 5 commits May 11, 2018 14:06

basic example frame

c6eb025

massive redesign of example frame t support JS and CSS examples

c7758ea

new CssExample compoent lets you toggle modifiers via switches! no mo…

f9cca9e

…re repetition

update other docs-theme components for new styles

6e386f1

enable use of Set and Map in typescript (missing lib)

160d76b

giladgray requested review from llorca and themadcreator May 12, 2018 00:40

giladgray commented May 12, 2018

View reviewed changes

Gilad Gray added 4 commits May 11, 2018 18:15

example frame dark theme, css modifier colors

0982139

refactor most examples (React & CSS) so they look correct.

233ef23

remove nearly all overrides in docs-app!

Page component uses route instead of reference for data-page-id

6264c76

small changes to Label, Navbar, NIS styles to support new usage

90ff7fd

llorca added 14 commits May 13, 2018 09:20

move example variables to example file

d3d77ce

remove duplicate variable

d667990

remove options specific variables

7786b07

tweak base styles of examples, add variables

84ea31e

tweak style of view source button, to fit with example frame

b4f9d1c

increase specificity of modifier colors so it works on dark

9f2ea34

tweak table example frame layout

670e570

change regex matching of page function to more common use case

8303c58

fixed size for collapse example so it doesn't overflow

61b0e06

tweak button group example markup

d42a8ea

misc scss syntax

684e218

remove unnecessary spacing between overlay options

d6d2772

remove unnecessary label in button example

0516783

tweak markup of headings so they look better in example frame

e7f16e7

giladgray added the Type: refactor label May 14, 2018

giladgray commented May 14, 2018

View reviewed changes

move custom example styles to _examples

5a3bb50

refactor package color variables in nav

737c35b

Gilad Gray added 5 commits May 14, 2018 12:27

Merge branch 'develop' of github.com:palantir/blueprint into gg/examp…

38993fd

…le-frame

move custom example styles around, delete unnecessary ones

3d67839

css markup appears below example/options row

d48e344

css examples: checkbox instead of switch, ignore modifier description

cff2b54

remove docs dark transition (not relevant, not complete)

0c5516d

Gilad Gray added 3 commits May 14, 2018 13:27

merge examples and sections files, fix DRP options

434cbce

fix docs-example sizing (see overflow-ellipsis in typography)

d11cfab

lint

9a92ec8

hide props marked @internal

74ee80e

bring pack CSS modifier description

787df72

Gilad Gray added 2 commits May 14, 2018 15:29

fix controls align-right + large padding

fe9bd21

bring back padding around examples

69bc113

unwrap control group examples (cuz they have no internal margin)

llorca approved these changes May 14, 2018

View reviewed changes

giladgray merged commit 710dfec into develop May 14, 2018

giladgray deleted the gg/example-frame branch May 14, 2018 22:43

llorca mentioned this pull request May 18, 2018

[Docs] Dark theme transition #2521

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] new example frame! #2489

[docs] new example frame! #2489

giladgray commented May 12, 2018 •

edited

Loading

giladgray May 12, 2018

giladgray May 12, 2018

llorca May 12, 2018

blueprint-bot commented May 12, 2018

giladgray commented May 12, 2018

blueprint-bot commented May 12, 2018

giladgray May 14, 2018

giladgray May 14, 2018

giladgray May 14, 2018

giladgray May 14, 2018

llorca May 14, 2018

giladgray May 14, 2018

blueprint-bot commented May 14, 2018

blueprint-bot commented May 14, 2018

blueprint-bot commented May 14, 2018

blueprint-bot commented May 14, 2018

blueprint-bot commented May 14, 2018

llorca commented May 14, 2018

giladgray commented May 14, 2018

blueprint-bot commented May 14, 2018

blueprint-bot commented May 14, 2018

blueprint-bot commented May 14, 2018

		}


		[data-modifier] > code {

[docs] new example frame! #2489

[docs] new example frame! #2489

Conversation

giladgray commented May 12, 2018 • edited Loading

slick container for examples puts options in a column on the right:

completely revamp CSS example renderer so it works like the React examples, with switches for every modifier:

next steps:

to do

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented May 12, 2018

enable use of Set and Map in typescript (missing lib)

giladgray commented May 12, 2018

blueprint-bot commented May 12, 2018

small changes to Label, Navbar, NIS styles to support new usage

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented May 14, 2018

move custom example styles to _examples

blueprint-bot commented May 14, 2018

refactor package color variables in nav

blueprint-bot commented May 14, 2018

css examples: checkbox instead of switch, ignore modifier description

blueprint-bot commented May 14, 2018

fix docs-example sizing (see overflow-ellipsis in typography)

blueprint-bot commented May 14, 2018

lint

llorca commented May 14, 2018

giladgray commented May 14, 2018

blueprint-bot commented May 14, 2018

hide props marked `@internal`

blueprint-bot commented May 14, 2018

bring pack CSS modifier description

blueprint-bot commented May 14, 2018

bring back padding around examples unwrap control group examples (cuz they have no internal margin)

giladgray commented May 12, 2018 •

edited

Loading