Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Tooltip): add skip_portal property #1545

Merged
merged 1 commit into from
Sep 1, 2022
Merged

feat(Tooltip): add skip_portal property #1545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/properties.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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