From 5aac81128bbf64c001efce2ff00ceeeda27cad0e Mon Sep 17 00:00:00 2001 From: Andy Vo Date: Fri, 23 Sep 2022 11:53:08 -0700 Subject: [PATCH 1/5] chore(Tooltip): converted examples to typescript --- .../components/Tooltip/examples/Tooltip.md | 290 +----------------- .../Tooltip/examples/TooltipBasic.tsx | 18 ++ .../Tooltip/examples/TooltipIcon.tsx | 24 ++ .../Tooltip/examples/TooltipOptions.tsx | 205 +++++++++++++ .../Tooltip/examples/TooltipReactRef.tsx | 22 ++ .../Tooltip/examples/TooltipSelectorRef.tsx | 19 ++ 6 files changed, 293 insertions(+), 285 deletions(-) create mode 100644 packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx create mode 100644 packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx create mode 100644 packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx create mode 100644 packages/react-core/src/components/Tooltip/examples/TooltipReactRef.tsx create mode 100644 packages/react-core/src/components/Tooltip/examples/TooltipSelectorRef.tsx diff --git a/packages/react-core/src/components/Tooltip/examples/Tooltip.md b/packages/react-core/src/components/Tooltip/examples/Tooltip.md index 1d015eebe51..485b8e3be82 100644 --- a/packages/react-core/src/components/Tooltip/examples/Tooltip.md +++ b/packages/react-core/src/components/Tooltip/examples/Tooltip.md @@ -13,68 +13,17 @@ import './TooltipExamples.css'; ### Basic -```js -import React from 'react'; -import { Tooltip } from '@patternfly/react-core'; - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
- } - > - - I have a tooltip! - - -; +```ts file="./TooltipBasic.tsx" ``` ### Tooltip react ref -```js -import React from 'react'; -import { Tooltip } from '@patternfly/react-core'; - -TooltipReactRef = () => { - const tooltipRef = React.useRef(); - return ( -
- - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. -
- } - reference={tooltipRef} - /> - - ); -}; +```ts file="./TooltipReactRef.tsx" ``` ### Tooltip selector ref -```js -import React from 'react'; -import { Tooltip } from '@patternfly/react-core'; - -
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
- } - reference={() => document.getElementById('tooltip-selector')} - /> -; +```ts file="./TooltipSelectorRef.tsx" ``` ### On icon with dynamic content @@ -83,239 +32,10 @@ When the tooltip is used as a wrapper and its content will dynamically update, t When using a React or selector ref with a tooltip that has dynamic content, the `aria` and `aria-live` props do not need to be manually passed in. -```js -import React from 'react'; -import { Tooltip, Button } from '@patternfly/react-core'; -import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; - -IconExample = () => { - const [showSuccessContent, setShowSuccessContent] = React.useState(false); - const copyText = 'Copy to clipboard'; - const doneCopyText = 'Successfully copied to clipboard!'; - const [content, setContent] = React.useState(copyText); - return ( -
- - - -
- ); -}; +```ts file="./TooltipIcon.tsx" ``` ### Options -```js -import React from 'react'; -import { Button, Tooltip, Checkbox, Select, SelectOption, TextInput } from '@patternfly/react-core'; - -OptionsTooltip = () => { - const [trigger, setTrigger] = React.useState(['mouseenter', 'focus']); - const [isVisible, setIsVisible] = React.useState(true); - const [contentLeftAligned, setContentLeftAligned] = React.useState(false); - const [enableFlip, setEnableFlip] = React.useState(true); - const [position, setPosition] = React.useState('top'); - const [positionSelectOpen, setPositionSelectOpen] = React.useState(false); - const [flipSelectOpen, setFlipSelectOpen] = React.useState(false); - const [flipBehavior, setFlipBehavior] = React.useState('flip'); - const [entryDelayInput, setEntryDelayInput] = React.useState(0); - const [exitDelayInput, setExitDelayInput] = React.useState(0); - const [animationDuration, setAnimationDuration] = React.useState(300); - const tipBoxRef = React.useRef(null); - - const scrollToRef = ref => { - if (ref && ref.current) { - ref.current.scrollTop = 400; - ref.current.scrollLeft = 300; - } - }; - - React.useEffect(() => { - scrollToRef(tipBoxRef); - }, []); - - return ( - <> -
-
- { - let updatedTrigger; - checked && (updatedTrigger = trigger.concat('mouseenter')); - !checked && (updatedTrigger = trigger.filter(t => t !== 'mouseenter')); - setIsVisible(false); - setTrigger(updatedTrigger); - }} - aria-label="trigger: mouseenter" - id="trigger_mouseenter" - /> - { - let updatedTrigger; - checked && (updatedTrigger = trigger.concat('focus')); - !checked && (updatedTrigger = trigger.filter(t => t !== 'focus')); - setIsVisible(false); - setTrigger(updatedTrigger); - }} - aria-label="trigger: focus" - id="trigger_focus" - /> - { - let updatedTrigger; - checked && (updatedTrigger = trigger.concat('click')); - !checked && (updatedTrigger = trigger.filter(t => t !== 'click')); - setIsVisible(false); - setTimeout(() => setTrigger(updatedTrigger)); - }} - aria-label="trigger: click" - id="trigger_click" - /> - { - let updatedTrigger; - checked && (updatedTrigger = trigger.concat('manual')); - !checked && (updatedTrigger = trigger.filter(t => t !== 'manual')); - setIsVisible(false); - setTrigger(updatedTrigger); - }} - aria-label="trigger: manual" - id="trigger_manual" - /> -
-
- setContentLeftAligned(checked)} - aria-label="content left-aligned" - id="content_left_aligned" - /> -
-
- setEnableFlip(checked)} - aria-label="enableFlip" - id="enable_flip" - /> -
-
- position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true. - -
-
- setIsVisible(checked)} - aria-label="isVisible" - id="is_visible" - /> -
-
- Entry delay (ms){' '} - setEntryDelayInput(val)} - aria-label="entry delay" - /> - Exit delay (ms) setExitDelayInput(val)} - aria-label="exit delay" - /> - Animation duration (ms){' '} - setAnimationDuration(val)} - aria-label="animation duration" - /> -
-
- flip behavior examples (enableFlip has to be true). "flip" will try to flip the tooltip to the opposite of the - starting position. The second option ensures that there are 3 escape positions for every possible starting - position (default). This setting is ignored if position prop is set to 'auto'. - -
-
-
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. -
- } - trigger={trigger.join(' ')} - enableFlip={enableFlip} - flipBehavior={flipBehavior === 'flip' ? 'flip' : ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']} - position={position} - isVisible={isVisible} - entryDelay={entryDelayInput} - exitDelay={exitDelayInput} - animationDuration={animationDuration} - isContentLeftAligned={contentLeftAligned} - appendTo={() => document.getElementById('tooltip-boundary')} - > - - - - - ); -}; +```ts file="./TooltipOptions.tsx" ``` diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx new file mode 100644 index 00000000000..bce2ab94540 --- /dev/null +++ b/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Tooltip } from '@patternfly/react-core'; + +export const TooltipBasic: React.FunctionComponent = () => ( +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. +
+ } + > + + I have a tooltip! + + + +); diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx new file mode 100644 index 00000000000..d2de7a0c2bf --- /dev/null +++ b/packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Tooltip, Button } from '@patternfly/react-core'; +import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; + +export const TooltipIcon: React.FunctionComponent = () => { + const [showSuccessContent, setShowSuccessContent] = React.useState(false); + const copyText: string = 'Copy to clipboard'; + const doneCopyText: string = 'Successfully copied to clipboard!'; + + return ( +
+ + + +
+ ); +}; diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx new file mode 100644 index 00000000000..4eac04c0fc3 --- /dev/null +++ b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx @@ -0,0 +1,205 @@ +import React from 'react'; +import { Button, Tooltip, Checkbox, Select, SelectOption, TextInput, TooltipPosition } from '@patternfly/react-core'; + +export const TooltipOptions: React.FunctionComponent = () => { + const [trigger, setTrigger] = React.useState(['mouseenter', 'focus']); + const [isVisible, setIsVisible] = React.useState(true); + const [contentLeftAligned, setContentLeftAligned] = React.useState(false); + const [enableFlip, setEnableFlip] = React.useState(true); + const [position, setPosition] = React.useState(TooltipPosition.top); + const [positionSelectOpen, setPositionSelectOpen] = React.useState(false); + const [flipSelectOpen, setFlipSelectOpen] = React.useState(false); + const [flipBehavior, setFlipBehavior] = React.useState('flip'); + const [entryDelayInput, setEntryDelayInput] = React.useState(0); + const [exitDelayInput, setExitDelayInput] = React.useState(0); + const [animationDuration, setAnimationDuration] = React.useState(300); + const tipBoxRef = React.useRef(null); + + const scrollToRef = (ref: React.RefObject) => { + if (ref && ref.current) { + ref.current.scrollTop = 400; + ref.current.scrollLeft = 300; + } + }; + + React.useEffect(() => { + scrollToRef(tipBoxRef); + }, []); + + return ( + <> +
+
+ { + let updatedTrigger: string[] = []; + checked && (updatedTrigger = trigger.concat('mouseenter')); + !checked && (updatedTrigger = trigger.filter(t => t !== 'mouseenter')); + setIsVisible(false); + setTrigger(updatedTrigger); + }} + aria-label="trigger: mouseenter" + id="trigger_mouseenter" + /> + { + let updatedTrigger; + checked && (updatedTrigger = trigger.concat('focus')); + !checked && (updatedTrigger = trigger.filter(t => t !== 'focus')); + setIsVisible(false); + setTrigger(updatedTrigger); + }} + aria-label="trigger: focus" + id="trigger_focus" + /> + { + let updatedTrigger; + checked && (updatedTrigger = trigger.concat('click')); + !checked && (updatedTrigger = trigger.filter(t => t !== 'click')); + setIsVisible(false); + setTimeout(() => setTrigger(updatedTrigger)); + }} + aria-label="trigger: click" + id="trigger_click" + /> + { + let updatedTrigger; + checked && (updatedTrigger = trigger.concat('manual')); + !checked && (updatedTrigger = trigger.filter(t => t !== 'manual')); + setIsVisible(false); + setTrigger(updatedTrigger); + }} + aria-label="trigger: manual" + id="trigger_manual" + /> +
+
+ setContentLeftAligned(checked)} + aria-label="content left-aligned" + id="content_left_aligned" + /> +
+
+ setEnableFlip(checked)} + aria-label="enableFlip" + id="enable_flip" + /> +
+
+ position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true. + +
+
+ setIsVisible(checked)} + aria-label="isVisible" + id="is_visible" + /> +
+
+ Entry delay (ms){' '} + setEntryDelayInput(Number(val))} + aria-label="entry delay" + /> + Exit delay (ms){' '} + setExitDelayInput(Number(val))} + aria-label="exit delay" + /> + Animation duration (ms){' '} + setAnimationDuration(Number(val))} + aria-label="animation duration" + /> +
+
+ flip behavior examples (enableFlip has to be true). "flip" will try to flip the tooltip to the opposite of the + starting position. The second option ensures that there are 3 escape positions for every possible starting + position (default). This setting is ignored if position prop is set to 'auto'. + +
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. +
+ } + trigger={trigger.join(' ')} + enableFlip={enableFlip} + flipBehavior={flipBehavior === 'flip' ? 'flip' : ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']} + position={position} + isVisible={isVisible} + entryDelay={entryDelayInput} + exitDelay={exitDelayInput} + animationDuration={animationDuration} + isContentLeftAligned={contentLeftAligned} + appendTo={() => document.getElementById('tooltip-boundary') as HTMLElement} + > + + + + + ); +}; diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipReactRef.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipReactRef.tsx new file mode 100644 index 00000000000..d36cb67103a --- /dev/null +++ b/packages/react-core/src/components/Tooltip/examples/TooltipReactRef.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Tooltip } from '@patternfly/react-core'; + +export const TooltipReactRef: React.FunctionComponent = () => { + const tooltipRef = React.useRef(null); + return ( +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. +
+ } + reference={tooltipRef} + /> + + ); +}; diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipSelectorRef.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipSelectorRef.tsx new file mode 100644 index 00000000000..e90b55ae770 --- /dev/null +++ b/packages/react-core/src/components/Tooltip/examples/TooltipSelectorRef.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Tooltip } from '@patternfly/react-core'; + +export const TooltipSelectorRef: React.FunctionComponent = () => ( +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. +
+ } + reference={() => document.getElementById('tooltip-selector') as HTMLButtonElement} + /> + +); From 463cd8c58ce89e68561868a64d902d469e08565e Mon Sep 17 00:00:00 2001 From: Andy Vo Date: Fri, 23 Sep 2022 21:45:32 -0700 Subject: [PATCH 2/5] chore(Tooltip): fixed selection variable typing issue --- .../src/components/Tooltip/examples/TooltipOptions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx index 4eac04c0fc3..1f80e6b0f7c 100644 --- a/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx +++ b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx @@ -106,7 +106,7 @@ export const TooltipOptions: React.FunctionComponent = () => { setFlipSelectOpen(!flipSelectOpen)} onSelect={(_event, selection) => { - setFlipBehavior(selection); + setFlipBehavior(selection.toString()); setFlipSelectOpen(false); }} isOpen={flipSelectOpen} From c1fed6e8529ccca6b6870fd31084066be3a0fe78 Mon Sep 17 00:00:00 2001 From: Andy Vo Date: Mon, 26 Sep 2022 10:29:12 -0700 Subject: [PATCH 3/5] chore(Tooltip): shortened updatedTrigger code --- .../Tooltip/examples/TooltipOptions.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx index 1f80e6b0f7c..c5280ac4f37 100644 --- a/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx +++ b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx @@ -34,9 +34,7 @@ export const TooltipOptions: React.FunctionComponent = () => { label="trigger: mouseenter" isChecked={trigger.includes('mouseenter')} onChange={checked => { - let updatedTrigger: string[] = []; - checked && (updatedTrigger = trigger.concat('mouseenter')); - !checked && (updatedTrigger = trigger.filter(t => t !== 'mouseenter')); + const updatedTrigger = checked ? trigger.concat('mouseenter') : trigger.filter(t => t !== 'mouseenter'); setIsVisible(false); setTrigger(updatedTrigger); }} @@ -47,9 +45,7 @@ export const TooltipOptions: React.FunctionComponent = () => { label="trigger: focus" isChecked={trigger.includes('focus')} onChange={checked => { - let updatedTrigger; - checked && (updatedTrigger = trigger.concat('focus')); - !checked && (updatedTrigger = trigger.filter(t => t !== 'focus')); + const updatedTrigger = checked ? trigger.concat('focus') : trigger.filter(t => t !== 'focus'); setIsVisible(false); setTrigger(updatedTrigger); }} @@ -60,9 +56,7 @@ export const TooltipOptions: React.FunctionComponent = () => { label="trigger: click" isChecked={trigger.includes('click')} onChange={checked => { - let updatedTrigger; - checked && (updatedTrigger = trigger.concat('click')); - !checked && (updatedTrigger = trigger.filter(t => t !== 'click')); + const updatedTrigger = checked ? trigger.concat('click') : trigger.filter(t => t !== 'click'); setIsVisible(false); setTimeout(() => setTrigger(updatedTrigger)); }} @@ -73,9 +67,7 @@ export const TooltipOptions: React.FunctionComponent = () => { label="trigger: manual" isChecked={trigger.includes('manual')} onChange={checked => { - let updatedTrigger; - checked && (updatedTrigger = trigger.concat('manual')); - !checked && (updatedTrigger = trigger.filter(t => t !== 'manual')); + const updatedTrigger = checked ? trigger.concat('manual') : trigger.filter(t => t !== 'manual'); setIsVisible(false); setTrigger(updatedTrigger); }} From 2a7c613e6a0ab91675b95085161ba6a5e9ec93ce Mon Sep 17 00:00:00 2001 From: Andy Vo Date: Thu, 27 Oct 2022 10:31:07 -0700 Subject: [PATCH 4/5] chore(Tooltip): changed span to Button in basic example --- .../src/components/Tooltip/examples/TooltipBasic.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx index bce2ab94540..d1941207bc1 100644 --- a/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx +++ b/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Tooltip } from '@patternfly/react-core'; +import { Button, Tooltip } from '@patternfly/react-core'; export const TooltipBasic: React.FunctionComponent = () => (
@@ -10,9 +10,7 @@ export const TooltipBasic: React.FunctionComponent = () => (
} > - - I have a tooltip! - + ); From 010b3a0f009770f98a17e65a5df16aa56c1f6572 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 16 Nov 2022 16:08:50 -0500 Subject: [PATCH 5/5] remove unnecessary tabindex --- .../react-core/src/components/Tooltip/examples/TooltipBasic.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx index d1941207bc1..47b9ef478b2 100644 --- a/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx +++ b/packages/react-core/src/components/Tooltip/examples/TooltipBasic.tsx @@ -10,7 +10,7 @@ export const TooltipBasic: React.FunctionComponent = () => ( } > - + );