microsoft · sopranopillow · Mar 24, 2023 · Mar 23, 2023 · Mar 23, 2023 · Mar 23, 2023
@@ -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>;

@@ -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>
   ));
diff --git a/change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json b/change/@fluentui-react-infobutton-e5984e77-89ae-4c61-85e0-984121adb4e5.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Rename content slot to info.",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -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>

@@ -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)

@@ -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,
         },

@@ -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>>;
 };
 
 /**

@@ -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>
   );
 };
@@ -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',

@@ -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(

@@ -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();
   });
 

@@ -32,7 +32,7 @@ export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> &
   /**
    * The content of the InfoButton's popover.
    */
-  info?: InfoButtonProps['content'];
+  info?: InfoButtonProps['info'];
 };
 
 /**

@@ -48,7 +48,7 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTML
     required: !!info,
     defaultProps: {
       id: useId('infobutton-'),
-      content: info,
+      info,
       size,
     },
   });

@@ -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>
@@ -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}

@@ -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>
       </>
     }
   />

@@ -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>.
           </>
         }
       />
-Original file line number
+Diff line change
@@ Expand Up @@
       /**
        * The content of the InfoButton's popover.
        */
-      info?: InfoButtonProps['content'];
+      info?: InfoButtonProps['info'];
     };
     /**
@@ Expand Down @@