From 7614807320eb250042514ce29e1901da94c6cbd3 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Wed, 3 Jun 2020 09:37:03 +0200 Subject: [PATCH 1/5] Svg transform rotate doesnt support degrees --- .../core-react/src/Tooltip/Tooltip.tokens.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/libraries/core-react/src/Tooltip/Tooltip.tokens.js b/libraries/core-react/src/Tooltip/Tooltip.tokens.js index a622f55d48..15946fe85e 100644 --- a/libraries/core-react/src/Tooltip/Tooltip.tokens.js +++ b/libraries/core-react/src/Tooltip/Tooltip.tokens.js @@ -41,28 +41,28 @@ export const tooltip = { arrowLeft: 'calc(50% - 8px/2)', arrowTop: '-5px', tooltipBottom: '-40px', - arrowTransform: 'rotate(90deg)', + arrowTransform: 'rotate(90)', }, bottomRight: { arrowRight: '4px', arrowTop: '-5px', tooltipRight: 0, tooltipBottom: '-40px', - arrowTransform: 'rotate(90deg)', + arrowTransform: 'rotate(90)', }, bottomLeft: { arrowLeft: '4px', arrowTop: '-5px', tooltipLeft: 0, tooltipBottom: '-40px', - arrowTransform: 'rotate(90deg)', + arrowTransform: 'rotate(90)', }, top: { width: '100%', arrowLeft: 'calc(50% - 8px/2)', arrowBottom: '-5px', tooltipTop: '-40px', - arrowTransform: 'rotate(-90deg)', + arrowTransform: 'rotate(-90)', }, topRight: { arrowRight: '4px', @@ -70,14 +70,14 @@ export const tooltip = { tooltipRight: 0, width: 'auto', tooltipTop: '-40px', - arrowTransform: 'rotate(-90deg)', + arrowTransform: 'rotate(-90)', }, topLeft: { arrowLeft: '4px', arrowBottom: '-5px', tooltipLeft: 0, tooltipTop: '-40px', - arrowTransform: 'rotate(-90deg)', + arrowTransform: 'rotate(-90)', }, left: { arrowTop: 'calc(50% - 8px/2)', @@ -85,7 +85,7 @@ export const tooltip = { tooltipLeft: '-8px', tooltipTop: 'calc(50% - 32px/2)', transform: 'translateX(-100%)', - arrowTransform: 'rotate(180deg)', + arrowTransform: 'rotate(180)', }, leftTop: { arrowTop: '4px', @@ -93,7 +93,7 @@ export const tooltip = { tooltipLeft: '-8px', tooltipTop: 0, transform: 'translateX(-100%)', - arrowTransform: 'rotate(180deg)', + arrowTransform: 'rotate(180)', }, leftBottom: { arrowBottom: '4px', @@ -101,7 +101,7 @@ export const tooltip = { tooltipLeft: '-8px', tooltipBottom: 0, transform: 'translateX(-100%)', - arrowTransform: 'rotate(180deg)', + arrowTransform: 'rotate(180)', }, right: { arrowTop: 'calc(50% - 8px/2)', From 6f0f47f8266fea589ca0bfab0f54ed9e00ea88a1 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Wed, 3 Jun 2020 10:18:58 +0200 Subject: [PATCH 2/5] Focus changed to focus-visible, only accessible focus by tab key --- libraries/core-react/src/Tooltip/Tooltip.jsx | 17 ++++++++++------- .../core-react/src/Tooltip/Tooltip.tokens.js | 18 +++++++++--------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/libraries/core-react/src/Tooltip/Tooltip.jsx b/libraries/core-react/src/Tooltip/Tooltip.jsx index 5241c2d1ba..3b56946b96 100644 --- a/libraries/core-react/src/Tooltip/Tooltip.jsx +++ b/libraries/core-react/src/Tooltip/Tooltip.jsx @@ -10,8 +10,8 @@ const Anchor = styled.div` width: auto; justify-content: center; &:hover, - &:focus, - &:focus-within { + &[data-focus-visible-added]:focus { + outline: none; > :last-child { display: block; } @@ -49,13 +49,12 @@ const StyledTooltip = styled.div` ` const TooltipArrow = styled.svg` - ${({ top, bottom, right, left, transform }) => + ${({ top, bottom, right, left }) => css` bottom: ${bottom}; top: ${top}; right: ${right}; left: ${left}; - transform: ${transform}; `} width: ${tokens.arrow.width}; height: ${tokens.arrow.height}; @@ -86,15 +85,19 @@ export const Tooltip = forwardRef(function Tooltip( right: tokens.placement[placement].arrowRight, top: tokens.placement[placement].arrowTop, bottom: tokens.placement[placement].arrowBottom, - transform: tokens.placement[placement].arrowTransform, } return ( - + {children} - + {title} diff --git a/libraries/core-react/src/Tooltip/Tooltip.tokens.js b/libraries/core-react/src/Tooltip/Tooltip.tokens.js index 15946fe85e..a622f55d48 100644 --- a/libraries/core-react/src/Tooltip/Tooltip.tokens.js +++ b/libraries/core-react/src/Tooltip/Tooltip.tokens.js @@ -41,28 +41,28 @@ export const tooltip = { arrowLeft: 'calc(50% - 8px/2)', arrowTop: '-5px', tooltipBottom: '-40px', - arrowTransform: 'rotate(90)', + arrowTransform: 'rotate(90deg)', }, bottomRight: { arrowRight: '4px', arrowTop: '-5px', tooltipRight: 0, tooltipBottom: '-40px', - arrowTransform: 'rotate(90)', + arrowTransform: 'rotate(90deg)', }, bottomLeft: { arrowLeft: '4px', arrowTop: '-5px', tooltipLeft: 0, tooltipBottom: '-40px', - arrowTransform: 'rotate(90)', + arrowTransform: 'rotate(90deg)', }, top: { width: '100%', arrowLeft: 'calc(50% - 8px/2)', arrowBottom: '-5px', tooltipTop: '-40px', - arrowTransform: 'rotate(-90)', + arrowTransform: 'rotate(-90deg)', }, topRight: { arrowRight: '4px', @@ -70,14 +70,14 @@ export const tooltip = { tooltipRight: 0, width: 'auto', tooltipTop: '-40px', - arrowTransform: 'rotate(-90)', + arrowTransform: 'rotate(-90deg)', }, topLeft: { arrowLeft: '4px', arrowBottom: '-5px', tooltipLeft: 0, tooltipTop: '-40px', - arrowTransform: 'rotate(-90)', + arrowTransform: 'rotate(-90deg)', }, left: { arrowTop: 'calc(50% - 8px/2)', @@ -85,7 +85,7 @@ export const tooltip = { tooltipLeft: '-8px', tooltipTop: 'calc(50% - 32px/2)', transform: 'translateX(-100%)', - arrowTransform: 'rotate(180)', + arrowTransform: 'rotate(180deg)', }, leftTop: { arrowTop: '4px', @@ -93,7 +93,7 @@ export const tooltip = { tooltipLeft: '-8px', tooltipTop: 0, transform: 'translateX(-100%)', - arrowTransform: 'rotate(180)', + arrowTransform: 'rotate(180deg)', }, leftBottom: { arrowBottom: '4px', @@ -101,7 +101,7 @@ export const tooltip = { tooltipLeft: '-8px', tooltipBottom: 0, transform: 'translateX(-100%)', - arrowTransform: 'rotate(180)', + arrowTransform: 'rotate(180deg)', }, right: { arrowTop: 'calc(50% - 8px/2)', From 6df2f50caba70b45520ff9391524d41e7fa3b21f Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Wed, 3 Jun 2020 15:40:51 +0200 Subject: [PATCH 3/5] State handler for tooltip visibility, solves focus bug on clickable elements --- libraries/core-react/src/Tooltip/Tooltip.jsx | 109 ++++------------- .../core-react/src/Tooltip/TooltipItem.jsx | 114 ++++++++++++++++++ libraries/core-react/src/Tooltip/index.js | 1 + 3 files changed, 139 insertions(+), 85 deletions(-) create mode 100644 libraries/core-react/src/Tooltip/TooltipItem.jsx diff --git a/libraries/core-react/src/Tooltip/Tooltip.jsx b/libraries/core-react/src/Tooltip/Tooltip.jsx index 3b56946b96..e1b39a7413 100644 --- a/libraries/core-react/src/Tooltip/Tooltip.jsx +++ b/libraries/core-react/src/Tooltip/Tooltip.jsx @@ -1,108 +1,47 @@ -import React, { forwardRef } from 'react' +import React, { forwardRef, useState } from 'react' import PropTypes from 'prop-types' -import styled, { css } from 'styled-components' -import { spacingsTemplate, typographyTemplate } from '../_common/templates' -import { tooltip as tokens } from './Tooltip.tokens' +import styled from 'styled-components' +import { TooltipItem } from '.' const Anchor = styled.div` position: relative; display: flex; width: auto; justify-content: center; - &:hover, - &[data-focus-visible-added]:focus { - outline: none; - > :last-child { - display: block; - } - } -` - -const StyledTooltipWrapper = styled.div` - ${({ top, bottom, right, left, transform }) => - css` - bottom: ${bottom}; - top: ${top}; - right: ${right}; - left: ${left}; - transform: ${transform}; - `} - width: auto; - display: none; - position: absolute; - z-index: 500; - flex-shrink: 0; - ::after { - content: ''; - } -` - -const StyledTooltip = styled.div` - ${typographyTemplate(tokens.typography)} - ${spacingsTemplate(tokens.spacings)} - background: ${tokens.background}; - fill: #333; - border-radius: ${tokens.borderRadius}; - min-height: ${tokens.tooltip.minHeight}; - box-sizing: border-box; - position: relative; -` - -const TooltipArrow = styled.svg` - ${({ top, bottom, right, left }) => - css` - bottom: ${bottom}; - top: ${top}; - right: ${right}; - left: ${left}; - `} - width: ${tokens.arrow.width}; - height: ${tokens.arrow.height}; - position: absolute; - fill: inherit; ` +// Controller for TooltipItem export const Tooltip = forwardRef(function Tooltip( { className, title, children, placement, ...rest }, ref, ) { - const props = { - ...rest, - className, - ref, + const [openState, setOpenState] = useState() + + const handleOpen = () => { + setOpenState(true) } - const wrapperProps = { - right: tokens.placement[placement].tooltipRight, - top: tokens.placement[placement].tooltipTop, - bottom: tokens.placement[placement].tooltipBottom, - left: tokens.placement[placement].tooltipLeft, - transform: tokens.placement[placement].transform, + const handleClose = () => { + setOpenState(false) } - const arrowProps = { - left: tokens.placement[placement].arrowLeft, - right: tokens.placement[placement].arrowRight, - top: tokens.placement[placement].arrowTop, - bottom: tokens.placement[placement].arrowBottom, + const props = { + ...rest, + className, + ref, } return ( - - {children} - - - - - - {title} - - + +
+ {children} +
+ {openState && } ) }) diff --git a/libraries/core-react/src/Tooltip/TooltipItem.jsx b/libraries/core-react/src/Tooltip/TooltipItem.jsx new file mode 100644 index 0000000000..56c3a88209 --- /dev/null +++ b/libraries/core-react/src/Tooltip/TooltipItem.jsx @@ -0,0 +1,114 @@ +import React, { forwardRef } from 'react' +import PropTypes from 'prop-types' +import styled, { css } from 'styled-components' +import { spacingsTemplate, typographyTemplate } from '../_common/templates' +import { tooltip as tokens } from './Tooltip.tokens' + +const StyledTooltipWrapper = styled.div` + ${({ top, bottom, right, left, transform }) => + css` + bottom: ${bottom}; + top: ${top}; + right: ${right}; + left: ${left}; + transform: ${transform}; + `} + width: auto; + position: absolute; + z-index: 500; + flex-shrink: 0; + ::after { + content: ''; + } +` + +const StyledTooltip = styled.div` + ${typographyTemplate(tokens.typography)} + ${spacingsTemplate(tokens.spacings)} + background: ${tokens.background}; + fill: #333; + border-radius: ${tokens.borderRadius}; + min-height: ${tokens.tooltip.minHeight}; + box-sizing: border-box; + position: relative; +` + +const TooltipArrow = styled.svg` + ${({ top, bottom, right, left }) => + css` + bottom: ${bottom}; + top: ${top}; + right: ${right}; + left: ${left}; + `} + width: ${tokens.arrow.width}; + height: ${tokens.arrow.height}; + position: absolute; + fill: inherit; +` + +export const TooltipItem = forwardRef(function TooltipItem( + { className, title, placement, ...rest }, + ref, +) { + const wrapperProps = { + right: tokens.placement[placement].tooltipRight, + top: tokens.placement[placement].tooltipTop, + bottom: tokens.placement[placement].tooltipBottom, + left: tokens.placement[placement].tooltipLeft, + transform: tokens.placement[placement].transform, + } + + const arrowProps = { + left: tokens.placement[placement].arrowLeft, + right: tokens.placement[placement].arrowRight, + top: tokens.placement[placement].arrowTop, + bottom: tokens.placement[placement].arrowBottom, + } + + return ( + + + + + + {title} + + + ) +}) + +TooltipItem.displayName = 'eds-tooltip-item' + +TooltipItem.propTypes = { + // Tooltip placement relative to anchor + placement: PropTypes.oneOf([ + 'topLeft', + 'top', + 'topRight', + 'rightTop', + 'right', + 'rightBottom', + 'bottomLeft', + 'bottom', + 'bottomRight', + 'leftTop', + 'left', + 'leftBottom', + ]), + // Tooltip title + title: PropTypes.string, + /** @ignore */ + className: PropTypes.string, +} + +TooltipItem.defaultProps = { + placement: 'bottom', + title: '', + className: '', +} diff --git a/libraries/core-react/src/Tooltip/index.js b/libraries/core-react/src/Tooltip/index.js index 1a0b4fb06d..8aa44b8d8f 100644 --- a/libraries/core-react/src/Tooltip/index.js +++ b/libraries/core-react/src/Tooltip/index.js @@ -1 +1,2 @@ export { Tooltip } from './Tooltip' +export { TooltipItem } from './TooltipItem' From 3a8e49d0188af3567848db755d489c29594cd420 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Wed, 3 Jun 2020 16:28:41 +0200 Subject: [PATCH 4/5] New tests needed to fit update --- libraries/core-react/src/Tooltip/Tooltip.test.jsx | 5 +++-- libraries/core-react/src/Tooltip/TooltipItem.jsx | 8 ++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/libraries/core-react/src/Tooltip/Tooltip.test.jsx b/libraries/core-react/src/Tooltip/Tooltip.test.jsx index 4a28adc6df..ca2f475fcd 100644 --- a/libraries/core-react/src/Tooltip/Tooltip.test.jsx +++ b/libraries/core-react/src/Tooltip/Tooltip.test.jsx @@ -22,8 +22,9 @@ afterEach(cleanup) describe('Tooltip', () => { it('Tooltip has correct placement', () => { const { container } = render(Anchor) - const tooltipWrapper = container.lastElementChild - const tooltip = tooltipWrapper.lastChild + const tooltipWrapper = container.lastChild + const tooltip = tooltipWrapper.firstChild + expect(tooltipWrapper).toHaveStyleRule('display', 'flex') expect(tooltip).toHaveStyleRule('top', `${topRight.tooltipTop}`) expect(tooltip).toHaveStyleRule('right', `${topRight.tooltipRight}`) diff --git a/libraries/core-react/src/Tooltip/TooltipItem.jsx b/libraries/core-react/src/Tooltip/TooltipItem.jsx index 56c3a88209..1fcb74b57d 100644 --- a/libraries/core-react/src/Tooltip/TooltipItem.jsx +++ b/libraries/core-react/src/Tooltip/TooltipItem.jsx @@ -47,10 +47,10 @@ const TooltipArrow = styled.svg` fill: inherit; ` -export const TooltipItem = forwardRef(function TooltipItem( - { className, title, placement, ...rest }, - ref, -) { +export const TooltipItem = forwardRef(function TooltipItem({ + title, + placement, +}) { const wrapperProps = { right: tokens.placement[placement].tooltipRight, top: tokens.placement[placement].tooltipTop, From 735db7cc14179c57aae1387a78f11ea1dbf71790 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Thu, 4 Jun 2020 09:45:16 +0200 Subject: [PATCH 5/5] Tests updated --- libraries/core-react/src/Tooltip/Tooltip.jsx | 86 ++++++++++++- .../core-react/src/Tooltip/Tooltip.test.jsx | 24 ++-- .../core-react/src/Tooltip/TooltipItem.jsx | 114 ------------------ libraries/core-react/src/Tooltip/index.js | 1 - 4 files changed, 97 insertions(+), 128 deletions(-) delete mode 100644 libraries/core-react/src/Tooltip/TooltipItem.jsx diff --git a/libraries/core-react/src/Tooltip/Tooltip.jsx b/libraries/core-react/src/Tooltip/Tooltip.jsx index e1b39a7413..25c213c998 100644 --- a/libraries/core-react/src/Tooltip/Tooltip.jsx +++ b/libraries/core-react/src/Tooltip/Tooltip.jsx @@ -1,7 +1,8 @@ import React, { forwardRef, useState } from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' -import { TooltipItem } from '.' +import styled, { css } from 'styled-components' +import { spacingsTemplate, typographyTemplate } from '../_common/templates' +import { tooltip as tokens } from './Tooltip.tokens' const Anchor = styled.div` position: relative; @@ -10,12 +11,55 @@ const Anchor = styled.div` justify-content: center; ` +const StyledTooltipWrapper = styled.div` + ${({ top, bottom, right, left, transform }) => + css` + bottom: ${bottom}; + top: ${top}; + right: ${right}; + left: ${left}; + transform: ${transform}; + `} + width: auto; + position: absolute; + z-index: 500; + flex-shrink: 0; + ::after { + content: ''; + } +` + +const StyledTooltip = styled.div` + ${typographyTemplate(tokens.typography)} + ${spacingsTemplate(tokens.spacings)} + background: ${tokens.background}; + fill: #333; + border-radius: ${tokens.borderRadius}; + min-height: ${tokens.tooltip.minHeight}; + box-sizing: border-box; + position: relative; +` + +const TooltipArrow = styled.svg` + ${({ top, bottom, right, left }) => + css` + bottom: ${bottom}; + top: ${top}; + right: ${right}; + left: ${left}; + `} + width: ${tokens.arrow.width}; + height: ${tokens.arrow.height}; + position: absolute; + fill: inherit; + ` + // Controller for TooltipItem export const Tooltip = forwardRef(function Tooltip( - { className, title, children, placement, ...rest }, + { className, title, children, placement, open, ...rest }, ref, ) { - const [openState, setOpenState] = useState() + const [openState, setOpenState] = useState(open) const handleOpen = () => { setOpenState(true) @@ -31,6 +75,21 @@ export const Tooltip = forwardRef(function Tooltip( ref, } + const wrapperProps = { + right: tokens.placement[placement].tooltipRight, + top: tokens.placement[placement].tooltipTop, + bottom: tokens.placement[placement].tooltipBottom, + left: tokens.placement[placement].tooltipLeft, + transform: tokens.placement[placement].transform, + } + + const arrowProps = { + left: tokens.placement[placement].arrowLeft, + right: tokens.placement[placement].arrowRight, + top: tokens.placement[placement].arrowTop, + bottom: tokens.placement[placement].arrowBottom, + } + return (
{children}
- {openState && } + {openState && ( + + + + + + {title} + + + )} ) }) @@ -66,6 +139,8 @@ Tooltip.propTypes = { ]), // Tooltip title title: PropTypes.string, + // For controlled Tooltip + open: PropTypes.bool, /** Tooltip reference/anchor element */ children: PropTypes.node.isRequired, /** @ignore */ @@ -73,6 +148,7 @@ Tooltip.propTypes = { } Tooltip.defaultProps = { + open: false, placement: 'bottom', title: '', className: '', diff --git a/libraries/core-react/src/Tooltip/Tooltip.test.jsx b/libraries/core-react/src/Tooltip/Tooltip.test.jsx index ca2f475fcd..00d1b27f96 100644 --- a/libraries/core-react/src/Tooltip/Tooltip.test.jsx +++ b/libraries/core-react/src/Tooltip/Tooltip.test.jsx @@ -1,6 +1,6 @@ /* eslint-disable no-undef */ import React from 'react' -import { render, cleanup } from '@testing-library/react' +import { render, cleanup, screen } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import styled from 'styled-components' @@ -21,31 +21,39 @@ afterEach(cleanup) describe('Tooltip', () => { it('Tooltip has correct placement', () => { - const { container } = render(Anchor) - const tooltipWrapper = container.lastChild - const tooltip = tooltipWrapper.firstChild + const { container } = render( + + Anchor + , + ) + const tooltipWrapper = container.firstChild + const tooltip = screen.getByRole('tooltip') expect(tooltipWrapper).toHaveStyleRule('display', 'flex') expect(tooltip).toHaveStyleRule('top', `${topRight.tooltipTop}`) expect(tooltip).toHaveStyleRule('right', `${topRight.tooltipRight}`) }) it('Arrow has correct placement', () => { - const { container } = render(Anchor) + const { container } = render( + + Anchor + , + ) const arrow = container.lastElementChild.lastChild.firstChild.firstChild expect(arrow).toHaveStyleRule('right', `${topRight.arrowRight}`) expect(arrow).toHaveStyleRule('bottom', `${topRight.arrowBottom}`) }) it('Has provided necessary props', () => { const title = 'Title' - const variant = 'large' + const placement = 'topLeft' const anchor = 'Anchor' const { queryByText } = render( - + {anchor} , ) expect(queryByText(title)).toBeDefined() - expect(queryByText(variant)).toBeDefined() + expect(queryByText(placement)).toBeDefined() expect(queryByText(anchor)).toBeDefined() }) it('Can extend the css for the component', () => { diff --git a/libraries/core-react/src/Tooltip/TooltipItem.jsx b/libraries/core-react/src/Tooltip/TooltipItem.jsx deleted file mode 100644 index 1fcb74b57d..0000000000 --- a/libraries/core-react/src/Tooltip/TooltipItem.jsx +++ /dev/null @@ -1,114 +0,0 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' -import styled, { css } from 'styled-components' -import { spacingsTemplate, typographyTemplate } from '../_common/templates' -import { tooltip as tokens } from './Tooltip.tokens' - -const StyledTooltipWrapper = styled.div` - ${({ top, bottom, right, left, transform }) => - css` - bottom: ${bottom}; - top: ${top}; - right: ${right}; - left: ${left}; - transform: ${transform}; - `} - width: auto; - position: absolute; - z-index: 500; - flex-shrink: 0; - ::after { - content: ''; - } -` - -const StyledTooltip = styled.div` - ${typographyTemplate(tokens.typography)} - ${spacingsTemplate(tokens.spacings)} - background: ${tokens.background}; - fill: #333; - border-radius: ${tokens.borderRadius}; - min-height: ${tokens.tooltip.minHeight}; - box-sizing: border-box; - position: relative; -` - -const TooltipArrow = styled.svg` - ${({ top, bottom, right, left }) => - css` - bottom: ${bottom}; - top: ${top}; - right: ${right}; - left: ${left}; - `} - width: ${tokens.arrow.width}; - height: ${tokens.arrow.height}; - position: absolute; - fill: inherit; -` - -export const TooltipItem = forwardRef(function TooltipItem({ - title, - placement, -}) { - const wrapperProps = { - right: tokens.placement[placement].tooltipRight, - top: tokens.placement[placement].tooltipTop, - bottom: tokens.placement[placement].tooltipBottom, - left: tokens.placement[placement].tooltipLeft, - transform: tokens.placement[placement].transform, - } - - const arrowProps = { - left: tokens.placement[placement].arrowLeft, - right: tokens.placement[placement].arrowRight, - top: tokens.placement[placement].arrowTop, - bottom: tokens.placement[placement].arrowBottom, - } - - return ( - - - - - - {title} - - - ) -}) - -TooltipItem.displayName = 'eds-tooltip-item' - -TooltipItem.propTypes = { - // Tooltip placement relative to anchor - placement: PropTypes.oneOf([ - 'topLeft', - 'top', - 'topRight', - 'rightTop', - 'right', - 'rightBottom', - 'bottomLeft', - 'bottom', - 'bottomRight', - 'leftTop', - 'left', - 'leftBottom', - ]), - // Tooltip title - title: PropTypes.string, - /** @ignore */ - className: PropTypes.string, -} - -TooltipItem.defaultProps = { - placement: 'bottom', - title: '', - className: '', -} diff --git a/libraries/core-react/src/Tooltip/index.js b/libraries/core-react/src/Tooltip/index.js index 8aa44b8d8f..1a0b4fb06d 100644 --- a/libraries/core-react/src/Tooltip/index.js +++ b/libraries/core-react/src/Tooltip/index.js @@ -1,2 +1 @@ export { Tooltip } from './Tooltip' -export { TooltipItem } from './TooltipItem'