From 0bd04690207dcd3258534a31417a28e308dee790 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Thu, 23 Mar 2023 15:44:22 -0700
Subject: [PATCH 1/5] Renaming content prop to info

---
 .../react-infobutton/docs/Spec.md                 |  8 ++++----
 .../react-infobutton/etc/react-infobutton.api.md  |  4 ++--
 .../src/components/InfoButton/InfoButton.test.tsx |  6 +++---
 .../src/components/InfoButton/InfoButton.types.ts |  6 +++---
 .../components/InfoButton/renderInfoButton.tsx    |  2 +-
 .../src/components/InfoButton/useInfoButton.tsx   |  4 ++--
 .../components/InfoButton/useInfoButtonStyles.ts  |  8 ++++----
 .../src/components/InfoLabel/InfoLabel.test.tsx   |  4 ++--
 .../src/components/InfoLabel/InfoLabel.types.ts   |  4 ++--
 .../src/components/InfoLabel/useInfoLabel.ts      |  2 +-
 .../stories/InfoLabel/InfoLabelBestPractices.md   |  2 +-
 .../InfoLabel/InfoLabelDefault.stories.tsx        |  2 +-
 .../Infobutton/InfoButtonDefault.stories.tsx      |  4 ++--
 .../stories/Infobutton/InfoButtonSize.stories.tsx | 15 +++++++++------
 14 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/packages/react-components/react-infobutton/docs/Spec.md b/packages/react-components/react-infobutton/docs/Spec.md
index deb161b3220fe..5789158ad5bc3 100644
--- a/packages/react-components/react-infobutton/docs/Spec.md
+++ b/packages/react-components/react-infobutton/docs/Spec.md
@@ -30,7 +30,7 @@ Because the Popover isn't always visible, it should not contain information that
 ## Sample Code
 
 ```jsx
-<InfoButton content="This is some additional information." />
+<InfoButton info="This is some additional information." />
 ```
 
 ## API
@@ -45,7 +45,7 @@ _**Public**_
 
 ```jsx
 <InfoButton
-  content={
+  info={
     <>
       Popover above-start lorem ipsum dolor sit amet consectetur.
       <Link href="https://react.fluentui.dev">Learn more</Link>
@@ -62,7 +62,7 @@ return (
     <PopoverTrigger>
       <slots.root {...slotProps.root} />
     </PopoverTrigger>
-    <slots.content {...slotProps.content} />
+    <slots.info {...slotProps.info} />
   </slots.popover>
 );
 ```
@@ -75,7 +75,7 @@ _**DOM**_
 </button>
 
 <!-- on document.body -->
