[docs] refactor datetime docs to focus on React usage #2596

giladgray · 2018-06-13T22:48:17Z

refactor all datetime component docs a la #2574 (which this PR is targeting).

blueprint-bot · 2018-06-13T22:51:48Z

refactor datetime docs

Preview: documentation | landing | table

giladgray · 2018-06-13T23:12:34Z

packages/datetime/src/daterangeinput.md

+<DateRangeInput
+    formatDate={date => date.toLocaleString()}
+    onChange={this.handleRangeChange}
+    parseDate={str => new Date(str)}


added required props for #2542

blueprint-bot · 2018-06-13T23:23:23Z

timezone docs

Preview: documentation | landing | table

benjdj6

Content and grammar looks good, only thing is jargon like "prop" should be avoided.

benjdj6 · 2018-06-15T20:54:17Z

packages/datetime/src/dateinput.md

@@ -51,11 +48,17 @@ function getMomentFormatter(format: string): IDateFormatProps {
 <DateInput {...getMomentFormatter("LL")} locale="de" />
 ```

+@## Props


Write out the word "properties" for professionalism.

"props" is actually a react convention, and they're never called "properties" (to distinguish from JS objects)

see React's own docs: https://reactjs.org/docs/components-and-props.html

benjdj6 · 2018-06-15T20:54:31Z

packages/datetime/src/dateinput.md


-@## JavaScript API
+You can control the selected date by setting the `value` prop, or use the


prop -> property

benjdj6 · 2018-06-15T20:54:54Z

packages/datetime/src/datepicker.md

-
-You can use the `modifiers` prop to conditionally apply styles to days. Modifiers are documented in
-full in the [**react-day-picker** documentation](http://react-day-picker.js.org/docs/matching-days).
+You can use the `modifiers` prop to conditionally apply styles to days.


prop -> property

benjdj6 · 2018-06-15T20:55:23Z

packages/datetime/src/datepicker.md

-full in the [**react-day-picker** documentation](http://react-day-picker.js.org/docs/matching-days).
+You can use the `modifiers` prop to conditionally apply styles to days.
+Modifiers are a react-day-picker concept and are documented in full in the
+[**react-day-picker** documentation](http://react-day-picker.js.org/docs/matching-days).

 The example below creates a `DatePicker` that prevents the user from selecting any Sundays,
 by using the component in controlled mode and with the `modifiers` prop:


prop -> property

benjdj6 · 2018-06-15T20:56:00Z

packages/datetime/src/datepicker.md

@@ -71,3 +50,16 @@ function isSunday(date: Date) {
    return date.getDay() === 0;
 }
 ```
+
+@## Props


Props -> properties

benjdj6 · 2018-06-15T21:01:07Z

packages/datetime/src/datetimepicker.md

+`defaultValue`. (If `defaultValue` is not set, the current date and time is used
+as the default.)
+
+You can pass props to the inner `DatePicker` and `TimePicker` components using


prop -> property

benjdj6 · 2018-06-15T21:01:36Z

packages/datetime/src/timepicker.md

 @reactExample TimePickerExample

-@## JavaScript API
+@## Props


prop -> property

benjdj6 · 2018-06-15T21:01:41Z

packages/datetime/src/timepicker.md

-@## JavaScript API
+@## Props
+
+Use the `onChange` prop to listen for changes to the set time. You can control the selected time by


prop -> property

benjdj6 · 2018-06-15T21:01:46Z

packages/datetime/src/timepicker.md

+@## Props
+
+Use the `onChange` prop to listen for changes to the set time. You can control the selected time by
+setting the `value` prop, or use the component in uncontrolled mode and specify an initial time by


prop -> property

benjdj6 · 2018-06-15T21:02:10Z

packages/timezone/src/components/timezone-picker/timezone-picker.md

@@ -7,7 +7,7 @@ timezone metadata.

 @reactExample TimezonePickerExample

-@## JavaScript API
+@## Props


prop -> property

* Button: collapse css examples * Callout + intent docs * Progress bar * Skeleton, Spinner , Table * add new buttons example * breadcrumbs docs * button groups docs * card docs * collapse docs * collapsible list docs * editable text docs * more collapsible list * more card * remove button group code block * comments * navbar docs * hotkeys docs * icon docs * menu docs * alert docs * fix collapsible separators * context menu docs * dialog docs * editable text fixes * label docs * navbar docs * non ideal state docs * add props heading to overflow list * overlay docs * popover docs * portal docs * tabs docs * tag docs * text docs * toast docs * tooltip docs * tree docs * context menu usage * wrong tick * CSS -> Style * move portal props down * tabs props * text update * merge minimal tag CSS docs * card polish * CollapsibleList polish * EditableText polish * Icon polish * Menu polish * Spinner polish * Navbar polish * NIS polish * Progress Bar, Table HTML, Tag, Tree polish * Spinner polish (remove CSS) * Tabs polish * all Overlays polish * singular component page titles * [docs] improve button-group docs (#2594) * button CSS text refactors * fix button group alignment support * simplify BG CSS example, fill modifier sets full width/height based on vertical * refactor BG docs & examples * more edits * [docs] refactor datetime docs to focus on React usage (#2596) * refactor datetime docs * timezone docs * [docs] refactor forms docs (#2600) * ControlGroup & FormGroup * merge all text input docs into one file * singular titles * text area props * edits * edits * tag-input add note about newlines, wrap lines * FileInput docs * checkbox etc docs * resolve forms nav: Form controls & Form inputs sections

refactor datetime docs

b03984f

giladgray commented Jun 13, 2018

View reviewed changes

timezone docs

1ddf848

benjdj6 reviewed Jun 15, 2018

View reviewed changes

giladgray merged commit ff3686e into gg/docs-rewrite Jun 18, 2018

giladgray deleted the gg/docs-datetime branch June 18, 2018 18:05

blueprint-bot mentioned this pull request Jun 18, 2018

[docs] refactor content to focus on React usage #2574

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] refactor datetime docs to focus on React usage #2596

[docs] refactor datetime docs to focus on React usage #2596

giladgray commented Jun 13, 2018 •

edited

Loading

blueprint-bot commented Jun 13, 2018

giladgray Jun 13, 2018

blueprint-bot commented Jun 13, 2018

benjdj6 left a comment

benjdj6 Jun 15, 2018

giladgray Jun 15, 2018

giladgray Jun 15, 2018

benjdj6 Jun 15, 2018

benjdj6 Jun 15, 2018

benjdj6 Jun 15, 2018

benjdj6 Jun 15, 2018

benjdj6 Jun 15, 2018

benjdj6 Jun 15, 2018

benjdj6 Jun 15, 2018

benjdj6 Jun 15, 2018

benjdj6 Jun 15, 2018


		@## JavaScript API
		You can control the selected date by setting the `value` prop, or use the

[docs] refactor datetime docs to focus on React usage #2596

[docs] refactor datetime docs to focus on React usage #2596

Conversation

giladgray commented Jun 13, 2018 • edited Loading

blueprint-bot commented Jun 13, 2018

refactor datetime docs

Choose a reason for hiding this comment

blueprint-bot commented Jun 13, 2018

timezone docs

benjdj6 left a 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

giladgray commented Jun 13, 2018 •

edited

Loading