Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
RocketChat
Rocket.Chat.Fuselage
Commits
b2cd3ee1
Commit
b2cd3ee1
authored
Jan 06, 2020
by
Gabriel Henriques
Browse files
Added Tooltip Component
parent
5a9aa820
Changes
9
Hide whitespace changes
Inline
Side-by-side
packages/fuselage/src/components/Tooltip/index.js
0 → 100644
View file @
b2cd3ee1
import
PropTypes
from
'
prop-types
'
;
import
React
from
'
react
'
;
import
{
Box
}
from
'
../Box
'
;
const
Container
=
Box
.
extend
(
'
rcx-tooltip
'
,
'
div
'
);
export
function
Tooltip
({
left
,
right
,
center
,
pointUp
,
pointDown
,
pointLeft
,
pointRight
,
...
props
})
{
return
<
Container
mod
-
dir
-
right
=
{
!!
pointRight
}
mod
-
dir
-
left
=
{
!!
pointLeft
}
mod
-
dir
-
up
=
{
!!
pointUp
}
mod
-
dir
-
down
=
{
!!
pointDown
}
mod
-
pos
-
left
=
{
!!
left
}
mod
-
pos
-
right
=
{
!!
right
}
mod
-
pos
-
center
=
{
!
left
&&
!
right
&&
!
pointLeft
&&
!
pointRight
}
{...
props
}
/>
;
}
Tooltip
.
propTypes
=
{
left
:
PropTypes
.
bool
,
right
:
PropTypes
.
bool
,
};
packages/fuselage/src/components/Tooltip/spec.js
0 → 100644
View file @
b2cd3ee1
import
React
from
'
react
'
;
import
ReactDOM
from
'
react-dom
'
;
import
{
Tooltip
}
from
'
../..
'
;
it
(
'
renders without crashing
'
,
()
=>
{
const
div
=
document
.
createElement
(
'
div
'
);
ReactDOM
.
render
(
<
Tooltip
/>
,
div
);
ReactDOM
.
unmountComponentAtNode
(
div
);
});
packages/fuselage/src/components/Tooltip/stories.mdx
0 → 100644
View file @
b2cd3ee1
import { action } from '@storybook/addon-actions';
import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
import { PropsVariationSection } from '../../../.storybook/helpers';
import { Tooltip } from '../..';
<Meta title='Tooltip|Tooltips' parameters={{ jest: ['Tooltip/spec'] }} />
# Tooltip
Describes component/button details.
### Pointing Up
<Preview>
<Story name='Pointing Up'>
<PropsVariationSection
component={Tooltip}
common={{ pointUp:true, onClick: action('click') }}
xAxis={{
'arrow to left': { left: true, children: "Description" },
'arrow to middle': { children: "Description" },
'arrow to right': { right:true, children: "Description" },
}}
yAxis={{
default: {},
}}
/>
</Story>
</Preview>
### Pointing Down
<Preview>
<Story name='Pointing Down'>
<PropsVariationSection
component={Tooltip}
common={{ pointDown:true, onClick: action('click') }}
xAxis={{
'arrow to left': { left: true, children: "Description" },
'arrow to middle': { children: "Description" },
'arrow to right': { right:true, children: "Description" },
}}
yAxis={{
default: {},
}}
/>
</Story>
</Preview>
### Pointing left
<Preview>
<Story name='Tooltip arrow left'>
<Tooltip pointLeft>Description</Tooltip>
</Story>
</Preview>
### Pointing right
<Preview>
<Story name='Tooltip arrow right'>
<Tooltip pointRight>Description</Tooltip>
</Story>
</Preview>
\ No newline at end of file
packages/fuselage/src/components/Tooltip/styles.scss
0 → 100644
View file @
b2cd3ee1
@mixin
trianglePosition
(
$direction
)
{
&
::after
{
@include
triangle
(
$direction
);
}
}
@mixin
triangle
(
$direction
)
{
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
;
padding-block
:
$spaces-x8
;
padding-inline
:
$spaces-x12
;
color
:
$tooltip-text-color
;
border-radius
:
$borders-radius-x4
;
background-color
:
$tooltip-background-color
;
@include
use-text-style
(
p2
);
&
--pos-left
{
&
::after
{
left
:
$tooltip-arrow-margin
;
}
}
&
--pos-right
{
&
::after
{
right
:
$tooltip-arrow-margin
;
}
}
&
--pos-center
{
&
::after
{
left
:
50%
;
margin-inline-start
:
calc
(
-1
*
#{
$spaces-x4
}
);
}
}
&
--dir-up
{
@include
trianglePosition
(
'up'
);
}
&
--dir-down
{
@include
trianglePosition
(
'down'
);
}
&
--dir-left
{
@include
trianglePosition
(
'left'
);
}
&
--dir-right
{
@include
trianglePosition
(
'right'
);
}
}
packages/fuselage/src/components/index.js
View file @
b2cd3ee1
...
...
@@ -36,3 +36,4 @@ export * from './Chip';
export
*
from
'
./AutoComplete
'
;
export
*
from
'
./Options
'
;
export
*
from
'
./Select
'
;
export
*
from
'
./Tooltip
'
;
packages/fuselage/src/components/index.scss
View file @
b2cd3ee1
...
...
@@ -28,3 +28,4 @@
@import
'./AutoComplete/styles.scss'
;
@import
'./Options/styles.scss'
;
@import
'./Select/styles.scss'
;
@import
'./Tooltip/styles.scss'
;
packages/fuselage/src/styles/variables/all.scss
View file @
b2cd3ee1
...
...
@@ -7,3 +7,4 @@
@import
'./text-colors.scss'
;
@import
'./text-styles.scss'
;
@import
'./transitions.scss'
;
@import
'./tooltip.scss'
;
packages/fuselage/src/styles/variables/borders.scss
View file @
b2cd3ee1
...
...
@@ -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
:
(
...
...
packages/fuselage/src/styles/variables/tooltip.scss
0 → 100644
View file @
b2cd3ee1
$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
);
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment