From 50f4c8ab2ff3a75bfb2e1e0f91c97e7ec52a70b7 Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 25 Aug 2020 11:13:09 -0500 Subject: [PATCH 1/4] feat(Tooltip): allow focusTrap prop passthrough --- packages/react/src/components/Tooltip/Tooltip.js | 12 +++++++++++- packages/react/src/internal/FloatingMenu.js | 4 +++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js index 5ce7dc0e2391..11090edef5d1 100644 --- a/packages/react/src/components/Tooltip/Tooltip.js +++ b/packages/react/src/components/Tooltip/Tooltip.js @@ -107,6 +107,11 @@ class Tooltip extends Component { */ direction: PropTypes.oneOf(['bottom', 'top', 'left', 'right']), + /** + * Enable or disable focus trap behavior + */ + focusTrap: PropTypes.bool, + /** * The name of the default tooltip icon. */ @@ -203,6 +208,7 @@ class Tooltip extends Component { static defaultProps = { direction: DIRECTION_BOTTOM, + focusTrap: true, renderIcon: Information, showIcon: true, triggerText: null, @@ -271,6 +277,9 @@ class Tooltip extends Component { } _handleUserInputOpenClose = (event, { open }) => { + if (this.isControlled) { + return; + } // capture tooltip body element before it is removed from the DOM const tooltipBody = this._tooltipEl; this.setState({ open }, () => { @@ -396,6 +405,7 @@ class Tooltip extends Component { className, triggerClassName, direction, + focusTrap, triggerText, showIcon, iconName, @@ -474,7 +484,7 @@ class Tooltip extends Component { {open && ( Date: Tue, 25 Aug 2020 11:16:48 -0500 Subject: [PATCH 2/4] docs(Tooltip): add focusTrap prop --- .../react/src/components/Tooltip/Tooltip-story.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js index 8829319d4b6b..ae1e64968c2a 100644 --- a/packages/react/src/components/Tooltip/Tooltip-story.js +++ b/packages/react/src/components/Tooltip/Tooltip-story.js @@ -7,7 +7,13 @@ import React, { useState } from 'react'; import { settings } from 'carbon-components'; -import { withKnobs, select, text, number } from '@storybook/addon-knobs'; +import { + withKnobs, + select, + text, + number, + boolean, +} from '@storybook/addon-knobs'; import Tooltip from '../Tooltip'; import Button from '../Button'; import { OverflowMenuVertical16 } from '@carbon/icons-react'; @@ -23,6 +29,7 @@ const directions = { const props = { withIcon: () => ({ direction: select('Tooltip direction (direction)', directions, 'bottom'), + focusTrap: boolean('Focus trap (focusTrap)', true), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in )', 0), selectorPrimaryFocus: text( @@ -33,6 +40,7 @@ const props = { withoutIcon: () => ({ showIcon: false, direction: select('Tooltip direction (direction)', directions, 'bottom'), + focusTrap: boolean('Focus trap (focusTrap)', true), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in )', 0), selectorPrimaryFocus: text( @@ -43,6 +51,7 @@ const props = { customIcon: () => ({ showIcon: true, direction: select('Tooltip direction (direction)', directions, 'bottom'), + focusTrap: boolean('Focus trap (focusTrap)', true), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in )', 0), selectorPrimaryFocus: text( @@ -61,6 +70,7 @@ const props = { customIconOnly: () => ({ showIcon: true, direction: select('Tooltip direction (direction)', directions, 'bottom'), + focusTrap: boolean('Focus trap (focusTrap)', true), iconDescription: 'Helpful Information', tabIndex: number('Tab index (tabIndex in )', 0), selectorPrimaryFocus: text( @@ -96,6 +106,7 @@ function UncontrolledTooltipExample() {
My text wrapped with tooltip
} open={value} showIcon={false}> From 9a937ecc52157e3da2670be4766c6805b5a944d6 Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 25 Aug 2020 11:18:27 -0500 Subject: [PATCH 3/4] docs(Tooltip): update uncontrolled tooltip content --- .../react/src/components/Tooltip/Tooltip-story.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js index ae1e64968c2a..cdd13d39cfff 100644 --- a/packages/react/src/components/Tooltip/Tooltip-story.js +++ b/packages/react/src/components/Tooltip/Tooltip-story.js @@ -110,7 +110,17 @@ function UncontrolledTooltipExample() { triggerText={
My text wrapped with tooltip
} open={value} showIcon={false}> - Some text +

+ This is some tooltip text. This box shows the maximum amount of text + that should appear inside. If more room is needed please use a modal + instead. +

+
+ + Learn More + + +
From 582a55e9ed0573bf26d4f3fee6a405177f340461 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 23 Sep 2020 16:53:24 -0500 Subject: [PATCH 4/4] docs(Tooltip): remove focusTrap from controlled stories --- .../react/src/components/Tooltip/Tooltip-story.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js index cdd13d39cfff..7b071a6f5c5c 100644 --- a/packages/react/src/components/Tooltip/Tooltip-story.js +++ b/packages/react/src/components/Tooltip/Tooltip-story.js @@ -29,7 +29,6 @@ const directions = { const props = { withIcon: () => ({ direction: select('Tooltip direction (direction)', directions, 'bottom'), - focusTrap: boolean('Focus trap (focusTrap)', true), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in )', 0), selectorPrimaryFocus: text( @@ -40,7 +39,6 @@ const props = { withoutIcon: () => ({ showIcon: false, direction: select('Tooltip direction (direction)', directions, 'bottom'), - focusTrap: boolean('Focus trap (focusTrap)', true), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in )', 0), selectorPrimaryFocus: text( @@ -51,7 +49,6 @@ const props = { customIcon: () => ({ showIcon: true, direction: select('Tooltip direction (direction)', directions, 'bottom'), - focusTrap: boolean('Focus trap (focusTrap)', true), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in )', 0), selectorPrimaryFocus: text( @@ -70,7 +67,6 @@ const props = { customIconOnly: () => ({ showIcon: true, direction: select('Tooltip direction (direction)', directions, 'bottom'), - focusTrap: boolean('Focus trap (focusTrap)', true), iconDescription: 'Helpful Information', tabIndex: number('Tab index (tabIndex in )', 0), selectorPrimaryFocus: text( @@ -106,10 +102,12 @@ function UncontrolledTooltipExample() {
My text wrapped with tooltip
} - open={value} - showIcon={false}> + open={value}>

This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal