chore: tooltip update / remove css loader (#985)
* fix: Add suspended filter to people management #984 * chore: removing css loader * pui-react-tooltip -> tippy closes #980 * remove extract-text-plugin
This commit is contained in:
Tom Moor
GitHub
@@ -1,204 +1,13 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import { TooltipTrigger } from 'pui-react-tooltip';
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
const GlobalStyles = createGlobalStyle`
|
||||
.tooltip:hover .tooltip-container:not(.tooltip-container-hidden){
|
||||
visibility:visible;
|
||||
opacity:1
|
||||
}
|
||||
.tooltip-container{
|
||||
visibility:hidden;
|
||||
-webkit-transition:opacity ease-out 0.2s;
|
||||
transition:opacity ease-out 0.2s;
|
||||
z-index:10;
|
||||
position:absolute;
|
||||
bottom:100%;
|
||||
left:50%;
|
||||
-webkit-transform:translateX(-50%);
|
||||
transform:translateX(-50%);
|
||||
margin:0 0 ${props => props.offset + 8}px 0;
|
||||
text-align:left
|
||||
}
|
||||
.tooltip-container.tooltip-container-visible{
|
||||
visibility:visible
|
||||
}
|
||||
.tooltip-container.tooltip-hoverable:after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
width:calc(100% + 16px);
|
||||
height:calc(100% + 16px);
|
||||
top:50%;
|
||||
left:50%;
|
||||
-webkit-transform:translateX(-50%) translateY(-50%);
|
||||
transform:translateX(-50%) translateY(-50%)
|
||||
}
|
||||
.tooltip-container .tooltip-content{
|
||||
white-space:nowrap;
|
||||
padding:4px 8px;
|
||||
font-size:12px;
|
||||
line-height:16px;
|
||||
font-weight:400;
|
||||
letter-spacing:0;
|
||||
text-transform:none;
|
||||
background-color:${props => props.theme.tooltipBackground};
|
||||
color: ${props => props.theme.tooltipText};
|
||||
border-radius:2px;
|
||||
border:1px solid ${props => props.theme.tooltipBackground};
|
||||
box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1)
|
||||
}
|
||||
.tooltip-container .tooltip-content:before{
|
||||
content:"";
|
||||
z-index:1;
|
||||
position:absolute;
|
||||
bottom:-4px;
|
||||
left:50%;
|
||||
-webkit-transform:translateX(-50%) rotateZ(45deg);
|
||||
transform:translateX(-50%) rotateZ(45deg);
|
||||
background-color:${props => props.theme.tooltipBackground};
|
||||
border-bottom:1px solid ${props => props.theme.tooltipBackground};
|
||||
border-right:1px solid ${props => props.theme.tooltipBackground};
|
||||
width:8px;
|
||||
height:8px
|
||||
}
|
||||
.tooltip-container .tooltip-content:after{
|
||||
content:"";
|
||||
box-sizing:content-box;
|
||||
z-index:-1;
|
||||
position:absolute;
|
||||
bottom: -4px;
|
||||
left:50%;
|
||||
-webkit-transform:translateX(-50%) rotateZ(45deg);
|
||||
transform:translateX(-50%) rotateZ(45deg);
|
||||
background-color:${props => props.theme.tooltipBackground};
|
||||
box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1);
|
||||
width:8px;
|
||||
height:8px
|
||||
}
|
||||
.tooltip{
|
||||
position:relative;
|
||||
display:inline-block
|
||||
}
|
||||
.tooltip.tooltip-bottom .tooltip-container{
|
||||
top:100%;
|
||||
bottom:auto;
|
||||
left:50%;
|
||||
-webkit-transform:translateX(-50%);
|
||||
transform:translateX(-50%);
|
||||
margin:8px 0 0 0
|
||||
}
|
||||
.tooltip.tooltip-bottom .tooltip-container .tooltip-content:before{
|
||||
bottom:auto;
|
||||
top: -4px;
|
||||
border-top:1px solid ${props => props.theme.tooltipBackground};
|
||||
border-right:none;
|
||||
border-bottom:none;
|
||||
border-left:1px solid ${props => props.theme.tooltipBackground}
|
||||
}
|
||||
.tooltip.tooltip-bottom .tooltip-container .tooltip-content:after{
|
||||
bottom:auto;
|
||||
top: -4px;
|
||||
}
|
||||
.tooltip.tooltip-right .tooltip-container{
|
||||
top:50%;
|
||||
bottom:auto;
|
||||
left:100%;
|
||||
-webkit-transform:translatey(-50%);
|
||||
transform:translatey(-50%);
|
||||
margin:0 0 0 8px
|
||||
}
|
||||
.tooltip.tooltip-right .tooltip-container .tooltip-content:before{
|
||||
bottom:auto;
|
||||
left: -4px;
|
||||
top:50%;
|
||||
-webkit-transform:translatey(-50%) rotateZ(45deg);
|
||||
transform:translatey(-50%) rotateZ(45deg);
|
||||
border-top:none;
|
||||
border-right:none;
|
||||
border-bottom:1px solid ${props => props.theme.tooltipBackground};
|
||||
border-left:1px solid ${props => props.theme.tooltipBackground}
|
||||
}
|
||||
.tooltip.tooltip-right .tooltip-container .tooltip-content:after{
|
||||
bottom:auto;
|
||||
left: -4px;
|
||||
top:50%;
|
||||
-webkit-transform:translatey(-50%) rotateZ(45deg);
|
||||
transform:translatey(-50%) rotateZ(45deg)
|
||||
}
|
||||
.tooltip.tooltip-left .tooltip-container{
|
||||
top:50%;
|
||||
bottom:auto;
|
||||
right:100%;
|
||||
left:auto;
|
||||
-webkit-transform:translatey(-50%);
|
||||
transform:translatey(-50%);
|
||||
margin:0 8px 0 0
|
||||
}
|
||||
.tooltip.tooltip-left .tooltip-container .tooltip-content:before{
|
||||
bottom:auto;
|
||||
right: -4px;
|
||||
left:auto;
|
||||
top:50%;
|
||||
-webkit-transform:translatey(-50%) rotateZ(45deg);
|
||||
transform:translatey(-50%) rotateZ(45deg);
|
||||
border-top:1px solid ${props => props.theme.tooltipBackground};
|
||||
border-right:1px solid ${props => props.theme.tooltipBackground};
|
||||
border-bottom:none;
|
||||
border-left:none
|
||||
}
|
||||
.tooltip.tooltip-left .tooltip-container .tooltip-content:after{
|
||||
bottom:auto;
|
||||
right:-4px;
|
||||
left:auto;
|
||||
top:50%;
|
||||
-webkit-transform:translatey(-50%) rotateZ(45deg);
|
||||
transform:translatey(-50%) rotateZ(45deg)
|
||||
}
|
||||
.tooltip-sm.tooltip-container{
|
||||
width:120px
|
||||
}
|
||||
.tooltip-sm.tooltip-container .tooltip-content{
|
||||
white-space:normal
|
||||
}
|
||||
.tooltip-md.tooltip-container{
|
||||
width:240px
|
||||
}
|
||||
.tooltip-md.tooltip-container .tooltip-content{
|
||||
white-space:normal
|
||||
}
|
||||
.tooltip-lg.tooltip-container{
|
||||
width:360px
|
||||
}
|
||||
.tooltip-lg.tooltip-container .tooltip-content{
|
||||
white-space:normal
|
||||
}
|
||||
.tether-element{
|
||||
z-index:99
|
||||
}
|
||||
.overlay-trigger{
|
||||
color:#1B78B3;
|
||||
-webkit-transition:all 300ms ease-out;
|
||||
transition:all 300ms ease-out;
|
||||
-webkit-transition-property:background-color, color, opacity;
|
||||
transition-property:background-color, color, opacity
|
||||
}
|
||||
.overlay-trigger:hover,.overlay-trigger:focus{
|
||||
color:#1f8ace;
|
||||
cursor:pointer;
|
||||
outline:none;
|
||||
text-decoration:none
|
||||
}
|
||||
.overlay-trigger:active,.overlay-trigger.active{
|
||||
color:#176698
|
||||
}
|
||||
`;
|
||||
import styled from 'styled-components';
|
||||
import Tippy from '@tippy.js/react';
|
||||
|
||||
type Props = {
|
||||
tooltip: React.Node,
|
||||
placement?: 'top' | 'bottom' | 'left' | 'right',
|
||||
children: React.Node,
|
||||
offset?: number,
|
||||
delay?: number,
|
||||
};
|
||||
|
||||
class Tooltip extends React.Component<Props> {
|
||||
@@ -207,15 +16,33 @@ class Tooltip extends React.Component<Props> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { offset = 0, ...rest } = this.props;
|
||||
const { tooltip, delay = 50, children, ...rest } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<GlobalStyles offset={offset} />
|
||||
<TooltipTrigger {...rest} />
|
||||
</React.Fragment>
|
||||
<StyledTippy
|
||||
arrow
|
||||
arrowType="round"
|
||||
animation="shift-away"
|
||||
content={tooltip}
|
||||
delay={delay}
|
||||
duration={[200, 150]}
|
||||
inertia
|
||||
{...rest}
|
||||
>
|
||||
<span>{children}</span>
|
||||
</StyledTippy>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const StyledTippy = styled(Tippy)`
|
||||
font-size: 13px;
|
||||
background-color: ${props => props.theme.tooltipBackground};
|
||||
color: ${props => props.theme.tooltipText};
|
||||
|
||||
svg {
|
||||
fill: ${props => props.theme.tooltipBackground};
|
||||
}
|
||||
`;
|
||||
|
||||
export default Tooltip;
|
||||
|
||||
Reference in New Issue
Block a user