From a132fa19a73d1809ec4ccb1b6555986d4e3311b3 Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Mon, 1 Jul 2019 13:44:31 -0400 Subject: [PATCH 1/4] Add callout to hotkeys docs --- packages/core/src/components/hotkeys/hotkeys.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/core/src/components/hotkeys/hotkeys.md b/packages/core/src/components/hotkeys/hotkeys.md index 71db7660170..898019fd449 100644 --- a/packages/core/src/components/hotkeys/hotkeys.md +++ b/packages/core/src/components/hotkeys/hotkeys.md @@ -43,6 +43,14 @@ export class MyComponent extends React.Component<{}, {}> { } ``` +
+ +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. + +
+ @### Decorator The `@HotkeysTarget` decorator allows you to easily add global and local From a515324154cbbfd88ea9d4dfdfcd8d097d04b5c3 Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Mon, 1 Jul 2019 14:17:53 -0400 Subject: [PATCH 2/4] Add localization docs to date components Fixes #3621 --- packages/datetime/src/dateFormat.tsx | 2 +- packages/datetime/src/dateinput.md | 4 ++++ packages/datetime/src/datepicker.md | 22 ++++++++++++++++++++++ packages/datetime/src/daterangeinput.md | 4 ++++ packages/datetime/src/daterangepicker.md | 4 ++++ packages/datetime/src/timepicker.md | 2 +- 6 files changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/datetime/src/dateFormat.tsx b/packages/datetime/src/dateFormat.tsx index 599d55b7396..91d92e0494e 100644 --- a/packages/datetime/src/dateFormat.tsx +++ b/packages/datetime/src/dateFormat.tsx @@ -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; diff --git a/packages/datetime/src/dateinput.md b/packages/datetime/src/dateinput.md index e7f5318cb0a..c6e142e7912 100644 --- a/packages/datetime/src/dateinput.md +++ b/packages/datetime/src/dateinput.md @@ -73,3 +73,7 @@ import { DateInput } from "@blueprintjs/datetime"; ``` @interface IDateInputProps + +@## Localization + +See the [Date picker localization docs](#datetime/datepicker.localization). diff --git a/packages/datetime/src/datepicker.md b/packages/datetime/src/datepicker.md index 0ced14b502f..5e7e8d77aee 100644 --- a/packages/datetime/src/datepicker.md +++ b/packages/datetime/src/datepicker.md @@ -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 + +``` diff --git a/packages/datetime/src/daterangeinput.md b/packages/datetime/src/daterangeinput.md index 402c0f5c7c5..014f534c59f 100644 --- a/packages/datetime/src/daterangeinput.md +++ b/packages/datetime/src/daterangeinput.md @@ -33,3 +33,7 @@ import { DateRangeInput } from "@blueprintjs/datetime"; ``` @interface IDateRangeInputProps + +@## Localization + +See the [Date picker localization docs](#datetime/datepicker.localization). diff --git a/packages/datetime/src/daterangepicker.md b/packages/datetime/src/daterangepicker.md index 975d7c2fe83..3a0d74a0253 100644 --- a/packages/datetime/src/daterangepicker.md +++ b/packages/datetime/src/daterangepicker.md @@ -54,3 +54,7 @@ import { DateRangePicker } from "@blueprintjs/datetime"; ``` @interface IDateRangePickerProps + +@## Localization + +See the [Date picker localization docs](#datetime/datepicker.localization). diff --git a/packages/datetime/src/timepicker.md b/packages/datetime/src/timepicker.md index db67c56f0dc..cc9a0db13c6 100644 --- a/packages/datetime/src/timepicker.md +++ b/packages/datetime/src/timepicker.md @@ -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 From 3461e28398ca6a2540b85e40120aa7fc75debd6f Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Mon, 1 Jul 2019 14:31:30 -0400 Subject: [PATCH 3/4] Add note about popover filling width Fixes #2931 --- packages/core/src/components/popover/popover.md | 8 ++++++++ packages/core/src/components/tooltip/tooltip.md | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/popover/popover.md b/packages/core/src/components/popover/popover.md index a720c1426d2..f670bdb5414 100644 --- a/packages/core/src/components/popover/popover.md +++ b/packages/core/src/components/popover/popover.md @@ -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 `` 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
diff --git a/packages/core/src/components/tooltip/tooltip.md b/packages/core/src/components/tooltip/tooltip.md index a93440f4a99..ce1120dcd0c 100644 --- a/packages/core/src/components/tooltip/tooltip.md +++ b/packages/core/src/components/tooltip/tooltip.md @@ -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 From 5f5f8e912ab6991afc7af983ee25f8e738d4c74b Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Mon, 1 Jul 2019 14:50:01 -0400 Subject: [PATCH 4/4] Replace Lorem Ipsum text Fixes #139 --- packages/core/src/_typography.scss | 20 ++++++++++--------- .../core/src/components/callout/_callout.scss | 2 +- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss index 100fcdb826b..a7273b2062f 100644 --- a/packages/core/src/_typography.scss +++ b/packages/core/src/_typography.scss @@ -109,18 +109,20 @@ Running text Markup:

- 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.

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

New section

+

Scale, Speed, Agility

- 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.

@@ -356,10 +358,10 @@ Block quotes Markup:
- 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.
Styleguide blockquote diff --git a/packages/core/src/components/callout/_callout.scss b/packages/core/src/components/callout/_callout.scss index 1c0a1c99c62..dc82dda3bd7 100644 --- a/packages/core/src/components/callout/_callout.scss +++ b/packages/core/src/components/callout/_callout.scss @@ -9,7 +9,7 @@ Callout Markup:

Callout Heading

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, delectus! + It's dangerous to go alone! Take this.
.#{$ns}-intent-primary - Primary intent