diff --git a/docs/migrations/web-react/MIGRATION-v2.md b/docs/migrations/web-react/MIGRATION-v2.md index f897a35fe6..ba29ec1834 100644 --- a/docs/migrations/web-react/MIGRATION-v2.md +++ b/docs/migrations/web-react/MIGRATION-v2.md @@ -23,6 +23,7 @@ Introducing version 2 of the _spirit-web-react_ package - [TextField: `label` prop](#textfield-label-prop) - [Tooltip: `off` Placement](#tooltip-off-placement) - [Tooltip: Refactored](#tooltip-refactored) + - [TooltipModern](#tooltipmodern) ## General Changes @@ -328,6 +329,22 @@ Use: ``` +### TooltipModern + +The `TooltipModern` component was renamed to `Tooltip`. + +#### Migration Guide + +Use codemod to automatically update your codebase. + +```sh +npx @lmc-eu/spirit-codemods -p -t v2/web-react/tooltipmodern-component-name +``` + +See [Codemods documentation][readme-codemods] for more details. + +Or manually rename `TooltipModern` to the `Tooltip`. + --- Please refer back to these instructions or reach out to our team if you encounter any issues during migration. diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tooltipmodern-component-name.input.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tooltipmodern-component-name.input.tsx new file mode 100644 index 0000000000..642ac094e1 --- /dev/null +++ b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tooltipmodern-component-name.input.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { TooltipModern } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + Tooltip + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tooltipmodern-component-name.output.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tooltipmodern-component-name.output.tsx new file mode 100644 index 0000000000..34133e58a6 --- /dev/null +++ b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tooltipmodern-component-name.output.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { Tooltip } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + Tooltip + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__tests__/tooltipmodern-component-name.test.ts b/packages/codemods/src/transforms/v2/web-react/__tests__/tooltipmodern-component-name.test.ts new file mode 100644 index 0000000000..d6b823950b --- /dev/null +++ b/packages/codemods/src/transforms/v2/web-react/__tests__/tooltipmodern-component-name.test.ts @@ -0,0 +1,3 @@ +import { testTransform } from '../../../../../tests/testUtils'; + +testTransform(__dirname, 'tooltipmodern-component-name'); diff --git a/packages/codemods/src/transforms/v2/web-react/tooltipmodern-component-name.ts b/packages/codemods/src/transforms/v2/web-react/tooltipmodern-component-name.ts new file mode 100644 index 0000000000..b383099332 --- /dev/null +++ b/packages/codemods/src/transforms/v2/web-react/tooltipmodern-component-name.ts @@ -0,0 +1,65 @@ +import { API, FileInfo, JSXIdentifier, JSXOpeningElement, JSXClosingElement } from 'jscodeshift'; + +const transform = (fileInfo: FileInfo, api: API) => { + const j = api.jscodeshift; + const root = j(fileInfo.source); + + // Find import statements for the specific module and TooltipModern specifier + const importStatements = root.find(j.ImportDeclaration, { + source: { + value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value), + }, + }); + + // Check if the module is imported + if (importStatements.length > 0) { + const componentSpecifier = importStatements.find(j.ImportSpecifier, { + imported: { + type: 'Identifier', + name: 'TooltipModern', + }, + }); + + // Check if TooltipModern specifier is present + if (componentSpecifier.length > 0) { + // Find opening tags for TooltipModern components + root + .find(j.JSXOpeningElement, { + name: { + type: 'JSXIdentifier', + name: 'TooltipModern', + }, + }) + .forEach((openingTagPath) => { + // Change component name to 'Tooltip' + if (openingTagPath.node.name.type === 'JSXIdentifier') { + (openingTagPath.node.name as JSXIdentifier).name = 'Tooltip'; + } + }); + + // Find closing tags for TooltipModern components + root + .find(j.JSXClosingElement, { + name: { + type: 'JSXIdentifier', + name: 'TooltipModern', + }, + }) + .forEach((closingTagPath) => { + // Change closing tag name to 'Tooltip' + if (closingTagPath.node.name.type === 'JSXIdentifier') { + (closingTagPath.node.name as JSXIdentifier).name = 'Tooltip'; + } + }); + + // Change 'TooltipModern' to 'Tooltip' in import statement + componentSpecifier.forEach((path) => { + j(path).replaceWith(j.importSpecifier(j.identifier('Tooltip'), j.identifier('Tooltip'))); + }); + } + } + + return root.toSource(); +}; + +export default transform; diff --git a/packages/web-react/src/components/Tooltip/README.md b/packages/web-react/src/components/Tooltip/README.md index ef169533d7..9418fe7bfe 100644 --- a/packages/web-react/src/components/Tooltip/README.md +++ b/packages/web-react/src/components/Tooltip/README.md @@ -5,269 +5,29 @@ ### Basic ```javascript - - - Hello there! - -``` - -### Dismissible - -```javascript -import { useState } from 'react'; - -const [open, setOpen] = useState(true); -const closeHandler = () => setOpen(false); - - - - - Hello there! - -; -``` - -### Tooltip on Click - -```javascript -import { useState } from 'react'; - -const [open, setOpen] = useState(false); -const toggleHandler = () => setOpen(!open); - -
- -
- -
- I have an externally-triggered tooltip -
- - Hello there! - - -``` - -### Basic Uncontrolled - -```javascript - - - Hello there! - -``` - -### Uncontrolled Dismissible - -```javascript - - - Hello there! - -``` - -## Tooltip Props - -| Name | Type | Default | Required | Description | -| --------------- | --------------------------------------------------- | -------- | -------- | ----------------------------------------- | -| `children` | `ReactNode` | β€” | βœ” | Tooltip children's nodes | -| `closeLabel` | `string` | `Close` | βœ• | Tooltip label on close button | -| `isDismissible` | `bool` | β€” | βœ• | When it should appear with a close button | -| `onClose` | `(event: ClickEvent) => void` | β€” | βœ• | Close button callback | -| `open` | `bool` | β€” | βœ• | Tooltip open state control | -| `placement` | [Placement dictionary][dictionary-placement], 'off' | `bottom` | βœ• | Tooltip placement | - -On top of the API options, the components accept [additional attributes][readme-additional-attributes]. -If you need more control over the styling of a component, you can use [style props][readme-style-props] -and [escape hatches][readme-escape-hatches]. - -## UncontrolledTooltip Props - -| Name | Type | Default | Required | Description | -| --------------- | --------------------------------------------------- | -------- | -------- | ----------------------------------------- | -| `children` | `ReactNode` | β€” | βœ” | Tooltip children's nodes | -| `closeLabel` | `string` | `Close` | βœ• | Tooltip label on close button | -| `isDismissible` | `bool` | β€” | βœ• | When it should appear with a close button | -| `placement` | [Placement dictionary][dictionary-placement], 'off' | `bottom` | βœ• | Tooltip placement | - -On top of the API options, the components accept [additional attributes][readme-additional-attributes]. -If you need more control over the styling of a component, you can use [style props][readme-style-props] -and [escape hatches][readme-escape-hatches]. - -## TooltipWrapper Props - -| Name | Type | Default | Required | Description | -| ---------- | ----------- | ------- | -------- | ------------------------------- | -| `children` | `ReactNode` | β€” | βœ” | TooltipWrapper children's nodes | - -On top of the API options, the components accept [additional attributes][readme-additional-attributes]. -If you need more control over the styling of a component, you can use [style props][readme-style-props] -and [escape hatches][readme-escape-hatches]. - -## TooltipCloseButton Props - -| Name | Type | Default | Required | Description | -| --------- | ----------------------------- | ------- | -------- | --------------------- | -| `label` | `string` | `Close` | βœ• | Text label | -| `onClick` | `(event: ClickEvent) => void` | β€” | βœ• | Close Button callback | - -On top of the API options, the components accept [additional attributes][readme-additional-attributes]. -If you need more control over the styling of a component, you can use [style props][readme-style-props] -and [escape hatches][readme-escape-hatches]. - -## Advanced Positioning with Floating UI - -### ⚠️ DEPRECATION NOTICE - -The `off` placement is [deprecated][readme-deprecations] and will be removed in the next major version. -Please use the `TooltipModern` component instead, which is the successor of the `Tooltip` component and -provides improved functionality. - -[What are deprecations?][readme-deprecations] - -### Basic - -```javascript -import { useState } from 'react'; -import { - autoUpdate, - flip, - useDismiss, - useFloating, - useFocus, - useHover, - useInteractions, - useRole, -} from '@floating-ui/react'; - -const [open, setOpen] = useState(false); -const { x, y, refs, context, placement } = useFloating({ - open, - onOpenChange: setOpen, - placement: 'top', - whileElementsMounted: autoUpdate, - middleware: [flip()], -}); -const hover = useHover(context, { move: false }); -const focus = useFocus(context); -const dismiss = useDismiss(context); -const role = useRole(context, { role: 'tooltip' }); -const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]); - -
- - - Hello there! - -
; -``` - -### Dismissible - -```javascript -import { useState } from 'react'; -import { - autoUpdate, - flip, - useDismiss, - useFloating, - useFocus, - useHover, - useInteractions, - useRole, -} from '@floating-ui/react'; - -const [open, setOpen] = useState(false); - -const closeHandler = () => setOpen(false); - -const { x, y, refs, context, placement } = useFloating({ - placement: 'top', - whileElementsMounted: autoUpdate, - middleware: [flip()], -}); -const hover = useHover(context, { move: false }); -const focus = useFocus(context); -const dismiss = useDismiss(context); -const role = useRole(context, { role: 'tooltip' }); -const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]); - -
- - - Hello there! - -
; -``` - -# TooltipModern - -⚠️ `TooltipModern` component is [deprecated][readme-deprecations] and will be renamed to `Tooltip` in the next major version. - -## Usage - -### Basic - -```javascript -import { TooltipModern, TooltipTrigger, TooltipPopover, Button } from '@lmc-eu/spirit-web-react/components'; +import { Tooltip, TooltipTrigger, TooltipPopover } from '@lmc-eu/spirit-web-react/components'; const [open, setOpen] = React.useState(false); - + I have a tooltip! Hello there! -; +; ``` ### Dismissible -To display close button, add `isDismissible` prop to the `TooltipModern` component. +To display close button, add `isDismissible` prop to the `Tooltip` component. ```javascript -import { TooltipModern, TooltipTrigger, TooltipPopover, Button } from '@lmc-eu/spirit-web-react/components'; +import { Tooltip, TooltipTrigger, TooltipPopover, Button } from '@lmc-eu/spirit-web-react/components'; const [open, setOpen] = React.useState(false); - + I have a tooltip 😎 Close me -; +; ``` ### Trigger @@ -278,12 +38,12 @@ If you only want the `click` trigger, you need to specify the trigger, as shown This setup might be preferable when you have a link in your tooltip, for example. ```jsx -import { TooltipModern, TooltipTrigger, TooltipPopover, Button } from '@lmc-eu/spirit-web-react/components'; +import { Tooltip, TooltipTrigger, TooltipPopover, Button } from '@lmc-eu/spirit-web-react/components'; const [open, setOpen] = React.useState(false); - You can click on the link: Link to unknown -; +; ``` ## API @@ -319,16 +79,12 @@ If you need more control over the styling of a component, you can use [style pro and [escape hatches][readme-escape-hatches]. [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement -[example]: https://spirit-design-system-demo.netlify.app/src/scss/components/tooltip/#advanced-positioning [floating-ui-flip-cross-axis]: https://floating-ui.com/docs/flip#crossaxis [floating-ui-flip-fallback-axis-side-direction]: https://floating-ui.com/docs/flip#fallbackaxissidedirection [floating-ui-flip-fallback-placements]: https://floating-ui.com/docs/flip#fallbackplacements [floating-ui-flip]: https://floating-ui.com/docs/flip [floating-ui-shift]: https://floating-ui.com/docs/shift [floating-ui-size]: https://floating-ui.com/docs/size -[floating-ui]: https://floating-ui.com [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes -[readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#deprecations [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches -[readme-feature-flags]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#feature-flags [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props diff --git a/packages/web-react/src/components/Tooltip/Tooltip.tsx b/packages/web-react/src/components/Tooltip/Tooltip.tsx index 3f9ef40e35..7c0c8db9ec 100644 --- a/packages/web-react/src/components/Tooltip/Tooltip.tsx +++ b/packages/web-react/src/components/Tooltip/Tooltip.tsx @@ -1,36 +1,99 @@ -import classNames from 'classnames'; -import React, { LegacyRef, forwardRef, useMemo } from 'react'; +import React, { useRef } from 'react'; import { useStyleProps } from '../../hooks'; import { SpiritTooltipProps } from '../../types'; -import TooltipCloseButton from './TooltipCloseButton'; -import { useTooltipStyleProps } from './useTooltipStyleProps'; +import { TooltipProvider } from './TooltipContext'; +import { useFloating } from './useFloating'; -export const Tooltip = forwardRef((props: SpiritTooltipProps, ref) => { - const { children, isDismissible, closeLabel = 'Close', open, onClose, ...restProps } = props; +const Tooltip = (props: SpiritTooltipProps) => { + const { + children, + enableFlipping: flipProp = true, + enableFlippingCrossAxis: flipCrossAxis = true, + enableShifting: shiftProp = true, + enableSizing: sizeProp = true, + flipFallbackAxisSideDirection = 'none', + flipFallbackPlacements = ['bottom', 'top'], + id, + isDismissible = false, + isFocusableOnHover = false, + isOpen = false, + onToggle, + placement: tooltipPlacement, + trigger = ['click', 'hover'], + ...rest + } = props; - const { classProps, props: modifiedProps } = useTooltipStyleProps({ - isDismissible, - open, - ...restProps, + const { styleProps, props: otherProps } = useStyleProps({ ...rest }); + + // Refs for FloatingUI + const arrowRef = useRef(null); + const tooltipRef = useRef(null); + + // Get `--tooltip-max-width` and `--tooltip-offset` from CSS variables + let tooltipMaxWidth; + let tooltipOffset; + let tooltipCornerOffset; + let tooltipArrowWidth; + const tooltipElement = tooltipRef.current?.querySelector('[data-spirit-element="tooltip"]'); + const tooltipArrowElement = tooltipElement?.querySelector('[data-spirit-element="tooltip-arrow"]'); + + if (tooltipElement) { + const tooltipComputedStyle = window.getComputedStyle(tooltipElement); + const tooltipArrowComputedStyle = tooltipArrowElement && window.getComputedStyle(tooltipArrowElement); + tooltipMaxWidth = parseInt(tooltipComputedStyle.getPropertyValue('--tooltip-max-width'), 10); + tooltipOffset = parseInt(tooltipComputedStyle.getPropertyValue('--tooltip-offset'), 10); + tooltipCornerOffset = tooltipArrowComputedStyle + ? parseInt(tooltipArrowComputedStyle.getPropertyValue('--tooltip-arrow-corner-offset'), 10) + : 0; + tooltipArrowWidth = tooltipArrowComputedStyle ? parseInt(tooltipArrowComputedStyle.width, 10) : 0; + } + + // Get props for the FloatingUI hook + const { getFloatingProps, getReferenceProps, maxWidth, middlewareData, placement, refs, x, y } = useFloating({ + arrowRef, + cornerOffset: tooltipCornerOffset, + flipCrossAxis, + flipFallbackAxisSideDirection, + flipFallbackPlacements, + flipProp, + isFocusableOnHover, + isOpen, + offset: tooltipOffset, + onToggle, + shiftProp, + sizeProp, + tooltipArrowWidth, + tooltipMaxWidth, + tooltipPlacement, + trigger, }); - const { styleProps, props: transferProps } = useStyleProps({ ...modifiedProps }); - const renderCloseButton = useMemo( - () => isDismissible && , - [isDismissible, onClose, closeLabel], - ); return ( -
| undefined} - {...transferProps} + - {children} - {renderCloseButton} - -
+
+ {children} +
+ ); -}); +}; export default Tooltip; diff --git a/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx b/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx index 66e4235e51..f350dd86a1 100644 --- a/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx +++ b/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx @@ -7,7 +7,7 @@ import { VisuallyHidden } from '../VisuallyHidden'; import { useTooltipStyleProps } from './useTooltipStyleProps'; export const TooltipCloseButton = ({ label = 'Close', onClick, ...restProps }: TooltipCloseButtonProps) => { - const { classProps, props: modifiedProps } = useTooltipStyleProps({ ...restProps }); + const { classProps, props: modifiedProps } = useTooltipStyleProps(restProps); const { styleProps } = useStyleProps({ ...modifiedProps }); return ( diff --git a/packages/web-react/src/components/Tooltip/TooltipModern.tsx b/packages/web-react/src/components/Tooltip/TooltipModern.tsx deleted file mode 100644 index 924d16d3c8..0000000000 --- a/packages/web-react/src/components/Tooltip/TooltipModern.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { useRef } from 'react'; -import { useDeprecationMessage, useStyleProps } from '../../hooks'; -import { ChildrenProps, SpiritTooltipModernProps } from '../../types'; -import { TooltipProvider } from './TooltipContext'; -import { useFloating } from './useFloating'; - -interface TooltipModernProps extends ChildrenProps, SpiritTooltipModernProps {} - -const TooltipModern = (props: TooltipModernProps) => { - const { - children, - enableFlipping: flipProp = true, - enableFlippingCrossAxis: flipCrossAxis = true, - enableShifting: shiftProp = true, - enableSizing: sizeProp = true, - flipFallbackAxisSideDirection = 'none', - flipFallbackPlacements = ['bottom', 'top'], - id, - isDismissible = false, - isOpen = false, - isFocusableOnHover = false, - onToggle, - placement: tooltipPlacement, - trigger = ['click', 'hover'], - ...rest - } = props; - - const { styleProps, props: otherProps } = useStyleProps({ ...rest }); - - // Refs for FloatingUI - const arrowRef = useRef(null); - const tooltipRef = useRef(null); - - // Get `maxWidth` and `--tooltip-offset` from CSS variables - let tooltipMaxWidth; - let tooltipOffset; - let tooltipCornerOffset; - let tooltipArrowWidth; - const tooltipElement = tooltipRef.current?.querySelector('[data-spirit-element="tooltip"]'); - const tooltipArrowElement = tooltipElement?.querySelector('[data-spirit-element="tooltip-arrow"]'); - - if (tooltipElement) { - const tooltipComputedStyle = window.getComputedStyle(tooltipElement); - const tooltipArrowComputedStyle = tooltipArrowElement && window.getComputedStyle(tooltipArrowElement); - tooltipMaxWidth = parseInt(tooltipComputedStyle.getPropertyValue('--tooltip-max-width'), 10); - tooltipOffset = parseInt(tooltipComputedStyle.getPropertyValue('--tooltip-offset'), 10); - tooltipCornerOffset = tooltipArrowComputedStyle - ? parseInt(tooltipArrowComputedStyle.getPropertyValue('--tooltip-arrow-corner-offset'), 10) - : 0; - tooltipArrowWidth = tooltipArrowComputedStyle ? parseInt(tooltipArrowComputedStyle.width, 10) : 0; - } - - // Get props for the FloatingUI hook - const { getFloatingProps, getReferenceProps, maxWidth, middlewareData, placement, refs, x, y } = useFloating({ - arrowRef, - cornerOffset: tooltipCornerOffset, - flipCrossAxis, - flipFallbackAxisSideDirection, - flipFallbackPlacements, - flipProp, - isOpen, - offset: tooltipOffset, - onToggle, - isFocusableOnHover, - shiftProp, - sizeProp, - tooltipArrowWidth, - tooltipMaxWidth, - tooltipPlacement, - trigger, - }); - - useDeprecationMessage({ - method: 'component', - trigger: true, - componentName: 'TooltipModern', - componentProps: { - newName: 'Tooltip', - }, - }); - - return ( - -
- {children} -
- - ); -}; - -export default TooltipModern; diff --git a/packages/web-react/src/components/Tooltip/TooltipPopover.tsx b/packages/web-react/src/components/Tooltip/TooltipPopover.tsx index 2f043fb1e1..a40b1d33d1 100644 --- a/packages/web-react/src/components/Tooltip/TooltipPopover.tsx +++ b/packages/web-react/src/components/Tooltip/TooltipPopover.tsx @@ -4,7 +4,7 @@ import { useStyleProps } from '../../hooks'; import { ChildrenProps, StyleProps } from '../../types'; import TooltipCloseButton from './TooltipCloseButton'; import { useTooltipContext } from './TooltipContext'; -import { useTooltipModernStyleProps } from './useTooltipModernStyleProps'; +import { useTooltipStyleProps } from './useTooltipStyleProps'; interface TooltipPopoverProps extends ChildrenProps, StyleProps {} @@ -24,7 +24,7 @@ const TooltipPopover = (props: TooltipPopoverProps) => { sizeMaxWidth, tooltipMaxWidth, } = useTooltipContext(); - const { classProps, props: modifiedProps } = useTooltipModernStyleProps({ + const { classProps, props: modifiedProps } = useTooltipStyleProps({ isOpen, isDismissible, placement, diff --git a/packages/web-react/src/components/Tooltip/TooltipWrapper.tsx b/packages/web-react/src/components/Tooltip/TooltipWrapper.tsx deleted file mode 100644 index f7c4d31e96..0000000000 --- a/packages/web-react/src/components/Tooltip/TooltipWrapper.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import classNames from 'classnames'; -import React from 'react'; -import { useStyleProps } from '../../hooks'; -import { TooltipWrapperProps } from '../../types'; -import { useTooltipStyleProps } from './useTooltipStyleProps'; - -export const TooltipWrapper = ({ children, ...restProps }: TooltipWrapperProps) => { - const { classProps, props: modifiedProps } = useTooltipStyleProps({ ...restProps }); - const { styleProps } = useStyleProps({ ...modifiedProps }); - - return ( -
- {children} -
- ); -}; - -export default TooltipWrapper; diff --git a/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx index 4a54c7e0d3..54695d113a 100644 --- a/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx +++ b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx @@ -1,15 +1,14 @@ import React from 'react'; -import { UncontrolledTooltipProps } from '../../types'; +import { SpiritTooltipProps } from '../../types'; import Tooltip from './Tooltip'; import { useTooltip } from './useTooltip'; -export const UncontrolledTooltip = (props: UncontrolledTooltipProps) => { - const { children, isDismissible, ...restProps } = props; - - const { open, onClose } = useTooltip({ isDismissible }); +export const UncontrolledTooltip = (props: Omit) => { + const { children, ...restProps } = props; + const { isOpen, onToggle } = useTooltip(); return ( - + {children} ); diff --git a/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx b/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx index 9f781af1be..845ec84331 100644 --- a/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx +++ b/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx @@ -1,54 +1,29 @@ import '@testing-library/jest-dom'; import React from 'react'; import { render, fireEvent } from '@testing-library/react'; -import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; import { Button } from '../../Button'; -import { Tooltip, TooltipModern, TooltipTrigger, TooltipPopover } from '..'; +import { Tooltip, TooltipTrigger, TooltipPopover } from '..'; describe('Tooltip', () => { - classNamePrefixProviderTest(Tooltip, 'Tooltip'); - - stylePropsTest((props: Record) => { - const onClose = () => null; - - return ; - }, 'test-tooltip'); - - restPropsTest(Tooltip, '.Tooltip'); - - it('should render text children', () => { - const onClose = () => null; - const dom = render( - - Hello World - , - ); - const element = dom.container.querySelector('.Tooltip') as HTMLElement; - - expect(element.textContent).toBe('Hello World'); - }); -}); - -describe('TooltipModern', () => { - stylePropsTest((props) => , 'TooltipModern-test'); - - restPropsTest((props) => , 'div'); - - const id = 'TooltipModernTest'; + const id = 'TooltipTest'; const triggerText = 'TooltipTrigger'; const popoverText = 'TooltipPopover'; + stylePropsTest((props) => , 'Tooltip-test'); + + restPropsTest((props) => , 'div'); + it('should render tooltip', () => { const onToggle = () => null; const open = true; const dom = render( - + {triggerText} {popoverText} - , + , ); const triggerElement = dom.container.querySelector(`#${id}`) as HTMLElement; @@ -62,10 +37,10 @@ describe('TooltipModern', () => { const onToggle = jest.fn(); const dom = render( - + trigger {popoverText} - , + , ); const element = dom.container.querySelector('.Tooltip') as HTMLElement; @@ -76,10 +51,10 @@ describe('TooltipModern', () => { const onToggle = jest.fn(); const dom = render( - + trigger Hello World - , + , ); const trigger = dom.container.querySelector(`button#${id}`) as HTMLElement; diff --git a/packages/web-react/src/components/Tooltip/__tests__/UncontrolledTooltip.test.tsx b/packages/web-react/src/components/Tooltip/__tests__/UncontrolledTooltip.test.tsx index c27991954b..7e22ccadf1 100644 --- a/packages/web-react/src/components/Tooltip/__tests__/UncontrolledTooltip.test.tsx +++ b/packages/web-react/src/components/Tooltip/__tests__/UncontrolledTooltip.test.tsx @@ -1,23 +1,20 @@ import '@testing-library/jest-dom'; import React from 'react'; import { render } from '@testing-library/react'; -import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; import UncontrolledTooltip from '../UncontrolledTooltip'; describe('UncontrolledTooltip', () => { - classNamePrefixProviderTest(UncontrolledTooltip, 'Tooltip'); - stylePropsTest((props: Record) => { - return ; + return ; }, 'test-tooltip'); - restPropsTest(UncontrolledTooltip, '.Tooltip'); + restPropsTest(UncontrolledTooltip, 'div'); it('should render text children', () => { - const dom = render(Hello World); - const element = dom.container.querySelector('.Tooltip') as HTMLElement; + const dom = render(Hello World); + const element = dom.container.querySelector('div') as HTMLElement; expect(element.textContent).toBe('Hello World'); }); diff --git a/packages/web-react/src/components/Tooltip/__tests__/useTooltipModernStyleProps.test.ts b/packages/web-react/src/components/Tooltip/__tests__/useTooltipModernStyleProps.test.ts deleted file mode 100644 index 8fab93bd05..0000000000 --- a/packages/web-react/src/components/Tooltip/__tests__/useTooltipModernStyleProps.test.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { renderHook } from '@testing-library/react-hooks'; -import { useTooltipModernStyleProps } from '../useTooltipModernStyleProps'; - -describe('useTooltipModernStyleProps', () => { - it('should return defaults', () => { - const { result } = renderHook(() => useTooltipModernStyleProps({})); - - expect(result.current.classProps.rootClassName).toBe('Tooltip'); - expect(result.current.classProps.arrowClassName).toBe('Tooltip__arrow'); - expect(result.current.classProps.closeButtonClassName).toBe('Tooltip__close'); - }); - - it('should return dismissible class', () => { - const { result } = renderHook(() => useTooltipModernStyleProps({ isDismissible: true })); - - expect(result.current.classProps.rootClassName).toBe('Tooltip Tooltip--dismissible'); - }); -}); diff --git a/packages/web-react/src/components/Tooltip/__tests__/useTooltipStyleProps.test.ts b/packages/web-react/src/components/Tooltip/__tests__/useTooltipStyleProps.test.ts index 58fd22022e..bae2495193 100644 --- a/packages/web-react/src/components/Tooltip/__tests__/useTooltipStyleProps.test.ts +++ b/packages/web-react/src/components/Tooltip/__tests__/useTooltipStyleProps.test.ts @@ -1,29 +1,18 @@ import { renderHook } from '@testing-library/react-hooks'; -import { PlacementDictionaryType } from '../../../types'; -import { useTooltipStyleProps, UseTooltipStyleProps } from '../useTooltipStyleProps'; +import { useTooltipStyleProps } from '../useTooltipStyleProps'; describe('useTooltipStyleProps', () => { it('should return defaults', () => { const { result } = renderHook(() => useTooltipStyleProps({})); - expect(result.current.classProps.rootClassName).toBe('Tooltip Tooltip--bottom'); - expect(result.current.classProps.wrapperClassName).toBe('TooltipWrapper'); + expect(result.current.classProps.rootClassName).toBe('Tooltip'); expect(result.current.classProps.arrowClassName).toBe('Tooltip__arrow'); expect(result.current.classProps.closeButtonClassName).toBe('Tooltip__close'); }); - it('should change placement', () => { - const props = { - placement: 'top-right' as PlacementDictionaryType, - } as UseTooltipStyleProps; - const { result } = renderHook(() => useTooltipStyleProps(props)); - - expect(result.current.classProps.rootClassName).toBe('Tooltip Tooltip--topRight'); - }); - it('should return dismissible class', () => { const { result } = renderHook(() => useTooltipStyleProps({ isDismissible: true })); - expect(result.current.classProps.rootClassName).toBe('Tooltip Tooltip--bottom Tooltip--dismissible'); + expect(result.current.classProps.rootClassName).toBe('Tooltip Tooltip--dismissible'); }); }); diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipWithFloatingUI.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx similarity index 93% rename from packages/web-react/src/components/TooltipModern/demo/TooltipWithFloatingUI.tsx rename to packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx index 4ad8498c79..41d3ecc556 100644 --- a/packages/web-react/src/components/TooltipModern/demo/TooltipWithFloatingUI.tsx +++ b/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx @@ -4,10 +4,10 @@ import { Button } from '../../Button'; import { Checkbox } from '../../Checkbox'; import { Grid } from '../../Grid'; import { Select } from '../../Select'; -import { TooltipModern, TooltipPopover, TooltipTrigger } from '../../Tooltip'; +import { Tooltip, TooltipPopover, TooltipTrigger } from '..'; -const TooltipWithFloatingUI = () => { - const [isOpen, setIsOpen] = useState(false); +const TooltipAdvancedFloating = () => { + const [isOpen, setIsOpen] = useState(true); const [flip, setFlip] = useState(true); const [flipCrossAxis, setFlipCrossAxis] = useState(true); const [shift, setShift] = useState(true); @@ -119,8 +119,8 @@ const TooltipWithFloatingUI = () => { style={{ position: 'relative', width: '300%', height: '90rem', paddingBlock: '44rem', textAlign: 'center' }} ref={contentRef} > - { flipFallbackPlacements={suggestedFallbackPlacement} enableShifting={shift} enableSizing={size} - trigger={['hover']} - isFocusableOnHover + trigger={['hover', 'click']} > I have a tooltip 😎 This long tooltip is flipping, resizing and shifting to stay in the viewport. Also its arrow is always trying to point to the center of the trigger. - + ); }; -export default TooltipWithFloatingUI; +export default TooltipAdvancedFloating; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipClickable.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipClickable.tsx deleted file mode 100644 index ee5290356c..0000000000 --- a/packages/web-react/src/components/Tooltip/demo/TooltipClickable.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { useState } from 'react'; -import DocsBox from '../../../../docs/DocsBox'; -import { Button } from '../../Button'; -import TooltipWrapper from '../TooltipWrapper'; -import Tooltip from '../Tooltip'; - -const TooltipClickable = () => { - const [open, setOpen] = useState(false); - - const toggleHandler = () => setOpen(!open); - - return ( - <> - - - - I have an externally-triggered tooltip - - Hello there! - - - - ); -}; - -export default TooltipClickable; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx index 94b9a1aeda..98727d286d 100644 --- a/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx +++ b/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx @@ -1,21 +1,16 @@ -import React from 'react'; -import DocsBox from '../../../../docs/DocsBox'; -import TooltipWrapper from '../TooltipWrapper'; -import Tooltip from '../Tooltip'; +import React, { useState } from 'react'; +import { Button } from '../../Button'; +import { Tooltip, TooltipPopover, TooltipTrigger } from '..'; -const TooltipDefault = () => ( - - - Tooltips -
- all day long… - +const TooltipDefault = () => { + const [open, setOpen] = useState(true); - Hello there! - Hello there! - Hello there! There is slightly more text in this tooltip. - Hello there! - -); + return ( + + I have a tooltip 😎 + Hello there! + + ); +}; export default TooltipDefault; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx index bfcc60009a..be716ef425 100644 --- a/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx +++ b/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx @@ -1,21 +1,22 @@ import React, { useState } from 'react'; import { Button } from '../../Button'; -import TooltipWrapper from '../TooltipWrapper'; -import Tooltip from '../Tooltip'; +import { Tooltip, TooltipPopover, TooltipTrigger } from '..'; const TooltipDismissible = () => { const [open, setOpen] = useState(true); - const openHandler = () => setOpen(true); - const closeHandler = () => setOpen(false); - return ( - - - - Close me - - + + I have a tooltip 😎 + Close me + ); }; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleFloatingUi.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleFloatingUi.tsx deleted file mode 100644 index a08e331bc8..0000000000 --- a/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleFloatingUi.tsx +++ /dev/null @@ -1,69 +0,0 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ -import React, { useState } from 'react'; -import { - autoUpdate, - flip, - useDismiss, - useFloating, - useFocus, - useHover, - useInteractions, - useRole, -} from '@floating-ui/react'; -import { ComponentStory } from '@storybook/react'; -import Tooltip from '../Tooltip'; -import { Button } from '../../Button'; - -const Story: ComponentStory = () => { - const [open, setOpen] = useState(true); - - const closeHandler = () => setOpen(false); - - const { x, y, refs, context, placement } = useFloating({ - placement: 'top', - whileElementsMounted: autoUpdate, - middleware: [flip()], - }); - - const hover = useHover(context, { move: false }); - const focus = useFocus(context); - const dismiss = useDismiss(context); - const role = useRole(context, { role: 'tooltip' }); - const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]); - - return ( - <> -

- The following example is using external library Floating UI. -

-

πŸ–± Try scrolling the example to see how Tooltip placement is updated.

-
-
- - - Hello there! - -
-
- - ); -}; - -Story.args = {}; - -export default Story; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx index 5695303b75..8426b4f6a6 100644 --- a/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx +++ b/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx @@ -1,15 +1,11 @@ import React, { useEffect, useState } from 'react'; import { Button } from '../../Button'; -import TooltipWrapper from '../TooltipWrapper'; -import Tooltip from '../Tooltip'; +import { Tooltip, TooltipPopover, TooltipTrigger } from '..'; const TooltipDismissibleViaJS = () => { const localStorageValue = localStorage.getItem('my-tooltip-react') === 'true'; const [open, setOpen] = useState(localStorageValue); - const openHandler = () => setOpen(true); - const closeHandler = () => setOpen(false); - useEffect(() => { localStorage.setItem('my-tooltip-react', open.toString()); }, [open]); @@ -17,12 +13,17 @@ const TooltipDismissibleViaJS = () => { return ( <>

Saves data to local storage.

- - - - Close me - - + + I have a tooltip 😎 + Close me + ); }; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipFloatingUi.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipFloatingUi.tsx deleted file mode 100644 index 8e87003f73..0000000000 --- a/packages/web-react/src/components/Tooltip/demo/TooltipFloatingUi.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { useState } from 'react'; -import { - autoUpdate, - flip, - useDismiss, - useFloating, - useFocus, - useHover, - useInteractions, - useRole, -} from '@floating-ui/react'; -import { Button } from '../../Button'; -import Tooltip from '../Tooltip'; - -const TooltipFloatingUI = () => { - const [open, setOpen] = useState(true); - - const { x, y, refs, context, placement } = useFloating({ - open, - onOpenChange: setOpen, - placement: 'top', - whileElementsMounted: autoUpdate, - middleware: [flip()], - }); - - const hover = useHover(context, { move: false }); - const focus = useFocus(context); - const dismiss = useDismiss(context); - const role = useRole(context, { role: 'tooltip' }); - const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]); - - return ( - <> -

- The following example is using external library Floating UI. -

-

πŸ–± Try scrolling the example to see how Tooltip placement is updated.

-
-
- - - Hello there! - -
-
- - ); -}; - -export default TooltipFloatingUI; diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipHover.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipHover.tsx similarity index 60% rename from packages/web-react/src/components/TooltipModern/demo/TooltipHover.tsx rename to packages/web-react/src/components/Tooltip/demo/TooltipHover.tsx index 3976ddad00..ea00d7c37c 100644 --- a/packages/web-react/src/components/TooltipModern/demo/TooltipHover.tsx +++ b/packages/web-react/src/components/Tooltip/demo/TooltipHover.tsx @@ -1,24 +1,28 @@ -import React from 'react'; -import { TooltipModern, TooltipPopover, TooltipTrigger } from '..'; +import React, { useState } from 'react'; import { Button } from '../../Button'; +import { Tooltip, TooltipPopover, TooltipTrigger } from '..'; const TooltipHover = () => { - const [open, setOpen] = React.useState(false); + const [open, setOpen] = useState(false); return ( - I have a tooltip 😎 Hello there!
- Click me + + Click me + - + ); }; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipIcon.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipIcon.tsx new file mode 100644 index 0000000000..b26ee53f0c --- /dev/null +++ b/packages/web-react/src/components/Tooltip/demo/TooltipIcon.tsx @@ -0,0 +1,35 @@ +import React, { useState } from 'react'; +import { Icon } from '../../Icon'; +import { Tooltip, TooltipPopover, TooltipTrigger } from '..'; + +const TooltipIcon = () => { + const [openIcon, setOpenIcon] = useState(false); + + return ( +
+

+ Hover or click on the icon on the right to view the tooltip{' '} + + + Close me + +

+
+ ); +}; + +export default TooltipIcon; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipOnHover.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipOnHover.tsx deleted file mode 100644 index f4baf6334b..0000000000 --- a/packages/web-react/src/components/Tooltip/demo/TooltipOnHover.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { ButtonLink } from '../../Button'; -import Tooltip from '../Tooltip'; -import TooltipWrapper from '../TooltipWrapper'; - -const TooltipOnHover = () => ( -
- - - Tooltip on top - - - Hello there! - - {' '} - - - Tooltip on right - - - Hello there! - - {' '} - - - Tooltip on bottom - - - Hello there! - - {' '} - - - Tooltip on left - - - Hello there! - - -
-); - -export default TooltipOnHover; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx index f25de8abcf..d1734cce76 100644 --- a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx +++ b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx @@ -1,16 +1,17 @@ import React, { ChangeEvent, useState } from 'react'; +import { Placement } from '@floating-ui/react'; import DocsBox from '../../../../docs/DocsBox'; -import { PlacementDictionaryType } from '../../../types'; import { Grid, GridItem } from '../../Grid'; import { Radio } from '../../Radio'; import Tooltip from '../Tooltip'; -import TooltipWrapper from '../TooltipWrapper'; +import TooltipPopover from '../TooltipPopover'; +import TooltipTrigger from '../TooltipTrigger'; const TooltipPlacements = () => { - const [placement, setPlacement] = useState('bottom'); + const [placement, setPlacement] = useState('bottom'); - const handlePlacementChange = (e: ChangeEvent) => { - setPlacement(e.target.value as PlacementDictionaryType); + const handlePlacementChange = (event: ChangeEvent) => { + setPlacement(event.target.value as Placement); }; return ( @@ -87,7 +88,7 @@ const TooltipPlacements = () => { id="placement-left-start" label="left-start" value="left-start" - /> + />{' '} { id="placement-left" label="left" value="left" - /> + />{' '} { /> - - - Click -
the dots! - - {placement} - +
+ {}}> + + + Click +
the dots! + + + {placement} + +
diff --git a/packages/web-react/src/components/Tooltip/demo/UncontrolledTooltip.tsx b/packages/web-react/src/components/Tooltip/demo/UncontrolledTooltip.tsx new file mode 100644 index 0000000000..6fa98b12ff --- /dev/null +++ b/packages/web-react/src/components/Tooltip/demo/UncontrolledTooltip.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Button } from '../../Button'; +import { UncontrolledTooltip, TooltipPopover, TooltipTrigger } from '..'; + +const UncontrolledTooltipDemo = () => ( + + I have a tooltip 😎 + Close me + +); + +export default UncontrolledTooltipDemo; diff --git a/packages/web-react/src/components/Tooltip/demo/index.tsx b/packages/web-react/src/components/Tooltip/demo/index.tsx index b58b954d6a..1c038977cb 100644 --- a/packages/web-react/src/components/Tooltip/demo/index.tsx +++ b/packages/web-react/src/components/Tooltip/demo/index.tsx @@ -7,13 +7,13 @@ import ReactDOM from 'react-dom/client'; import icons from '@lmc-eu/spirit-icons/icons'; import DocsSection from '../../../../docs/DocsSections'; import { IconsProvider } from '../../../context'; -import TooltipClickable from './TooltipClickable'; +import TooltipPlacements from './TooltipPlacements'; import TooltipDefault from './TooltipDefault'; import TooltipDismissible from './TooltipDismissible'; import TooltipDismissibleViaJS from './TooltipDismissibleViaJS'; -import TooltipFloatingUI from './TooltipFloatingUi'; -import TooltipOnHover from './TooltipOnHover'; -import TooltipPlacements from './TooltipPlacements'; +import TooltipHover from './TooltipHover'; +import TooltipIcon from './TooltipIcon'; +import TooltipAdvancedFloating from './TooltipAdvancedFloating'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( @@ -21,23 +21,23 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + - - - - - - - - + + + + + + + + , diff --git a/packages/web-react/src/components/Tooltip/index.ts b/packages/web-react/src/components/Tooltip/index.ts index 2051fb20e4..ce40dcac24 100644 --- a/packages/web-react/src/components/Tooltip/index.ts +++ b/packages/web-react/src/components/Tooltip/index.ts @@ -1,16 +1,12 @@ export { default as Tooltip } from './Tooltip'; export { default as TooltipCloseButton } from './TooltipCloseButton'; -export { default as TooltipModern } from './TooltipModern'; export { default as TooltipPopover } from './TooltipPopover'; export { default as TooltipTrigger } from './TooltipTrigger'; -export { default as TooltipWrapper } from './TooltipWrapper'; export { default as UncontrolledTooltip } from './UncontrolledTooltip'; export * from './Tooltip'; export * from './TooltipCloseButton'; -export * from './TooltipModern'; export * from './TooltipPopover'; export * from './TooltipTrigger'; -export * from './TooltipWrapper'; export * from './UncontrolledTooltip'; export * from './useTooltip'; export * from './useTooltipStyleProps'; diff --git a/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx b/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx index 3d7aacd0f4..cc57c054d9 100644 --- a/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx +++ b/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx @@ -1,10 +1,12 @@ +import React, { useEffect, useRef, useState } from 'react'; import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; -import { Tooltip, TooltipWrapper } from '..'; -import { Button } from '../..'; + import { Placements } from '../../../constants'; +import { SpiritTooltipProps } from '../../../types'; +import { Button } from '../..'; import ReadMe from '../README.md'; +import { Tooltip, TooltipPopover, TooltipTrigger } from '..'; const meta: Meta = { title: 'Components/Tooltip', @@ -17,45 +19,86 @@ const meta: Meta = { }, argTypes: { children: { - control: 'text', - }, - closeLabel: { - control: 'text', - table: { - defaultValue: { summary: 'Close' }, - }, - }, - isDismissible: { - control: 'boolean', - }, - open: { - control: 'boolean', + control: 'object', }, + enableFlipping: { control: 'boolean' }, + enableFlippingCrossAxis: { control: 'boolean' }, + enableShifting: { control: 'boolean' }, + enableSizing: { control: 'boolean' }, + id: { control: 'text' }, + isDismissible: { control: 'boolean' }, + isFocusableOnHover: { control: 'boolean' }, + isOpen: { control: 'boolean' }, placement: { control: 'select', - options: [...Object.values(Placements), 'off'], - table: { - defaultValue: { summary: 'bottom' }, - }, + options: Object.values(Placements), + table: { defaultValue: { summary: 'bottom' } }, + }, + trigger: { + control: 'select', + options: ['click, hover', 'hover', 'click'], + table: { defaultValue: { summary: 'click, hover' } }, }, }, args: { - children: 'Hello there!', - closeLabel: 'Close', + children: ( + <> + This long tooltip is flipping, resizing and shifting to stay in the viewport. Also its arrow is always trying to + point to the center of the trigger. + + ), + enableFlipping: true, + enableFlippingCrossAxis: true, + enableShifting: true, + enableSizing: true, + id: 'TooltipExample', isDismissible: false, + isFocusableOnHover: false, + isOpen: false, placement: 'bottom', + trigger: ['click', 'hover'], }, }; export default meta; type Story = StoryObj; -export const Playground: Story = { +const TooltipWithHooks = (args: SpiritTooltipProps) => { + const { children, isOpen } = args; + const [isTooltipOpen, setIsTooltipOpen] = useState(isOpen); + + const viewportRef = useRef(null); + const contentRef = useRef(null); + + useEffect(() => { + const viewport = viewportRef.current; + const content = contentRef.current; + if (viewport && content) { + viewport.scrollLeft = (content.offsetWidth - viewport.offsetWidth) / 2; + viewport.scrollTop = (content.offsetHeight - viewport.offsetHeight) / 2; + } + }, []); + + return ( +
+
+ + Button as anchor + {children} + +
+
+ ); +}; + +export const TooltipPlayground: Story = { name: 'Tooltip', - render: (args) => ( - - - - - ), + render: (args) => , }; diff --git a/packages/web-react/src/components/TooltipModern/stories/TooltipPopover.stories.tsx b/packages/web-react/src/components/Tooltip/stories/TooltipPopover.stories.tsx similarity index 75% rename from packages/web-react/src/components/TooltipModern/stories/TooltipPopover.stories.tsx rename to packages/web-react/src/components/Tooltip/stories/TooltipPopover.stories.tsx index a13c4c81cc..473b25b8e4 100644 --- a/packages/web-react/src/components/TooltipModern/stories/TooltipPopover.stories.tsx +++ b/packages/web-react/src/components/Tooltip/stories/TooltipPopover.stories.tsx @@ -2,12 +2,12 @@ import React from 'react'; import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; -import ReadMe from '../../Tooltip/README.md'; +import ReadMe from '../README.md'; import { Button } from '../..'; -import { TooltipModern, TooltipPopover, TooltipTrigger } from '../../Tooltip'; +import { Tooltip, TooltipPopover, TooltipTrigger } from '..'; const meta: Meta = { - title: 'Components/TooltipModern', + title: 'Components/Tooltip', component: TooltipPopover, parameters: { docs: { @@ -31,9 +31,9 @@ type Story = StoryObj; export const TooltipPopoverPlayground: Story = { name: 'TooltipPopover', render: (args) => ( - {}}> + {}}> Button as anchor {args.children} - + ), }; diff --git a/packages/web-react/src/components/TooltipModern/stories/TooltipTrigger.stories.tsx b/packages/web-react/src/components/Tooltip/stories/TooltipTrigger.stories.tsx similarity index 87% rename from packages/web-react/src/components/TooltipModern/stories/TooltipTrigger.stories.tsx rename to packages/web-react/src/components/Tooltip/stories/TooltipTrigger.stories.tsx index 4cd8699771..7657515c6c 100644 --- a/packages/web-react/src/components/TooltipModern/stories/TooltipTrigger.stories.tsx +++ b/packages/web-react/src/components/Tooltip/stories/TooltipTrigger.stories.tsx @@ -2,12 +2,12 @@ import React from 'react'; import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; -import ReadMe from '../../Tooltip/README.md'; -import { TooltipTrigger } from '../../Tooltip'; import { Button } from '../../Button'; +import ReadMe from '../README.md'; +import { TooltipTrigger } from '..'; const meta: Meta = { - title: 'Components/TooltipModern', + title: 'Components/Tooltip', component: TooltipTrigger, parameters: { docs: { diff --git a/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx b/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx index 341e137488..331b59d932 100644 --- a/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx +++ b/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx @@ -1,53 +1,103 @@ +import React, { useEffect, useRef } from 'react'; +import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; -import { TooltipWrapper, UncontrolledTooltip } from '..'; -import { Button } from '../..'; + import { Placements } from '../../../constants'; +import { SpiritTooltipProps } from '../../../types'; +import { Button } from '../..'; +import ReadMe from '../README.md'; +import { UncontrolledTooltip, TooltipPopover, TooltipTrigger } from '..'; const meta: Meta = { title: 'Components/Tooltip', component: UncontrolledTooltip, parameters: { + docs: { + page: () => {ReadMe}, + }, layout: 'centered', }, argTypes: { children: { - control: 'text', - }, - closeLabel: { - control: 'text', - table: { - defaultValue: { summary: 'Close' }, - }, - }, - isDismissible: { - control: 'boolean', + control: 'object', }, + enableFlipping: { control: 'boolean' }, + enableFlippingCrossAxis: { control: 'boolean' }, + enableShifting: { control: 'boolean' }, + enableSizing: { control: 'boolean' }, + id: { control: 'text' }, + isDismissible: { control: 'boolean' }, + isFocusableOnHover: { control: 'boolean' }, + isOpen: { control: 'boolean' }, placement: { control: 'select', - options: [...Object.values(Placements), 'off'], - table: { - defaultValue: { summary: 'bottom' }, - }, + options: Object.values(Placements), + table: { defaultValue: { summary: 'bottom' } }, + }, + trigger: { + control: 'select', + options: ['click, hover', 'hover', 'click'], + table: { defaultValue: { summary: 'click, hover' } }, }, }, args: { - children: 'Hello there!', - closeLabel: 'Close', + children: ( + <> + This long tooltip is flipping, resizing and shifting to stay in the viewport. Also its arrow is always trying to + point to the center of the trigger. + + ), + enableFlipping: true, + enableFlippingCrossAxis: true, + enableShifting: true, + enableSizing: true, + id: 'TooltipExample', isDismissible: false, + isFocusableOnHover: false, + isOpen: false, placement: 'bottom', + trigger: ['click', 'hover'], }, }; export default meta; type Story = StoryObj; +const UncontrolledTooltipWithHooks = (args: Omit) => { + const { children } = args; + + const viewportRef = useRef(null); + const contentRef = useRef(null); + + useEffect(() => { + const viewport = viewportRef.current; + const content = contentRef.current; + if (viewport && content) { + viewport.scrollLeft = (content.offsetWidth - viewport.offsetWidth) / 2; + viewport.scrollTop = (content.offsetHeight - viewport.offsetHeight) / 2; + } + }, []); + + return ( +
+
+ + Button as anchor + {children} + +
+
+ ); +}; + export const UncontrolledTooltipPlayground: Story = { name: 'UncontrolledTooltip', - render: (args) => ( - - - - - ), + render: (args) => , }; diff --git a/packages/web-react/src/components/Tooltip/useTooltip.ts b/packages/web-react/src/components/Tooltip/useTooltip.ts index e21e56cc2b..a8083fe2fa 100644 --- a/packages/web-react/src/components/Tooltip/useTooltip.ts +++ b/packages/web-react/src/components/Tooltip/useTooltip.ts @@ -1,22 +1,17 @@ import { useState } from 'react'; -import { ClickEvent } from '../../types'; -export interface UseTooltipProps { - isDismissible?: boolean; -} +export interface UseTooltipProps {} export interface UseTooltipReturn { - open: boolean; - onClose: (event: ClickEvent) => void; + isOpen: boolean; + onToggle: (isOpen: boolean) => void; } -export const useTooltip = ({ isDismissible }: UseTooltipProps): UseTooltipReturn => { - const [open, setOpen] = useState(!!isDismissible); - - const handleClose = () => setOpen(false); +export const useTooltip = (): UseTooltipReturn => { + const [isOpen, setOpen] = useState(false); return { - open, - onClose: handleClose, + isOpen, + onToggle: setOpen, }; }; diff --git a/packages/web-react/src/components/Tooltip/useTooltipModernStyleProps.ts b/packages/web-react/src/components/Tooltip/useTooltipModernStyleProps.ts deleted file mode 100644 index 1e2da8ac8f..0000000000 --- a/packages/web-react/src/components/Tooltip/useTooltipModernStyleProps.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { useMemo } from 'react'; -import classNames from 'classnames'; -import { TooltipModernProps, TooltipProps } from '../../types'; -import { useClassNamePrefix } from '../../hooks'; - -export interface UseTooltipModernStyleProps extends TooltipModernProps {} - -export interface UseTooltipModernStylePropsReturn { - classProps: { - rootClassName: string; - wrapperClassName: string; - arrowClassName: string; - closeButtonClassName: string; - }; - props: TooltipProps; -} - -export const useTooltipModernStyleProps = ( - props: Omit, -): UseTooltipModernStylePropsReturn => { - const { isDismissible, isOpen, ...modifiedProps } = props; - - const tooltipClass = useClassNamePrefix('Tooltip'); - const tooltipWrapperClass = `${tooltipClass}Wrapper`; - const arrowClass = `${tooltipClass}__arrow`; - const closeButtonClass = `${tooltipClass}__close`; - const rootDismissibleClass = `${tooltipClass}--dismissible`; - const rootHiddenClass = 'is-hidden'; - - const isHiddenClass = useMemo(() => isOpen === false, [isOpen]); - - const tooltipClassName = classNames(tooltipClass, { - [rootDismissibleClass]: isDismissible, - [rootHiddenClass]: isHiddenClass, - }); - const arrowClassName = arrowClass; - const closeButtonClassName = closeButtonClass; - - return { - classProps: { - rootClassName: tooltipClassName, - wrapperClassName: tooltipWrapperClass, - arrowClassName, - closeButtonClassName, - }, - props: modifiedProps, - }; -}; diff --git a/packages/web-react/src/components/Tooltip/useTooltipStyleProps.ts b/packages/web-react/src/components/Tooltip/useTooltipStyleProps.ts index e5a90f5582..ccce97277d 100644 --- a/packages/web-react/src/components/Tooltip/useTooltipStyleProps.ts +++ b/packages/web-react/src/components/Tooltip/useTooltipStyleProps.ts @@ -1,10 +1,11 @@ import { useMemo } from 'react'; import classNames from 'classnames'; -import { SpiritTooltipProps, TooltipProps } from '../../types'; -import { useClassNamePrefix, useDeprecationMessage } from '../../hooks'; -import { kebabCaseToCamelCase } from '../../utils'; +import { TooltipProps } from '../../types'; +import { useClassNamePrefix } from '../../hooks'; -export interface UseTooltipStyleProps extends SpiritTooltipProps {} +type omittedProps = 'id' | 'onToggle'; + +export interface UseTooltipStyleProps extends TooltipProps {} export interface UseTooltipStylePropsReturn { classProps: { @@ -13,31 +14,21 @@ export interface UseTooltipStylePropsReturn { arrowClassName: string; closeButtonClassName: string; }; - props: TooltipProps; + props: Omit; } -export const useTooltipStyleProps = (props: UseTooltipStyleProps): UseTooltipStylePropsReturn => { - const { placement = 'bottom', isDismissible, open, ...modifiedProps } = props; - - useDeprecationMessage({ - method: 'custom', - trigger: placement === 'off', - componentName: 'Tooltip', - customText: - 'The "off" value of property "placement" is deprecated and will be removed in the next major version. Use TooltipModern component instead.', - }); - +export const useTooltipStyleProps = (props: Omit): UseTooltipStylePropsReturn => { + const { isDismissible, isOpen, ...modifiedProps } = props; const tooltipClass = useClassNamePrefix('Tooltip'); const tooltipWrapperClass = `${tooltipClass}Wrapper`; const arrowClass = `${tooltipClass}__arrow`; const closeButtonClass = `${tooltipClass}__close`; const rootDismissibleClass = `${tooltipClass}--dismissible`; - const rootPlacementClass = placement !== 'off' ? `${tooltipClass}--${kebabCaseToCamelCase(placement)}` : null; const rootHiddenClass = 'is-hidden'; - const isHiddenClass = useMemo(() => open === false, [open]); + const isHiddenClass = useMemo(() => isOpen === false, [isOpen]); - const tooltipClassName = classNames(tooltipClass, rootPlacementClass, { + const tooltipClassName = classNames(tooltipClass, { [rootDismissibleClass]: isDismissible, [rootHiddenClass]: isHiddenClass, }); diff --git a/packages/web-react/src/components/TooltipModern/README.md b/packages/web-react/src/components/TooltipModern/README.md deleted file mode 100644 index be7eb547bf..0000000000 --- a/packages/web-react/src/components/TooltipModern/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# TooltipModern - -⚠️ `TooltipModern` component is [deprecated][deprecated] and will be renamed to `Tooltip` in the next major version. - -For more information and implementation examples, please visit the [`TooltipModern` section][tooltip-modern-section] section in the [readme][tooltip] for the `Tooltip` component. - -[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations -[tooltip-modern-section]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Tooltip/README.md#tooltipmodern -[tooltip]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Tooltip/README.md diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipDefault.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipDefault.tsx deleted file mode 100644 index fb16c68996..0000000000 --- a/packages/web-react/src/components/TooltipModern/demo/TooltipDefault.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import DocsBox from '../../../../docs/DocsBox'; -import TooltipWrapper from '../../Tooltip/TooltipWrapper'; -import Tooltip from '../../Tooltip/Tooltip'; - -const TooltipDefault = () => ( - - - Tooltips -
- all day long… - - - Hello there! - Hello there! - Hello there! There is slightly more text in this tooltip. - Hello there! - -); - -export default TooltipDefault; diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipDismissible.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipDismissible.tsx deleted file mode 100644 index 6359d52948..0000000000 --- a/packages/web-react/src/components/TooltipModern/demo/TooltipDismissible.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useState } from 'react'; -import { Button } from '../../Button'; -import { TooltipModern, TooltipPopover, TooltipTrigger } from '../../Tooltip'; - -const TooltipDismissible = () => { - const [open, setOpen] = useState(true); - - return ( -
- - I have a tooltip 😎 - Close me - -
- ); -}; - -export default TooltipDismissible; diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipDismissibleViaJS.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipDismissibleViaJS.tsx deleted file mode 100644 index bd178ae3c0..0000000000 --- a/packages/web-react/src/components/TooltipModern/demo/TooltipDismissibleViaJS.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { Button } from '../../Button'; -import { TooltipModern, TooltipPopover, TooltipTrigger } from '../../Tooltip'; - -const TooltipDismissibleViaJS = () => { - const localStorageValue = localStorage.getItem('my-tooltip-react') === 'true'; - const [open, setOpen] = useState(localStorageValue); - - useEffect(() => { - localStorage.setItem('my-tooltip-react', open.toString()); - }, [open]); - - return ( -
-

Saves data to local storage.

- - I have a tooltip 😎 - Close me - -
- ); -}; - -export default TooltipDismissibleViaJS; diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipIcon.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipIcon.tsx deleted file mode 100644 index e06725917d..0000000000 --- a/packages/web-react/src/components/TooltipModern/demo/TooltipIcon.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { useState } from 'react'; -import { Icon } from '../../Icon'; -import { TooltipModern, TooltipPopover, TooltipTrigger } from '../../Tooltip'; - -const TooltipIcon = () => { - const [openIcon, setOpenIcon] = useState(false); - - return ( -
- Click on the icon to show the tooltip:{' '} - - - Close me - -
- ); -}; - -export default TooltipIcon; diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipOnHover.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipOnHover.tsx deleted file mode 100644 index a4dd834d59..0000000000 --- a/packages/web-react/src/components/TooltipModern/demo/TooltipOnHover.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { ButtonLink } from '../../Button'; -import Tooltip from '../../Tooltip/Tooltip'; -import TooltipWrapper from '../../Tooltip/TooltipWrapper'; - -const TooltipOnHover = () => ( -
- - - Tooltip on top - - - Hello there! - - {' '} - - - Tooltip on right - - - Hello there! - - {' '} - - - Tooltip on bottom - - - Hello there! - - {' '} - - - Tooltip on left - - - Hello there! - - -
-); - -export default TooltipOnHover; diff --git a/packages/web-react/src/components/TooltipModern/demo/index.tsx b/packages/web-react/src/components/TooltipModern/demo/index.tsx deleted file mode 100644 index 5418de75b5..0000000000 --- a/packages/web-react/src/components/TooltipModern/demo/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved -// @ts-ignore: No declaration file -- @see https://jira.almacareer.tech/browse/DS-561 -import icons from '@lmc-eu/spirit-icons/icons'; -import DocsSection from '../../../../docs/DocsSections'; -import { IconsProvider } from '../../../context'; -import TooltipDefault from './TooltipDefault'; -import TooltipDismissible from './TooltipDismissible'; -import TooltipDismissibleViaJS from './TooltipDismissibleViaJS'; -import TooltipHover from './TooltipHover'; -import TooltipIcon from './TooltipIcon'; -import TooltipOnHover from './TooltipOnHover'; -import TooltipPlacements from './TooltipPlacements'; -import TooltipWithFloatingUI from './TooltipWithFloatingUI'; - -ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - - - - - - - - - - - - - - - - - - - - - - - - - - - - , -); diff --git a/packages/web-react/src/components/TooltipModern/index.html b/packages/web-react/src/components/TooltipModern/index.html deleted file mode 100644 index 23972ef557..0000000000 --- a/packages/web-react/src/components/TooltipModern/index.html +++ /dev/null @@ -1 +0,0 @@ -{{> web-react/demo}} diff --git a/packages/web-react/src/components/TooltipModern/index.ts b/packages/web-react/src/components/TooltipModern/index.ts deleted file mode 100644 index 57967cd472..0000000000 --- a/packages/web-react/src/components/TooltipModern/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '../Tooltip'; diff --git a/packages/web-react/src/components/TooltipModern/stories/TooltipModern.stories.tsx b/packages/web-react/src/components/TooltipModern/stories/TooltipModern.stories.tsx deleted file mode 100644 index c25a863365..0000000000 --- a/packages/web-react/src/components/TooltipModern/stories/TooltipModern.stories.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { Markdown } from '@storybook/blocks'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { SpiritTooltipModernProps } from '../../../types'; -import ReadMe from '../../Tooltip/README.md'; -import { Button } from '../..'; -import { TooltipModern, TooltipTrigger, TooltipPopover } from '../../Tooltip'; - -const Placements = [ - 'top', - 'bottom', - 'left', - 'right', - 'left-end', - 'left-start', - 'right-end', - 'right-start', - 'top-end', - 'top-start', - 'bottom-end', - 'bottom-start', -]; - -const meta: Meta = { - title: 'Components/TooltipModern', - component: TooltipModern, - parameters: { - docs: { - page: () => {ReadMe}, - }, - layout: 'centered', - }, - argTypes: { - children: { - control: 'object', - }, - id: { - control: 'text', - }, - placement: { - control: 'select', - options: Object.values(Placements), - table: { - defaultValue: { summary: 'bottom' }, - }, - }, - isFocusableOnHover: { - control: 'boolean', - }, - trigger: { - control: 'select', - options: ['click, hover', 'hover', 'click'], - table: { - defaultValue: { summary: 'click, hover' }, - }, - }, - isOpen: { - control: 'boolean', - }, - }, - args: { - children: ( - <> - This long tooltip is flipping, resizing and shifting to stay in the viewport. Also its arrow is always trying to - point to the center of the trigger. - - ), - isOpen: false, - id: 'TooltipModernExample', - enableFlipping: true, - enableShifting: true, - enableSizing: true, - enableFlippingCrossAxis: true, - trigger: ['click', 'hover'], - placement: 'bottom', - isFocusableOnHover: false, - flipFallbackPlacements: ['bottom', 'left', 'right', 'top'], - }, -}; - -export default meta; -type Story = StoryObj; - -const TooltipModernWithHooks = (args: SpiritTooltipModernProps) => { - const { children, isOpen } = args; - const [isTooltipOpen, setIsTooltipOpen] = useState(isOpen); - - const viewportRef = useRef(null); - const contentRef = useRef(null); - - useEffect(() => { - const viewport = viewportRef.current; - const content = contentRef.current; - if (viewport && content) { - viewport.scrollLeft = (content.offsetWidth - viewport.offsetWidth) / 2; - viewport.scrollTop = (content.offsetHeight - viewport.offsetHeight) / 2; - } - }, []); - - return ( -
-
- - Button as anchor - {children} - -
-
- ); -}; - -export const TooltipModernPlayground: Story = { - name: 'TooltipModern', - render: (args) => , -}; diff --git a/packages/web-react/src/types/tooltip.ts b/packages/web-react/src/types/tooltip.ts index 45b2c856f2..7883d492e1 100644 --- a/packages/web-react/src/types/tooltip.ts +++ b/packages/web-react/src/types/tooltip.ts @@ -1,5 +1,5 @@ import { Placement } from '@floating-ui/react'; -import { ChildrenProps, PlacementDictionaryType, StyleProps, ClickEvent } from './shared'; +import { ChildrenProps, ClickEvent, StyleProps } from './shared'; export const TOOLTIP_TRIGGER = { CLICK: 'click', @@ -11,50 +11,28 @@ export const TOOLTIP_TRIGGER = { export type TooltipTriggerType = 'click' | 'hover' | 'manual'; -export interface TooltipHandlingProps { - open?: boolean | undefined; - onClose?: (event: ClickEvent) => void; -} - -// @deprecated Off placement will be removed in the next major version -type TooltipOffPlacement = 'off'; - -export interface BaseTooltipProps extends ChildrenProps, StyleProps { - closeLabel?: string; - id?: string; - isDismissible?: boolean; - placement?: PlacementDictionaryType | TooltipOffPlacement; -} - -export interface TooltipWrapperProps extends ChildrenProps, StyleProps {} +export interface UncontrolledTooltipProps extends BaseTooltipProps {} export interface TooltipCloseButtonProps extends StyleProps { onClick?: (event: ClickEvent) => void; label?: string; } -export interface TooltipProps extends BaseTooltipProps, TooltipHandlingProps {} - -export interface UncontrolledTooltipProps extends BaseTooltipProps {} - -export interface SpiritTooltipProps extends TooltipProps {} - -// TooltipModern types -export interface TooltipModernHandlingProps { +export interface TooltipHandlingProps { isOpen?: boolean; onToggle: (isOpen: boolean) => void; } -export interface BaseTooltipModernProps extends ChildrenProps, StyleProps { +export interface BaseTooltipProps extends ChildrenProps, StyleProps { closeLabel?: string; id: string; isDismissible?: boolean; placement?: Placement; } -export interface TooltipModernProps extends BaseTooltipModernProps, TooltipModernHandlingProps {} +export interface TooltipProps extends BaseTooltipProps, TooltipHandlingProps {} -export interface SpiritTooltipModernProps extends TooltipModernProps, ChildrenProps { +export interface SpiritTooltipProps extends TooltipProps, ChildrenProps { enableFlipping?: boolean; enableFlippingCrossAxis?: boolean; enableShifting?: boolean; diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltipmodern-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltipmodern-chromium-linux.png deleted file mode 100644 index cd4d190600..0000000000 Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltipmodern-chromium-linux.png and /dev/null differ diff --git a/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png b/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png index c62b534368..b4c5109bfc 100644 Binary files a/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png and b/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png differ