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.

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

Various documentation fixes #3635

Merged
merged 4 commits into from
Jul 1, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
20 changes: 11 additions & 9 deletions packages/core/src/_typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -109,18 +109,20 @@ Running text
Markup:
<div class="@ns-running-text {{.modifier}}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
We build products that make people better at their most important
work — the kind of work you read about on the front page of the
newspaper, not just the technology section.
</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>
<h3>Scale, Speed, Agility</h3>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
A successful data transformation requires the whole organization — users, the IT shop, and
leadership — to operate in lockstep. With Foundry, the enterprise comes together to
transform the organization and turn data into a competitive advantage.
</p>
</div>

Expand Down Expand Up @@ -356,10 +358,10 @@ Block quotes

Markup:
<blockquote class="@ns-blockquote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Premium Aerotec is a key supplier for Airbus, producing 30 million parts per year,
which is huge complexity. Skywise helps us manage all the production steps.
It gives Airbus much better visibility into where the product is in the supply chain,
and it lets us immediately see our weak points so we can react on the spot.
</blockquote>

Styleguide blockquote
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/callout/_callout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Callout
Markup:
<div class="#{$ns}-callout {{.modifier}}">
<h4 class="#{$ns}-heading">Callout Heading</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, delectus!
It's dangerous to go alone! Take this.
</div>

.#{$ns}-intent-primary - Primary intent
Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/components/hotkeys/hotkeys.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,14 @@ export class MyComponent extends React.Component<{}, {}> {
}
```

<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">

Your decorated component must return a single DOM element in its `render()` method,
not a custom React component. This constraint allows `HotkeysTarget` to inject
event handlers without creating an extra wrapper element.

</div>

@### Decorator

The `@HotkeysTarget` decorator allows you to easily add global and local
Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/components/popover/popover.md
Original file line number Diff line number Diff line change
Expand Up @@ -413,6 +413,14 @@ Minimal popovers are also useful for context menus that require quick enter and
support fast workflows. You can see an example in the [context menus](#core/components/context-menu)
documentation.

@### Filling container width

Sometimes you will have a React components or element which uses `width: 100%` or `fill: true` to
fill its container width. If you wrap this component or element in a `Popover`, it may no longer
achieve the layout you expect. This is likely because `Popover` injects an inline `<span>` tag wrapper.
To work around this issue, supply the prop `targetTagName="div"` to get a block layout wrapper
instead, which should better respect width layout styling.

@## Testing

<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/tooltip/tooltip.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@# Tooltip

A tooltip is a lightweight popover for showing additional infromation on hover.
A tooltip is a lightweight popover for showing additional information during hover interactions.

@reactExample TooltipExample

Expand Down
2 changes: 1 addition & 1 deletion packages/datetime/src/dateFormat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export interface IDateFormatProps {
invalidDateMessage?: string;

/**
* The locale name, which is passed to `formatDate`, `parseDate` and the functions in `localeUtils`.
* The locale name, which is passed to `formatDate`, `parseDate`, and the functions in `localeUtils`.
*/
locale?: string;

Expand Down
4 changes: 4 additions & 0 deletions packages/datetime/src/dateinput.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,7 @@ import { DateInput } from "@blueprintjs/datetime";
```

@interface IDateInputProps

@## Localization

See the [Date picker localization docs](#datetime/datepicker.localization).
22 changes: 22 additions & 0 deletions packages/datetime/src/datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,25 @@ to the **react-day-picker** library. These passed props are documented in full
in the [**react-day-picker** documentation](http://www.gpbl.org/react-day-picker/index.html).

@interface IDatePickerProps

@## Localization

`DatePicker`, `DateRangePicker`, `DateInput`, and `DateRangeInput` all support localization using an interface defined in the
`react-day-picker` module:

```tsx
import { LocaleUtils } from "react-day-picker/types/utils";
```

By supplying a `locale: string` and `localeUtils: LocaleUtils` prop to these Blueprint components, you can
customize how dates are rendered, which day of the week is the first column, etc.
[See the interface definition for more details](https://github.com/gpbl/react-day-picker/blob/v7.3.0/types/utils.d.ts#L5).

Although `@blueprintjs/datetime` and `react-day-picker` do not explicitly require `moment.js` as a dependency,
you may wish to use Moment's implementation of localization so that you do not have to write these functions yourself.
The import from `react-day-picker` shown above gives you a utility object containing functions which do just that; you
may use it like so:

```tsx
<DatePicker locale="fr" localeUtils={LocaleUtils} />
```
4 changes: 4 additions & 0 deletions packages/datetime/src/daterangeinput.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,7 @@ import { DateRangeInput } from "@blueprintjs/datetime";
```

@interface IDateRangeInputProps

@## Localization

See the [Date picker localization docs](#datetime/datepicker.localization).
4 changes: 4 additions & 0 deletions packages/datetime/src/daterangepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,7 @@ import { DateRangePicker } from "@blueprintjs/datetime";
```

@interface IDateRangePickerProps

@## Localization

See the [Date picker localization docs](#datetime/datepicker.localization).
2 changes: 1 addition & 1 deletion packages/datetime/src/timepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

A `TimePicker` allows the user to specify a time.

`TimePicker` has no direct localization support. You should handle localization directly in your
`TimePicker` has no direct localization support. You should handle localization in your
application if needed.

@reactExample TimePickerExample
Expand Down