Unverified Commit 374c2797 authored by gabriellsh's avatar gabriellsh Committed by GitHub
Browse files

feat: Tooltip component (#121)

* Added Tooltip Component

* Revert "Added Tooltip Component"

This reverts commit b2cd3ee1

.

* Added tooltip

* Update Loki

* Loki

* Changed proptype

* Removed useless mixin

* Reworked props, added arrowless variation

* Memoize some internal values

* Move Tooltip stories to Misc
Co-authored-by: default avatarTasso Evangelista <tasso.evangelista@rocket.chat>
parent fea05bc4
import PropTypes from 'prop-types';
import React, { useMemo } from 'react';
import { Box } from '../Box';
export function Tooltip({
arrowPosition,
...props
}) {
const [direction, position] = useMemo(() => {
const [dir, pos] = arrowPosition ? arrowPosition.split('-') : [false, false];
if (!dir || dir === 'left' || dir === 'right') {
return [String(dir), false];
}
return [String(dir), pos ? String(pos) : 'center'];
}, [arrowPosition]);
return <Box
is='div'
componentClassName='rcx-tooltip'
mod-dir={direction}
mod-pos={position}
{...props}
/>;
}
Tooltip.propTypes = {
position: PropTypes.oneOf(['up', 'up-left', 'up-right', 'down', 'down-left', 'down-right', 'left', 'right']),
};
import { action } from '@storybook/addon-actions';
import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
import { Box, Margins, Tooltip } from '../..';
<Meta title='Misc|Tooltips' parameters={{ jest: ['Misc/spec'] }} />
# Tooltip
A message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user
interface.
<Preview>
<Story name='Default'>
<Tooltip>A example tooltip</Tooltip>
</Story>
</Preview>
<Props of={Tooltip} />
## Arrow positioning
<Preview>
<Story name='Arrow positioning'>
<Margins inline='neg-x8'>
<Box>
<Margins all='x8'>
<Tooltip children='Tooltip' arrowPosition='up-left' />
<Tooltip children='Tooltip' arrowPosition='up' />
<Tooltip children='Tooltip' arrowPosition='up-right' />
</Margins>
</Box>
<Box>
<Margins all='x8'>
<Tooltip children='Tooltip' arrowPosition='left' />
<Tooltip children='Tooltip' arrowPosition={null} />
<Tooltip children='Tooltip' arrowPosition='right' />
</Margins>
</Box>
<Box>
<Margins all='x8'>
<Tooltip children='Tooltip' arrowPosition='down-left' />
<Tooltip children='Tooltip' arrowPosition='down' />
<Tooltip children='Tooltip' arrowPosition='down-right' />
</Margins>
</Box>
</Margins>
</Story>
</Preview>
@mixin triangle-direction ($direction) {
&::after {
position: absolute;
box-sizing: border-box;
content: ' ';
border-width: calc(#{ $borders-width-x4 } + #{ $borders-width-x1 });
border-color: transparent transparent $tooltip-background-color $tooltip-background-color;
border-radius: 0 0 0 calc(#{ $borders-radius-x2 } + #{ $borders-radius-x2} / 2);
@if $direction == 'up' {
top: calc(-1 * (#{$spaces-x4} ));
transform: rotate(135deg);
}
@if $direction == 'down' {
bottom: calc(-1 * (#{$spaces-x4} ));
transform: rotate(-45deg);
}
@if $direction == 'left' {
top: $tooltip-arrow-position-center;
left: calc(-1 * (#{$spaces-x4} ));
margin-block-start: calc(-1 * #{ $spaces-x4 });
transform: rotate(45deg);
}
@if $direction == 'right' {
top: $tooltip-arrow-position-center;
right: calc(-1 * (#{$spaces-x4} ));
margin-block-start: calc(-1 * #{ $spaces-x4 });
transform: rotate(-135deg);
}
}
}
.rcx-tooltip {
position: relative;
display: inline-block;
max-width: $spaces-x240;
padding-block: $spaces-x8;
padding-inline: $spaces-x12;
word-break: break-all;
color: $tooltip-text-color;
border-radius: $borders-radius-x4;
background-color: $tooltip-background-color;
@include use-text-style(p2);
&--dir-up {
@include triangle-direction('up');
}
&--dir-down {
@include triangle-direction('down');
}
&--dir-left {
@include triangle-direction('left');
}
&--dir-right {
@include triangle-direction('right');
}
&--pos {
&-center {
&::after {
left: 50%;
margin-inline-start: calc(-1 * #{ $spaces-x4 });
}
}
&-left {
&::after {
left: $tooltip-arrow-margin;
margin: 0;
}
}
&-right {
&::after {
right: $tooltip-arrow-margin;
left: initial;
margin: 0;
}
}
}
}
......@@ -36,5 +36,6 @@ export * from './Chip';
export * from './AutoComplete';
export * from './Options';
export * from './Select';
export * from './Tooltip';
export * from './Modal';
export * from './Throbber';
......@@ -28,5 +28,6 @@
@import './AutoComplete/styles.scss';
@import './Options/styles.scss';
@import './Select/styles.scss';
@import './Tooltip/styles.scss';
@import './Modal/styles.scss';
@import './Throbber/styles.scss';
......@@ -7,4 +7,5 @@
@import './text-colors.scss';
@import './text-styles.scss';
@import './transitions.scss';
@import './tooltip.scss';
@import './tabs-colors.scss';
......@@ -5,6 +5,7 @@ $borders-width-x4: theme('borders-width-x4', to-rem(4));
$borders-radius-none: 0;
$borders-radius-x2: theme('borders-radius-x2', to-rem(2));
$borders-radius-x4: theme('borders-radius-x4', to-rem(4));
$borders-radius-full: 9999px;
$borders: (
......
$tooltip-arrow-margin: $spaces-x8;
$tooltip-arrow-position-center: 50%;
$tooltip-background-color: theme('tooltip-background-color', $colors-n900);
$tooltip-text-color: theme('tooltip-text-color', $colors-white);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment