diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 5373cbbf8..6763de67a 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -158,7 +158,6 @@ export const Slider = ({ /> {tooltip && ( { @@ -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" diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css index 525f279a9..f6c77297f 100644 --- a/src/components/Tooltip/Tooltip.module.css +++ b/src/components/Tooltip/Tooltip.module.css @@ -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); } /** @@ -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 */ diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx index ede500c89..834694ab1 100644 --- a/src/components/Tooltip/Tooltip.stories.tsx +++ b/src/components/Tooltip/Tooltip.stories.tsx @@ -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', @@ -48,12 +42,6 @@ export default { defaultValue: { summary: 'top' }, }, }, - variant: { - table: { - // Marking deprecated props / controls as disabled - disable: true, - }, - }, }, parameters: { layout: 'centered', diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx index cdb673f59..00f7e1b43 100644 --- a/src/components/Tooltip/Tooltip.test.tsx +++ b/src/components/Tooltip/Tooltip.test.tsx @@ -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('', () => { - const warnMock = consoleWarnMockHelper(); - generateSnapshots(TooltipStoryFile, { // Tippy renders tooltip as a child of and hence is why baseElement needs to be targetted getElement: (wrapper) => { @@ -41,12 +38,4 @@ describe('', () => { await user.keyboard('{Escape}'); expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument(); }); - - it('should display warning message when attempting to use dark variant', () => { - render(); - 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.', - ); - }); }); diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 2d11443b9..96706195f 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -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. @@ -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. * @@ -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 = { @@ -172,15 +145,10 @@ export const Tooltip = ({ return ( {children} diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap index 747d800ab..2efe9bb2a 100644 --- a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap +++ b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap @@ -20,7 +20,7 @@ exports[` 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);" >
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);" >
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);" >
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);" >
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);" >