Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: tooltip styled component issue is fixed #2784

Merged
merged 1 commit into from
May 7, 2024
Merged

fix: tooltip styled component issue is fixed #2784

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 41 additions & 41 deletions packages/dashboard/src/components/palette/icons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,53 +16,53 @@ type PaletteComponentIconProps = {
Icon: React.FC;
widgetName: string;
};

const Tooltip = styled.div<{ hover: boolean }>`
${({ hover }) => `visibility: ${hover ? 'visible' : 'hidden'};`}
font-size: ${fontSizeHeadingS};
color: ${colorTextBodyDefault};
background-color: ${colorBackgroundSegmentHover};
padding: ${spaceStaticS} ${spaceStaticM};
border-radius: ${borderRadiusPopover};
border-width: 2px;
border-color: ${colorBorderButtonNormalDisabled};
box-shadow: 2px 2px 2px ${colorBorderButtonNormalDisabled};
position: absolute;
left: 50%;
top: 105%;
border-style: solid;
z-index: 9;
transform: translateX(-50%);
&::before,
&::after {
content: '';
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
left: 50%;
right: 50%;
margin: auto;
margin-left: -10px;
transform: rotate(180deg);
}
&::before {
bottom: 92%;
border-top: 11px solid ${colorBorderButtonNormalDisabled};
margin-bottom: 5px;
}
&::after {
bottom: 100%;
border-top: 10px solid ${colorBackgroundSegmentHover};
margin-top: -2px;
z-index: 1;
}
`;
const PaletteComponentIcon: React.FC<PaletteComponentIconProps> = ({
Icon,
widgetName,
}) => {
const [hover, setHover] = useState<boolean>(false);

const Tooltip = styled.div<{ hover: boolean }>`
${({ hover }) => `visibility: ${hover ? 'visible' : 'hidden'};`}
font-size: ${fontSizeHeadingS};
color: ${colorTextBodyDefault};
background-color: ${colorBackgroundSegmentHover};
padding: ${spaceStaticS} ${spaceStaticM};
border-radius: ${borderRadiusPopover};
border-width: 2px;
border-color: ${colorBorderButtonNormalDisabled};
box-shadow: 2px 2px 2px ${colorBorderButtonNormalDisabled};
position: absolute;
left: 50%;
top: 105%;
border-style: solid;
z-index: 9;
transform: translateX(-50%);
&::before,
&::after {
content: '';
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
left: 50%;
right: 50%;
margin: auto;
margin-left: -10px;
transform: rotate(180deg);
}
&::before {
bottom: 92%;
border-top: 11px solid ${colorBorderButtonNormalDisabled};
margin-bottom: 5px;
}
&::after {
bottom: 100%;
border-top: 10px solid ${colorBackgroundSegmentHover};
margin-top: -2px;
z-index: 1;
}
`;

// Without this, Firefox widget drag and drop does not work correctly.
const ignoreDragStart: DragEventHandler = (event) => event.preventDefault();

Expand Down
276 changes: 138 additions & 138 deletions packages/react-components/src/components/tooltip/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,144 @@ import {
} from './constants';
import styled, { css } from 'styled-components';

interface TooltipProps {
position: 'bottom' | 'top' | 'right' | 'left';
}

const tooltipPositionStyles = {
top: css`
bottom: -30%;
left: 50%;
transform: translateX(-50%) translateY(-100%);
`,
bottom: css`
top: 115%;
left: 50%;
transform: translateX(-50%) translateY(12px);
`,
left: css`
top: 50%;
left: 10%;
transform: translateX(-100%) translateY(-50%);
`,
right: css`
top: 50%;
left: 90%;
transform: translateX(0) translateY(-50%);
`,
};

const TooltipContainer = styled.span`
position: relative;
display: inline-block;
`;

const TooltipText = styled.div<TooltipProps>`
position: absolute;
visibility: hidden;
z-index: 99;
text-align: center;
${({ position }) => tooltipPositionStyles[position]}

${TooltipContainer}:hover & {
visibility: visible;
}

&::before,
&::after {
content: '';
position: absolute;
}
&::before {
width: 0;
height: 0;
border: 6px solid transparent;
}

${({ position }) =>
position === 'top' &&
css`
&::after,
&::before {
top: 100%;
left: 50%;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
&::before {
border-top: 12px solid ${colorBorderControlDefault};
}
&::after {
border-top: 13px solid ${colorBackgroundContainerContent};
margin-top: -2px;
z-index: 1;
}
`}

${({ position }) =>
position === 'bottom' &&
css`
&::after,
&::before {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
&::before {
border-bottom: 12px solid ${colorBorderControlDefault};
}
&::after {
border-bottom: 12px solid ${colorBackgroundContainerContent};
margin-bottom: -2px;
z-index: 1;
}
`}

${({ position }) =>
position === 'left' &&
css`
&::after,
&::before {
top: 50%;
left: 100%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&::before {
border-left: 12px solid ${colorBorderControlDefault};
}
&::after {
border-left: 12px solid ${colorBackgroundContainerContent};
margin-left: -2px;
z-index: 1;
}
`}

${({ position }) =>
position === 'right' &&
css`
&::after,
&::before {
top: 50%;
right: 100%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&::before {
border-right: 10px solid ${colorBorderControlDefault};
}
&::after {
border-right: 11px solid ${colorBackgroundContainerContent};
margin-right: -2px;
z-index: 1;
}
`}
`;

export const Tooltip = ({
content,
position,
Expand Down Expand Up @@ -55,144 +193,6 @@ export const Tooltip = ({
e.stopPropagation();
};

interface TooltipProps {
position: 'bottom' | 'top' | 'right' | 'left';
}

const tooltipPositionStyles = {
top: css`
bottom: -30%;
left: 50%;
transform: translateX(-50%) translateY(-100%);
`,
bottom: css`
top: 115%;
left: 50%;
transform: translateX(-50%) translateY(12px);
`,
left: css`
top: 50%;
left: 10%;
transform: translateX(-100%) translateY(-50%);
`,
right: css`
top: 50%;
left: 90%;
transform: translateX(0) translateY(-50%);
`,
};

const TooltipContainer = styled.span`
position: relative;
display: inline-block;
`;

const TooltipText = styled.div<TooltipProps>`
position: absolute;
visibility: hidden;
z-index: 99;
text-align: center;
${({ position }) => tooltipPositionStyles[position]}

${TooltipContainer}:hover & {
visibility: visible;
}

&::before,
&::after {
content: '';
position: absolute;
}
&::before {
width: 0;
height: 0;
border: 6px solid transparent;
}

${({ position }) =>
position === 'top' &&
css`
&::after,
&::before {
top: 100%;
left: 50%;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
&::before {
border-top: 12px solid ${colorBorderControlDefault};
}
&::after {
border-top: 13px solid ${colorBackgroundContainerContent};
margin-top: -2px;
z-index: 1;
}
`}

${({ position }) =>
position === 'bottom' &&
css`
&::after,
&::before {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
&::before {
border-bottom: 12px solid ${colorBorderControlDefault};
}
&::after {
border-bottom: 12px solid ${colorBackgroundContainerContent};
margin-bottom: -2px;
z-index: 1;
}
`}

${({ position }) =>
position === 'left' &&
css`
&::after,
&::before {
top: 50%;
left: 100%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&::before {
border-left: 12px solid ${colorBorderControlDefault};
}
&::after {
border-left: 12px solid ${colorBackgroundContainerContent};
margin-left: -2px;
z-index: 1;
}
`}

${({ position }) =>
position === 'right' &&
css`
&::after,
&::before {
top: 50%;
right: 100%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&::before {
border-right: 10px solid ${colorBorderControlDefault};
}
&::after {
border-right: 11px solid ${colorBackgroundContainerContent};
margin-right: -2px;
z-index: 1;
}
`}
`;

return (
<TooltipContainer
onMouseEnter={handleMouseEnter}
Expand Down