From d0111e7741824cd9675e995b6e9e82d3b32ad520 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 10 Aug 2021 16:58:16 +0530 Subject: [PATCH] added Tooltip component --- src/app/atoms/button/IconButton.jsx | 14 +++-------- src/app/atoms/button/IconButton.scss | 11 --------- src/app/atoms/tooltip/Tooltip.jsx | 37 ++++++++++++++++++++++++++++ src/app/atoms/tooltip/Tooltip.scss | 10 ++++++++ 4 files changed, 51 insertions(+), 21 deletions(-) create mode 100644 src/app/atoms/tooltip/Tooltip.jsx create mode 100644 src/app/atoms/tooltip/Tooltip.scss diff --git a/src/app/atoms/button/IconButton.jsx b/src/app/atoms/button/IconButton.jsx index cda6f98..34e2424 100644 --- a/src/app/atoms/button/IconButton.jsx +++ b/src/app/atoms/button/IconButton.jsx @@ -2,8 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import './IconButton.scss'; -import Tippy from '@tippyjs/react'; import RawIcon from '../system-icons/RawIcon'; +import Tooltip from '../tooltip/Tooltip'; import { blurOnBubbling } from './script'; import Text from '../text/Text'; @@ -17,15 +17,9 @@ const IconButton = React.forwardRef(({ variant, size, type, tooltip, tooltipPlacement, src, onClick, }, ref) => ( - {tooltip}} - className="ic-btn-tippy" - touch="hold" - arrow={false} - maxWidth={250} + {tooltip}} > - + )); IconButton.defaultProps = { diff --git a/src/app/atoms/button/IconButton.scss b/src/app/atoms/button/IconButton.scss index 7bd327d..a0cabc6 100644 --- a/src/app/atoms/button/IconButton.scss +++ b/src/app/atoms/button/IconButton.scss @@ -31,15 +31,4 @@ @include state.hover(var(--bg-surface-hover)); @include focus(var(--bg-surface-hover)); @include state.active(var(--bg-surface-active)); -} - -.ic-btn-tippy { - padding: var(--sp-extra-tight) var(--sp-normal); - background-color: var(--bg-tooltip); - border-radius: var(--bo-radius); - box-shadow: var(--bs-popup); - - .text { - color: var(--tc-tooltip); - } } \ No newline at end of file diff --git a/src/app/atoms/tooltip/Tooltip.jsx b/src/app/atoms/tooltip/Tooltip.jsx new file mode 100644 index 0000000..131c686 --- /dev/null +++ b/src/app/atoms/tooltip/Tooltip.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './Tooltip.scss'; +import Tippy from '@tippyjs/react'; + +function Tooltip({ + className, placement, content, children, +}) { + return ( + + {children} + + ); +} + +Tooltip.defaultProps = { + placement: 'top', + className: '', +}; + +Tooltip.propTypes = { + className: PropTypes.string, + placement: PropTypes.string, + content: PropTypes.node.isRequired, + children: PropTypes.node.isRequired, +}; + +export default Tooltip; diff --git a/src/app/atoms/tooltip/Tooltip.scss b/src/app/atoms/tooltip/Tooltip.scss new file mode 100644 index 0000000..f609aa5 --- /dev/null +++ b/src/app/atoms/tooltip/Tooltip.scss @@ -0,0 +1,10 @@ +.tooltip { + padding: var(--sp-extra-tight) var(--sp-normal); + background-color: var(--bg-tooltip); + border-radius: var(--bo-radius); + box-shadow: var(--bs-popup); + + .text { + color: var(--tc-tooltip); + } +} \ No newline at end of file