Skip to content

Commit

Permalink
fix(Tooltip): convert to camelCase props with backwards compatibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Sep 13, 2022
1 parent 5e2c31d commit f9bd796
Show file tree
Hide file tree
Showing 20 changed files with 201 additions and 165 deletions.
13 changes: 12 additions & 1 deletion ...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down
6 changes: 3 additions & 3 deletions ...ign-system-portal/src/docs/uilib/components/fragments/drawer-list/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ 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). <br /> 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). <br /> 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. <br /> **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`. |
| `focusable` | _(optional)_ If set to true, the element is then focusable by assertive technologies. |
| `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`. |
Expand Down
18 changes: 9 additions & 9 deletions packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const TooltipExampleLinked = () => (
<ComponentBox>
{`
<button className="target-1">Show the Tooltip</button>
<Tooltip id="unique" active target_selector=".target-1">Tooltip</Tooltip>
<Tooltip id="unique" active targetSelector=".target-1">Tooltip</Tooltip>
`}
</ComponentBox>
)
Expand All @@ -35,19 +35,19 @@ export const TooltipExampleAnimation = () => (
<ComponentBox>
{`
<Tooltip
animate_position
group="animate_position"
hide_delay={1e3}
target_element={<Span role="text" right>Top</Span>}
animatePosition
group="animatePosition"
hideDelay={1e3}
targetElement={<Span role="text" right>Top</Span>}
>
Tooltip 1
</Tooltip>
<Tooltip
animate_position
group="animate_position"
animatePosition
group="animatePosition"
position="bottom"
size="large"
target_element={<Span role="text">Bottom</Span>}
targetElement={<Span role="text">Bottom</Span>}
>
Tooltip 2
</Tooltip>
Expand All @@ -67,7 +67,7 @@ export const TooltipExampleNumberFormatWrapped = () => (
<ComponentBox>
{`
<Tooltip
target_element={<NumberFormat>1234</NumberFormat>}
targetElement={<NumberFormat>1234</NumberFormat>}
>
Tooltip
</Tooltip>
Expand Down
16 changes: 8 additions & 8 deletions packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/shared/menu/PortalToolsMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-eufemia/src/components/button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,7 @@ export default class Button extends React.PureComponent {
{tooltip && this._ref && (
<Tooltip
id={this._id + '-tooltip'}
target_element={this._ref}
targetElement={this._ref}
tooltip={tooltip}
/>
)}
Expand Down
Loading

0 comments on commit f9bd796

Please sign in to comment.