Browse Source

Add tooltip component

unoptim
GreatBearShark 2 years ago
parent
commit
5233a5624a
  1. 1
      package.json
  2. 2
      src/components/ErrorFallback.tsx
  3. 32
      src/components/Tooltip.tsx
  4. 60
      src/stories/Tooltip.stories.tsx
  5. 38
      yarn.lock

1
package.json

@ -19,6 +19,7 @@
"@reach/combobox": "^0.10.5",
"@reach/menu-button": "^0.10.5",
"@reach/tabs": "^0.11.2",
"@reach/tooltip": "^0.11.2",
"@sentry/react": "^5.22.3",
"@theme-ui/color": "^0.3.1",
"@theme-ui/presets": "^0.3.0",

2
src/components/ErrorFallback.tsx

@ -24,7 +24,7 @@ export default function ErrorFallback() {
>
<Block maxWidth="400px">
<Heading as="h3">Something Went Wrong</Heading>
<Text my={1}>Help Us Out By Letting Us Know What Happened</Text>
<Text my={1}>Help us out by letting us know what happened</Text>
<Block my={3}>
<Button
as="a"

32
src/components/Tooltip.tsx

@ -0,0 +1,32 @@
import React from 'react';
import ReachTooltip, { TooltipProps } from '@reach/tooltip';
// 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,
// };
// };
export default function Tooltip({
style,
...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}
/>
);
}

60
src/stories/Tooltip.stories.tsx

@ -0,0 +1,60 @@
import React, { useState } from 'react';
import {
Box,
Label,
Input,
Select,
Textarea,
Radio,
Flex,
Checkbox,
Slider,
} from 'theme-ui';
import '@reach/tooltip/styles.css';
import Button from '../components/elements/Button';
import { Icon } from '../components/icon';
import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
import { themes } from '../theme';
import Tooltip from '../components/Tooltip';
import Block from '../components/elements/Block';
export default { title: 'Tooltip' };
export const Basic = () => {
return (
<Block>
<Block>
<Tooltip label="Settings">
<Icon name="settings" />
</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>
);
};

38
yarn.lock

@ -1820,6 +1820,14 @@
"@reach/utils" "0.10.5"
tslib "^2.0.0"
"@reach/[email protected]":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.11.2.tgz#19a671be9ff010a345892b81e710cb6e4d9f9762"
integrity sha512-/53A/rY5oX2Y7D5TpvsP+V5cSd+4MPY6f21mAmVn4DCVwpkCFOlJ059ZL7ixS85M0Jz48YQnnvBJUqwkxqUG/g==
dependencies:
"@reach/utils" "0.11.2"
tslib "^2.0.0"
"@reach/[email protected]":
version "0.10.5"
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.10.5.tgz#ba68722f155b146c6790e7d10a97dca1fd7ab14e"
@ -1830,6 +1838,16 @@
prop-types "^15.7.2"
tslib "^2.0.0"
"@reach/[email protected]":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.11.2.tgz#bc92f97f87e81d1307054fd41c40874d3fbf5491"
integrity sha512-eoUWayAADi1ITtrc+8jN9NsBTUkfpORkOs5bQb4RnR6UA/3zlxo5VPuxWgWAG0BCohZlqsxg7NpvckNAyaiAAQ==
dependencies:
"@reach/observe-rect" "1.2.0"
"@reach/utils" "0.11.2"
prop-types "^15.7.2"
tslib "^2.0.0"
"@reach/[email protected]^1.2.1", "@reach/[email protected]^1.3.3":
version "1.3.4"
resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c"
@ -1851,6 +1869,19 @@
prop-types "^15.7.2"
tslib "^2.0.0"
"@reach/[email protected]^0.11.2":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.11.2.tgz#db5c11fa72995801baac157db46f5bb6cacd494b"
integrity sha512-aTi3aLkRZMHrNiHt84vnyTWNj84rPdGYkxAfaFpxgkaKpos3XmaOPiR+n/3YzQUoJXISuw8mZezcrDtsSpr3aA==
dependencies:
"@reach/auto-id" "0.11.2"
"@reach/portal" "0.11.2"
"@reach/rect" "0.11.2"
"@reach/utils" "0.11.2"
"@reach/visually-hidden" "0.11.1"
prop-types "^15.7.2"
tslib "^2.0.0"
"@reach/[email protected]":
version "0.10.5"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.10.5.tgz#fbac944d29565f6dd7abd0e1b13950e99b1e470b"
@ -1869,6 +1900,13 @@
tslib "^2.0.0"
warning "^4.0.3"
"@reach/[email protected]":
version "0.11.1"
resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.11.1.tgz#3d7a5742acf18372f35b9e216680edd8073f35e3"
integrity sha512-TZZNSttor2jG6ZPGI35s/8G0FNSz49QrJIhAZbnUqHyPf3+jtNqAC0dOWW8Nuk+mApDDDVYd2KZ9P2vnzllNnQ==
dependencies:
tslib "^2.0.0"
"@rollup/[email protected]^14.0.0":
version "14.0.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-14.0.0.tgz#4285f9ec2db686a31129e5a2b415c94aa1f836f0"

Loading…
Cancel
Save