From 0498a460afe2c958c6f086ce351e5e7bcc239e48 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Tue, 18 Jul 2023 15:12:57 -0700
Subject: [PATCH 1/4] adding inline prop

---
 .../react-infobutton/etc/react-infobutton.api.md         | 3 ++-
 .../src/components/InfoButton/InfoButton.types.ts        | 9 ++++++++-
 .../src/components/InfoButton/useInfoButton.tsx          | 4 +++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-infobutton/etc/react-infobutton.api.md b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
index 55ed6eea251d8..087362c111162 100644
--- a/packages/react-components/react-infobutton/etc/react-infobutton.api.md
+++ b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
@@ -25,6 +25,7 @@ export const infoButtonClassNames: SlotClassNames<InfoButtonSlots>;
 // @public
 export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {
     size?: 'small' | 'medium' | 'large';
+    inline?: boolean;
 };
 
 // @public (undocumented)
@@ -35,7 +36,7 @@ export type InfoButtonSlots = {
 };
 
 // @public
-export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;
+export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
 
 // @public
 export const InfoIcon: ForwardRefComponent<InfoIconProps>;
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts
index ed230ae8c37db..c2ef7cc064c8b 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts
@@ -25,9 +25,16 @@ export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'di
    * @default medium
    */
   size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Whether the InfoButton should be rendered inline or on a Portal.
+   *
+   * @default true
+   */
+  inline?: boolean;
 };
 
 /**
  * State used in rendering InfoButton
  */
-export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;
+export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
index 4acba3a4f1aa4..818b2a5cf9b8c 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
@@ -28,9 +28,10 @@ const popoverSizeMap = {
  * @param ref - reference to root HTMLElement of InfoButton
  */
 export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {
-  const { size = 'medium' } = props;
+  const { size = 'medium', inline = true } = props;
 
   const state: InfoButtonState = {
+    inline,
     size,
 
     components: {
@@ -52,6 +53,7 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HT
         positioning: 'above-start',
         size: popoverSizeMap[size],
         withArrow: true,
+        inline,
       },
     }),
     info: resolveShorthand(props.info, {

From 18adee93775d669ef09d9bbebe89133de7e25154 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Thu, 20 Jul 2023 15:27:53 -0700
Subject: [PATCH 2/4] testing example

---
 .../InfoLabel/InfoLabelDefault.stories.tsx    | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
index 76a4ab5c344a9..7599ddb6495a7 100644
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
+++ b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
@@ -1,17 +1,21 @@
 import * as React from 'react';
 
-import { Link } from '@fluentui/react-components';
+import { Link, Button } from '@fluentui/react-components';
 import { InfoLabel, InfoLabelProps } from '@fluentui/react-components/unstable';
 
 export const Default = (props: Partial<InfoLabelProps>) => (
-  <InfoLabel
-    info={
-      <>
-        This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
-      </>
-    }
-    {...props}
-  >
-    Example label
-  </InfoLabel>
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+    <Button>hello</Button>
+    <InfoLabel
+      info={
+        <>
+          This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
+        </>
+      }
+      {...props}
+    >
+      Example label
+    </InfoLabel>
+    <Button>hello</Button>
+  </div>
 );

From 6f82b987000f9e1b91a21cfda4d9d2a65d970527 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Fri, 21 Jul 2023 16:18:09 -0700
Subject: [PATCH 3/4] making infobutton inline

---
 .../src/components/InfoButton/useInfoButton.tsx                | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
index 818b2a5cf9b8c..6c7d4da48d199 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
@@ -50,10 +50,11 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HT
     popover: resolveShorthand(props.popover, {
       required: true,
       defaultProps: {
+        inline,
         positioning: 'above-start',
         size: popoverSizeMap[size],
+        trapFocus: false,
         withArrow: true,
-        inline,
       },
     }),
     info: resolveShorthand(props.info, {

From a87738fa2ebeb92914851655ec1c8974c8788c29 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Fri, 21 Jul 2023 16:30:44 -0700
Subject: [PATCH 4/4] change file

---
 ...-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json |  7 +++++
 .../components/InfoButton/useInfoButton.tsx   |  1 -
 .../InfoLabel/InfoLabelDefault.stories.tsx    | 26 ++++++++-----------
 3 files changed, 18 insertions(+), 16 deletions(-)
 create mode 100644 change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json

diff --git a/change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json b/change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json
new file mode 100644
index 0000000000000..8f9e377840765
--- /dev/null
+++ b/change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(react-infobutton): Making InfoButton's PopoverSurface inline by default.",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
index 6c7d4da48d199..598e307b6c5de 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
@@ -53,7 +53,6 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HT
         inline,
         positioning: 'above-start',
         size: popoverSizeMap[size],
-        trapFocus: false,
         withArrow: true,
       },
     }),
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
index 7599ddb6495a7..76a4ab5c344a9 100644
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
+++ b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
@@ -1,21 +1,17 @@
 import * as React from 'react';
 
-import { Link, Button } from '@fluentui/react-components';
+import { Link } from '@fluentui/react-components';
 import { InfoLabel, InfoLabelProps } from '@fluentui/react-components/unstable';
 
 export const Default = (props: Partial<InfoLabelProps>) => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
-    <Button>hello</Button>
-    <InfoLabel
-      info={
-        <>
-          This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
-        </>
-      }
-      {...props}
-    >
-      Example label
-    </InfoLabel>
-    <Button>hello</Button>
-  </div>
+  <InfoLabel
+    info={
+      <>
+        This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
+      </>
+    }
+    {...props}
+  >
+    Example label
+  </InfoLabel>
 );