From 90dca549cf5b5c2c0d826d9102c00ab6dcbe5a90 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Thu, 24 May 2018 21:51:37 -0400 Subject: [PATCH 01/13] feat(tooltip): add new tooltip component adds new tooltip component to tabler-react --- src/components/Tooltip/Tooltip.react.js | 79 +++++++++++++++++++++++++ src/components/Tooltip/index.js | 5 ++ src/components/index.js | 3 +- 3 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 src/components/Tooltip/Tooltip.react.js create mode 100644 src/components/Tooltip/index.js diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js new file mode 100644 index 00000000..a7eafe30 --- /dev/null +++ b/src/components/Tooltip/Tooltip.react.js @@ -0,0 +1,79 @@ +// @flow + +import * as React from "react"; +import cn from "classnames"; +import { Manager, Placement, Reference, Popper } from "react-popper"; +import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper"; + +type Props = {| + +content: string, + +children?: React.Node, + +className?: string, + +placement?: Placement, +|}; + +type State = { + isShown: boolean, +}; + +class Tooltip extends React.Component { + state = { isShown: false }; + + _handleTriggerOnMouseEnter = (e: SyntheticMouseEvent) => { + e.preventDefault(); + this.setState({ isShown: true }); + }; + + _handleTriggerOnMouseLeave = (e: SyntheticMouseEvent) => { + e.preventDefault(); + this.setState({ isShown: false }); + }; + + render(): React.Node { + const { className, children, placement, content } = this.props; + + const classes = cn( + "tooltip", + placement ? "bs-tooltip-" + placement : null, + { + show: this.state.isShown, + }, + className + ); + + return ( + + + {({ ref }: ReferenceChildrenProps) => ( +
+ {children} +
+ )} + + {this.state.isShown ? ( + + {({ ref, style, placement }: PopperChildrenProps) => { + return ( +
+ {/*
*/} +
{content}
+
+ ); + }} + + ) : null} + + ); + } +} + +export default Tooltip; diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js new file mode 100644 index 00000000..2c5139be --- /dev/null +++ b/src/components/Tooltip/index.js @@ -0,0 +1,5 @@ +// @flow + +import Tooltip from "./Tooltip.react"; + +export { Tooltip as default }; diff --git a/src/components/index.js b/src/components/index.js index b3161709..46fe8fab 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -15,8 +15,8 @@ export { default as GalleryCard } from "./GalleryCard"; export { default as Grid } from "./Grid"; export { default as Header } from "./Header"; export { default as Icon } from "./Icon"; -export { default as Loader } from "./Loader"; export { default as List } from "./List"; +export { default as Loader } from "./Loader"; export { default as Media } from "./Media"; export { default as Nav } from "./Nav"; export { default as Notification } from "./Notification"; @@ -36,3 +36,4 @@ export { default as Text } from "./Text"; export { default as TabbedCard } from "./TabbedCard"; export { Tab, Tabs, TabbedContainer, TabbedHeader } from "./Tabs"; export { default as Timeline } from "./Timeline"; +export { default as Tooltip } from "./Tooltip"; From e7e9f3a7dac3135a7f4b481f3e494471f82e2522 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Fri, 25 May 2018 11:24:33 -0400 Subject: [PATCH 02/13] feat(mediabodysocial): add tooltip to media icons this adds a new tooltip to all media icons in the media body component #114 --- src/components/Media/MediaBodySocial.react.js | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/Media/MediaBodySocial.react.js b/src/components/Media/MediaBodySocial.react.js index 01ff2a90..8e25fe32 100644 --- a/src/components/Media/MediaBodySocial.react.js +++ b/src/components/Media/MediaBodySocial.react.js @@ -1,7 +1,7 @@ // @flow import * as React from "react"; -import { List, Media } from "../../components"; +import { List, Media, Tooltip } from "../"; type Props = {| +children?: React.Node, @@ -32,9 +32,11 @@ function MediaBodySocial({ if (facebook) { fbIcon = ( - - - + + + + + ); } @@ -42,9 +44,11 @@ function MediaBodySocial({ if (twitter) { twitterIcon = ( - - - + + + + + ); } @@ -52,9 +56,11 @@ function MediaBodySocial({ if (phone) { phoneIcon = ( - - - + + + + + ); } @@ -62,9 +68,11 @@ function MediaBodySocial({ if (skype) { skypeIcon = ( - - - + + + + + ); } From 2cf6fb5ebcba57b5db677cf07035472558e1689c Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Fri, 25 May 2018 11:35:13 -0400 Subject: [PATCH 03/13] feat(Tooltip): Add arrow to the tooltip The arrow will now always be shown pointing downwards. Next commit will allow for a placement-based alignment of the arrow. --- src/components/Tooltip/Tooltip.react.js | 5 ++++- src/components/Tooltip/tooltip.css | 5 +++++ 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 src/components/Tooltip/tooltip.css diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index a7eafe30..62d21c5d 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -4,6 +4,7 @@ import * as React from "react"; import cn from "classnames"; import { Manager, Placement, Reference, Popper } from "react-popper"; import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper"; +import styles from "./tooltip.css"; type Props = {| +content: string, @@ -41,6 +42,8 @@ class Tooltip extends React.Component { className ); + const arrowClasses = cn("arrow", styles["tbr-arrow"]); + return ( @@ -64,7 +67,7 @@ class Tooltip extends React.Component { style={style} ref={ref} > - {/*
*/} +
{content}
); diff --git a/src/components/Tooltip/tooltip.css b/src/components/Tooltip/tooltip.css new file mode 100644 index 00000000..760f5ddb --- /dev/null +++ b/src/components/Tooltip/tooltip.css @@ -0,0 +1,5 @@ +/* Tooltip-specific Stylesheet */ + +.tbr-arrow { + left: calc(50% - 0.4rem); +} From f0990d58d4be2ef2e87e321dc8aaeb957e6a2d27 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Fri, 25 May 2018 16:56:37 -0400 Subject: [PATCH 04/13] refactor(Tooltip): Change ternary operators into logical operators All null returning ternary operators ( X ? Y : null ) have been replaced with logical operators ( X && Y) --- src/components/Tooltip/Tooltip.react.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index 62d21c5d..399c0923 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -35,7 +35,7 @@ class Tooltip extends React.Component { const classes = cn( "tooltip", - placement ? "bs-tooltip-" + placement : null, + placement && "bs-tooltip-" + placement, { show: this.state.isShown, }, @@ -57,7 +57,7 @@ class Tooltip extends React.Component {
)} - {this.state.isShown ? ( + {this.state.isShown && ( {({ ref, style, placement }: PopperChildrenProps) => { return ( @@ -73,7 +73,7 @@ class Tooltip extends React.Component { ); }} - ) : null} + )} ); } From 85c24ea919d354717ecddeca5ef8a00d6549e371 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Fri, 25 May 2018 16:59:14 -0400 Subject: [PATCH 05/13] chore(Tooltip): Capitalize tooltip.css title --- src/components/Tooltip/Tooltip.react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index 399c0923..2a73d30c 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -4,7 +4,7 @@ import * as React from "react"; import cn from "classnames"; import { Manager, Placement, Reference, Popper } from "react-popper"; import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper"; -import styles from "./tooltip.css"; +import styles from "./Tooltip.css"; type Props = {| +content: string, From 046fb3582a3468f5521cca62717d25b876e4f272 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Fri, 25 May 2018 17:17:54 -0400 Subject: [PATCH 06/13] feat(Tooltip): Add placement-based arrow positioning (centering) The arrow will now always point towards the reference element while being centered with the tooltip (no matter the size or number of lines) --- src/components/Tooltip/Tooltip.react.js | 7 ++++++- src/components/Tooltip/tooltip.css | 6 +++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index 2a73d30c..edac215a 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -42,7 +42,12 @@ class Tooltip extends React.Component { className ); - const arrowClasses = cn("arrow", styles["tbr-arrow"]); + const arrowClasses = cn( + "arrow", + placement === "top" || placement === "bottom" + ? styles["tbr-arrow-vertical"] + : styles["tbr-arrow-horizontal"] + ); return ( diff --git a/src/components/Tooltip/tooltip.css b/src/components/Tooltip/tooltip.css index 760f5ddb..8af0f106 100644 --- a/src/components/Tooltip/tooltip.css +++ b/src/components/Tooltip/tooltip.css @@ -1,5 +1,9 @@ /* Tooltip-specific Stylesheet */ -.tbr-arrow { +.tbr-arrow-vertical { left: calc(50% - 0.4rem); } + +.tbr-arrow-horizontal { + top: calc(50% - 0.4rem); +} From df92785c7ae49ae63e93be0e6a47ef9f5fe495a3 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Fri, 25 May 2018 17:29:39 -0400 Subject: [PATCH 07/13] chore(Tooltip): Remove tooltip.css --- src/components/Tooltip/Tooltip.react.js | 10 +++++----- src/components/Tooltip/tooltip.css | 9 --------- 2 files changed, 5 insertions(+), 14 deletions(-) delete mode 100644 src/components/Tooltip/tooltip.css diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index edac215a..afdbc2b0 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -4,7 +4,7 @@ import * as React from "react"; import cn from "classnames"; import { Manager, Placement, Reference, Popper } from "react-popper"; import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper"; -import styles from "./Tooltip.css"; +// import styles from "./Tooltip.css"; type Props = {| +content: string, @@ -43,10 +43,10 @@ class Tooltip extends React.Component { ); const arrowClasses = cn( - "arrow", - placement === "top" || placement === "bottom" - ? styles["tbr-arrow-vertical"] - : styles["tbr-arrow-horizontal"] + "arrow" + // placement === "top" || placement === "bottom" + // ? styles["tbr-arrow-vertical"] + // : styles["tbr-arrow-horizontal"] ); return ( diff --git a/src/components/Tooltip/tooltip.css b/src/components/Tooltip/tooltip.css deleted file mode 100644 index 8af0f106..00000000 --- a/src/components/Tooltip/tooltip.css +++ /dev/null @@ -1,9 +0,0 @@ -/* Tooltip-specific Stylesheet */ - -.tbr-arrow-vertical { - left: calc(50% - 0.4rem); -} - -.tbr-arrow-horizontal { - top: calc(50% - 0.4rem); -} From a6c36ae79ae83d7ca930870dc9bdd3969a390a52 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Fri, 25 May 2018 17:31:46 -0400 Subject: [PATCH 08/13] fix(Tooltip): Add Tooltip.css (rename from tooltip.css) --- src/components/Tooltip/Tooltip.css | 9 +++++++++ src/components/Tooltip/Tooltip.react.js | 8 ++++---- 2 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 src/components/Tooltip/Tooltip.css diff --git a/src/components/Tooltip/Tooltip.css b/src/components/Tooltip/Tooltip.css new file mode 100644 index 00000000..8af0f106 --- /dev/null +++ b/src/components/Tooltip/Tooltip.css @@ -0,0 +1,9 @@ +/* Tooltip-specific Stylesheet */ + +.tbr-arrow-vertical { + left: calc(50% - 0.4rem); +} + +.tbr-arrow-horizontal { + top: calc(50% - 0.4rem); +} diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index afdbc2b0..092c56e6 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -4,7 +4,7 @@ import * as React from "react"; import cn from "classnames"; import { Manager, Placement, Reference, Popper } from "react-popper"; import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper"; -// import styles from "./Tooltip.css"; +import styles from "./Tooltip.css"; type Props = {| +content: string, @@ -44,9 +44,9 @@ class Tooltip extends React.Component { const arrowClasses = cn( "arrow" - // placement === "top" || placement === "bottom" - // ? styles["tbr-arrow-vertical"] - // : styles["tbr-arrow-horizontal"] + placement === "top" || placement === "bottom" + ? styles["tbr-arrow-vertical"] + : styles["tbr-arrow-horizontal"] ); return ( From 8eec3b0c84c874e5efe6465985bcdc7211188c37 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Fri, 25 May 2018 17:32:44 -0400 Subject: [PATCH 09/13] chore(Tooltip): Add comma where needed --- src/components/Tooltip/Tooltip.react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index 092c56e6..edac215a 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -43,7 +43,7 @@ class Tooltip extends React.Component { ); const arrowClasses = cn( - "arrow" + "arrow", placement === "top" || placement === "bottom" ? styles["tbr-arrow-vertical"] : styles["tbr-arrow-horizontal"] From 62487d58a3442c642efc3566cb12212ff546a962 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Wed, 30 May 2018 12:51:58 -0400 Subject: [PATCH 10/13] docs(Tooltip): Add Tooltip documentation --- src/components/Tooltip/Tooltip.examples.md | 7 +++++++ styleguide.config.js | 4 ++++ 2 files changed, 11 insertions(+) create mode 100644 src/components/Tooltip/Tooltip.examples.md diff --git a/src/components/Tooltip/Tooltip.examples.md b/src/components/Tooltip/Tooltip.examples.md new file mode 100644 index 00000000..96412c6d --- /dev/null +++ b/src/components/Tooltip/Tooltip.examples.md @@ -0,0 +1,7 @@ +### Basic Tooltip + +```jsx + + Hover Me! + +``` diff --git a/styleguide.config.js b/styleguide.config.js index 5ceb8496..5dbce106 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -158,6 +158,10 @@ module.exports = { name: "Text", components: "src/components/Text/**/*.react.{js,jsx}", }, + { + name: "Tooltip", + components: "src/components/Tooltip/**/*.react.{js,jsx}", + }, ], }, { From 268744df3ac5d75d0a39be281d501a50d5c98628 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Wed, 30 May 2018 12:56:29 -0400 Subject: [PATCH 11/13] fix(Tooltip): Add Reference Type checking and documentation comments The component of the render method will check for the type props and return a usable component accordingly. --- src/components/Tooltip/Tooltip.react.js | 42 ++++++++++++++++++------- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index edac215a..19596a44 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -7,10 +7,23 @@ import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper"; import styles from "./Tooltip.css"; type Props = {| - +content: string, - +children?: React.Node, + /** + * The reference element which the Tooltip will be based on. + */ + +children?: React.Element, + /** + * Any additional classNames for the Tooltip. + */ +className?: string, + /** + * This is the text content of the Tooltip. + */ + +content: string, + /** + * This is the placement of the Tooltip (top, bottom, left, right). + */ +placement?: Placement, + +type?: "link", |}; type State = { @@ -52,15 +65,22 @@ class Tooltip extends React.Component { return ( - {({ ref }: ReferenceChildrenProps) => ( -
- {children} -
- )} + {({ ref }: ReferenceChildrenProps) => + typeof children === "undefined" + ? // Type checking, undefined cannot be passed to React.cloneElement + console.error("undefined children provided to Tooltip.") + : this.props.type + ? React.cloneElement(children, { + ref: ref, + onMouseEnter: this._handleTriggerOnMouseEnter, + onMouseLeave: this._handleTriggerOnMouseLeave, + }) + : React.cloneElement(children, { + rootRef: ref, + onMouseEnter: this._handleTriggerOnMouseEnter, + onMouseLeave: this._handleTriggerOnMouseLeave, + }) + } {this.state.isShown && ( From aca554a5f4d89adaf58858758fcfaf23cab3ec4f Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Wed, 30 May 2018 14:05:24 -0400 Subject: [PATCH 12/13] refactor(Tooltip): Rewrite children type checking --- src/components/Tooltip/Tooltip.react.js | 26 ++++++++++++------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index 19596a44..ae8169cc 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -66,20 +66,18 @@ class Tooltip extends React.Component { {({ ref }: ReferenceChildrenProps) => - typeof children === "undefined" - ? // Type checking, undefined cannot be passed to React.cloneElement - console.error("undefined children provided to Tooltip.") - : this.props.type - ? React.cloneElement(children, { - ref: ref, - onMouseEnter: this._handleTriggerOnMouseEnter, - onMouseLeave: this._handleTriggerOnMouseLeave, - }) - : React.cloneElement(children, { - rootRef: ref, - onMouseEnter: this._handleTriggerOnMouseEnter, - onMouseLeave: this._handleTriggerOnMouseLeave, - }) + typeof children !== "undefined" && + (this.props.type + ? React.cloneElement(children, { + ref: ref, + onMouseEnter: this._handleTriggerOnMouseEnter, + onMouseLeave: this._handleTriggerOnMouseLeave, + }) + : React.cloneElement(children, { + rootRef: ref, + onMouseEnter: this._handleTriggerOnMouseEnter, + onMouseLeave: this._handleTriggerOnMouseLeave, + })) } {this.state.isShown && ( From ee3e770a0b8ab48856b44b8e7dee4a4b374d4440 Mon Sep 17 00:00:00 2001 From: Greg Hamel Date: Fri, 1 Jun 2018 13:12:59 -0400 Subject: [PATCH 13/13] docs: Update to documentation index.html --- example/public/documentation/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/public/documentation/index.html b/example/public/documentation/index.html index bd9f45a5..2e9d05bc 100644 --- a/example/public/documentation/index.html +++ b/example/public/documentation/index.html @@ -1 +1 @@ -Tabler React Style Guide
\ No newline at end of file +Tabler React Style Guide
\ No newline at end of file