Fix TeachingBubble examples to use unique target IDs (#20157)

microsoft · Oct 7, 2021 · a8e678a · a8e678a
1 parent f0c5c6d
commit a8e678a
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 21 deletions.
diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Basic.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Basic.Example.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
-import { useBoolean } from '@fluentui/react-hooks';
+import { useBoolean, useId } from '@fluentui/react-hooks';
 
 const examplePrimaryButtonProps: IButtonProps = {
   children: 'Try it out',
 };
 
 export const TeachingBubbleBasicExample: React.FunctionComponent = () => {
+  const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
     () => ({
@@ -20,14 +21,14 @@ export const TeachingBubbleBasicExample: React.FunctionComponent = () => {
   return (
     <div>
       <DefaultButton
-        id="targetButton"
+        id={buttonId}
         onClick={toggleTeachingBubbleVisible}
         text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
       />
 
       {teachingBubbleVisible && (
         <TeachingBubble
-          target="#targetButton"
+          target={`#${buttonId}`}
           primaryButtonProps={examplePrimaryButtonProps}
           secondaryButtonProps={exampleSecondaryButtonProps}
           onDismiss={toggleTeachingBubbleVisible}

diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Condensed.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Condensed.Example.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
-import { useBoolean } from '@fluentui/react-hooks';
+import { useBoolean, useId } from '@fluentui/react-hooks';
 
 const examplePrimaryButtonProps: IButtonProps = {
   children: 'Try it out',
 };
 
 export const TeachingBubbleCondensedExample: React.FunctionComponent = () => {
+  const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
@@ -21,14 +22,14 @@ export const TeachingBubbleCondensedExample: React.FunctionComponent = () => {
   return (
     <div>
       <DefaultButton
-        id="targetButton"
+        id={buttonId}
         onClick={toggleTeachingBubbleVisible}
         text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
       />
 
       {teachingBubbleVisible && (
         <TeachingBubble
-          target="#targetButton"
+          target={`#${buttonId}`}
           hasCondensedHeadline={true}
           primaryButtonProps={examplePrimaryButtonProps}
           secondaryButtonProps={exampleSecondaryButtonProps}

diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Illustration.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Illustration.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IImageProps } from '@fluentui/react/lib/Image';
 import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
-import { useBoolean } from '@fluentui/react-hooks';
+import { useBoolean, useId } from '@fluentui/react-hooks';
 
 const exampleImageProps: IImageProps = { src: 'http://via.placeholder.com/364x180', alt: 'Example placeholder image' };
 
@@ -11,6 +11,7 @@ const examplePrimaryButtonProps: IButtonProps = {
 };
 
 export const TeachingBubbleIllustrationExample: React.FunctionComponent = () => {
+  const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
@@ -24,14 +25,14 @@ export const TeachingBubbleIllustrationExample: React.FunctionComponent = () =>
   return (
     <div>
       <DefaultButton
-        id="targetButton"
+        id={buttonId}
         onClick={toggleTeachingBubbleVisible}
         text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
       />
 
       {teachingBubbleVisible && (
         <TeachingBubble
-          target="#targetButton"
+          target={`#${buttonId}`}
           illustrationImage={exampleImageProps}
           primaryButtonProps={examplePrimaryButtonProps}
           secondaryButtonProps={exampleSecondaryButtonProps}

diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.MultiStep.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.MultiStep.Example.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
-import { useBoolean } from '@fluentui/react-hooks';
+import { useBoolean, useId } from '@fluentui/react-hooks';
 
 const examplePrimaryButtonProps: IButtonProps = {
   children: 'Next',
 };
 export const TeachingBubbleMultiStepExample: React.FunctionComponent = () => {
+  const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
@@ -20,14 +21,14 @@ export const TeachingBubbleMultiStepExample: React.FunctionComponent = () => {
   return (
     <div>
       <DefaultButton
-        id="targetButton"
+        id={buttonId}
         onClick={toggleTeachingBubbleVisible}
         text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
       />
 
       {teachingBubbleVisible && (
         <TeachingBubble
-          target="#targetButton"
+          target={`#${buttonId}`}
           primaryButtonProps={examplePrimaryButtonProps}
           secondaryButtonProps={exampleSecondaryButtonProps}
           onDismiss={toggleTeachingBubbleVisible}

diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.SmallHeadline.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.SmallHeadline.Example.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
-import { useBoolean } from '@fluentui/react-hooks';
+import { useBoolean, useId } from '@fluentui/react-hooks';
 
 export const TeachingBubbleSmallHeadlineExample: React.FunctionComponent = () => {
+  const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
   const examplePrimaryButtonProps: IButtonProps = {
     children: 'Try it out',
@@ -13,14 +14,14 @@ export const TeachingBubbleSmallHeadlineExample: React.FunctionComponent = () =>
   return (
     <div>
       <DefaultButton
-        id="targetButton"
+        id={buttonId}
         onClick={toggleTeachingBubbleVisible}
         text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
       />
 
       {teachingBubbleVisible && (
         <TeachingBubble
-          target="#targetButton"
+          target={`#${buttonId}`}
           primaryButtonProps={examplePrimaryButtonProps}
           hasSmallHeadline={true}
           onDismiss={toggleTeachingBubbleVisible}

diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Wide.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Wide.Example.tsx
@@ -2,23 +2,24 @@ import * as React from 'react';
 import { DefaultButton } from '@fluentui/react/lib/Button';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import { useBoolean } from '@fluentui/react-hooks';
+import { useBoolean, useId } from '@fluentui/react-hooks';
 
 export const TeachingBubbleWideExample: React.FunctionComponent = () => {
+  const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
   return (
     <div>
       <DefaultButton
-        id="targetButton"
+        id={buttonId}
         onClick={toggleTeachingBubbleVisible}
         text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
       />
 
       {teachingBubbleVisible && (
         <TeachingBubble
           calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
-          target="#targetButton"
+          target={`#${buttonId}`}
           isWide={true}
           hasCloseButton={true}
           closeButtonAriaLabel="Close"

diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.WideIllustration.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.WideIllustration.Example.tsx
@@ -3,7 +3,7 @@ import { IImageProps } from '@fluentui/react/lib/Image';
 import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import { useBoolean } from '@fluentui/react-hooks';
+import { useBoolean, useId } from '@fluentui/react-hooks';
 
 const examplePrimaryButtonProps: IButtonProps = {
   children: 'Try it out',
@@ -14,6 +14,7 @@ const exampleImageProps: IImageProps = { src: 'http://via.placeholder.com/154x22
 const CalloutProps = { directionalHint: DirectionalHint.bottomCenter };
 
 export const TeachingBubbleWideIllustrationExample: React.FunctionComponent = () => {
+  const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
     () => ({
@@ -26,7 +27,7 @@ export const TeachingBubbleWideIllustrationExample: React.FunctionComponent = ()
   return (
     <div>
       <DefaultButton
-        id="targetButton"
+        id={buttonId}
         onClick={toggleTeachingBubbleVisible}
         text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
       />
@@ -39,7 +40,7 @@ export const TeachingBubbleWideIllustrationExample: React.FunctionComponent = ()
           hasSmallHeadline={true}
           hasCloseButton={true}
           closeButtonAriaLabel="Close"
-          target="#targetButton"
+          target={`#${buttonId}`}
           primaryButtonProps={examplePrimaryButtonProps}
           secondaryButtonProps={exampleSecondaryButtonProps}
           onDismiss={toggleTeachingBubbleVisible}