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
Add active state to Popover2 when popover is open and target is a button #1872
Conversation
const target: JSX.Element = React.cloneElement(children.target, { | ||
// force disable single Tooltip child when popover is open (BLUEPRINT-552) | ||
className: classNames({ [Classes.ACTIVE]: isOpen && !isHoverInteractionKind }), |
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.
Need to make sure we don't overwrite custom target classes that might have been provided. Let's move this to the classNames
composition on L282:
targetProps.className = classNames(
Classes.POPOVER_TARGET,
{
[Classes.ACTIVE]: isOpen && !isHoverInteractionKind,
[Classes.POPOVER_OPEN]: isOpen,
},
className,
);
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.
@cmslewis targetProps.className
or target.className
?
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 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.
Whoop there it is. 👍
Got trigger happy. pt-active
is actually added to a wrapper around button children. Needs more investigation.
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.
.pt-active
should be on target
, not targetProps
. Requesting changes so @cmslewis and I can think about a better implementation
@gjavitt please merge master into your branch to pick up the new CI workflows |
…int into gj/popover-2-active-state
@giladgray is this PR cool? if not, can you think of a better approach? |
const target: JSX.Element = React.cloneElement(children.target, { | ||
className: classNames({ [Classes.ACTIVE]: isOpen && !isHoverInteractionKind }), |
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.
must add children.target.props.className
to avoid clobbering existing classes.
@gjavitt can you please enable preview comments for your Circle build so we can play with it? |
unclobber classnamesPreview: documentation | landing | table |
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 code change looks good.
worth noting that it does not work for the nested <Popover><Tooltip><Button /></Tooltip></Popover>
use case because the class does not get applied to the Button itself (see Tooltip example in docs). don't think there's much we can do about this.
Agree Gilad, if anything it's something we should fix on the |
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.
nice work @gjavitt!
…ton (#1872) * Add active state to Popover2 when popover is open and target is a button * Add active state to Popover2 when popover is open and target is a button * fix * back to target instead of targetProps * fix * back to target instead of targetProps * unclobber classnames
Checklist
Changes proposed in this pull request:
Adds active state to Popover2 when popover is open and target is a button. (Does not make button active if popover is triggered by hover interaction instead of click.)
Screenshot