GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 21:01:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11827 from storybookjs/10892-upgrade-react-popper-tooltip

Browse Source 
Upgrade react-popper-tooltip to 3.1.0
This commit is contained in:
Michael Shilman 2020-08-31 22:06:18 +08:00 committed by GitHub
commit eb88f365be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 79 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/components/package.json
View File

@ -28,6 +28,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@popperjs/core": "^2.4.4",
"@storybook/client-logger": "6.1.0-alpha.0",
"@storybook/csf": "0.0.1",
"@storybook/theming": "6.1.0-alpha.0",
@ -42,11 +43,10 @@
"memoizerific": "^1.11.3",
"overlayscrollbars": "^1.10.2",
"polished": "^3.4.4",
"popper.js": "^1.14.7",
"react": "^16.8.3",
"react-color": "^2.17.0",
"react-dom": "^16.8.3",
"react-popper-tooltip": "^2.11.0",
"react-popper-tooltip": "^3.1.0",
"react-syntax-highlighter": "^13.5.0",
"react-textarea-autosize": "^8.1.1",
"ts-dedent": "^1.1.1"

2
lib/components/src/tooltip/Tooltip.stories.tsx
View File

@ -16,7 +16,7 @@ const Content = styled.div({
storiesOf('basics/Tooltip/Tooltip', module)
.add('basic, default', () => (
<Tooltip {...mockPopperProps} color="medium">
<Tooltip {...mockPopperProps}>
<Content>Text</Content>
</Tooltip>
))

40
lib/components/src/tooltip/Tooltip.tsx
View File

@ -19,12 +19,28 @@ const Arrow = styled.div<ArrowProps>(
position: 'absolute',
borderStyle: 'solid',
},
({ theme, color, placement }) => ({
marginBottom: `${match('top', placement, '0', ArrowSpacing)}px`,
marginTop: `${match('bottom', placement, '0', ArrowSpacing)}px`,
marginRight: `${match('left', placement, '0', ArrowSpacing)}px`,
marginLeft: `${match('right', placement, '0', ArrowSpacing)}px`,
({ placement }) => {
let x = 0;
let y = 0;
switch (true) {
case placement.startsWith('left') || placement.startsWith('right'): {
y = 8;
break;
}
case placement.startsWith('top') || placement.startsWith('bottom'): {
x = 8;
break;
}
default: {
//
}
}
const transform = `translate3d(${x}px, ${y}px, 0px)`;
return { transform };
},
({ theme, color, placement }) => ({
bottom: `${match('top', placement, ArrowSpacing * -1, 'auto')}px`,
top: `${match('bottom', placement, ArrowSpacing * -1, 'auto')}px`,
right: `${match('left', placement, ArrowSpacing * -1, 'auto')}px`,
@ -82,14 +98,9 @@ const Wrapper = styled.div<WrapperProps>(
display: hidden ? 'none' : 'inline-block',
zIndex: 2147483647,
}),
({ theme, color, hasChrome, placement }) =>
({ theme, color, hasChrome }) =>
hasChrome
? {
marginBottom: `${match('top', placement, ArrowSpacing + 2, 0)}px`,
marginTop: `${match('bottom', placement, ArrowSpacing + 2, 0)}px`,
marginLeft: `${match('right', placement, ArrowSpacing + 2, 0)}px`,
marginRight: `${match('left', placement, ArrowSpacing + 2, 0)}px`,
background:
theme.color[color] || color || theme.base === 'light'
? lighten(theme.background.app)
@ -101,12 +112,7 @@ const Wrapper = styled.div<WrapperProps>(
borderRadius: theme.appBorderRadius * 2,
fontSize: theme.typography.size.s1,
}
: {
marginBottom: `${match('top', placement, 8, 0)}px`,
marginTop: `${match('bottom', placement, 8, 0)}px`,
marginLeft: `${match('right', placement, 8, 0)}px`,
marginRight: `${match('left', placement, 8, 0)}px`,
}
: {}
);
export interface TooltipProps {

25
lib/components/src/tooltip/WithTooltip.tsx
View File

@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
import { document } from 'global';
import TooltipTrigger from 'react-popper-tooltip';
import { Modifiers, Placement } from 'popper.js';
import { Modifier, Placement } from '@popperjs/core';
import { Tooltip } from './Tooltip';
// A target that doesn't speak popper
@ -25,7 +25,7 @@ export interface WithTooltipPureProps {
trigger?: 'none' | 'hover' | 'click' | 'right-click';
closeOnClick?: boolean;
placement?: Placement;
modifiers?: Modifiers;
modifiers?: Array<Partial<Modifier<string, {}>>>;
hasChrome?: boolean;
tooltip: ReactNode | ((p: WithHideFn) => ReactNode);
children: ReactNode;
@ -93,7 +93,26 @@ WithTooltipPure.defaultProps = {
trigger: 'hover',
closeOnClick: false,
placement: 'top',
modifiers: {},
modifiers: [
{
name: 'preventOverflow',
options: {
padding: 8,
},
},
{
name: 'offset',
options: {
offset: [8, 8],
},
},
{
name: 'arrow',
options: {
padding: 8,
},
},
],
hasChrome: true,
tooltipShown: false,
};

33
yarn.lock
View File

@ -1694,6 +1694,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.10.4":
version "7.11.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/template@7.8.6", "@babel/template@^7.1.2", "@babel/template@^7.3.3", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.7.0", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
version "7.8.6"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
@ -3743,6 +3750,11 @@
"@parcel/utils" "^1.11.0"
physical-cpu-count "^2.0.0"
"@popperjs/core@^2.4.4":
version "2.4.4"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
"@reach/router@^1.3.3":
version "1.3.3"
resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"
@ -24180,7 +24192,7 @@ polished@^3.4.4, polished@^3.6.4:
dependencies:
"@babel/runtime" "^7.9.2"
popper.js@^1.14.4, popper.js@^1.14.7:
popper.js@^1.14.4:
version "1.16.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
@ -26302,7 +26314,7 @@ react-moment-proptypes@^1.7.0:
dependencies:
moment ">=1.6.0"
react-popper-tooltip@^2.11.0, react-popper-tooltip@^2.11.1:
react-popper-tooltip@^2.11.1:
version "2.11.1"
resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"
integrity sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==
@ -26310,6 +26322,15 @@ react-popper-tooltip@^2.11.0, react-popper-tooltip@^2.11.1:
"@babel/runtime" "^7.9.2"
react-popper "^1.3.7"
react-popper-tooltip@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.0.tgz#fd7c7a39b344538e0cbd00ce6fac3147f72d2589"
integrity sha512-uoLUGtQSQyf4DucJQWXdZVAf3u/FFAHxox74y2GWP2Fy6D0lT9YL/7QIRSGsMI5USCHsS7HuHD4okVGAhctIGg==
dependencies:
"@babel/runtime" "^7.10.4"
"@popperjs/core" "^2.4.4"
react-popper "^2.2.3"
react-popper@^1.3.7:
version "1.3.7"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
@ -26323,6 +26344,14 @@ react-popper@^1.3.7:
typed-styles "^0.0.7"
warning "^4.0.2"
react-popper@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.3.tgz#33d425fa6975d4bd54d9acd64897a89d904b9d97"
integrity sha512-mOEiMNT1249js0jJvkrOjyHsGvqcJd3aGW/agkiMoZk3bZ1fXN1wQszIQSjHIai48fE67+zwF8Cs+C4fWqlfjw==
dependencies:
react-fast-compare "^3.0.1"
warning "^4.0.2"
react-scripts@3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.0.1.tgz#e5565350d8069cc9966b5998d3fe3befe3d243ac"