From 873d8832f46806ee8a89b69a457e8542eb0e3a62 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Mon, 5 Jun 2023 11:54:28 -0700
Subject: [PATCH 1/2] fix: update stories to show better guidance

---
 .../Infobutton/InfoButtonDefault.stories.tsx  | 55 ++++++++++----
 .../Infobutton/InfoButtonSize.stories.tsx     | 72 +++++++++++--------
 2 files changed, 87 insertions(+), 40 deletions(-)

diff --git a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx
index 337698c2baf854..18046cd5f17b58 100644
--- a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx
+++ b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx
@@ -1,14 +1,45 @@
 import * as React from 'react';
 import { InfoButton, InfoButtonProps } from '@fluentui/react-infobutton';
-import { Link } from '@fluentui/react-components';
-
-export const Default = (props: Partial<InfoButtonProps>) => (
-  <InfoButton
-    {...props}
-    info={
-      <>
-        This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
-      </>
-    }
-  />
-);
+import { Label, Link, makeStyles, useId } from '@fluentui/react-components';
+import type { PopoverProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  infoButton: {
+    verticalAlign: 'top',
+  },
+});
+
+export const Default = (props: Partial<InfoButtonProps>) => {
+  const styles = useStyles();
+  const labelId = useId('label');
+  const infobuttonId = useId('infobutton');
+  const infobuttonInfoId = infobuttonId + '__info';
+
+  const [open, setOpen] = React.useState(false);
+
+  const info = (
+    <>
+      This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
+    </>
+  );
+
+  const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => setOpen(data.open);
+
+  return (
+    <div aria-owns={open ? infobuttonInfoId : undefined}>
+      <Label id={labelId}>This is a default Infobutton</Label>
+      <InfoButton
+        {...props}
+        id={infobuttonId}
+        className={styles.infoButton}
+        info={{
+          id: infobuttonInfoId,
+          children: info,
+        }}
+        popover={{
+          onOpenChange,
+        }}
+      />
+    </div>
+  );
+};
diff --git a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonSize.stories.tsx b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonSize.stories.tsx
index ef4aaff0149969..7404b280b2dc81 100644
--- a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonSize.stories.tsx
+++ b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonSize.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { InfoButton } from '@fluentui/react-infobutton';
-import { Link, makeStyles, shorthands } from '@fluentui/react-components';
+import { Label, Link, makeStyles, shorthands, useId } from '@fluentui/react-components';
+import type { InfoButtonProps } from '@fluentui/react-infobutton';
+import type { PopoverProps } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   base: {
@@ -10,42 +12,56 @@ const useStyles = makeStyles({
     ...shorthands.gap('80px'),
     ...shorthands.padding('20px'),
   },
+  infoButton: {
+    verticalAlign: 'top',
+  },
 });
 
-export const Size = () => {
+const InfoButtonSize: React.FC<{ size: InfoButtonProps['size'] }> = ({ size }) => {
   const styles = useStyles();
+  const labelId = useId('label');
+  const infobuttonId = useId('infobutton');
+  const infobuttonInfoId = infobuttonId + '__info';
+
+  const [open, setOpen] = React.useState(false);
+
+  const info = (
+    <>
+      This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
+    </>
+  );
+
+  const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => setOpen(data.open);
 
   return (
-    <div className={styles.base}>
+    <div aria-owns={open ? infobuttonInfoId : undefined}>
+      <Label size={size} id={labelId}>
+        This is a {size} Infobutton
+      </Label>
       <InfoButton
-        size="small"
-        info={
-          <>
-            This is example information for a small InfoButton.{' '}
-            <Link href="https://react.fluentui.dev">Learn more</Link>.
-          </>
-        }
+        size={size}
+        id={infobuttonId}
+        className={styles.infoButton}
+        info={{
+          id: infobuttonInfoId,
+          children: info,
+        }}
+        popover={{
+          onOpenChange,
+        }}
       />
+    </div>
+  );
+};
 
-      <InfoButton
-        size="medium"
-        info={
-          <>
-            This is example information for a medium InfoButton.{' '}
-            <Link href="https://react.fluentui.dev">Learn more</Link>.
-          </>
-        }
-      />
+export const Size = () => {
+  const styles = useStyles();
 
-      <InfoButton
-        size="large"
-        info={
-          <>
-            This is example information for a large InfoButton.{' '}
-            <Link href="https://react.fluentui.dev">Learn more</Link>.
-          </>
-        }
-      />
+  return (
+    <div className={styles.base}>
+      <InfoButtonSize size="small" />
+      <InfoButtonSize size="medium" />
+      <InfoButtonSize size="large" />
     </div>
   );
 };

From 7fe87d2eaa43b91a72fe76d0118caa15ba7ae106 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Mon, 5 Jun 2023 15:06:54 -0700
Subject: [PATCH 2/2] updating imports

---
 .../stories/Infobutton/InfoButtonDefault.stories.tsx           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx
index 18046cd5f17b58..b9d6fa6e965006 100644
--- a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx
+++ b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { InfoButton, InfoButtonProps } from '@fluentui/react-infobutton';
+import { InfoButton } from '@fluentui/react-infobutton';
 import { Label, Link, makeStyles, useId } from '@fluentui/react-components';
+import type { InfoButtonProps } from '@fluentui/react-infobutton';
 import type { PopoverProps } from '@fluentui/react-components';
 
 const useStyles = makeStyles({