Browse Source

Fix tooltip component

main
GreatBearShark 2 years ago
parent
commit
bab1e11445
  1. 1
      package.json
  2. 105
      src/components/Tooltip.tsx
  3. 37
      src/stories/Tooltip.stories.tsx
  4. 2
      yarn.lock

1
package.json

@ -18,6 +18,7 @@
"@pika/react-dom": "^16.13.1",
"@reach/combobox": "^0.10.5",
"@reach/menu-button": "^0.10.5",
"@reach/portal": "^0.11.2",
"@reach/tabs": "^0.11.2",
"@reach/tooltip": "^0.11.2",
"@sentry/react": "^5.22.3",

105
src/components/Tooltip.tsx

@ -1,32 +1,85 @@
import React from 'react';
import ReachTooltip, { TooltipProps } from '@reach/tooltip';
import React, { cloneElement } from 'react';
import ReachTooltip, {
TooltipProps,
useTooltip,
TooltipPopup,
} from '@reach/tooltip';
import Portal from '@reach/portal';
// const centered = (triggerRect, tooltipRect) => {
// const triggerCenter = triggerRect.left + triggerRect.width / 2;
// const left = triggerCenter - tooltipRect.width / 2;
// const maxLeft = window.innerWidth - tooltipRect.width - 2;
// return {
// left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
// top: triggerRect.bottom + 8 + window.scrollY,
// };
// };
import Block from './elements/Block';
import { useThemeUI } from 'theme-ui';
import { useThemeSystem } from './ThemeSystemProvider';
const centered = (triggerRect: DOMRect, tooltipRect) => {
const triggerCenter = triggerRect.left + triggerRect.width / 2;
const left = triggerCenter - tooltipRect.width / 2;
const maxLeft = window.innerWidth - tooltipRect.width - 2;
return {
left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
top: triggerRect.bottom + 8 + window.scrollY,
};
};
function TriangleTooltip({ children, label, 'aria-label': ariaLabel }) {
// get the props from useTooltip
const [trigger, tooltip] = useTooltip();
// destructure off what we need to position the triangle
const { isVisible, triggerRect } = tooltip;
const { currentTheme } = useThemeSystem();
const { theme } = useThemeUI();
const color = currentTheme === 'chapo' ? '#2F2F37' : theme.colors.muted;
return (
<>
{cloneElement(children, trigger)}
{isVisible && (
// The Triangle. We position it relative to the trigger, not the popup
// so that collisions don't have a triangle pointing off to nowhere.
// Using a Portal may seem a little extreme, but we can keep the
// positioning logic simpler here instead of needing to consider
// the popup's position relative to the trigger and collisions
<Portal>
<div
style={{
position: 'absolute',
left:
triggerRect && triggerRect.left - 10 + triggerRect.width / 2,
top: triggerRect && triggerRect.bottom + window.scrollY,
width: 0,
height: 0,
borderLeft: '10px solid transparent',
borderRight: '10px solid transparent',
borderBottom: `10px solid ${color}`,
}}
/>
</Portal>
)}
<TooltipPopup
{...tooltip}
label={label}
aria-label={ariaLabel}
style={{
backgroundColor: color,
color: 'white',
border: 'none',
borderRadius: '6px',
padding: '15px',
fontSize: '15px',
lineHeight: '18px',
fontWeight: 500,
}}
position={centered}
/>
</>
);
}
export default function Tooltip({
style,
'aria-label': ariaLabel,
...props
}: { style?: React.CSSProperties } & TooltipProps) {
return (
<ReachTooltip
isVisible
style={{
background: 'hsla(0, 0%, 0%, 0.75)',
color: 'white',
border: 'none',
borderRadius: '4px',
padding: '0.5em 1em',
...style,
}}
{...props}
/>
);
}: { style?: React.CSSProperties; 'aria-label': string } & TooltipProps) {
return <TriangleTooltip aria-label={ariaLabel} {...props} />;
}

37
src/stories/Tooltip.stories.tsx

@ -22,39 +22,14 @@ export default { title: 'Tooltip' };
export const Basic = () => {
return (
<Block>
<ThemeSystemProvider>
<Block>
<Tooltip label="Settings">
<Icon name="settings" />
<Tooltip label="Settings" aria-label="Open Settings">
<Box css={{ display: 'inline-block' }}>
<Icon name="settings" />
</Box>
</Tooltip>
</Block>
{/* {Object.keys(themes).map(theme => {
return (
<ThemeSystemProvider key={theme} initialTheme={theme}>
<Box bg="background" p={2}>
<Button mx={1}>Primary</Button>
<Button variant="secondary" mx={1}>
Secondary
</Button>
<Button variant="highlight" mx={1}>
Highlight
</Button>
<Button variant="muted" mx={1}>
Muted
</Button>
<Button disabled mx={1}>
Disabled
</Button>
<Button variant="danger" mx={1}>
Danger
</Button>
<Button variant="outline" mx={1}>
Outline
</Button>
</Box>
</ThemeSystemProvider>
);
})} */}
</Block>
</ThemeSystemProvider>
);
};

2
yarn.lock

@ -1820,7 +1820,7 @@
"@reach/utils" "0.10.5"
tslib "^2.0.0"
"@reach/[email protected]":
"@reach/[email protected]", "@reach/[email protected]^0.11.2":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.11.2.tgz#19a671be9ff010a345892b81e710cb6e4d9f9762"
integrity sha512-/53A/rY5oX2Y7D5TpvsP+V5cSd+4MPY6f21mAmVn4DCVwpkCFOlJ059ZL7ixS85M0Jz48YQnnvBJUqwkxqUG/g==

Loading…
Cancel
Save