-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
Conversation
`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}> |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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={...}> |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oops
@## Separators | ||
@## CSS | ||
|
||
### Separators |
There was a problem hiding this comment.
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.
This comment was marked as resolved.
Sorry, something went wrong.
menu docsPreview: documentation | landing | table |
@interface INavbarHeadingProps | ||
|
||
@interface INavbarDividerProps | ||
|
||
@## CSS API |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"CSS"
context menu docsPreview: documentation | landing | table |
all Overlays polishPreview: documentation | landing | table |
* 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
singular component page titlesPreview: documentation | landing | table |
[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. |
There was a problem hiding this comment.
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.
This comment was marked as resolved.
Sorry, something went wrong.
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 |
There was a problem hiding this comment.
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` |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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" |
There was a problem hiding this comment.
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.
This comment was marked as resolved.
Sorry, something went wrong.
</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). |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
[docs] refactor datetime docs to focus on React usage (#2596)Preview: documentation | landing | table |
* ControlGroup & FormGroup * merge all text input docs into one file * singular titles * text area props * edits
[docs] refactor forms docs (#2600)Preview: documentation | landing | table |
editsPreview: documentation | landing | table |
resolve forms nav: Form controls & Form inputs sectionsPreview: documentation | landing | table |
Fixes #2465, Fixes #2542
Changes proposed in this pull request: