Skip to content

Commit

Permalink
feat(Tooltip): add skip_portal property (#1545)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker authored Sep 1, 2022
1 parent e19a377 commit 7f492a5
Show file tree
Hide file tree
Showing 8 changed files with 296 additions and 218 deletions.
29 changes: 15 additions & 14 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 @@ -4,20 +4,21 @@ showTabs: true

## Tooltip properties

| Properties | Description |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | _(optional)_ Provide a string or a React Element to be shown as the tooltip content. |
| `active` | _(optional)_ set to `true` the tooltip will show up. |
| Properties | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | _(optional)_ Provide a string or a React Element to be shown as the tooltip content. |
| `active` | _(optional)_ set to `true` the tooltip will show up. |
| `position` | _(optional)_ defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`. |
| `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`. |
| `fixed_position` | _(optional)_ If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. 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. |
| `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. |
| `arrow` | _(optional)_ defines the direction where the arrow appears. Can be `center`, `top`, `right`, `bottom` and `left`. Defaults to `center`. |
| `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. |
| `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. |
3 changes: 3 additions & 0 deletions packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -439,6 +439,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target_element={
Object {
"current": <button
Expand Down Expand Up @@ -504,6 +505,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target={
Object {
"current": <button
Expand Down Expand Up @@ -612,6 +614,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target={
<button
aria-describedby="dialog_id-tooltip"
Expand Down
3 changes: 3 additions & 0 deletions packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target_element={
Object {
"current": <button
Expand Down Expand Up @@ -502,6 +503,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target={
Object {
"current": <button
Expand Down Expand Up @@ -610,6 +612,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target={
<button
aria-describedby="drawer_id-tooltip"
Expand Down
3 changes: 3 additions & 0 deletions packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,6 +428,7 @@ exports[`Modal component have to match snapshot 1`] = `
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target_element={
Object {
"current": <button
Expand Down Expand Up @@ -493,6 +494,7 @@ exports[`Modal component have to match snapshot 1`] = `
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target={
Object {
"current": <button
Expand Down Expand Up @@ -601,6 +603,7 @@ exports[`Modal component have to match snapshot 1`] = `
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target={
<button
aria-describedby="modal_id-tooltip"
Expand Down
18 changes: 13 additions & 5 deletions packages/dnb-eufemia/src/components/tooltip/Tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
spacingPropTypes,
createSpacingClasses,
} from '../space/SpacingHelper'
import TooltipContainer from './TooltipContainer'
import TooltipWithEvents from './TooltipWithEvents'
import TooltipPortal from './TooltipPortal'
import { injectTooltipSemantic } from './TooltipHelpers'
Expand Down Expand Up @@ -51,6 +52,7 @@ export default class Tooltip extends React.PureComponent {
PropTypes.string,
PropTypes.bool,
]),
skip_portal: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
show_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
hide_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
Expand Down Expand Up @@ -82,6 +84,7 @@ export default class Tooltip extends React.PureComponent {
align: null,
animate_position: false,
fixed_position: false,
skip_portal: null,
no_animation: false,
show_delay: 300,
hide_delay: 500,
Expand Down Expand Up @@ -140,6 +143,7 @@ export default class Tooltip extends React.PureComponent {
size,
animate_position, // eslint-disable-line
fixed_position, // eslint-disable-line
skip_portal,
no_animation, // eslint-disable-line
show_delay, // eslint-disable-line
hide_delay, // eslint-disable-line
Expand Down Expand Up @@ -178,13 +182,17 @@ export default class Tooltip extends React.PureComponent {
delete newProps.active
}

// React.isValidElement(target) ||
// (typeof target === 'object' &&
// Object.prototype.hasOwnProperty.call(target, 'current'))

return (
<>
{target_element ? (
{skip_portal ? (
<TooltipContainer
target={target_element}
attributes={attributes}
{...newProps}
>
{content}
</TooltipContainer>
) : target_element ? (
<TooltipWithEvents
target={target_element}
attributes={attributes}
Expand Down
6 changes: 1 addition & 5 deletions packages/dnb-eufemia/src/components/tooltip/TooltipContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,6 @@ export default class TooltipContainer extends React.PureComponent {
}

getGlobalStyle() {
if (!this.props.targetElement) {
return { display: 'none' }
}

return this.makeStyle(this.props.position, this.props.arrow)
}

Expand Down Expand Up @@ -332,7 +328,7 @@ export default class TooltipContainer extends React.PureComponent {
onMouseLeave={this.handleMouseLeave}
{...attributes}
className={classnames(
attributes.className,
attributes?.className,
isTrue(animate_position) && 'dnb-tooltip--animate_position',
isTrue(no_animation) && 'dnb-tooltip--no-animation',
isTrue(fixed_position) && 'dnb-tooltip--fixed',
Expand Down
Loading

0 comments on commit 7f492a5

Please sign in to comment.