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.

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

feat(tooltip): Add off prop #539

Merged
merged 5 commits into from
Feb 15, 2019
Merged

feat(tooltip): Add off prop #539

merged 5 commits into from
Feb 15, 2019

Conversation

montezume
Copy link
Contributor

@montezume montezume commented Feb 15, 2019

Summary

Adds the prop isEnabled to the tooltip. It sort of mirrors the old "display" prop from the core tooltip.

Motivation

While refactoring the MC and adding the new tooltip, I found a lot of cases when I had to make code like this

const Button = props =>
  props.isDisabled ? (
    <Tooltip title="Disabled">
      <button disabled>Submit</button>
    </Tooltip>
  ) : (
    <button>Submit</button>
  );

This prop should make it a bit cleaner.

const Button = props => (
    <Tooltip title="Disabled" off={!props.isDisabled}>
      <button disabled={props.isDisabled}>Submit</button>
    </Tooltip>
  );

Copy link
Contributor

@qmateub qmateub left a comment

Choose a reason for hiding this comment

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

Nice 👌


There may be cases when you only want to enable the display of a tooltip under a certain condition. In these cases, you may want to set the `isEnabled` prop to false.

In the following example, the tooltip text only appears on hover when the button is disabled.
Copy link
Contributor

Choose a reason for hiding this comment

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

Reading this I like this more than isVisible cause the latter may spark the understanding that it is forced to be visible even without hovering. Maybe isSurpressed is another name for the prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@emmenko do you have any opinions on the prop naming?

  • isDisabled
  • isEnabled
  • isSurpressed

Copy link
Contributor

Choose a reason for hiding this comment

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

I liked isSurpressed but am leaning towards isDisabled for API consistency.

Copy link
Member

Choose a reason for hiding this comment

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

Hmm, if you end up doing isEnabled={!props.isDisabled} maybe isDisabled makes more sense?
I'm also thinking about something like off, which maybe better indicates that the event listeners are turned off.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I renamed it to isDisabled. The other option could be isOff 🤔.

Copy link
Member

Choose a reason for hiding this comment

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

Or just off 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

all of our other props start with is though

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm okay with off if @tdeekens is as well. I just want to :shipit:

Copy link
Contributor

Choose a reason for hiding this comment

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

off is fine. I kind of don't like to break with patterns unless there is a good reason. So my choice would have been isOff even if that is more to write.

@montezume montezume changed the title feat(tooltip): Add isEnabled prop feat(tooltip): Add isDisabled prop Feb 15, 2019
@montezume montezume changed the title feat(tooltip): Add isDisabled prop ffeat(tooltip): Add off prop Feb 15, 2019
@montezume montezume changed the title ffeat(tooltip): Add off prop feat(tooltip): Add off prop Feb 15, 2019
@montezume montezume merged commit 2777c53 into master Feb 15, 2019
@montezume montezume deleted the ml-add-prop-tooltip branch February 15, 2019 13:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants