Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] new example frame! #2489

Merged
merged 76 commits into from
May 14, 2018
Merged

[docs] new example frame! #2489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
76 commits
Select commit Hold shift + click to select a range
c6eb025
basic example frame
May 11, 2018
c7758ea
massive redesign of example frame t support JS and CSS examples
May 11, 2018
f9cca9e
new CssExample compoent lets you toggle modifiers via switches! no mo…
May 11, 2018
6e386f1
update other docs-theme components for new styles
May 11, 2018
160d76b
enable use of Set and Map in typescript (missing lib)
May 11, 2018
0982139
example frame dark theme, css modifier colors
May 12, 2018
233ef23
refactor most examples (React & CSS) so they look correct.
May 12, 2018
6264c76
Page component uses route instead of reference for data-page-id
May 12, 2018
90ff7fd
small changes to Label, Navbar, NIS styles to support new usage
May 12, 2018
d3d77ce
move example variables to example file
llorca May 13, 2018
d667990
remove duplicate variable
llorca May 13, 2018
7786b07
remove options specific variables
llorca May 13, 2018
84ea31e
tweak base styles of examples, add variables
llorca May 13, 2018
b4f9d1c
tweak style of view source button, to fit with example frame
llorca May 13, 2018
9f2ea34
increase specificity of modifier colors so it works on dark
llorca May 13, 2018
670e570
tweak table example frame layout
llorca May 13, 2018
8303c58
change regex matching of page function to more common use case
llorca May 13, 2018
61b0e06
fixed size for collapse example so it doesn't overflow
llorca May 13, 2018
d42a8ea
tweak button group example markup
llorca May 13, 2018
684e218
misc scss syntax
llorca May 13, 2018
d6d2772
remove unnecessary spacing between overlay options
llorca May 13, 2018
0516783
remove unnecessary label in button example
llorca May 13, 2018
e7f16e7
tweak markup of headings so they look better in example frame
llorca May 13, 2018
b5325f4
tweak markup of pre so they look better in example frame
llorca May 13, 2018
0b8ffa2
longer, better UI text example text
llorca May 13, 2018
6a7e0b5
remove blockquote wrapper in running text example
llorca May 13, 2018
5311007
add small text modifier to typogaphy example
llorca May 13, 2018
79d445c
add disabled text to typography example
llorca May 13, 2018
2103686
sentence case
llorca May 13, 2018
bd16046
more spacing below view source link
llorca May 13, 2018
cf924e3
lint
llorca May 13, 2018
43fe45e
simplify text example markup
llorca May 13, 2018
d237c47
fix vertical tabs indicator
llorca May 13, 2018
062b66d
less padding for table example
llorca May 13, 2018
5a8b76a
remove unnecessary slider example CSS
llorca May 13, 2018
0b5e629
nicer popover options
llorca May 13, 2018
57a9b3b
add options to NIS example
llorca May 13, 2018
2094cc9
plural nav title
llorca May 13, 2018
386b509
fix NIS example state type
llorca May 13, 2018
8d74798
brighten up dark theme docs
llorca May 13, 2018
1f5f0c0
lint
llorca May 13, 2018
75a14e5
remove options last form group margin
llorca May 13, 2018
c204d90
nicer hotkey tester
llorca May 13, 2018
5cb1dce
nic hotkey piano hover
llorca May 13, 2018
d9f79e3
way nicer form groups
llorca May 13, 2018
09970bc
nicer labels example
llorca May 13, 2018
1cdf3bc
remove ugly line break in editable example option
llorca May 13, 2018
4fde897
nicer column control group
llorca May 13, 2018
075453d
nicer inline label example
llorca May 13, 2018
bb03c23
fix large control align-right padding
llorca May 13, 2018
4d4f567
less narrow navbar example
llorca May 14, 2018
b05c3d4
adjust docs section props table margin top
llorca May 14, 2018
9da31ae
tree markdown nits
llorca May 14, 2018
56d825b
fix more switch align right paddings
llorca May 14, 2018
2ba3fbc
nicer datetime examples centering
llorca May 14, 2018
594be4e
icon group heading margin bottom
llorca May 14, 2018
b74c82f
clarify multiselect props options vs example options
llorca May 14, 2018
5d5c1c4
sweet new dark theme transition
llorca May 14, 2018
17fabb4
lint
llorca May 14, 2018
c597cae
remove dialog tsx block in favor of view source link
llorca May 14, 2018
f96d365
fix options slice in dialog example
llorca May 14, 2018
ff4d1c7
improved contrast for navigation colored text
llorca May 14, 2018
5a3bb50
move custom example styles to _examples
May 14, 2018
737c35b
refactor package color variables in nav
May 14, 2018
38993fd
Merge branch 'develop' of github.com:palantir/blueprint into gg/examp…
May 14, 2018
3d67839
move custom example styles around, delete unnecessary ones
May 14, 2018
d48e344
css markup appears below example/options row
May 14, 2018
cff2b54
css examples: checkbox instead of switch, ignore modifier description
May 14, 2018
0c5516d
remove docs dark transition (not relevant, not complete)
May 14, 2018
434cbce
merge examples and sections files, fix DRP options
May 14, 2018
d11cfab
fix docs-example sizing (see overflow-ellipsis in typography)
May 14, 2018
9a92ec8
lint
May 14, 2018
74ee80e
hide props marked `@internal`
May 14, 2018
787df72
bring pack CSS modifier description
May 14, 2018
fe9bd21
fix controls align-right + large padding
May 14, 2018
69bc113
bring back padding around examples
May 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions config/tsconfig.base.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"dom",
"dom.iterable",
"es5",
"es2015.collection",
"es2015.iterable"
],
"module": "es2015",
Expand Down
83 changes: 52 additions & 31 deletions packages/core/src/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@
Headings

