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

Jump to bottom

Add active state to Popover2 when popover is open and target is a button #1872

Merged
merged 9 commits into from Dec 9, 2017
Merged

Add active state to Popover2 when popover is open and target is a button #1872

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
489fa81
Add active state to Popover2 when popover is open and target is a button
gjavitt Dec 7, 2017
a400f9e
Add active state to Popover2 when popover is open and target is a button
gjavitt Dec 7, 2017
fd3a0e0
fix
gjavitt Dec 7, 2017
fa20e47
back to target instead of targetProps
gjavitt Dec 7, 2017
4fe092c
fix
gjavitt Dec 7, 2017
e8ce7c1
back to target instead of targetProps
gjavitt Dec 7, 2017
661f3f8
Merge branch 'gj/popover-2-active-state' of github.com:gjavitt/bluepr…
gjavitt Dec 8, 2017
38aef16
Merge remote-tracking branch 'upstream/master' into gj/popover-2-acti…
gjavitt Dec 8, 2017
11bc696
unclobber classnames
gjavitt Dec 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/labs/src/components/popover/popover2.tsx
View file
Open in desktop
Expand Up @@ -264,9 +264,10 @@ export class Popover2 extends AbstractComponent<IPopover2Props, IPopover2State>
public render() {
const { className } = this.props;
const { isOpen, disabled, hasBackdrop } = this.state;
const isHoverInteractionKind = this.isHoverInteractionKind();

let targetProps: React.HTMLAttributes<HTMLElement>;
if (this.isHoverInteractionKind()) {
if (isHoverInteractionKind) {
targetProps = {
onBlur: this.handleTargetBlur,
onFocus: this.handleTargetFocus,
Expand All @@ -288,8 +289,11 @@ export class Popover2 extends AbstractComponent<IPopover2Props, IPopover2State>
);

const children = this.understandChildren();
const targetTabIndex = this.props.openOnTargetFocus && this.isHoverInteractionKind() ? 0 : undefined;
const targetTabIndex = this.props.openOnTargetFocus && isHoverInteractionKind ? 0 : undefined;
const target: JSX.Element = React.cloneElement(children.target, {
className: classNames(children.target.props.className, {
[Classes.ACTIVE]: isOpen && !isHoverInteractionKind,
}),
// force disable single Tooltip child when popover is open (BLUEPRINT-552)
disabled: isOpen && children.target.type === Tooltip2 ? true : children.target.props.disabled,
tabIndex: targetTabIndex,
Expand Down