-<div role="tooltip" class="fui-PopoverSurface fui-InfoButton__content">
+<div role="tooltip" class="fui-PopoverSurface fui-InfoButton__info">
   Popover above-start lorem ipsum dolor sit amet consectetur.
   <a href="https://react.fluentui.dev">Learn more</a>
 </div>
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 1d20b44a13245..46b9efca38289 100644
--- a/packages/react-components/react-infobutton/etc/react-infobutton.api.md
+++ b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
@@ -31,7 +31,7 @@ export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'di
 export type InfoButtonSlots = {
     root: NonNullable<Slot<'button'>>;
     popover: NonNullable<Slot<Partial<PopoverProps>>>;
-    content: NonNullable<Slot<typeof PopoverSurface>>;
+    info: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
 // @public
@@ -45,7 +45,7 @@ export const infoLabelClassNames: SlotClassNames<InfoLabelSlots>;
 
 // @public
 export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
-    info?: InfoButtonProps['content'];
+    info?: InfoButtonProps['info'];
 };
 
 // @public (undocumented)
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx
index b7064887597d4..0a1918c8997ac 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx
@@ -27,17 +27,17 @@ describe('InfoButton', () => {
     Component: InfoButton,
     displayName: 'InfoButton',
     requiredProps: {
-      content: "This is an InfoButton's Content.",
+      info: "This is an InfoButton's information.",
     },
     testOptions: {
       'has-static-classnames': [
         {
           props: {
-            content: "This is an InfoButton's Content.",
+            info: "This is an InfoButton's information.",
           },
           expectedClassNames: {
             root: infoButtonClassNames.root,
-            content: infoButtonClassNames.content,
+            info: infoButtonClassNames.info,
           },
           getPortalElement: getPopoverSurfaceElement,
         },
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 12e34ee998732..ed230ae8c37db 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
@@ -5,14 +5,14 @@ export type InfoButtonSlots = {
   root: NonNullable<Slot<'button'>>;
 
   /**
-   * The Popover element that wraps the content and root. Use this slot to pass props to the Popover.
+   * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.
    */
   popover: NonNullable<Slot<Partial<PopoverProps>>>;
 
   /**
-   * The content to be displayed in the PopoverSurface when the button is pressed.
+   * The information to be displayed in the PopoverSurface when the button is pressed.
    */
-  content: NonNullable<Slot<typeof PopoverSurface>>;
+  info: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
 /**
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx
index 2b2884a7965eb..2e3c89e8ee9f3 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx
@@ -15,7 +15,7 @@ export const renderInfoButton_unstable = (state: InfoButtonState) => {
       <PopoverTrigger>
         <slots.root {...slotProps.root} />
       </PopoverTrigger>
-      <slots.content {...slotProps.content} />
+      <slots.info {...slotProps.info} />
     </slots.popover>
   );
 };
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 b695ca5fea447..4acba3a4f1aa4 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
@@ -36,7 +36,7 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HT
     components: {
       root: 'button',
       popover: Popover as React.FC<Partial<PopoverProps>>,
-      content: PopoverSurface,
+      info: PopoverSurface,
     },
 
     root: getNativeElementProps('button', {
@@ -54,7 +54,7 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HT
         withArrow: true,
       },
     }),
-    content: resolveShorthand(props.content, {
+    info: resolveShorthand(props.info, {
       required: true,
       defaultProps: {
         role: 'note',
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts
index 10e91894f03c8..bdae8df9d037c 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts
@@ -9,7 +9,7 @@ export const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {
   root: 'fui-InfoButton',
   // this className won't be used, but it's needed to satisfy the type checker
   popover: 'fui-InfoButton__popover',
-  content: 'fui-InfoButton__content',
+  info: 'fui-InfoButton__info',
 };
 
 /**
@@ -107,10 +107,10 @@ export const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButton
   const buttonStyles = useButtonStyles();
   const popoverSurfaceStyles = usePopoverSurfaceStyles();
 
-  state.content.className = mergeClasses(
-    infoButtonClassNames.content,
+  state.info.className = mergeClasses(
+    infoButtonClassNames.info,
     size === 'large' && popoverSurfaceStyles.large,
-    state.content.className,
+    state.info.className,
   );
 
   state.root.className = mergeClasses(
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx
index 5e8f9ddb9a6a1..95c7ec9676b0e 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx
@@ -25,8 +25,8 @@ describe('InfoLabel', () => {
     expect(result.getByRole('button')).toBeTruthy();
   });
 
-  it("renders an InfoButton when the infoButton slot's content is set", () => {
-    const result = render(<InfoLabel infoButton={{ content: 'Test' }}>Test label</InfoLabel>);
+  it("renders an InfoButton when the infoButton's info slot is set", () => {
+    const result = render(<InfoLabel infoButton={{ info: 'Test' }}>Test label</InfoLabel>);
     expect(result.getByRole('button')).toBeTruthy();
   });
 
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
index bc268c3c5d0ad..2f638efe89c9b 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
@@ -30,9 +30,9 @@ export type InfoLabelSlots = {
  */
 export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
   /**
-   * The content of the InfoButton's popover.
+   * The information of the InfoButton's popover.
    */
-  info?: InfoButtonProps['content'];
+  info?: InfoButtonProps['info'];
 };
 
 /**
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts
index 02a30345d8460..1c771d22c3e80 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts
@@ -48,7 +48,7 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTML
     required: !!info,
     defaultProps: {
       id: useId('infobutton-'),
-      content: info,
+      info,
       size,
     },
   });
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md
index a46580ec87b04..d1c867587ab35 100644
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md
+++ b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md
@@ -5,6 +5,6 @@ Best Practices
 
 ### Don't
 
-- Because the Popover isn't always visible, don't include information in the InfoButton's content that people must know in order to complete the field.
+- Because the Popover isn't always visible, don't include information in the InfoButton that people must know in order to complete the field.
 
 </details>
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 6d0892297b69d..76a4ab5c344a9 100644
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
+++ b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
@@ -7,7 +7,7 @@ export const Default = (props: Partial<InfoLabelProps>) => (
   <InfoLabel
     info={
       <>
-        This is example content for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
+        This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
       </>
     }
     {...props}
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 63dd8419d4542..337698c2baf85 100644
--- a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx
+++ b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx
@@ -5,9 +5,9 @@ import { Link } from '@fluentui/react-components';
 export const Default = (props: Partial<InfoButtonProps>) => (
   <InfoButton
     {...props}
-    content={
+    info={
       <>
-        This is example content for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
+        This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
       </>
     }
   />
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 030ce8b15c7bc..ef4aaff014996 100644
--- a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonSize.stories.tsx
+++ b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonSize.stories.tsx
@@ -19,27 +19,30 @@ export const Size = () => {
     <div className={styles.base}>
       <InfoButton
         size="small"
-        content={
+        info={
           <>
-            This is example content for a small InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>.
+            This is example information for a small InfoButton.{' '}
+            <Link href="https://react.fluentui.dev">Learn more</Link>.
           </>
         }
       />
 
       <InfoButton
         size="medium"
-        content={
+        info={
           <>
-            This is example content for a medium InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>.
+            This is example information for a medium InfoButton.{' '}
+            <Link href="https://react.fluentui.dev">Learn more</Link>.
           </>
         }
       />
 
       <InfoButton
         size="large"
-        content={
+        info={
           <>
-            This is example content for a large InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>.
+            This is example information for a large InfoButton.{' '}
+            <Link href="https://react.fluentui.dev">Learn more</Link>.
           </>
         }
       />

From 99ab00e69e8e862386865dbfd79995056fd488a2 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Thu, 23 Mar 2023 15:49:29 -0700
Subject: [PATCH 2/5] change file

---
 ...ct-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json

diff --git a/change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json b/change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json
new file mode 100644
index 0000000000000..874edfa64cb5b
--- /dev/null
+++ b/change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Rename content slot to info slot.",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}

From 00accbc9c87dccaa02e2ee62c6a62d50643fd54a Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 23 Mar 2023 15:50:49 -0700
Subject: [PATCH 3/5] Update
 change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json

---
 ...i-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json b/change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json
index 874edfa64cb5b..dc638e760d65d 100644
--- a/change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json
+++ b/change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "chore: Rename content slot to info slot.",
+  "comment": "chore: Rename content slot to info.",
   "packageName": "@fluentui/react-infobutton",
   "email": "esteban.230@hotmail.com",
   "dependentChangeType": "patch"

From 53a88e39549b3bc20322b2d00fea45430b7a46f5 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Fri, 24 Mar 2023 10:17:43 -0700
Subject: [PATCH 4/5] updating usage in perf and vr tests

---
 .../src/scenarios/InfoButton.tsx                          | 2 +-
 .../src/stories/InfoButton.stories.tsx                    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/perf-test-react-components/src/scenarios/InfoButton.tsx b/apps/perf-test-react-components/src/scenarios/InfoButton.tsx
index 51fd802f21bb5..b69e1fb066f6e 100644
--- a/apps/perf-test-react-components/src/scenarios/InfoButton.tsx
+++ b/apps/perf-test-react-components/src/scenarios/InfoButton.tsx
@@ -3,7 +3,7 @@ import { InfoButton } from '@fluentui/react-infobutton';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 
-const Scenario = () => <InfoButton content={"This is an InfoButton's content."} />;
+const Scenario = () => <InfoButton info={"This is an InfoButton's content."} />;
 
 Scenario.decorator = (props: { children: React.ReactNode }) => {
   <FluentProvider theme={webLightTheme}>{props.children}</FluentProvider>;
diff --git a/apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx b/apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx
index 81f93526e9555..f92637535673a 100644
--- a/apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx
@@ -26,7 +26,7 @@ storiesOf('InfoButton', module)
     'default',
     () => (
       <div style={{ display: 'flex', alignItems: 'flex-end', padding: '10px', minHeight: '80px' }}>
-        <InfoButton className="info-button" content="This is the content of an InfoButton." />
+        <InfoButton className="info-button" info="This is the content of an InfoButton." />
       </div>
     ),
     {
@@ -52,8 +52,8 @@ storiesOf('InfoButton', module)
         alignItems: 'start',
       }}
     >
-      <InfoButton size="small" content="This is the content of an InfoButton." popover={{ open: true }} />
-      <InfoButton size="medium" content="This is the content of an InfoButton." popover={{ open: true }} />
-      <InfoButton size="large" content="This is the content of an InfoButton." popover={{ open: true }} />
+      <InfoButton size="small" info="This is the content of an InfoButton." popover={{ open: true }} />
+      <InfoButton size="medium" info="This is the content of an InfoButton." popover={{ open: true }} />
+      <InfoButton size="large" info="This is the content of an InfoButton." popover={{ open: true }} />
     </div>
   ));

From c6b2bb0ffda27729c4d4f68a12814f8fd33ec4f5 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Fri, 24 Mar 2023 10:19:33 -0700
Subject: [PATCH 5/5] requested changes

---
 .../src/components/InfoLabel/InfoLabel.types.ts                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
index 2f638efe89c9b..f35a9f99533df 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
@@ -30,7 +30,7 @@ export type InfoLabelSlots = {
  */
 export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
   /**
-   * The information of the InfoButton's popover.
+   * The content of the InfoButton's popover.
    */
   info?: InfoButtonProps['info'];
 };