Merge pull request #7 from dhis2/pull-upstream

chore(core): pull upstream
dhis2 · Mar 25, 2020 · 836765a · 836765a
2 parents 54fff53 + 1ee092d
commit 836765a
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 61 deletions.
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,3 +1,15 @@
+# [4.16.0](https://github.com/dhis2/ui-core/compare/v4.15.0...v4.16.0) (2020-03-25)
+
+
+### Bug Fixes
+
+* **tooltip:** remove `tag` prop so anchor is always a span ([0c4a72a](https://github.com/dhis2/ui-core/commit/0c4a72ad61f043fc8406e2a385a375bc2ae22e95))
+
+
+### Features
+
+* tooltip with renderprops ([3b5aeca](https://github.com/dhis2/ui-core/commit/3b5aecabe202c61041ecde40617563aacb303e5a))
+
 # [4.15.0](https://github.com/dhis2/ui-core/compare/v4.14.0...v4.15.0) (2020-03-19)
 
 

diff --git a/packages/core/src/ButtonBase/ButtonBase.stories.js b/packages/core/src/ButtonBase/ButtonBase.stories.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { ButtonBase } from './ButtonBase.js'
+import ButtonBase from './ButtonBase.js'
 
 export default {
     title: 'Component/Core/ButtonBase',

diff --git a/packages/widgets/src/Tooltip/Tooltip.js b/packages/widgets/src/Tooltip/Tooltip.js
@@ -65,7 +65,6 @@ class Tooltip extends Component {
         const {
             children,
             className,
-            component: Component,
             content,
             dataTest,
             maxWidth,
@@ -75,14 +74,22 @@ class Tooltip extends Component {
 
         return (
             <>
-                <Component
-                    onMouseOver={this.onMouseOver}
-                    onMouseOut={this.onMouseOut}
-                    ref={this.ref}
-                    data-test={`${dataTest}-reference`}
-                >
-                    {children}
-                </Component>
+                {typeof children === 'function' ? (
+                    children({
+                        onMouseOver: this.onMouseOver,
+                        onMouseOut: this.onMouseOut,
+                        ref: this.ref,
+                    })
+                ) : (
+                    <span
+                        onMouseOver={this.onMouseOver}
+                        onMouseOut={this.onMouseOut}
+                        ref={this.ref}
+                        data-test={`${dataTest}-reference`}
+                    >
+                        {children}
+                    </span>
+                )}
 
                 {open &&
                     createPortal(
@@ -122,47 +129,24 @@ class Tooltip extends Component {
 
 Tooltip.defaultProps = {
     dataTest: 'dhis2-uicore-tooltip',
-    component: 'span',
     maxWidth: 300,
     placement: 'top',
+    tag: 'span',
 }
 
 /**
  * @typedef {Object} PropTypes
  * @static
  * @prop {Node} [children]
  * @prop {string} [className]
- * @prop {string|function} [component] Use a custom component to wrap the Tooltip children or pass a string (i.e. 'p') to use a custom built-in component
- * @example
- * const Content = React.forwardRef(
- *     ({ children, onMouseOver, onMouseOut, dataTest }, ref) => (
- *         <em
- *             style={{ display: 'inline-block', color: 'red' }}
- *             ref={ref}
- *             onMouseOver={onMouseOver}
- *             onMouseOut={onMouseOut}
- *             dataTest={`${dataTest}-reference`}
- *         >
- *             {children}
- *         </em>
- *     )
- * )
- * Content.displayName = 'Content'
- * Content.propTypes = {
- *     children: propTypes.node,
- *     dataTest: propTypes.string,
- *     onMouseOut: propTypes.func,
- *     onMouseOver: propTypes.func,
- * }
  * @prop {Node} [content]
- * @prop {string} [dataTest]
- * @prop {number} [maxWidth]
+ * @prop {string} [dataTest=dhis2-uicore-tooltip]
+ * @prop {number} [maxWidth=300]
  * @prop {('top'|'bottom'|'right'|'left')} [placement=top]
  */
 Tooltip.propTypes = {
     children: propTypes.node,
     className: propTypes.string,
-    component: propTypes.oneOfType([propTypes.string, propTypes.func]),
     content: propTypes.node,
     dataTest: propTypes.string,
     maxWidth: propTypes.number,

diff --git a/packages/widgets/src/Tooltip/Tooltip.stories.js b/packages/widgets/src/Tooltip/Tooltip.stories.js
@@ -1,6 +1,4 @@
 import React from 'react'
-import propTypes from '@dhis2/prop-types'
-
 import { Tooltip } from './Tooltip.js'
 
 export default {
@@ -60,47 +58,65 @@ export const PlacementLeft = () => (
     </p>
 )
 
-export const CustomElement = () => {
+export const CustomElementViaTagProp = () => {
     return (
         <p>
             I am a{' '}
-            <Tooltip content="Some extra info" component="p">
+            <Tooltip content="Some extra info" tag="em">
                 paragraph
             </Tooltip>{' '}
             that contains a tooltip.
         </p>
     )
 }
 
-const Content = React.forwardRef(
-    ({ children, onMouseOver, onMouseOut, ...rest }, ref) => (
-        <em
-            style={{ display: 'inline-block', color: 'red' }}
-            ref={ref}
-            onMouseOver={onMouseOver}
-            onMouseOut={onMouseOut}
-            {...rest}
-        >
-            {children}
-        </em>
+export const CustomBuiltInComponent = () => {
+    return (
+        <p>
+            I am a{' '}
+            <Tooltip content="Some extra info">
+                {({ ref, onMouseOver, onMouseOut }) => (
+                    <span
+                        ref={ref}
+                        onMouseOver={onMouseOver}
+                        onMouseOut={onMouseOut}
+                    >
+                        paragraph
+                        <style jsx>{`
+                            span {
+                                color: green;
+                                text-decoration: underline;
+                            }
+                        `}</style>
+                    </span>
+                )}
+            </Tooltip>{' '}
+            that contains a tooltip.
+        </p>
     )
-)
-Content.displayName = 'Content'
-Content.propTypes = {
-    children: propTypes.node,
-    dataTest: propTypes.string,
-    onMouseOut: propTypes.func,
-    onMouseOver: propTypes.func,
 }
 
 export const CustomComponent = () => {
     return (
         <p>
             I am a{' '}
-            <Tooltip content="Some extra info" component={Content}>
-                paragraph
+            <Tooltip content="Some extra info">
+                {({ ref, onMouseOver, onMouseOut }) => (
+                    <span
+                        ref={ref}
+                        onMouseOver={onMouseOver}
+                        onMouseOut={onMouseOut}
+                    >
+                        <button>paragraph</button>
+                        <style jsx>{`
+                            span {
+                                display: inline-flex;
+                            }
+                        `}</style>
+                    </span>
+                )}
             </Tooltip>{' '}
-            that contains a tooltip.
+            that contains a Button with a tooltip.
         </p>
     )
 }