From 369450894184beb07e50aa474a2a219cfb483ac9 Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 19 Oct 2023 23:16:49 +0000
Subject: [PATCH 1/9] chore: Deprecate InfoLabel and InfoButton from
 react-infobutton in favor of react-inflabel.

---
 .../react-components/src/unstable/index.ts                 | 2 ++
 .../react-infobutton/etc/react-infobutton.api.md           | 4 ++--
 .../src/components/InfoButton/InfoButton.test.tsx          | 1 +
 .../src/components/InfoButton/InfoButton.tsx               | 3 +++
 .../src/components/InfoLabel/InfoLabel.cy.tsx              | 3 +++
 .../src/components/InfoLabel/InfoLabel.test.tsx            | 7 +++++++
 .../src/components/InfoLabel/InfoLabel.tsx                 | 3 +++
 .../src/components/InfoLabel/InfoLabel.types.ts            | 3 ++-
 .../src/components/InfoLabel/useInfoLabel.ts               | 2 ++
 packages/react-components/react-infobutton/src/index.ts    | 2 ++
 10 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
index 3cdc2426a02c89..296e4d53731782 100644
--- a/packages/react-components/react-components/src/unstable/index.ts
+++ b/packages/react-components/react-components/src/unstable/index.ts
@@ -10,11 +10,13 @@ export {
 export type { AlertProps, AlertSlots, AlertState } from '@fluentui/react-alert';
 
 export {
+  // eslint-disable-next-line deprecation/deprecation
   InfoButton,
   infoButtonClassNames,
   useInfoButton_unstable,
   useInfoButtonStyles_unstable,
   renderInfoButton_unstable,
+  // eslint-disable-next-line deprecation/deprecation
   InfoLabel,
   infoLabelClassNames,
   renderInfoLabel_unstable,
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 eaef9267d548d4..7497ad3f6c6ede 100644
--- a/packages/react-components/react-infobutton/etc/react-infobutton.api.md
+++ b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
@@ -16,7 +16,7 @@ import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-// @public
+// @public @deprecated
 export const InfoButton: ForwardRefComponent<InfoButtonProps>;
 
 // @public (undocumented)
@@ -38,7 +38,7 @@ export type InfoButtonSlots = {
 // @public
 export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
 
-// @public
+// @public @deprecated
 export const InfoLabel: ForwardRefComponent<InfoLabelProps>;
 
 // @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 68c1fb065394c9..5157610124e829 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
@@ -24,6 +24,7 @@ const getPopoverSurfaceElement = (result: RenderResult) => {
 
 describe('InfoButton', () => {
   isConformant({
+    // eslint-disable-next-line deprecation/deprecation
     Component: InfoButton,
     displayName: 'InfoButton',
     requiredProps: {
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
index 626c887e3503f6..f5f99f51756464 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
@@ -7,6 +7,8 @@ import type { InfoButtonProps } from './InfoButton.types';
 
 /**
  * InfoButtons provide a way to display additional information about a form field or an area in the UI.
+ *
+ * @deprecated use {@link [InfoLabel](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx)} from `@fluentui/react-components` or `@fluentui/react-infolabel` instead
  */
 export const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {
   const state = useInfoButton_unstable(props, ref);
@@ -15,4 +17,5 @@ export const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef
   return renderInfoButton_unstable(state);
 });
 
+// eslint-disable-next-line deprecation/deprecation
 InfoButton.displayName = 'InfoButton';
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx
index f251f54f816da6..9de4cc77d18267 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx
@@ -18,6 +18,7 @@ describe('InfoLabel - close on tab-out', () => {
   };
 
   it('no focusable elements', () => {
+    // eslint-disable-next-line deprecation/deprecation
     mount(<InfoLabel label="InfoLabel's label" info="Example non-focusable info" />);
 
     openInfoButton();
@@ -28,6 +29,7 @@ describe('InfoLabel - close on tab-out', () => {
 
   it('single focusable element', () => {
     mount(
+      // eslint-disable-next-line deprecation/deprecation
       <InfoLabel
         label="InfoLabel's label"
         info={
@@ -53,6 +55,7 @@ describe('InfoLabel - close on tab-out', () => {
 
   it('one or more focusable elements', () => {
     mount(
+      // eslint-disable-next-line deprecation/deprecation
       <InfoLabel
         label="InfoLabel's label"
         info={
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 15b0bd31454d92..cad261d903220f 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
@@ -6,6 +6,7 @@ import { InfoLabel } from './InfoLabel';
 
 describe('InfoLabel', () => {
   isConformant({
+    // eslint-disable-next-line deprecation/deprecation
     Component: InfoLabel,
     displayName: 'InfoLabel',
     primarySlot: 'label',
@@ -21,21 +22,25 @@ describe('InfoLabel', () => {
   });
 
   it('renders an InfoButton when info is set', () => {
+    // eslint-disable-next-line deprecation/deprecation
     const result = render(<InfoLabel info="Test">Test label</InfoLabel>);
     expect(result.getByRole('button')).toBeTruthy();
   });
 
   it("renders an InfoButton when the infoButton's info slot is set", () => {
+    // eslint-disable-next-line deprecation/deprecation
     const result = render(<InfoLabel infoButton={{ info: 'Test' }}>Test label</InfoLabel>);
     expect(result.getByRole('button')).toBeTruthy();
   });
 
   it('does not render an InfoButton when info is not set', () => {
+    // eslint-disable-next-line deprecation/deprecation
     const result = render(<InfoLabel>Test label</InfoLabel>);
     expect(result.queryByRole('button')).toBeNull();
   });
 
   it('sets the infoButton aria-labelledby to the label and infoButton', () => {
+    // eslint-disable-next-line deprecation/deprecation
     const result = render(<InfoLabel info="Test">Test label</InfoLabel>);
 
     const infoButton = result.getByRole('button');
@@ -45,6 +50,7 @@ describe('InfoLabel', () => {
   });
 
   it("applies InfoButton's info slot id to aria-owns on the InfoLabel's wrapper when open", () => {
+    // eslint-disable-next-line deprecation/deprecation
     const { container } = render(<InfoLabel className="info-label-wrapper" info={{ id: 'test-id' }} />);
     expect(container.getElementsByClassName('info-label-wrapper')[0].getAttribute('aria-owns')).toBeNull();
 
@@ -54,6 +60,7 @@ describe('InfoLabel', () => {
   });
 
   it("applies InfoButton's correct id to aria-owns on the InfoLabel's wrapper when id is provided to the infoButton slot", () => {
+    // eslint-disable-next-line deprecation/deprecation
     const { container } = render(<InfoLabel className="info-label-wrapper" infoButton={{ info: { id: 'test-id' } }} />);
     expect(container.getElementsByClassName('info-label-wrapper')[0].getAttribute('aria-owns')).toBeNull();
 
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
index 69b12ad1e0577c..566d1dd773b53f 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
@@ -8,6 +8,8 @@ import { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
 
 /**
  * InfoLabel component
+ *
+ * @deprecated use {@link [InfoLabel](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx)} from `@fluentui/react-components` or `@fluentui/react-infolabel` instead
  */
 export const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {
   const state = useInfoLabel_unstable(props, ref);
@@ -16,4 +18,5 @@ export const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((
   return renderInfoLabel_unstable(state);
 });
 
+// eslint-disable-next-line deprecation/deprecation
 InfoLabel.displayName = 'InfoLabel';
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 f35a9f99533dff..8932972c4d3a4c 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
@@ -1,6 +1,6 @@
 import { Label } from '@fluentui/react-label';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import { InfoButton } from '../InfoButton';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { InfoButtonProps } from '../InfoButton';
 
 export type InfoLabelSlots = {
@@ -22,6 +22,7 @@ export type InfoLabelSlots = {
    *
    * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.
    */
+  // eslint-disable-next-line deprecation/deprecation
   infoButton: Slot<typeof InfoButton>;
 };
 
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 16d396cc600669..b811e237f70077 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts
@@ -53,6 +53,7 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTML
       size,
       info,
     },
+    // eslint-disable-next-line deprecation/deprecation
     elementType: InfoButton,
   });
 
@@ -86,6 +87,7 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTML
     components: {
       root: 'span',
       label: Label,
+      // eslint-disable-next-line deprecation/deprecation
       infoButton: InfoButton,
     },
     root,
diff --git a/packages/react-components/react-infobutton/src/index.ts b/packages/react-components/react-infobutton/src/index.ts
index 2f13cdd25b29d4..2aa2b0d96ffd5b 100644
--- a/packages/react-components/react-infobutton/src/index.ts
+++ b/packages/react-components/react-infobutton/src/index.ts
@@ -1,4 +1,5 @@
 export {
+  // eslint-disable-next-line deprecation/deprecation
   InfoButton,
   infoButtonClassNames,
   renderInfoButton_unstable,
@@ -7,6 +8,7 @@ export {
 } from './InfoButton';
 export type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';
 export {
+  // eslint-disable-next-line deprecation/deprecation
   InfoLabel,
   infoLabelClassNames,
   renderInfoLabel_unstable,

From e50f71b756b9b45b8030564647cb1eeb63d81409 Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 19 Oct 2023 23:18:20 +0000
Subject: [PATCH 2/9] change file

---
 ...ct-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json | 7 +++++++
 ...ct-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json
 create mode 100644 change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json

diff --git a/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json b/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json
new file mode 100644
index 00000000000000..336d112f6c0e84
--- /dev/null
+++ b/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Deprecate InfoLabel and InfoButton from react-infobutton in favor of react-inflabel.",
+  "packageName": "@fluentui/react-components",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json b/change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json
new file mode 100644
index 00000000000000..dfacb84c31cf7f
--- /dev/null
+++ b/change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Deprecate InfoLabel and InfoButton from react-infobutton in favor of react-inflabel.",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}

From 81c9c29f9775755932ee613ce4c44d6dd72043bb Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 19 Oct 2023 23:44:18 +0000
Subject: [PATCH 3/9] api files

---
 .../react-infobutton/src/components/InfoButton/InfoButton.tsx   | 2 +-
 .../react-infobutton/src/components/InfoLabel/InfoLabel.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
index f5f99f51756464..9b11be255f5d12 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
@@ -8,7 +8,7 @@ import type { InfoButtonProps } from './InfoButton.types';
 /**
  * InfoButtons provide a way to display additional information about a form field or an area in the UI.
  *
- * @deprecated use {@link [InfoLabel](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx)} from `@fluentui/react-components` or `@fluentui/react-infolabel` instead
+ * @deprecated use {@link [InfoLabel](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx)} from \`@fluentui/react-components\` or \`@fluentui/react-infolabel\` instead
  */
 export const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {
   const state = useInfoButton_unstable(props, ref);
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
index 566d1dd773b53f..dc0350f70ae58b 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
@@ -9,7 +9,7 @@ import { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
 /**
  * InfoLabel component
  *
- * @deprecated use {@link [InfoLabel](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx)} from `@fluentui/react-components` or `@fluentui/react-infolabel` instead
+ * @deprecated use {@link [InfoLabel](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx)} from \`@fluentui/react-components\` or \`@fluentui/react-infolabel\` instead
  */
 export const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {
   const state = useInfoLabel_unstable(props, ref);

From 87f5e6499f92892a08710a8a9a4ffe798f3b2bcd Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Mon, 23 Oct 2023 10:23:56 -0700
Subject: [PATCH 4/9] update dependency in field

---
 .../react-field/stories/Field/FieldInfo.stories.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-field/stories/Field/FieldInfo.stories.tsx b/packages/react-components/react-field/stories/Field/FieldInfo.stories.tsx
index a783f70fa423ef..396811ce62c487 100644
--- a/packages/react-components/react-field/stories/Field/FieldInfo.stories.tsx
+++ b/packages/react-components/react-field/stories/Field/FieldInfo.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Field, Input, LabelProps } from '@fluentui/react-components';
-import { InfoLabel } from '@fluentui/react-components/unstable';
+import { InfoLabel } from '@fluentui/react-components';
 
 export const Info = () => (
   <Field

From 89b5296736899bfedc5e34780906b41677c78d11 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Mon, 23 Oct 2023 10:49:31 -0700
Subject: [PATCH 5/9] update API

---
 .../react-infobutton/src/components/InfoButton/InfoButton.tsx   | 2 +-
 .../react-infobutton/src/components/InfoLabel/InfoLabel.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
index 9b11be255f5d12..bf63f569747ae4 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
@@ -8,7 +8,7 @@ import type { InfoButtonProps } from './InfoButton.types';
 /**
  * InfoButtons provide a way to display additional information about a form field or an area in the UI.
  *
- * @deprecated use {@link [InfoLabel](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx)} from \`@fluentui/react-components\` or \`@fluentui/react-infolabel\` instead
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {
   const state = useInfoButton_unstable(props, ref);
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
index dc0350f70ae58b..0e3dfa315226fa 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
@@ -9,7 +9,7 @@ import { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
 /**
  * InfoLabel component
  *
- * @deprecated use {@link [InfoLabel](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx)} from \`@fluentui/react-components\` or \`@fluentui/react-infolabel\` instead
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {
   const state = useInfoLabel_unstable(props, ref);

From 5f3d0a361c271fb3f16a8239f4dda363ad548252 Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Mon, 23 Oct 2023 15:15:45 -0700
Subject: [PATCH 6/9] Update
 change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
---
 ...i-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json b/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json
index 336d112f6c0e84..cb4c1d3bc6ed3d 100644
--- a/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json
+++ b/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "chore: Deprecate InfoLabel and InfoButton from react-infobutton in favor of react-inflabel.",
+  "comment": "chore: Deprecate InfoLabel and InfoButton from react-infobutton in favor of react-infolabel.",
   "packageName": "@fluentui/react-components",
   "email": "esteban.230@hotmail.com",
   "dependentChangeType": "patch"

From b57f100fa37c5793c3d8a96e2a8c94cc1f122703 Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Mon, 23 Oct 2023 15:15:54 -0700
Subject: [PATCH 7/9] Update
 change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
---
 ...i-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json b/change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json
index dfacb84c31cf7f..6bd53c0a5943cc 100644
--- a/change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json
+++ b/change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "chore: Deprecate InfoLabel and InfoButton from react-infobutton in favor of react-inflabel.",
+  "comment": "chore: Deprecate InfoLabel and InfoButton from react-infobutton in favor of react-infolabel.",
   "packageName": "@fluentui/react-infobutton",
   "email": "esteban.230@hotmail.com",
   "dependentChangeType": "patch"

From 303fd7412a6c2d3f29e83c98ca7ef593725fa910 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Mon, 23 Oct 2023 16:28:33 -0700
Subject: [PATCH 8/9] deprecating all exported items

---
 .../react-components/src/unstable/index.ts    |  4 +--
 .../etc/react-infobutton.api.md               | 26 +++++++++----------
 .../components/InfoButton/InfoButton.test.tsx |  2 +-
 .../src/components/InfoButton/InfoButton.tsx  |  2 +-
 .../components/InfoButton/InfoButton.types.ts |  8 ++++++
 .../InfoButton/renderInfoButton.tsx           |  3 +++
 .../components/InfoButton/useInfoButton.tsx   |  3 +++
 .../InfoButton/useInfoButtonStyles.styles.ts  |  6 +++++
 .../src/components/InfoLabel/InfoLabel.cy.tsx |  4 +--
 .../components/InfoLabel/InfoLabel.test.tsx   |  8 +-----
 .../src/components/InfoLabel/InfoLabel.tsx    |  2 +-
 .../components/InfoLabel/InfoLabel.types.ts   |  9 ++++++-
 .../components/InfoLabel/renderInfoLabel.tsx  |  3 +++
 .../src/components/InfoLabel/useInfoLabel.ts  |  5 ++--
 .../InfoLabel/useInfoLabelStyles.styles.ts    |  6 +++++
 .../react-infobutton/src/index.ts             |  3 +--
 16 files changed, 61 insertions(+), 33 deletions(-)

diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
index 296e4d53731782..9f683bf65473ea 100644
--- a/packages/react-components/react-components/src/unstable/index.ts
+++ b/packages/react-components/react-components/src/unstable/index.ts
@@ -9,14 +9,13 @@ export {
 } from '@fluentui/react-alert';
 export type { AlertProps, AlertSlots, AlertState } from '@fluentui/react-alert';
 
+/* eslint-disable deprecation/deprecation */
 export {
-  // eslint-disable-next-line deprecation/deprecation
   InfoButton,
   infoButtonClassNames,
   useInfoButton_unstable,
   useInfoButtonStyles_unstable,
   renderInfoButton_unstable,
-  // eslint-disable-next-line deprecation/deprecation
   InfoLabel,
   infoLabelClassNames,
   renderInfoLabel_unstable,
@@ -31,6 +30,7 @@ export type {
   InfoLabelSlots,
   InfoLabelState,
 } from '@fluentui/react-infobutton';
+/* eslint-enable deprecation/deprecation */
 
 export {
   Virtualizer,
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 7497ad3f6c6ede..c9d80fc87725c7 100644
--- a/packages/react-components/react-infobutton/etc/react-infobutton.api.md
+++ b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
@@ -19,62 +19,62 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public @deprecated
 export const InfoButton: ForwardRefComponent<InfoButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const infoButtonClassNames: SlotClassNames<InfoButtonSlots>;
 
-// @public
+// @public @deprecated
 export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {
     size?: 'small' | 'medium' | 'large';
     inline?: boolean;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export type InfoButtonSlots = {
     root: NonNullable<Slot<'button'>>;
     popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;
     info: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
-// @public
+// @public @deprecated
 export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
 
 // @public @deprecated
 export const InfoLabel: ForwardRefComponent<InfoLabelProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const infoLabelClassNames: SlotClassNames<InfoLabelSlots>;
 
-// @public
+// @public @deprecated
 export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
     info?: InfoButtonProps['info'];
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export type InfoLabelSlots = {
     root: NonNullable<Slot<'span'>>;
     label: NonNullable<Slot<typeof Label>>;
     infoButton: Slot<typeof InfoButton>;
 };
 
-// @public
+// @public @deprecated
 export type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;
 
-// @public
+// @public @deprecated
 export const renderInfoButton_unstable: (state: InfoButtonState) => JSX.Element;
 
-// @public
+// @public @deprecated
 export const renderInfoLabel_unstable: (state: InfoLabelState) => JSX.Element;
 
-// @public
+// @public @deprecated
 export const useInfoButton_unstable: (props: InfoButtonProps, ref: React_2.Ref<HTMLElement>) => InfoButtonState;
 
 // @public
 export const useInfoButtonStyles_unstable: (state: InfoButtonState) => InfoButtonState;
 
-// @public
+// @public @deprecated
 export const useInfoLabel_unstable: (props: InfoLabelProps, ref: React_2.Ref<HTMLLabelElement>) => InfoLabelState;
 
-// @public
+// @public @deprecated
 export const useInfoLabelStyles_unstable: (state: InfoLabelState) => InfoLabelState;
 
 // (No @packageDocumentation comment for this package)
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 5157610124e829..29174140eaa51b 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
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import { InfoButton } from './InfoButton';
 import { isConformant } from '../../testing/isConformant';
 import { infoButtonClassNames } from './useInfoButtonStyles.styles';
@@ -24,7 +25,6 @@ const getPopoverSurfaceElement = (result: RenderResult) => {
 
 describe('InfoButton', () => {
   isConformant({
-    // eslint-disable-next-line deprecation/deprecation
     Component: InfoButton,
     displayName: 'InfoButton',
     requiredProps: {
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
index bf63f569747ae4..bfaa837a44d731 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { ForwardRefComponent } from '@fluentui/react-utilities';
 import { renderInfoButton_unstable } from './renderInfoButton';
@@ -17,5 +18,4 @@ export const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef
   return renderInfoButton_unstable(state);
 });
 
-// eslint-disable-next-line deprecation/deprecation
 InfoButton.displayName = 'InfoButton';
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 d6327f0f00f959..a678c59a85831d 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
@@ -1,6 +1,10 @@
+/* eslint-disable deprecation/deprecation */
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';
 
+/**
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */
 export type InfoButtonSlots = {
   root: NonNullable<Slot<'button'>>;
 
@@ -17,6 +21,8 @@ export type InfoButtonSlots = {
 
 /**
  * InfoButton Props
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {
   /**
@@ -36,5 +42,7 @@ export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'di
 
 /**
  * State used in rendering InfoButton
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
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 030e5e7e00ef3e..d7eeff7f4a4ed2 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 
@@ -7,6 +8,8 @@ import type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';
 
 /**
  * Render the final JSX of InfoButton
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const renderInfoButton_unstable = (state: InfoButtonState) => {
   assertSlots<InfoButtonSlots>(state);
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 ddef14e305557c..92918753e8ca46 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
 import {
@@ -33,6 +34,8 @@ const popoverSizeMap = {
  *
  * @param props - props from this instance of InfoButton
  * @param ref - reference to root HTMLElement of InfoButton
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {
   const { size = 'medium', inline = true } = props;
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts
index 79fecc9c72d473..52447d92506305 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
@@ -5,6 +6,9 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
 import type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */
 export const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {
   root: 'fui-InfoButton',
   // this className won't be used, but it's needed to satisfy the type checker
@@ -14,6 +18,8 @@ export const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {
 
 /**
  * Styles for the root slot
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 const useButtonStyles = makeStyles({
   base: {
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx
index 9de4cc77d18267..0021bc1ba9edfb 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 /// <reference types="cypress-real-events" />
 
 import * as React from 'react';
@@ -18,7 +19,6 @@ describe('InfoLabel - close on tab-out', () => {
   };
 
   it('no focusable elements', () => {
-    // eslint-disable-next-line deprecation/deprecation
     mount(<InfoLabel label="InfoLabel's label" info="Example non-focusable info" />);
 
     openInfoButton();
@@ -29,7 +29,6 @@ describe('InfoLabel - close on tab-out', () => {
 
   it('single focusable element', () => {
     mount(
-      // eslint-disable-next-line deprecation/deprecation
       <InfoLabel
         label="InfoLabel's label"
         info={
@@ -55,7 +54,6 @@ describe('InfoLabel - close on tab-out', () => {
 
   it('one or more focusable elements', () => {
     mount(
-      // eslint-disable-next-line deprecation/deprecation
       <InfoLabel
         label="InfoLabel's label"
         info={
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 cad261d903220f..811b3431c0499b 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
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 
 import { fireEvent, render } from '@testing-library/react';
@@ -6,7 +7,6 @@ import { InfoLabel } from './InfoLabel';
 
 describe('InfoLabel', () => {
   isConformant({
-    // eslint-disable-next-line deprecation/deprecation
     Component: InfoLabel,
     displayName: 'InfoLabel',
     primarySlot: 'label',
@@ -22,25 +22,21 @@ describe('InfoLabel', () => {
   });
 
   it('renders an InfoButton when info is set', () => {
-    // eslint-disable-next-line deprecation/deprecation
     const result = render(<InfoLabel info="Test">Test label</InfoLabel>);
     expect(result.getByRole('button')).toBeTruthy();
   });
 
   it("renders an InfoButton when the infoButton's info slot is set", () => {
-    // eslint-disable-next-line deprecation/deprecation
     const result = render(<InfoLabel infoButton={{ info: 'Test' }}>Test label</InfoLabel>);
     expect(result.getByRole('button')).toBeTruthy();
   });
 
   it('does not render an InfoButton when info is not set', () => {
-    // eslint-disable-next-line deprecation/deprecation
     const result = render(<InfoLabel>Test label</InfoLabel>);
     expect(result.queryByRole('button')).toBeNull();
   });
 
   it('sets the infoButton aria-labelledby to the label and infoButton', () => {
-    // eslint-disable-next-line deprecation/deprecation
     const result = render(<InfoLabel info="Test">Test label</InfoLabel>);
 
     const infoButton = result.getByRole('button');
@@ -50,7 +46,6 @@ describe('InfoLabel', () => {
   });
 
   it("applies InfoButton's info slot id to aria-owns on the InfoLabel's wrapper when open", () => {
-    // eslint-disable-next-line deprecation/deprecation
     const { container } = render(<InfoLabel className="info-label-wrapper" info={{ id: 'test-id' }} />);
     expect(container.getElementsByClassName('info-label-wrapper')[0].getAttribute('aria-owns')).toBeNull();
 
@@ -60,7 +55,6 @@ describe('InfoLabel', () => {
   });
 
   it("applies InfoButton's correct id to aria-owns on the InfoLabel's wrapper when id is provided to the infoButton slot", () => {
-    // eslint-disable-next-line deprecation/deprecation
     const { container } = render(<InfoLabel className="info-label-wrapper" infoButton={{ info: { id: 'test-id' } }} />);
     expect(container.getElementsByClassName('info-label-wrapper')[0].getAttribute('aria-owns')).toBeNull();
 
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
index 0e3dfa315226fa..83cb331526ba93 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -18,5 +19,4 @@ export const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((
   return renderInfoLabel_unstable(state);
 });
 
-// eslint-disable-next-line deprecation/deprecation
 InfoLabel.displayName = 'InfoLabel';
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 8932972c4d3a4c..18dcd839170d03 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
@@ -1,8 +1,12 @@
+/* eslint-disable deprecation/deprecation */
 import { Label } from '@fluentui/react-label';
 import { InfoButton } from '../InfoButton';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { InfoButtonProps } from '../InfoButton';
 
+/**
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */
 export type InfoLabelSlots = {
   root: NonNullable<Slot<'span'>>;
 
@@ -22,12 +26,13 @@ export type InfoLabelSlots = {
    *
    * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.
    */
-  // eslint-disable-next-line deprecation/deprecation
   infoButton: Slot<typeof InfoButton>;
 };
 
 /**
  * InfoLabel Props
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
   /**
@@ -38,5 +43,7 @@ export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> &
 
 /**
  * State used in rendering InfoLabel
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx
index ebb947675bd8cc..486ae6bdb001fb 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 
@@ -6,6 +7,8 @@ import type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';
 
 /**
  * Render the final JSX of InfoLabel
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const renderInfoLabel_unstable = (state: InfoLabelState) => {
   assertSlots<InfoLabelSlots>(state);
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 b811e237f70077..0512b7cb2aa03f 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 
 import { Label } from '@fluentui/react-label';
@@ -13,6 +14,8 @@ import type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';
  *
  * @param props - props from this instance of InfoLabel
  * @param ref - reference to label element of InfoLabel
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {
   const {
@@ -53,7 +56,6 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTML
       size,
       info,
     },
-    // eslint-disable-next-line deprecation/deprecation
     elementType: InfoButton,
   });
 
@@ -87,7 +89,6 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTML
     components: {
       root: 'span',
       label: Label,
-      // eslint-disable-next-line deprecation/deprecation
       infoButton: InfoButton,
     },
     root,
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts
index 100f087f9fdec2..7327e19bc2e54a 100644
--- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts
@@ -1,8 +1,12 @@
+/* eslint-disable deprecation/deprecation */
 import { tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';
 
+/**
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */
 export const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {
   root: 'fui-InfoLabel',
   label: 'fui-InfoLabel__label',
@@ -35,6 +39,8 @@ const useInfoButtonStyles = makeStyles({
 
 /**
  * Apply styling to the InfoLabel slots based on the state
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {
   state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
diff --git a/packages/react-components/react-infobutton/src/index.ts b/packages/react-components/react-infobutton/src/index.ts
index 2aa2b0d96ffd5b..463d77df095f53 100644
--- a/packages/react-components/react-infobutton/src/index.ts
+++ b/packages/react-components/react-infobutton/src/index.ts
@@ -1,5 +1,5 @@
+/* eslint-disable deprecation/deprecation */
 export {
-  // eslint-disable-next-line deprecation/deprecation
   InfoButton,
   infoButtonClassNames,
   renderInfoButton_unstable,
@@ -8,7 +8,6 @@ export {
 } from './InfoButton';
 export type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';
 export {
-  // eslint-disable-next-line deprecation/deprecation
   InfoLabel,
   infoLabelClassNames,
   renderInfoLabel_unstable,

From 7ef65778e62b50564eb9ae0de4d467ac8d61f9ac Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Tue, 24 Oct 2023 08:23:34 -0700
Subject: [PATCH 9/9] requested change

---
 .../react-infobutton/README.md                | 27 +++----------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/packages/react-components/react-infobutton/README.md b/packages/react-components/react-infobutton/README.md
index 7e1ebd875d0a7d..f214df8dc74e52 100644
--- a/packages/react-components/react-infobutton/README.md
+++ b/packages/react-components/react-infobutton/README.md
@@ -2,28 +2,7 @@
 
 **React Infobutton components for [Fluent UI React](https://react.fluentui.dev/)**
 
-## STATUS: WIP 🚧
+# STATUS: Deprecated 🚧
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
-
-## Usage
-
-To import InfoButton:
-
-```js
-import { InfoButton } from '@fluentui/react-infobutton';
-```
-
-Once the InfoButton component graduates to a production release, the component will be available at:
-
-```js
-import { InfoButton } from '@fluentui/react-components';
-```
-
-### Examples
-
-```jsx
-const InfoButtonExample = () => {
-  return <InfoButton content="This is an InfoButton's content." />;
-};
-```
+This package has been deprecated and must no longer be used. We now provide an InfoLabel component in `@fluentui/react-components` and in `@fluentui/react-infolabel`.
+Please refer to these packages if the component is needed.