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

fix(tooltip): ensure tooltip is not hidden in storybook #5304

Merged
merged 8 commits into from
Feb 10, 2020
Merged

fix(tooltip): ensure tooltip is not hidden in storybook #5304

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b2b66ce
docs(tooltip): ensure tooltip is not hidden in storybook
tw15egan Feb 7, 2020
6ee7f24
docs(tooltip): adjust positioning
tw15egan Feb 7, 2020
0df89bf
fix(tooltip): update tooltip positioning logic for l/r
tw15egan Feb 7, 2020
e607c51
Merge branch 'master' into storybook-tooltip-fix
tw15egan Feb 7, 2020
90ad45a
Merge branch 'master' into storybook-tooltip-fix
tw15egan Feb 7, 2020
b7b6b00
Merge branch 'master' into storybook-tooltip-fix
tw15egan Feb 10, 2020
7653f0a
Merge branch 'master' into storybook-tooltip-fix
tw15egan Feb 10, 2020
e190028
Merge branch 'master' into storybook-tooltip-fix
tw15egan Feb 10, 2020
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
33 changes: 19 additions & 14 deletions packages/react/src/components/Tooltip/Tooltip-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,13 @@ const props = {
triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0),
renderIcon: React.forwardRef((props, ref) => (
<div
style={{
width: '10px',
height: '10px',
borderRadius: '5px',
background: 'red',
}}
ref={ref}
/>
<div ref={ref}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path d="M8.5 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z" />
<path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z" />
<path fill="none" d="M0 0h16v16H0z" />
</svg>
</div>
)),
}),
customIconOnly: () => ({
Expand All @@ -58,6 +56,13 @@ const props = {
}),
};

const containerStyles = {
height: 'calc(100vh - 6rem)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
};

Tooltip.displayName = 'Tooltip';

function UncontrolledTooltipExample() {
Expand Down Expand Up @@ -91,7 +96,7 @@ storiesOf('Tooltip', module)
.add(
'default (bottom)',
() => (
<div style={{ marginTop: '2rem' }}>
<div style={containerStyles}>
<Tooltip {...props.withIcon()} tooltipBodyId="tooltip-body">
<p id="tooltip-body">
This is some tooltip text. This box shows the maximum amount of text
Expand Down Expand Up @@ -120,7 +125,7 @@ storiesOf('Tooltip', module)
.add(
'no icon',
() => (
<div style={{ marginTop: '2rem' }}>
<div style={containerStyles}>
<Tooltip {...props.withoutIcon()}>
<p>
This is some tooltip text. This box shows the maximum amount of text
Expand All @@ -147,9 +152,9 @@ storiesOf('Tooltip', module)
}
)
.add(
'custom icon',
'render custom icon',
() => (
<div style={{ marginTop: '2rem' }}>
<div style={containerStyles}>
<Tooltip {...props.customIcon()}>
<p>
This is some tooltip text. This box shows the maximum amount of text
Expand Down Expand Up @@ -178,7 +183,7 @@ storiesOf('Tooltip', module)
.add(
'only custom icon',
() => (
<div style={{ marginTop: '2rem' }}>
<div style={containerStyles}>
<Tooltip {...props.customIconOnly()}>
<p>
This is some tooltip text. This box shows the maximum amount of text
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/internal/FloatingMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,15 +94,15 @@ const getFloatingPosition = ({
return {
[DIRECTION_LEFT]: () => ({
left: refLeft - width + scrollX - left,
top: refCenterVertical - height / 2 + scrollY + top,
top: refCenterVertical - height / 2 + scrollY + top - 9,
}),
[DIRECTION_TOP]: () => ({
left: refCenterHorizontal - width / 2 + scrollX + left,
top: refTop - height + scrollY - top,
}),
[DIRECTION_RIGHT]: () => ({
left: refRight + scrollX + left,
top: refCenterVertical - height / 2 + scrollY + top,
top: refCenterVertical - height / 2 + scrollY + top + 3,
}),
[DIRECTION_BOTTOM]: () => ({
left: refCenterHorizontal - width / 2 + scrollX + left,
Expand Down