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

feat(Tooltip): add inverse variant #1984

Merged
merged 1 commit into from
Jun 10, 2024
Merged

feat(Tooltip): add inverse variant #1984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 9 additions & 0 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const parameters = {
},
backgrounds: {
values: [
// TODO: remove the following three when the last 1.0 components have been migrated
{
name: 'eds-color-neutral-white',
value: '#ffffff',
Expand All @@ -76,6 +77,14 @@ export const parameters = {
name: 'eds-color-neutral-700',
value: '#21272D',
},
{
name: 'background-utility-default-high-emphasis',
value: '#0F2163',
},
{
name: 'background-utility-inverse-high-emphasis',
value: '#FFFFFF',
},
],
},
badgesConfig: {
Expand Down
19 changes: 14 additions & 5 deletions src/components/Tooltip/Tooltip-v2.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,6 @@
@media (prefers-reduced-motion) {
transition: none;
}

border-color: var(--eds-theme-color-background-utility-default-high-emphasis);
color: var(--eds-theme-color-text-utility-inverse);
background-color: var(--eds-theme-color-background-utility-default-high-emphasis);
--arrow-color: var(--eds-theme-color-background-utility-default-high-emphasis);
}

/**
Expand Down Expand Up @@ -106,3 +101,17 @@
border-left-width: 0;
left: -7px;
}

.tooltip--variant-default {
color: var(--eds-theme-color-text-utility-inverse);
border-color: var(--eds-theme-color-background-utility-default-high-emphasis);
--arrow-color: var(--eds-theme-color-background-utility-default-high-emphasis);
background-color: var(--eds-theme-color-background-utility-default-high-emphasis);
}

.tooltip--variant-inverse {
color: var(--eds-theme-color-text-utility-default-primary);
border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
--arrow-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
}
12 changes: 11 additions & 1 deletion src/components/Tooltip/Tooltip-v2.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default {
layout: 'centered',
badges: ['intro-1.0', 'current-2.0'],
chromatic: {
delay: 300,
delay: 500,
diffThreshold,
diffIncludeAntiAliasing: false,
},
Expand Down Expand Up @@ -106,6 +106,16 @@ export const LongTriggerText: Story = {
},
};

export const InverseVariant: Story = {
args: {
...LeftPlacement.args,
variant: 'inverse',
},
parameters: {
backgrounds: { default: 'background-utility-default-high-emphasis' },
},
};

/**
* Hover over the button to make the tooltip appear.
*/
Expand Down
15 changes: 14 additions & 1 deletion src/components/Tooltip/Tooltip-v2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,12 @@ type TooltipProps = {
* The content of the tooltip bubble.
*/
text?: string;
/**
* The variant treatment for tooltips
*
* **Default is `"default"`**.
*/
variant?: 'default' | 'inverse';
} & TippyProps &
HTMLAttributes<HTMLElement>;

Expand All @@ -106,6 +112,7 @@ export const Tooltip = ({
duration = 200,
placement = 'auto',
text,
variant = 'default',
...rest
}: TooltipProps) => {
// Hides tooltip when escape key is pressed, following:
Expand Down Expand Up @@ -151,10 +158,16 @@ export const Tooltip = ({
</Text>
);

const tooltipClassNames = clsx(
styles['tooltip'],
variant && styles[`tooltip--variant-${variant}`],
className,
);

// TODO: figure out why the modifiers don't seem to get applied
return (
<Tippy
className={clsx(styles['tooltip'], className)}
className={tooltipClassNames}
content={textContent}
duration={duration}
placement={placement}
Expand Down
63 changes: 58 additions & 5 deletions src/components/Tooltip/__snapshots__/Tooltip-v2.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ exports[`<Tooltip /> (v2) BottomPlacement story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(0px, 12px);"
>
<div
class="tippy-box tooltip"
class="tippy-box tooltip tooltip--variant-default"
data-animation="fade"
data-escaped=""
data-placement="bottom"
Expand Down Expand Up @@ -90,6 +90,59 @@ exports[`<Tooltip /> (v2) InteractiveDisabled story renders snapshot 1`] = `
</body>
`;

exports[`<Tooltip /> (v2) InverseVariant story renders snapshot 1`] = `
<body>
<div>
<div
class="p-8"
>
<div
aria-describedby="tippy-6"
class="fpo p-1"
>
Target Component
</div>
</div>
</div>
<div
data-tippy-root=""
id="tippy-6"
style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-12px, 0px);"
>
<div
class="tippy-box tooltip tooltip--variant-inverse"
data-animation="fade"
data-escaped=""
data-placement="left"
data-reference-hidden=""
data-state="visible"
role="tooltip"
style="max-width: 350px; transition-duration: 0ms;"
tabindex="-1"
>
<div
class="tippy-content"
data-state="visible"
style="transition-duration: 0ms;"
>
<div>
<span
class="text text--body-sm"
data-testid="tooltip-content"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
</span>
</div>
</div>
<div
class="tippy-arrow"
style="position: absolute; top: 0px; transform: translate(0px, 3px);"
/>
</div>
</div>
</body>
`;

exports[`<Tooltip /> (v2) LeftPlacement story renders snapshot 1`] = `
<body>
<div>
Expand All @@ -110,7 +163,7 @@ exports[`<Tooltip /> (v2) LeftPlacement story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-12px, 0px);"
>
<div
class="tippy-box tooltip"
class="tippy-box tooltip tooltip--variant-default"
data-animation="fade"
data-escaped=""
data-placement="left"
Expand Down Expand Up @@ -163,7 +216,7 @@ exports[`<Tooltip /> (v2) LongText story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(12px, 0px);"
>
<div
class="tippy-box tooltip"
class="tippy-box tooltip tooltip--variant-default"
data-animation="fade"
data-escaped=""
data-placement="right"
Expand Down Expand Up @@ -216,7 +269,7 @@ exports[`<Tooltip /> (v2) LongTriggerText story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(12px, 0px);"
>
<div
class="tippy-box tooltip"
class="tippy-box tooltip tooltip--variant-default"
data-animation="fade"
data-escaped=""
data-placement="right"
Expand Down Expand Up @@ -269,7 +322,7 @@ exports[`<Tooltip /> (v2) TopPlacement story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; bottom: 0px; transform: translate(0px, -12px);"
>
<div
class="tippy-box tooltip"
class="tippy-box tooltip tooltip--variant-default"
data-animation="fade"
data-escaped=""
data-placement="top"
Expand Down
Loading