Add `Tooltip` component by kevva · Pull Request #360 · atomiclabs/hyperdex

kevva · 2018-06-14T13:39:25Z

Add margin to the tooltip
Add styles to the arrow for other positions than top
Fine tune styles (maybe some border and shadow)
Add animation while fading in (from top and down)

sindresorhus · 2018-06-14T13:48:49Z

+	}
+}
+
+export default Tooltip;


Can you add prop-types too? I've been too lazy to do this on the other components, but in hindsight, I should have.

Yeah, I didn't because no other components had it. Will add!

kevva · 2018-06-14T13:54:16Z

+	&__arrow {
+		position: absolute;
+		width: 16px;
+		height: 24px;


Will make these variables.

kevva · 2018-06-20T23:08:49Z

+			<Manager>
+				<Reference>
+					{({ref}) => (
+						<div


Really bothers me that we have to wrap the children in a div since it won't wrap elements with absolute position correctly. I'd really like to be able to pass a ref to children directly. React.forwardRef() only works for components.

TIL: https://bitsofco.de/how-display-contents-works/

That's kinda cool. Doesn't seem to work though. See the screenshot below (don't mind the positioning of the elements inside the seed phrase box, it's just for testing):

Ah, it's only available in Chrome 65, but Electron 2 is at 61. We'll be able to use this when Electron 3 is stable. #374

I added the flag to blinkFeatures, but it didn't work regardless, i.e. instead of getting the wrong position it got no position at all (which the screenshot shows).

kevva · 2018-06-21T00:24:34Z

@@ -5,43 +5,67 @@ import ReloadButton from 'components/ReloadButton';
 import CopyButton from 'components/CopyButton';


Had to rewrite this file to use flex inside generated-seed-phrase-container because we currently can't use absolutely positioned targets for our tooltips. flex is nicer than using position: absolute anyway :).

Much better! No idea why I didn't use flexbox in the first place...

kevva · 2018-06-21T00:34:25Z

@sindresorhus, tried to, but didn't come up with any nice border or shadows. Does the animation look good though? Also, should the content animation be in this component or should we pass another component that animates the text as content prop? Depends on how magical we want to make the tooltip.

sindresorhus · 2018-06-21T10:11:58Z

tried to, but didn't come up with any nice border or shadows.

I think it needs something so it doesn't bleed into the background. Try with a slight shadow.

Does the animation look good though?

The animation looks good.

Also, should the content animation be in this component or should we pass another component that animates the text as content prop? Depends on how magical we want to make the tooltip.

What you have now is good. We don't need that kind of manual control.

sindresorhus · 2018-06-21T10:17:40Z

@kevva I noticed that if I hover over the copy button, the click, then take my mouse somewhere else and then hover again, it still shows Copied!. I think it should revert back to the initial value when it's being hidden.

sindresorhus · 2018-06-21T10:04:27Z

 			type="button"
 			className={`${className} CopyButton`}
-			onClick={() => {
+			onClick={e => {


e => event

sindresorhus · 2018-06-21T10:16:30Z

@@ -0,0 +1,109 @@
+.Tooltip {
+	--color: var(--border-color);
+	--arrow-height: 8px;


I would make this 7px. It feels a tad bit too tall with 8px.

sindresorhus · 2018-06-21T10:20:36Z

+			<Manager>
+				<Reference>
+					{({ref}) => (
+						<div


TIL: https://bitsofco.de/how-display-contents-works/

sindresorhus · 2018-06-21T10:22:52Z

@@ -5,43 +5,67 @@ import ReloadButton from 'components/ReloadButton';
 import CopyButton from 'components/CopyButton';


Much better! No idea why I didn't use flexbox in the first place...

sindresorhus · 2018-06-21T10:24:33Z

+class CreatePortfolioStep2 extends React.Component {
+	state = {
+		isCopied: false,
+	}


Btw, check out https://github.com/hyperdexapp/hyperdex/blob/7d996b46533bc965409f53150b9b037731bc040c/app/renderer/containers/SuperContainer.js#L63-L74 It lets us add state to functional components. No more class mess when you only need a little bit of state.

Sweet. Didn't notice that!

sindresorhus · 2018-06-21T10:25:04Z

 		"react": "^16.3.2",
 		"react-dom": "^16.3.2",
 		"react-extras": "^0.6.0",
+		"react-popper": "1.0.0-beta.6",


1.0.0 final is out

kevva · 2018-06-22T09:16:31Z

Added a slight shadow to it:

@kevva I noticed that if I hover over the copy button, the click, then take my mouse somewhere else and then hover again, it still shows Copied!. I think it should revert back to the initial value when it's being hidden.

Should be fixed. Added an onClose handler to it to reset the state.

kevva · 2018-06-22T09:47:04Z

+									<div
+										ref={arrowProps.ref}
+										className="Tooltip__arrow"
+										style={arrowProps.style}


Would've wanted to put these into styled-jsx too, but that'd require converting them to a CSS string. Decided not to bother with it.

sindresorhus · 2018-06-25T04:32:41Z

This looks and works perfectly now. Nice work Kevin :)

kevva requested review from lukechilds and sindresorhus June 14, 2018 13:39

sindresorhus reviewed Jun 14, 2018

View reviewed changes

kevva commented Jun 14, 2018

View reviewed changes

kevva force-pushed the tooltips branch from f39b7be to ae38e00 Compare June 19, 2018 13:47

kevva changed the title ~~WIP: Add Tooltip component~~ [WIP]: Add Tooltip component Jun 20, 2018

kevva commented Jun 20, 2018

View reviewed changes

kevva commented Jun 21, 2018

View reviewed changes

sindresorhus suggested changes Jun 21, 2018

View reviewed changes

Add Tooltip component

5f4063d

kevva force-pushed the tooltips branch from a812695 to 5f4063d Compare June 22, 2018 09:16

kevva changed the title ~~[WIP]: Add Tooltip component~~ Add Tooltip component Jun 22, 2018

kevva commented Jun 22, 2018

View reviewed changes

sindresorhus merged commit 5167d76 into master Jun 25, 2018

sindresorhus deleted the tooltips branch June 25, 2018 04:32

		@@ -5,43 +5,67 @@ import ReloadButton from 'components/ReloadButton';
		import CopyButton from 'components/CopyButton';

Conversation

kevva commented Jun 14, 2018 • edited by sindresorhus Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kevva Jun 22, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kevva Jun 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kevva commented Jun 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sindresorhus commented Jun 21, 2018

Uh oh!

sindresorhus commented Jun 21, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kevva commented Jun 22, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sindresorhus commented Jun 25, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kevva commented Jun 14, 2018 •

edited by sindresorhus

Loading

kevva Jun 22, 2018 •

edited

Loading

kevva Jun 21, 2018 •

edited

Loading

kevva commented Jun 21, 2018 •

edited

Loading

kevva commented Jun 22, 2018 •

edited

Loading