Skip to content

Commit

Permalink
[Docs] Overlay Example: add option to test scrolling behavior (#3406)
Browse files Browse the repository at this point in the history
jaamison authored and adidahiya committed Mar 13, 2019
1 parent 781a10b commit cddc617
Showing 2 changed files with 42 additions and 13 deletions.
49 changes: 37 additions & 12 deletions packages/docs-app/src/examples/core-examples/overlayExample.tsx
Original file line number Diff line number Diff line change
@@ -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;
@@ -20,6 +21,7 @@ export interface IOverlayExampleState {
hasBackdrop: boolean;
isOpen: boolean;
usePortal: boolean;
useTallContent: boolean;
}

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

private button: HTMLButtonElement;
@@ -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,
{ [OVERLAY_TALL_CLASS]: this.state.useTallContent },
);

return (
<Example options={this.renderOptions()} {...this.props}>
@@ -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
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.
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.useTallContent}
style={{ margin: "" }}
>
Make me scroll
</Button>
</div>
</div>
</Overlay>
</Example>
@@ -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, useTallContent: false });

private focusButton = () => this.button.focus();
private toggleScrollButton = () => this.setState({ useTallContent: !this.state.useTallContent });
}
6 changes: 5 additions & 1 deletion packages/docs-app/src/styles/_examples.scss
Original file line number Diff line number Diff line change
@@ -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;

1 comment on commit cddc617

@blueprint-bot
Copy link

Choose a reason for hiding this comment

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

[Docs] Overlay Example: add option to test scrolling behavior (#3406)

Previews: documentation | landing | table

Please sign in to comment.