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

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

Merged
merged 68 commits into from
Jun 18, 2018
Merged

Conversation

giladgray
Copy link
Contributor

@giladgray giladgray commented Jun 6, 2018

Fixes #2465, Fixes #2542

Changes proposed in this pull request:

  • refactor Core Components & Overlays documentation content to focus on React usage (Forms and other packages will happen in separate PRs)

`Button`s inside a `ButtonGroup` can optionally be wrapped with a [`Popover`](#core/components/popover). The following example demonstrates this composition:

```tsx
<ButtonGroup className={Classes.ALIGN_LEFT}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

there's an alignText prop

Copy link
Contributor Author

Choose a reason for hiding this comment

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

tho i'm not convinced this code sample is helpful at all.

It exposes shorthand props for CSS modifier classes and supports the full range of HTML props.

```tsx
<ButtonGroup minimal={true} large={false} onMouseEnter={...}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

large={false} is default, remove

</div>

@interface IButtonGroupProps
@css button-group-vertical
Copy link
Contributor Author

Choose a reason for hiding this comment

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

these css examples should be refactored

@@ -21,24 +39,3 @@ changes to a pointer and increases the elevation shadow on the card.
Users expect an interactive card to be a single clickable unit.

@css card-interactive
Copy link
Contributor Author

Choose a reason for hiding this comment

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

can merge this with other css example

@@ -7,7 +7,7 @@ props from the `MenuItem` children.

@reactExample CollapsibleListExample

@## JavaScript API
@## Props

The `CollapsibleList` component is available in the __@blueprintjs/core__ package.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

oops

@## Separators
@## CSS

### Separators
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@### Separators - it's not a full-fledged CSS API section (cuz the component is React only) but rather a usage note

@@ -62,3 +56,5 @@ _vertically_ instead, based on the number of lines of text. You can use the `min
which would provide a sub-optimal experience for users (multiline text does not always render
cleanly into a single line).
</div>

@interface IEditableTextProps

This comment was marked as resolved.

@blueprint-bot
Copy link

menu docs

Preview: documentation | landing | table

@giladgray giladgray requested a review from llorca June 7, 2018 18:34
@interface INavbarHeadingProps

@interface INavbarDividerProps

@## CSS API
Copy link
Contributor Author

Choose a reason for hiding this comment

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

"CSS"

@blueprint-bot
Copy link

context menu docs

Preview: documentation | landing | table

@blueprint-bot
Copy link

all Overlays polish

Preview: documentation | landing | table

Gilad Gray and others added 2 commits June 13, 2018 14:10
* 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
@blueprint-bot
Copy link

singular component page titles

Preview: documentation | landing | table

@blueprint-bot
Copy link

[docs] improve button-group docs (#2594)

Preview: documentation | landing | table


Context menus present the user with a custom list of actions upon right-click.
Context menus present the user with a list of actions upon right-click.
Copy link

Choose a reason for hiding this comment

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

"...a right-click."

to a React component that implements `renderContextMenu(): JSX.Element`.
- via the [imperative](#core/components/context-menu.imperative-api) `ContextMenu.show`
1. Use the [imperative](#core/components/context-menu.imperative-api) `ContextMenu.show`

This comment was marked as resolved.

Show the given element at the given offset from the top-left corner of the
viewport. Showing a menu closes the previously shown one automatically. The
menu appears below-right of this point, but will flip to below-left instead if
there is not enough room onscreen. The optional callback is invoked when this
Copy link

Choose a reason for hiding this comment

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

on-screen.

```

Provide the `multiline` prop to create an `EditableText` field that spans multiple lines. Multiline
mode uses a `<textarea>` instead of an `<input type="text">` to support multiple lines of text.
Users confirm text in multiline mode by pressing `ctrl` `enter` or `cmd` `enter`
Copy link

Choose a reason for hiding this comment

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

"+" between the key names.

cleanly into a single line).
</div>
The `onConfirm` and `onCancel` callbacks are invoked based on user interaction.
The user presses `enter` (or `cmd` `enter` when multiline) or blurs the input to
Copy link

Choose a reason for hiding this comment

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

"+" between key names

`@ns-popover-dismiss` to that element. For example, the "Dismiss" button in the top-level [Popover example](#core/components/popover) has this class. To enable this behavior on the entire popover, pass the
`popoverClassName="@ns-popover-dismiss"` prop.
To enable click-to-close behavior on an element inside a popover, simply add the
class `Classes.POPOVER_DISMISS` to that element. For example, the "Dismiss"
Copy link

Choose a reason for hiding this comment

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

Dismiss should be bold as it's an interactive UI element.

apply `position: absolute` to the `<body>` tag.
</div>
1. `Portal` `children` are wrapped in an extra `<div>` inside the portal container element.
1. Test harnesses such as `enzyme` cannot trivially find elements "through" Portals as they're not in the same React tree.

This comment was marked as resolved.

</div>
1. `Portal` `children` are wrapped in an extra `<div>` inside the portal container element.
1. Test harnesses such as `enzyme` cannot trivially find elements "through" Portals as they're not in the same React tree.
1. React `context` _is_ preserved (this one's a good thing).
Copy link

Choose a reason for hiding this comment

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

This should be a 3.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

markdown lists tho. keeping them all the same number is more maintainable for future edits

Copy link

Choose a reason for hiding this comment

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

Forgot that markdown was forgiving about this (used to rst).

Blueprint class name.

@interface ITagProps
Create a tag with a `span.@ns-tag`. An optional "remove" button can be added
Copy link

Choose a reason for hiding this comment

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

Bold remove as it is an interactive UI element.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

the element doesn't actually say "remove", it's just an ✖️ . does it still need bold?

Copy link

Choose a reason for hiding this comment

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

It does not.

* refactor datetime docs

* timezone docs
@blueprint-bot
Copy link

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

Preview: documentation | landing | table

giladgray and others added 3 commits June 18, 2018 11:11
* ControlGroup & FormGroup

* merge all text input docs into one file

* singular titles

* text area props

* edits
@blueprint-bot
Copy link

[docs] refactor forms docs (#2600)

Preview: documentation | landing | table

@blueprint-bot
Copy link

edits

Preview: documentation | landing | table

@blueprint-bot
Copy link

resolve forms nav: Form controls & Form inputs sections

Preview: documentation | landing | table

@giladgray giladgray merged commit efe5bfc into develop Jun 18, 2018
@giladgray giladgray deleted the gg/docs-rewrite branch June 18, 2018 21:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants