From dbded4fd8e01db5ca01eb773d9eed84d472e0a1d Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Fri, 21 Jul 2023 13:46:40 -0700
Subject: [PATCH 1/4] docs: Add info tooltip story to Tooltip stories.

---
 .../stories/Tooltip/TooltipIcon.stories.tsx   | 54 +++++++++++++++++++
 .../stories/Tooltip/index.stories.tsx         |  1 +
 2 files changed, 55 insertions(+)
 create mode 100644 packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx

diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
new file mode 100644
index 0000000000000..aa13f1a4f1c04
--- /dev/null
+++ b/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import { Label, makeStyles, mergeClasses, tokens, Tooltip, useId } from '@fluentui/react-components';
+import { Info16Regular } from '@fluentui/react-icons';
+import type { TooltipProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    columnGap: tokens.spacingVerticalS,
+  },
+  visible: {
+    color: tokens.colorNeutralForeground2BrandSelected,
+  },
+});
+
+export const Icon = (props: Partial<TooltipProps>) => {
+  const styles = useStyles();
+  const iconId = useId('icon');
+  const contentId = useId('content');
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <div aria-owns={visible ? contentId : undefined} className={styles.root}>
+      <Label>This is an icon with a Tooltip to show extra information</Label>
+      <Tooltip
+        content={{
+          children: 'Content must never contain focusable elements.',
+          id: contentId,
+        }}
+        positioning="above-start"
+        withArrow
+        relationship="label"
+        onVisibleChange={(e, { visible }) => setVisible(visible)}
+        {...props}
+      >
+        <Info16Regular
+          tabIndex={0}
+          id={iconId}
+          aria-labelledby={`${iconId} ${contentId}`}
+          className={mergeClasses(visible && styles.visible)}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+Icon.parameters = {
+  docs: {
+    description: {
+      story: `Tooltips can be attached to icons to create an info icon.`,
+    },
+  },
+};
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/index.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/index.stories.tsx
index 2979098006a0d..b8b7caaa06bdd 100644
--- a/packages/react-components/react-tooltip/stories/Tooltip/index.stories.tsx
+++ b/packages/react-components/react-tooltip/stories/Tooltip/index.stories.tsx
@@ -12,6 +12,7 @@ export { CustomMount } from './TooltipCustomMount.stories';
 export { Controlled } from './TooltipControlled.stories';
 export { Positioning } from './TooltipPositioning.stories';
 export { Target } from './TooltipTarget.stories';
+export { Icon } from './TooltipIcon.stories';
 
 export default {
   title: 'Components/Tooltip',

From c4978a3b7d5afbbae473195845847963f466f2da Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Fri, 21 Jul 2023 13:51:58 -0700
Subject: [PATCH 2/4] removing space

---
 .../react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
index aa13f1a4f1c04..33bba1077a275 100644
--- a/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
+++ b/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { Label, makeStyles, mergeClasses, tokens, Tooltip, useId } from '@fluentui/react-components';
 import { Info16Regular } from '@fluentui/react-icons';
 import type { TooltipProps } from '@fluentui/react-components';

From 3fe9250e68ec2a05980d7531f2fa94da14d0e2d9 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Fri, 21 Jul 2023 14:46:54 -0700
Subject: [PATCH 3/4] fix story

---
 .../react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
index 33bba1077a275..dc5c9bcb5bb02 100644
--- a/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
+++ b/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
@@ -17,10 +17,10 @@ export const Icon = (props: Partial<TooltipProps>) => {
   const styles = useStyles();
   const iconId = useId('icon');
   const contentId = useId('content');
-  const [visible, setVisible] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
 
   return (
-    <div aria-owns={visible ? contentId : undefined} className={styles.root}>
+    <div aria-owns={open ? contentId : undefined} className={styles.root}>
       <Label>This is an icon with a Tooltip to show extra information</Label>
       <Tooltip
         content={{
@@ -30,14 +30,14 @@ export const Icon = (props: Partial<TooltipProps>) => {
         positioning="above-start"
         withArrow
         relationship="label"
-        onVisibleChange={(e, { visible }) => setVisible(visible)}
+        onVisibleChange={(e, { visible }) => setOpen(visible)}
         {...props}
       >
         <Info16Regular
           tabIndex={0}
           id={iconId}
           aria-labelledby={`${iconId} ${contentId}`}
-          className={mergeClasses(visible && styles.visible)}
+          className={mergeClasses(open && styles.visible)}
         />
       </Tooltip>
     </div>

From f20405e3d5d21b8da88cf2fcb8fc7151c6c8377d Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Fri, 21 Jul 2023 14:47:45 -0700
Subject: [PATCH 4/4] rename

---
 .../react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
index dc5c9bcb5bb02..ab6e5173eb03c 100644
--- a/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
+++ b/packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx
@@ -17,10 +17,10 @@ export const Icon = (props: Partial<TooltipProps>) => {
   const styles = useStyles();
   const iconId = useId('icon');
   const contentId = useId('content');
-  const [open, setOpen] = React.useState(false);
+  const [visible, setVisible] = React.useState(false);
 
   return (
-    <div aria-owns={open ? contentId : undefined} className={styles.root}>
+    <div aria-owns={visible ? contentId : undefined} className={styles.root}>
       <Label>This is an icon with a Tooltip to show extra information</Label>
       <Tooltip
         content={{
@@ -30,14 +30,14 @@ export const Icon = (props: Partial<TooltipProps>) => {
         positioning="above-start"
         withArrow
         relationship="label"
-        onVisibleChange={(e, { visible }) => setOpen(visible)}
+        onVisibleChange={(e, data) => setVisible(data.visible)}
         {...props}
       >
         <Info16Regular
           tabIndex={0}
           id={iconId}
           aria-labelledby={`${iconId} ${contentId}`}
-          className={mergeClasses(open && styles.visible)}
+          className={mergeClasses(visible && styles.visible)}
         />
       </Tooltip>
     </div>