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

💄 Tooltip: implement [popover] #3575

Merged
merged 4 commits into from
Aug 6, 2024
Merged

💄 Tooltip: implement [popover] #3575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d2038b
💄 Tooltip: implement [popover]
oddvernes Aug 6, 2024
beb145f
📸 Update snapshot
oddvernes Aug 6, 2024
6958741
📝 Update stories
oddvernes Aug 6, 2024
b2e17d2
update snapshot
oddvernes Aug 6, 2024
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
6 changes: 4 additions & 2 deletions packages/eds-core-react/src/components/Dialog/Dialog.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState } from 'react'
import { useArgs } from '@storybook/preview-api'
import { Dialog, DialogProps, Button, Radio, Typography } from '../..'
import { Dialog, DialogProps, Button, Radio, Typography, Tooltip } from '../..'
import styled from 'styled-components'
import { StoryFn, Meta } from '@storybook/react'
import { Stack } from './../../../.storybook/components'
Expand Down Expand Up @@ -121,7 +121,9 @@ export const Dismissable: StoryFn<DialogProps> = () => {
</Dialog.CustomContent>
<Dialog.Actions>
<Wrapper>
<Button onClick={handleClose}>OK</Button>
<Tooltip title="A tooltip inside dialog" placement="top">
<Button onClick={handleClose}>OK</Button>
</Tooltip>
<Button variant="ghost" onClick={handleClose}>
Cancel
</Button>
Expand Down
4 changes: 2 additions & 2 deletions packages/eds-core-react/src/components/Tooltip/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,10 +160,10 @@ export const TooltipOnButton: StoryFn<TooltipProps> = () => (
<Tooltip title="This is what a tooltip looks like">
<Button>Hover me</Button>
</Tooltip>
<Tooltip title="This tooltip only shows for people using firefox and using mouse. Don't do this!">
<Tooltip title="This tooltip only shows for people using mouse. Don't do this!">
<Button disabled>Disabled button</Button>
</Tooltip>
<Tooltip title="Tooltip works in all browsers and with keyboard navigation when using aria-disabled">
<Tooltip title="Tooltip works with keyboard navigation when using aria-disabled">
<Button aria-disabled>Aria-disabled button</Button>
</Tooltip>
</>
Expand Down
32 changes: 17 additions & 15 deletions packages/eds-core-react/src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
typographyTemplate,
bordersTemplate,
mergeRefs,
useIsInDialog,
useIsomorphicLayoutEffect,
} from '@equinor/eds-utils'
import { tooltip as tokens } from './Tooltip.tokens'
import {
Expand All @@ -30,18 +30,19 @@ import {
useFocus,
useRole,
useDismiss,
FloatingPortal,
} from '@floating-ui/react'

const StyledTooltip = styled.div`
const StyledTooltip = styled('div').withConfig({
shouldForwardProp: () => true, //workaround to avoid warning until popover gets added to react types
})<{ popover: string }>`
inset: unset;
border: 0;
overflow: visible;
${typographyTemplate(tokens.typography)}
${spacingsTemplate(tokens.spacings)}
${bordersTemplate(tokens.border)}

background: ${tokens.background};
z-index: 1500;
white-space: nowrap;

&::before {
content: '; Has tooltip: ';
clip-path: inset(50%);
Expand All @@ -52,6 +53,9 @@ const StyledTooltip = styled.div`
padding: 0;
position: absolute;
}
&::backdrop {
background-color: transparent;
}
`

const ArrowWrapper = styled.div`
Expand Down Expand Up @@ -171,11 +175,15 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
}),
})

//temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
const inDialog = useIsInDialog(refs.domReference.current)
useIsomorphicLayoutEffect(() => {
if (shouldOpen && open) {
refs.floating.current?.showPopover()
}
}, [open, shouldOpen, refs.floating])

const TooltipEl = (
<StyledTooltip
popover="manual"
{...rest}
{...getFloatingProps({
ref: tooltipRef,
Expand All @@ -198,13 +206,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(

return (
<>
{inDialog ? (
<>{shouldOpen && open && TooltipEl}</>
) : (
<FloatingPortal id="eds-tooltip-container">
{shouldOpen && open && TooltipEl}
</FloatingPortal>
)}
{shouldOpen && open && TooltipEl}
{updatedChildren}
</>
)
Expand Down
9 changes: 8 additions & 1 deletion packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

exports[`Tooltip Matches snapshot 1`] = `
.c0 {
inset: unset;
border: 0;
overflow: visible;
margin: 0;
color: var(--eds_text__static_icons__primary_white, rgba(255, 255, 255, 1));
font-family: Equinor;
Expand All @@ -15,7 +18,6 @@ exports[`Tooltip Matches snapshot 1`] = `
padding-bottom: 8px;
border-radius: 4px;
background: var(--eds_ui_background__overlay, rgba(0, 0, 0, 0.8));
z-index: 1500;
white-space: nowrap;
}

Expand All @@ -30,6 +32,10 @@ exports[`Tooltip Matches snapshot 1`] = `
position: absolute;
}

.c0::backdrop {
background-color: transparent;
}

.c1 {
position: absolute;
width: 6px;
Expand All @@ -47,6 +53,7 @@ exports[`Tooltip Matches snapshot 1`] = `
<div
class="c0"
id=":r0:"
popover="manual"
role="tooltip"
style="position: absolute; top: 14px; left: 8px;"
tabindex="-1"
Expand Down