added Tooltip component

This commit is contained in:
unknown 2021-08-10 16:58:16 +05:30
parent 5e76d6d865
commit d0111e7741
4 changed files with 51 additions and 21 deletions

View file

@ -2,8 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './IconButton.scss'; import './IconButton.scss';
import Tippy from '@tippyjs/react';
import RawIcon from '../system-icons/RawIcon'; import RawIcon from '../system-icons/RawIcon';
import Tooltip from '../tooltip/Tooltip';
import { blurOnBubbling } from './script'; import { blurOnBubbling } from './script';
import Text from '../text/Text'; import Text from '../text/Text';
@ -17,15 +17,9 @@ const IconButton = React.forwardRef(({
variant, size, type, variant, size, type,
tooltip, tooltipPlacement, src, onClick, tooltip, tooltipPlacement, src, onClick,
}, ref) => ( }, ref) => (
<Tippy <Tooltip
content={<Text variant="b2">{tooltip}</Text>}
className="ic-btn-tippy"
touch="hold"
arrow={false}
maxWidth={250}
placement={tooltipPlacement} placement={tooltipPlacement}
delay={[0, 0]} content={<Text variant="b2">{tooltip}</Text>}
duration={[100, 0]}
> >
<button <button
ref={ref} ref={ref}
@ -36,7 +30,7 @@ const IconButton = React.forwardRef(({
> >
<RawIcon size={size} src={src} /> <RawIcon size={size} src={src} />
</button> </button>
</Tippy> </Tooltip>
)); ));
IconButton.defaultProps = { IconButton.defaultProps = {

View file

@ -31,15 +31,4 @@
@include state.hover(var(--bg-surface-hover)); @include state.hover(var(--bg-surface-hover));
@include focus(var(--bg-surface-hover)); @include focus(var(--bg-surface-hover));
@include state.active(var(--bg-surface-active)); @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);
}
} }

View file

@ -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 (
<Tippy
content={content}
className={`tooltip ${className}`}
touch="hold"
arrow={false}
maxWidth={250}
placement={placement}
delay={[0, 0]}
duration={[100, 0]}
>
{children}
</Tippy>
);
}
Tooltip.defaultProps = {
placement: 'top',
className: '',
};
Tooltip.propTypes = {
className: PropTypes.string,
placement: PropTypes.string,
content: PropTypes.node.isRequired,
children: PropTypes.node.isRequired,
};
export default Tooltip;

View file

@ -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);
}
}