Markup:
<h1 class="@ns-heading">H1 heading</h1>
<h2 class="@ns-heading">H2 heading</h2>
<h3 class="@ns-heading">H3 heading</h3>
<h4 class="@ns-heading">H4 heading</h4>
<h5 class="@ns-heading">H5 heading</h5>
<h6 class="@ns-heading">H6 heading</h6>
<div>
<h1 class="@ns-heading">H1 heading</h1>
<h2 class="@ns-heading">H2 heading</h2>
<h3 class="@ns-heading">H3 heading</h3>
<h4 class="@ns-heading">H4 heading</h4>
<h5 class="@ns-heading">H5 heading</h5>
<h6 class="@ns-heading">H6 heading</h6>
</div>

Styleguide headings
*/
Expand Down Expand Up @@ -53,14 +55,19 @@ UI text

Markup:
<div class="{{.modifier}}">
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.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

</div>

.#{$ns}-ui-text - Default Blueprint font styles, applied to the `<body>` tag and available as a class for nested resets.
.#{$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-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
Expand All @@ -84,6 +91,14 @@ Styleguide ui-text
}
}

.#{$ns}-text-disabled {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

color: $pt-text-color-disabled;

.#{$ns}-dark & {
color: $pt-dark-text-color-disabled;
}
}

.#{$ns}-text-overflow-ellipsis {
@include overflow-ellipsis();
}
Expand All @@ -93,22 +108,20 @@ Running text

Markup:
<div class="@ns-running-text {{.modifier}}">
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<ul>
<li>Item the <code>first</code>.</li>
<li>Item the <strong>second</strong></code>.</li>
<li>Item the <a href="#core/typography.running-text">third</a>.</li>
</ul>
<h3>New section</h3>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<ul>
<li>Item the <code>first</code>.</li>
<li>Item the <strong>second</strong></code>.</li>
<li>Item the <a href="#core/typography.running-text">third</a>.</li>
</ul>
<h3>New section</h3>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>

.#{$ns}-text-large - Use larger font size.
Expand Down Expand Up @@ -169,12 +182,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 {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

font-size: $pt-font-size-small;
// line-height comes from .@ns-(ui|running)-text
}

/*
Links

Expand Down Expand Up @@ -219,17 +237,20 @@ a {
Preformatted text

Markup:
<p>Use the <code class="@ns-code">&lt;code></code> tag for snippets of code.</p>
<pre class="@ns-code-block">Use the &lt;pre> tag for blocks of code.</pre>
<pre class="@ns-code-block"><code>// code sample
export function hasModifier(modifiers: ts.ModifiersArray, ...modifierKinds: ts.SyntaxKind[]) {
<div>
<p>Use the <code class="@ns-code">&lt;code></code> tag for snippets of code.</p>
<pre class="@ns-code-block">Use the &lt;pre> tag for blocks of code.</pre>
<pre class="@ns-code-block"><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));
}</code></pre>
</div>

Styleguide preformatted
*/
Expand Down
48 changes: 25 additions & 23 deletions packages/core/src/components/button/_button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,31 @@
Button groups

Markup:
<div class="#{$ns}-button-group {{.modifier}}">
<a class="#{$ns}-button #{$ns}-icon-database" tabindex="0" role="button">Queries</a>
<a class="#{$ns}-button #{$ns}-icon-function" tabindex="0" role="button">Functions</a>
<a class="#{$ns}-button" tabindex="0" role="button">
Options <span class="#{$ns}-icon-standard #{$ns}-icon-caret-down #{$ns}-align-right"></span>
</a>
</div>
<br /><br />
<div class="#{$ns}-button-group {{.modifier}}">
<a class="#{$ns}-button #{$ns}-icon-chart" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-control" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-graph" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-camera" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-map" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-code" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-th" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-time" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-compressed" tabindex="0" role="button"></a>
</div>
<br /><br />
<div class="#{$ns}-button-group {{.modifier}}">
<button type="button" class="#{$ns}-button #{$ns}-intent-success">Save</button>
<button type="button" class="#{$ns}-button #{$ns}-intent-success #{$ns}-icon-caret-down"></button>
<div>
<div class="#{$ns}-button-group {{.modifier}}">
<a class="#{$ns}-button #{$ns}-icon-database" tabindex="0" role="button">Queries</a>
<a class="#{$ns}-button #{$ns}-icon-function" tabindex="0" role="button">Functions</a>
<a class="#{$ns}-button" tabindex="0" role="button">
Options <span class="#{$ns}-icon-standard #{$ns}-icon-caret-down #{$ns}-align-right"></span>
</a>
</div>
<br /><br /><br />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i would prefer to avoid additional markup in examples for layout and instead rely on the default flex box

