From 98acf6fcb45728dffccbfbac701d8c79fd6fe2a5 Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 19 Oct 2023 22:45:59 +0000
Subject: [PATCH 1/5] chore: Update vr-tests to only use react-infolabel.

---
 apps/vr-tests-react-components/package.json   |  2 +-
 .../src/stories/InfoButton.stories.tsx        | 59 -------------------
 .../src/stories/InfoLabel.stories.tsx         | 26 +++++++-
 3 files changed, 26 insertions(+), 61 deletions(-)
 delete mode 100644 apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index 5e2b6c76975d84..9a16541fdf5256 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -36,7 +36,7 @@
     "@fluentui/react-field": "*",
     "@fluentui/react-icons": "^2.0.217",
     "@fluentui/react-image": "*",
-    "@fluentui/react-infobutton": ">=9.0.0-alpha",
+    "@fluentui/react-infolabel": "9.0.0-alpha.0",
     "@fluentui/react-input": "*",
     "@fluentui/react-label": "*",
     "@fluentui/react-link": "*",
diff --git a/apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx b/apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx
deleted file mode 100644
index f92637535673a9..00000000000000
--- a/apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { InfoButton } from '@fluentui/react-infobutton';
-import { storiesOf } from '@storybook/react';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('InfoButton', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('rest', { cropTo: '.testWrapper' })
-        // keys 'tab' is used instead of .focus, since .focus won't show the focus indicator.
-        .keys('.info-button', 'Tab')
-        .snapshot('focus', { cropTo: '.testWrapper' })
-        .hover('.info-button')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .click('.info-button')
-        .snapshot('active', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory(
-    'default',
-    () => (
-      <div style={{ display: 'flex', alignItems: 'flex-end', padding: '10px', minHeight: '80px' }}>
-        <InfoButton className="info-button" info="This is the content of an InfoButton." />
-      </div>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  );
-
-storiesOf('InfoButton', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('size', () => (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        paddingTop: '60px',
-        paddingLeft: '10px',
-        paddingBottom: '10px',
-        gap: '80px',
-        alignItems: 'start',
-      }}
-    >
-      <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/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx b/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx
index 5d8a4b85c29712..c6d6c62e0fb434 100644
--- a/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Steps, StoryWright } from 'storywright';
-import { InfoLabel } from '@fluentui/react-infobutton';
+import { InfoLabel } from '@fluentui/react-infolabel';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
 
@@ -41,3 +41,27 @@ storiesOf('InfoLabel', module)
       includeRtl: true,
     },
   );
+
+// Opened states
+storiesOf('InfoLabel', module)
+  .addDecorator(TestWrapperDecoratorFixedWidth)
+  .addDecorator(story => (
+    <StoryWright steps={new Steps().click('.testButton').snapshot('rest', { cropTo: '.testWrapper' }).end()}>
+      {story()}
+    </StoryWright>
+  ))
+  .addStory('size: small', () => (
+    <InfoLabel size="small" infoButton={{ className: 'testButton' }} info="Test">
+      This is an info label
+    </InfoLabel>
+  ))
+  .addStory('size: medium', () => (
+    <InfoLabel size="medium" infoButton={{ className: 'testButton' }} info="Test">
+      This is an info label
+    </InfoLabel>
+  ))
+  .addStory('size: large', () => (
+    <InfoLabel size="large" infoButton={{ className: 'testButton' }} info="Test">
+      This is an info label
+    </InfoLabel>
+  ));

From af3293849d5d482c88adb4862945b211eebfc54d Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 19 Oct 2023 22:47:57 +0000
Subject: [PATCH 2/5] remove infobutton from perf app

---
 apps/perf-test-react-components/package.json         |  1 -
 .../src/scenarios/InfoButton.tsx                     | 12 ------------
 2 files changed, 13 deletions(-)
 delete mode 100644 apps/perf-test-react-components/src/scenarios/InfoButton.tsx

diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
index 7a8a0d07c46b3a..41cdbe054ed6a7 100644
--- a/apps/perf-test-react-components/package.json
+++ b/apps/perf-test-react-components/package.json
@@ -22,7 +22,6 @@
     "@fluentui/react-avatar": "*",
     "@fluentui/react-button": "*",
     "@fluentui/react-field": "*",
-    "@fluentui/react-infobutton": ">=9.0.0-alpha",
     "@fluentui/react-persona": "*",
     "@fluentui/react-provider": "*",
     "@fluentui/react-spinbutton": "*",
diff --git a/apps/perf-test-react-components/src/scenarios/InfoButton.tsx b/apps/perf-test-react-components/src/scenarios/InfoButton.tsx
deleted file mode 100644
index b69e1fb066f6e3..00000000000000
--- a/apps/perf-test-react-components/src/scenarios/InfoButton.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { InfoButton } from '@fluentui/react-infobutton';
-import { FluentProvider } from '@fluentui/react-provider';
-import { webLightTheme } from '@fluentui/react-theme';
-
-const Scenario = () => <InfoButton info={"This is an InfoButton's content."} />;
-
-Scenario.decorator = (props: { children: React.ReactNode }) => {
-  <FluentProvider theme={webLightTheme}>{props.children}</FluentProvider>;
-};
-
-export default Scenario;

From a12135b39bd9a7c3b1fa38ba1285215a118289db Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 19 Oct 2023 23:19:46 +0000
Subject: [PATCH 3/5] update dependency

---
 apps/vr-tests-react-components/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index 9a16541fdf5256..86f6bd84d9ad09 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -36,7 +36,7 @@
     "@fluentui/react-field": "*",
     "@fluentui/react-icons": "^2.0.217",
     "@fluentui/react-image": "*",
-    "@fluentui/react-infolabel": "9.0.0-alpha.0",
+    "@fluentui/react-infolabel": "*",
     "@fluentui/react-input": "*",
     "@fluentui/react-label": "*",
     "@fluentui/react-link": "*",

From 8d8aa3b2b7c015edd0c09d151432cc830aaf851f Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 19 Oct 2023 23:30:00 +0000
Subject: [PATCH 4/5] fix verison issue

---
 apps/vr-tests-react-components/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index 86f6bd84d9ad09..9bc3afbc3e5274 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -36,7 +36,7 @@
     "@fluentui/react-field": "*",
     "@fluentui/react-icons": "^2.0.217",
     "@fluentui/react-image": "*",
-    "@fluentui/react-infolabel": "*",
+    "@fluentui/react-infolabel": ">=9.0.0-alpha",
     "@fluentui/react-input": "*",
     "@fluentui/react-label": "*",
     "@fluentui/react-link": "*",

From a440fcd745aeac62889111e998db2163299b691f Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Fri, 20 Oct 2023 00:00:13 +0000
Subject: [PATCH 5/5] make single story for sizes

---
 .../src/stories/InfoLabel.stories.tsx         | 41 ++++++++-----------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx b/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx
index c6d6c62e0fb434..17cb7e5a9b5262 100644
--- a/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx
@@ -40,28 +40,21 @@ storiesOf('InfoLabel', module)
     {
       includeRtl: true,
     },
-  );
-
-// Opened states
-storiesOf('InfoLabel', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().click('.testButton').snapshot('rest', { cropTo: '.testWrapper' }).end()}>
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('size: small', () => (
-    <InfoLabel size="small" infoButton={{ className: 'testButton' }} info="Test">
-      This is an info label
-    </InfoLabel>
-  ))
-  .addStory('size: medium', () => (
-    <InfoLabel size="medium" infoButton={{ className: 'testButton' }} info="Test">
-      This is an info label
-    </InfoLabel>
-  ))
-  .addStory('size: large', () => (
-    <InfoLabel size="large" infoButton={{ className: 'testButton' }} info="Test">
-      This is an info label
-    </InfoLabel>
+  )
+  .addStory('sizes -- open', () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        paddingTop: '60px',
+        paddingLeft: '10px',
+        paddingBottom: '10px',
+        gap: '80px',
+        alignItems: 'start',
+      }}
+    >
+      <InfoLabel size="small" info="This is the content of an InfoButton." infoButton={{ popover: { open: true } }} />
+      <InfoLabel size="medium" info="This is the content of an InfoButton." infoButton={{ popover: { open: true } }} />
+      <InfoLabel size="large" info="This is the content of an InfoButton." infoButton={{ popover: { open: true } }} />
+    </div>
   ));