From f9bd796bdb8ac1d4d97f0d6423da1b30544cab3a Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 13 Sep 2022 08:43:11 +0200 Subject: [PATCH] fix(Tooltip): convert to camelCase props with backwards compatibility --- .../releases/eufemia/v10-info.md | 13 ++++- .../fragments/drawer-list/properties.md | 6 +-- .../docs/uilib/components/tooltip/Examples.js | 18 +++---- .../uilib/components/tooltip/properties.md | 16 +++--- .../src/shared/menu/PortalToolsMenu.js | 2 +- .../src/components/button/Button.js | 2 +- .../__snapshots__/Dialog.test.tsx.snap | 34 ++++++------ .../__snapshots__/Drawer.test.tsx.snap | 34 ++++++------ .../__snapshots__/Modal.test.tsx.snap | 34 ++++++------ .../components/number-format/NumberFormat.js | 2 +- .../src/components/slider/SliderThumb.tsx | 6 +-- .../src/components/tooltip/Tooltip.tsx | 33 ++++++------ .../components/tooltip/TooltipContainer.tsx | 16 +++--- .../src/components/tooltip/TooltipHelpers.tsx | 16 +++--- .../src/components/tooltip/TooltipPortal.tsx | 14 ++--- .../components/tooltip/TooltipWithEvents.tsx | 4 +- .../tooltip/__tests__/Tooltip.test.tsx | 54 +++++++++++++------ .../tooltip/stories/Tooltip.stories.tsx | 36 ++++++------- .../src/components/tooltip/types.ts | 22 ++++---- packages/dnb-eufemia/src/elements/Anchor.tsx | 4 +- 20 files changed, 201 insertions(+), 165 deletions(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md index ae87c3aeba6..de11c599fd2 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md @@ -25,7 +25,7 @@ v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can ### [Slider](/uilib/components/slider) -1. Find the `thump_title` property and replace it with `thumb_title`. +1. Find the `thump_title` property and replace it with `thumbTitle`. 1. Find the snake_case `add_title` property and replace it with `addTitle`. 1. Find the snake_case `subtract_title` property and replace it with `subtractTitle`. 1. Remove `@dnb/eufemia/components/slider/style/dnb-range.min.css` and use the Eufemia Slider component instead. @@ -39,6 +39,17 @@ v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can 1. Find the `target_blank_title` property and replace it with `targetBlankTitle`. +### [Tooltip](/uilib/components/tooltip) + +1. Find the `target_element` property and replace it with `targetElement`. +1. Find the `target_selector` property and replace it with `targetSelector`. +1. Find the `animate_position` property and replace it with `animatePosition`. +1. Find the `fixed_position` property and replace it with `fixedPosition`. +1. Find the `skip_portal` property and replace it with `skipPortal`. +1. Find the `no_animation` property and replace it with `noAnimation`. +1. Find the `show_delay` property and replace it with `showDelay`. +1. Find the `hide_delay` property and replace it with `hideDelay`. + ### Deprecations - `use_scrollwheel` and `on_init` properties, as well as the `raw_value` event value from [Slider](/uilib/components/slider) was removed in order to support multiple buttons. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/properties.md index 7149574dc07..8fda383b10c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/properties.md @@ -6,9 +6,9 @@ showTabs: true | Properties | Description | | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `data` or `children` | _(required)_ the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these [data structure](/uilib/components/fragments/drawer-list/info#data-structure).
If you don't have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList. | +| `data` or `children` | _(required)_ the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these [data structure](/uilib/components/fragments/drawer-list/info#data-structure).
If you don't have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList. | | `value` | _(optional)_ should either be an index (integer) of the data array or a key (**NB:** should not start with a number) – defined by `selected_key` inside an array item. If `data` is an object, use the object key (string) as the `value` to define the selected item. Can be a string or integer. Defaults to `null` and the `title` property will be shown.
**NB:** In case the DrawerList will be re-rendered, this value will be used again. Use `default_value` instead. | -| `default_value` | _(optional)_ if you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`. | +| `default_value` | _(optional)_ if you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`. | | `triangle_position` | _(optional)_ position of arrow icon/triangle inside the drawer-list. Set to `left` or `right`. Defaults to `left` if not set. | | `direction` | _(optional)_ defines the direction of how the drawer-list shows the options list. Can be `bottom` or `top`. Defaults to `auto`. | | `prevent_selection` | _(optional)_ if set to true, the DrawerList will then not make any permanent selection. Defaults to `false`. | @@ -16,7 +16,7 @@ showTabs: true | `prevent_close` | _(optional)_ If set to true, the DrawerList will not close on any events. Defaults to `false`. | | `keep_open` | _(optional)_ If set to true, the DrawerList will close on outside clicks, but not on selection. Defaults to `false`. | | `independent_width` | _(optional)_ If set to true, the DrawerList will handle it's width and position handling independent to the parent/mother element. Defaults to `false`. | -| `fixed_position` | _(optional)_ If set to true, the DrawerList will be fixed in it's scroll position by using CSS `position: fixed;`. Defaults to `false`. | +| `fixedPosition` | _(optional)_ If set to true, the DrawerList will be fixed in it's scroll position by using CSS `position: fixed;`. Defaults to `false`. | | `enable_body_lock` | _(optional)_ If set to true, the HTML body will get locked from scrolling. Defaults to `false`. | | `skip_keysearch` | _(optional)_ If set to true, search items by the first key will be ignored. Defaults to `false`. | | `ignore_events` | _(optional)_ If set to true, all keyboard and mouse events will be ignored. Defaults to `false`. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/Examples.js index 4426ae5b654..33132859129 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/Examples.js @@ -26,7 +26,7 @@ export const TooltipExampleLinked = () => ( {` -Tooltip +Tooltip `} ) @@ -35,19 +35,19 @@ export const TooltipExampleAnimation = () => ( {` Top} + animatePosition + group="animatePosition" + hideDelay={1e3} + targetElement={Top} > Tooltip 1 Bottom} + targetElement={Bottom} > Tooltip 2 @@ -67,7 +67,7 @@ export const TooltipExampleNumberFormatWrapped = () => ( {` 1234} + targetElement={1234} > Tooltip diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/properties.md index 105d894c2c0..bc2cc590122 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/properties.md @@ -11,14 +11,14 @@ showTabs: true | `position` | _(optional)_ defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`. | | `align` | _(optional)_ defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`. | | `arrow` | _(optional)_ defines the direction where the arrow appears. Can be `center`, `top`, `right`, `bottom` and `left`. Defaults to `center`. | -| `animate_position` | _(optional)_ set to `true` to animate a single Tooltip from one element to another element. You also need to set a unique `group` name. | -| `fixed_position` | _(optional)_ If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`. | -| `skip_portal` | _(optional)_ set to `true` to disable the React Portal behavior. Defaults to `false`. | -| `no_animation` | _(optional)_ set to `true` if no fade-in animation should be used. | -| `show_delay` | _(optional)_ define the delay until the tooltip should show up after the initial hover / active state. | -| `hide_delay` | _(optional)_ define the delay until the tooltip should disappear up after initial visibility. | -| `target_element` | _(optional)_ provide an element directly as a React Node or a React Ref that will be wrapped and rendered. | -| `target_selector` | _(optional)_ specify a vanilla HTML selector by a string as the target element. | +| `animatePosition` | _(optional)_ set to `true` to animate a single Tooltip from one element to another element. You also need to set a unique `group` name. | +| `fixedPosition` | _(optional)_ If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`. | +| `skipPortal` | _(optional)_ set to `true` to disable the React Portal behavior. Defaults to `false`. | +| `noAnimation` | _(optional)_ set to `true` if no fade-in animation should be used. | +| `showDelay` | _(optional)_ define the delay until the tooltip should show up after the initial hover / active state. | +| `hideDelay` | _(optional)_ define the delay until the tooltip should disappear up after initial visibility. | +| `targetElement` | _(optional)_ provide an element directly as a React Node or a React Ref that will be wrapped and rendered. | +| `targetSelector` | _(optional)_ specify a vanilla HTML selector by a string as the target element. | | `size` | _(optional)_ defines the spacing size of the tooltip. Can be `large` or `basis`. Defaults to `basis`. | | `group` | _(optional)_ if the tooltip should animate from one target to the next, define a unique ID. | | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/shared/menu/PortalToolsMenu.js b/packages/dnb-design-system-portal/src/shared/menu/PortalToolsMenu.js index f1917bd7825..a9a5a9cf119 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/PortalToolsMenu.js +++ b/packages/dnb-design-system-portal/src/shared/menu/PortalToolsMenu.js @@ -31,7 +31,7 @@ export default function PortalToolsMenu({ position={tooltipPosition} // Use 4001 to be over header of 4000 style={{ zIndex: 4001 }} - fixed_position + fixedPosition > Open the portal tools diff --git a/packages/dnb-eufemia/src/components/button/Button.js b/packages/dnb-eufemia/src/components/button/Button.js index c912facb648..64bd7f449e6 100644 --- a/packages/dnb-eufemia/src/components/button/Button.js +++ b/packages/dnb-eufemia/src/components/button/Button.js @@ -266,7 +266,7 @@ export default class Button extends React.PureComponent { {tooltip && this._ref && ( )} diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap index 5da21a736f2..d666f4f1ced 100644 --- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -426,7 +426,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = ` /> , } } - target_element={ + targetElement={ Object { "current": } - target_element={ + targetElement={ Object { "current": } - target_element={ + targetElement={ Object { "current": } - target_element={ + targetElement={ Object { "current": } + {...props} + > + With snake_case props + + ) + + render() + + expect(document.body.querySelector('.dnb-tooltip').textContent).toBe( + 'With snake_case props' + ) + }) + + describe('with targetSelector', () => { const Tooltip = (props: TooltipProps = {}) => ( <> Text @@ -57,12 +79,12 @@ describe('Tooltip', () => { }) }) - describe('with target_element', () => { + describe('with targetElement', () => { const Tooltip = (props: TooltipProps = {}) => ( Button} + targetElement={} > Text @@ -79,8 +101,8 @@ describe('Tooltip', () => { ) }) - it('will skip React Portal when skip_portal is true', () => { - render() + it('will skip React Portal when skipPortal is true', () => { + render() expect( document.body.querySelectorAll('.dnb-tooltip__portal') @@ -94,8 +116,8 @@ describe('Tooltip', () => { return ( { setActive(true) @@ -133,7 +155,7 @@ describe('Tooltip', () => { }) it('should set animate_position class', () => { - render() + render() const mainElem = document.body.querySelector('.dnb-tooltip') @@ -146,8 +168,8 @@ describe('Tooltip', () => { ) }) - it('should set fixed_position class', () => { - render() + it('should set fixed class', () => { + render() const mainElem = document.body.querySelector('.dnb-tooltip') @@ -163,14 +185,14 @@ describe('Tooltip', () => { describe('and group', () => { const commonProps: TooltipProps = { group: 'unique-name', - no_animation: true, + noAnimation: true, } const GroupTooltip = (props) => { return ( <> Button A} + targetElement={} {...commonProps} {...props} > @@ -178,7 +200,7 @@ describe('Tooltip', () => { Button B} + targetElement={} {...commonProps} {...props} > diff --git a/packages/dnb-eufemia/src/components/tooltip/stories/Tooltip.stories.tsx b/packages/dnb-eufemia/src/components/tooltip/stories/Tooltip.stories.tsx index ef2cee3e01b..28789caadb3 100644 --- a/packages/dnb-eufemia/src/components/tooltip/stories/Tooltip.stories.tsx +++ b/packages/dnb-eufemia/src/components/tooltip/stories/Tooltip.stories.tsx @@ -23,19 +23,19 @@ export const TooltipSandbox = () => { Top} + animatePosition + group="animatePosition" + hideDelay={1e3} + targetElement={Top} > Tooltip 1 Bottom} + targetElement={Bottom} > Tooltip 2 @@ -45,24 +45,24 @@ export const TooltipSandbox = () => {
- + Tooltip Top} + group="animatePosition" + // hideDelay={1e3} + animatePosition + targetElement={} > Tooltip 1 Bottom} + animatePosition + targetElement={} > Tooltip 2 @@ -75,7 +75,7 @@ export const TooltipSandbox = () => { position="top" // target="#button1" // active - target_element={} + targetElement={} > Tooltip 1 @@ -84,7 +84,7 @@ export const TooltipSandbox = () => { position="bottom" // target="#button2" // active - target_element={} + targetElement={} > Tooltip 2 @@ -115,7 +115,7 @@ export const TooltipSandbox = () => { - 1234}> + 1234}> Tooltip diff --git a/packages/dnb-eufemia/src/elements/Anchor.tsx b/packages/dnb-eufemia/src/elements/Anchor.tsx index d8341c3836b..c545f8f1407 100644 --- a/packages/dnb-eufemia/src/elements/Anchor.tsx +++ b/packages/dnb-eufemia/src/elements/Anchor.tsx @@ -104,9 +104,9 @@ function AnchorInstance(localProps: AnchorProps) { {showTooltip && ( {allProps.title || targetBlankTitle}