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.

Sign up for GitHub

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] Overlay Example: add button to toggle scrolling behavior #3406

Merged
merged 3 commits into from
Mar 13, 2019
Merged

[Docs] Overlay Example: add button to toggle scrolling behavior #3406

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8d8c29e
[Docs] Overlay Example: add button to toggle scrolling behavior
jaamison Mar 10, 2019
71dc940
[Docs] Overlay Example: clean up text wrapping, minor lint errors, b…
Mar 13, 2019
aff09f9
typo
Mar 13, 2019
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
43 changes: 34 additions & 9 deletions packages/docs-app/src/examples/core-examples/overlayExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-t
import { IBlueprintExampleData } from "../../tags/reactExamples";

const OVERLAY_EXAMPLE_CLASS = "docs-overlay-example-transition";
const OVERLAY_TALL_CLASS = "docs-overlay-example-tall";

export interface IOverlayExampleState {
autoFocus: boolean;
Expand All @@ -20,6 +21,7 @@ export interface IOverlayExampleState {
hasBackdrop: boolean;
isOpen: boolean;
usePortal: boolean;
scroll: boolean;
jaamison marked this conversation as resolved.
Show resolved Hide resolved
}

export class OverlayExample extends React.PureComponent<IExampleProps<IBlueprintExampleData>, IOverlayExampleState> {
Expand All @@ -31,6 +33,7 @@ export class OverlayExample extends React.PureComponent<IExampleProps<IBlueprint
hasBackdrop: true,
isOpen: false,
usePortal: true,
scroll: false
};

private button: HTMLButtonElement;
Expand All @@ -46,7 +49,13 @@ export class OverlayExample extends React.PureComponent<IExampleProps<IBlueprint
private handleOutsideClickChange = handleBooleanChange(val => this.setState({ canOutsideClickClose: val }));

public render() {
const classes = classNames(Classes.CARD, Classes.ELEVATION_4, OVERLAY_EXAMPLE_CLASS, this.props.data.themeName);
const classes = classNames(
Classes.CARD,
Classes.ELEVATION_4,
OVERLAY_EXAMPLE_CLASS,
this.props.data.themeName,
this.state.scroll ? OVERLAY_TALL_CLASS : undefined
jaamison marked this conversation as resolved.
Show resolved Hide resolved
);

return (
<Example options={this.renderOptions()} {...this.props}>
Expand All @@ -60,18 +69,33 @@ export class OverlayExample extends React.PureComponent<IExampleProps<IBlueprint
transitions can be implemented.
</p>
<p>
Click the right button below to transfer focus to the "Show overlay" trigger button outside
Click the "Focus button" below to transfer focus to the "Show overlay" trigger button outside
of this overlay. If persistent focus is enabled, focus will be constrained to the overlay.
Use the <Code>tab</Code> key to move to the next focusable element to illustrate this
effect.
</p>
<p>
Click the "Make me scroll" button below to make this overlay's content really tall, which
will make the overlay's container (but not the page) scrollable
</p>
<br />
<Button intent={Intent.DANGER} onClick={this.handleClose}>
Close
</Button>
<Button onClick={this.focusButton} style={{ float: "right" }}>
Focus button
</Button>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button intent={Intent.DANGER} onClick={this.handleClose} style={{ margin: "" }}>
Close
</Button>
<Button onClick={this.focusButton} style={{ margin: "" }}>
Focus button
</Button>
<Button
onClick={this.toggleScrollButton}
icon="double-chevron-down"
rightIcon="double-chevron-down"
active={this.state.scroll}
style={{ margin: "" }}
>
Make me scroll
</Button>
</div>
</div>
</Overlay>
</Example>
Expand Down Expand Up @@ -100,7 +124,8 @@ export class OverlayExample extends React.PureComponent<IExampleProps<IBlueprint
}

private handleOpen = () => this.setState({ isOpen: true });
private handleClose = () => this.setState({ isOpen: false });
private handleClose = () => this.setState({ isOpen: false, scroll: false });

private focusButton = () => this.button.focus();
private toggleScrollButton = () => this.setState({ scroll: !this.state.scroll });
}
6 changes: 5 additions & 1 deletion packages/docs-app/src/styles/_examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,11 +243,15 @@
);

top: 0;
left: calc(50% - #{$overlay-example-width / 2});
left: calc(50vw - #{$overlay-example-width / 2});
margin: 10vh 0;
width: $overlay-example-width;
}

.docs-overlay-example-tall {
height: 200%;
}

#{example("PopoverExample")} {
.docs-example {
display: block;
Expand Down