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)!: remove deprecated props #1861

Merged
merged 1 commit into from
Feb 27, 2024
Merged

feat(Tooltip)!: remove deprecated props #1861

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
2 changes: 1 addition & 1 deletion src/components/Slider/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,6 @@ export const Slider = ({
/>
{tooltip && (
<Tooltip
align="top"
appendTo="parent"
hideOnClick={false}
offset={({ reference }) => {
Expand All @@ -172,6 +171,7 @@ export const Slider = ({
// offsets the tooltip relative to the position and size of the thumb
return [(ratio - 0.5) * (reference.width - thumbSize), 0];
}}
placement="top"
reference={ref}
text={tooltip}
touch="hold"
Expand Down
22 changes: 5 additions & 17 deletions src/components/Tooltip/Tooltip.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
@media (prefers-reduced-motion) {
transition: none;
}

border-color: var(--eds-theme-color-border-neutral-default);
color: var(--eds-theme-color-text-neutral-default);
background-color: var(--eds-theme-color-background-neutral-subtle);
--arrow-color: var(--eds-theme-color-border-neutral-default);
}

/**
Expand All @@ -33,23 +38,6 @@
padding-top: var(--eds-size-1);
}

/**
* Color Variants
*/
.tooltip--light {
border-color: var(--eds-theme-color-border-neutral-default);
color: var(--eds-theme-color-text-neutral-default);
background-color: var(--eds-theme-color-background-neutral-subtle);
--arrow-color: var(--eds-theme-color-border-neutral-default);
}

.tooltip--dark {
border-color: var(--eds-theme-color-body-background-inverted);
color: var(--eds-theme-color-text-neutral-default-inverse);
background-color: var(--eds-theme-color-body-background-inverted);
--arrow-color: var(--eds-theme-color-body-background-inverted);
}

/**
* Add arrows
*/
Expand Down
12 changes: 0 additions & 12 deletions src/components/Tooltip/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,6 @@ export default {
component: Tooltip,
args: defaultArgs,
argTypes: {
align: {
table: {
// Marking deprecated props / controls as disabled
disable: true,
},
},
text: {
control: {
type: 'text',
Expand All @@ -48,12 +42,6 @@ export default {
defaultValue: { summary: 'top' },
},
},
variant: {
table: {
// Marking deprecated props / controls as disabled
disable: true,
},
},
},
parameters: {
layout: 'centered',
Expand Down
11 changes: 0 additions & 11 deletions src/components/Tooltip/Tooltip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,10 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import * as TooltipStoryFile from './Tooltip.stories';
import consoleWarnMockHelper from '../../../jest/helpers/consoleWarnMock';

const { Interactive, InteractiveDisabled } = composeStories(TooltipStoryFile);

describe('<Tooltip />', () => {
const warnMock = consoleWarnMockHelper();

generateSnapshots(TooltipStoryFile, {
// Tippy renders tooltip as a child of <body> and hence is why baseElement needs to be targetted
getElement: (wrapper) => {
Expand Down Expand Up @@ -41,12 +38,4 @@ describe('<Tooltip />', () => {
await user.keyboard('{Escape}');
expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
});

it('should display warning message when attempting to use dark variant', () => {
render(<Interactive variant="dark" />);
expect(warnMock).toHaveBeenCalledTimes(1);
expect(warnMock).toHaveBeenCalledWith(
'The dark variant is deprecated and will be removed in an upcoming release. Please use the default light variant instead.',
);
});
});
38 changes: 3 additions & 35 deletions src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,6 @@ import styles from './Tooltip.module.css';

// Full list of Tippy props: https://atomiks.github.io/tippyjs/v6/all-props/
type TooltipProps = {
/**
* Where the tooltip should be placed in relation to the element it's attached to.
*
* Tippy also supports 'top-start', 'top-end', 'right-start', 'right-end', etc,
* but our CSS currently only supports the 4 main sides.
*
* This is deprecated. Please use `placement` instead.
*
* @deprecated
*/
align?: 'top' | 'right' | 'bottom' | 'left';
/**
* The element or ref to append the tooltip to.
* Defaults to the body element.
Expand Down Expand Up @@ -79,11 +68,6 @@ type TooltipProps = {
* The content of the tooltip bubble.
*/
text?: React.ReactNode;
/**
* Whether the tooltip has a light or dark background.
* @deprecated
*/
variant?: 'light' | 'dark';
/**
* Whether the tooltip is always visible or always invisible.
*
Expand All @@ -108,24 +92,13 @@ type Plugin = Plugins[number];
*
*/
export const Tooltip = ({
variant = 'light',
align = 'top',
childNotInteractive,
className,
duration = 200,
placement,
placement = 'top',
text,
...rest
}: TooltipProps) => {
if (variant === 'dark' && process.env.NODE_ENV !== 'production') {
console.warn(
'The dark variant is deprecated and will be removed in an upcoming release. Please use the default light variant instead.',
);
}

// TODO: when removing `align`, remove this line and set `placement={placement}` below
const intendedPlacement = placement ?? align;

// Hides tooltip when escape key is pressed, following:
// https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc
const hideOnEsc: Plugin = {
Expand Down Expand Up @@ -172,15 +145,10 @@ export const Tooltip = ({
return (
<Tippy
{...rest}
className={clsx(
styles['tooltip'],
variant === 'light' && styles['tooltip--light'],
variant === 'dark' && styles['tooltip--dark'],
className,
)}
className={clsx(styles['tooltip'], className)}
content={textContent}
duration={duration}
placement={intendedPlacement}
placement={placement}
plugins={[hideOnEsc]}
>
{children}
Expand Down
10 changes: 5 additions & 5 deletions 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 @@ -20,7 +20,7 @@ exports[`<Tooltip /> BottomPlacement story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(0px, 10px);"
>
<div
class="tippy-box tooltip tooltip--light"
class="tippy-box tooltip"
data-animation="fade"
data-escaped=""
data-placement="bottom"
Expand Down Expand Up @@ -118,7 +118,7 @@ exports[`<Tooltip /> LeftPlacement story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-10px, 0px);"
>
<div
class="tippy-box tooltip tooltip--light"
class="tippy-box tooltip"
data-animation="fade"
data-escaped=""
data-placement="left"
Expand Down Expand Up @@ -179,7 +179,7 @@ exports[`<Tooltip /> LongText story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
>
<div
class="tippy-box tooltip tooltip--light"
class="tippy-box tooltip"
data-animation="fade"
data-escaped=""
data-placement="right"
Expand Down Expand Up @@ -239,7 +239,7 @@ exports[`<Tooltip /> LongTriggerText story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
>
<div
class="tippy-box tooltip tooltip--light"
class="tippy-box tooltip"
data-animation="fade"
data-escaped=""
data-placement="right"
Expand Down Expand Up @@ -300,7 +300,7 @@ exports[`<Tooltip /> TopPlacement story renders snapshot 1`] = `
style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; bottom: 0px; transform: translate(0px, -10px);"
>
<div
class="tippy-box tooltip tooltip--light"
class="tippy-box tooltip"
data-animation="fade"
data-escaped=""
data-placement="top"
Expand Down
Loading