<div class="#{$ns}-button-group {{.modifier}}">
<a class="#{$ns}-button #{$ns}-icon-chart" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-control" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-graph" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-camera" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-map" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-code" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-th" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-time" tabindex="0" role="button"></a>
<a class="#{$ns}-button #{$ns}-icon-compressed" tabindex="0" role="button"></a>
</div>
<br /><br /><br />
<div class="#{$ns}-button-group {{.modifier}}">
<button type="button" class="#{$ns}-button #{$ns}-intent-success">Save</button>
<button type="button" class="#{$ns}-button #{$ns}-intent-success #{$ns}-icon-caret-down"></button>
</div>
</div>

.#{$ns}-large - Use large buttons
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/button/button-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
24 changes: 11 additions & 13 deletions packages/core/src/components/card/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,19 +70,17 @@ $dark-elevation-shadows: (
Interactive cards

Markup:
<div class="docs-card-example">
<div class="#{$ns}-card #{$ns}-elevation-0 #{$ns}-interactive">
<h5 class="#{$ns}-heading"><a href="#">Data fusion platforms</a></h5>
<p>Back-end infrastructure for integrating, managing, and securing data of any kind, from any source, at massive scale.</p>
</div>
<div class="#{$ns}-card #{$ns}-elevation-1 #{$ns}-interactive">
<h5 class="#{$ns}-heading"><a href="#">Analytical applications</a></h5>
<p>User interfaces that enable people to interact smoothly with data, ask better questions, and make better decisions.</p>
</div>
<div class="#{$ns}-card #{$ns}-elevation-2 #{$ns}-interactive">
<h5 class="#{$ns}-heading"><a href="#">For any data problem</a></h5>
<p>Proven technology that can be deployed today, adapts to any domain, and produces operational results in weeks.</p>
</div>
<div class="#{$ns}-card #{$ns}-elevation-0 #{$ns}-interactive">
<h5 class="#{$ns}-heading"><a href="#">Data fusion platforms</a></h5>
<div>Back-end infrastructure for integrating, managing, and securing data of any kind, from any source, at massive scale.</div>
</div>
<div class="#{$ns}-card #{$ns}-elevation-1 #{$ns}-interactive">
<h5 class="#{$ns}-heading"><a href="#">Analytical applications</a></h5>
<div>User interfaces that enable people to interact smoothly with data, ask better questions, and make better decisions.</div>
</div>
<div class="#{$ns}-card #{$ns}-elevation-2 #{$ns}-interactive">
<h5 class="#{$ns}-heading"><a href="#">For any data problem</a></h5>
<div>Proven technology that can be deployed today, adapts to any domain, and produces operational results in weeks.</div>
</div>

Styleguide card-interactive
Expand Down
42 changes: 2 additions & 40 deletions packages/core/src/components/dialog/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div>
<Button onClick={this.toggleDialog} text="Show dialog" />
<Dialog
icon="inbox"
isOpen={this.state.isOpen}
onClose={this.toggleDialog}
title="Dialog header"
>
<div className="@ns-dialog-body">Some content</div>
<div className="@ns-dialog-footer">
<div className="@ns-dialog-footer-actions">
<Button text="Secondary" />
<Button
intent={Intent.PRIMARY}
onClick={this.toggleDialog}
text="Primary"
/>
</div>
</div>
</Dialog>
</div>
);
}

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.

Expand Down
36 changes: 20 additions & 16 deletions packages/core/src/components/forms/_controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}
Expand Down Expand Up @@ -541,22 +543,24 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
Inline labels

Markup:
<label class="#{$ns}-label">A group of related options</label>
<label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
<input type="checkbox" />
<span class="#{$ns}-control-indicator"></span>
First
</label>
<label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
<input type="checkbox" />
<span class="#{$ns}-control-indicator"></span>
Second
</label>
<label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
<input type="checkbox" />
<span class="#{$ns}-control-indicator"></span>
Third
</label>
<div>
<label class="#{$ns}-label">A group of related options</label>
<label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
<input type="checkbox" />
<span class="#{$ns}-control-indicator"></span>
First
</label>
<label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
<input type="checkbox" />
<span class="#{$ns}-control-indicator"></span>
Second
</label>
<label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
<input type="checkbox" />
<span class="#{$ns}-control-indicator"></span>
Third
</label>
</div>

Styleguide checkbox-inline
*/
Expand Down
Loading