From c03114699810df56ece63f9d59af185c8601a104 Mon Sep 17 00:00:00 2001
From: KHMakoto <humberto_makoto@hotmail.com>
Date: Mon, 12 Sep 2022 15:04:17 -0700
Subject: [PATCH] Adding proper icon to Button vr stories.

---
 .../src/stories/Button.stories.tsx            | 86 +++++++++++--------
 1 file changed, 49 insertions(+), 37 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button.stories.tsx
index cbba4b0fd12c9..23c3f2e7077f1 100644
--- a/apps/vr-tests-react-components/src/stories/Button.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button.stories.tsx
@@ -2,8 +2,11 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
 import { Button, CompoundButton, ToggleButton, MenuButton } from '@fluentui/react-button';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { makeStyles } from '@griffel/react';
 
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
 const steps = new Screener.Steps()
   .snapshot('default', { cropTo: '.testWrapper' })
   .hover('#button-id')
@@ -125,19 +128,19 @@ storiesOf('Button Converged', module)
     { includeHighContrast: true, includeDarkMode: true },
   )
   .addStory('Size small', () => (
-    <Button id={buttonId} icon="X" size="small">
+    <Button id={buttonId} icon={<CalendarMonth />} size="small">
       Hello, world
     </Button>
   ))
   .addStory('Size large', () => (
-    <Button id={buttonId} icon="X" size="large">
+    <Button id={buttonId} icon={<CalendarMonth />} size="large">
       Hello, world
     </Button>
   ))
   .addStory('Size small - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <Button id={buttonId} className={styles.longText} icon="X" size="small">
+      <Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
         Long text wraps after it hits the max width of the component
       </Button>
     );
@@ -145,7 +148,7 @@ storiesOf('Button Converged', module)
   .addStory('Size medium - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <Button id={buttonId} className={styles.longText} icon="X" size="medium">
+      <Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
         Long text wraps after it hits the max width of the component
       </Button>
     );
@@ -153,7 +156,7 @@ storiesOf('Button Converged', module)
   .addStory('Size large - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <Button id={buttonId} className={styles.longText} icon="X" size="large">
+      <Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
         Long text wraps after it hits the max width of the component
       </Button>
     );
@@ -161,7 +164,7 @@ storiesOf('Button Converged', module)
   .addStory(
     'With icon before content',
     () => (
-      <Button id={buttonId} icon="X">
+      <Button id={buttonId} icon={<CalendarMonth />}>
         Hello, world
       </Button>
     ),
@@ -172,14 +175,14 @@ storiesOf('Button Converged', module)
   .addStory(
     'With icon after content',
     () => (
-      <Button id={buttonId} icon="X" iconPosition="after">
+      <Button id={buttonId} icon={<CalendarMonth />} iconPosition="after">
         Hello, world
       </Button>
     ),
     { includeRtl: true },
   )
-  .addStory('Icon only', () => <Button id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <Button id={buttonId} shape="circular" icon="X" />, {
+  .addStory('Icon only', () => <Button id={buttonId} icon={<CalendarMonth />} />)
+  .addStory('Circular and icon only', () => <Button id={buttonId} shape="circular" icon={<CalendarMonth />} />, {
     includeRtl: true,
   });
 
@@ -210,7 +213,7 @@ storiesOf('CompoundButton Converged', module)
   .addStory(
     'With icon before content',
     () => (
-      <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X">
+      <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />}>
         Hello, world
       </CompoundButton>
     ),
@@ -219,7 +222,12 @@ storiesOf('CompoundButton Converged', module)
   .addStory(
     'With icon after content',
     () => (
-      <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" iconPosition="after">
+      <CompoundButton
+        id={buttonId}
+        secondaryContent="This is some secondary text"
+        icon={<CalendarMonth />}
+        iconPosition="after"
+      >
         Hello, world
       </CompoundButton>
     ),
@@ -279,12 +287,12 @@ storiesOf('CompoundButton Converged', module)
     </CompoundButton>
   ))
   .addStory('Size small', () => (
-    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" size="small">
+    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />} size="small">
       Hello, world
     </CompoundButton>
   ))
   .addStory('Size large', () => (
-    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" size="large">
+    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />} size="large">
       Hello, world
     </CompoundButton>
   ))
@@ -295,7 +303,7 @@ storiesOf('CompoundButton Converged', module)
         id={buttonId}
         className={styles.longText}
         secondaryContent="This is some secondary text"
-        icon="X"
+        icon={<CalendarMonth />}
         size="small"
       >
         Long text wraps after it hits the max width of the component
@@ -309,7 +317,7 @@ storiesOf('CompoundButton Converged', module)
         id={buttonId}
         className={styles.longText}
         secondaryContent="This is some secondary text"
-        icon="X"
+        icon={<CalendarMonth />}
         size="medium"
       >
         Long text wraps after it hits the max width of the component
@@ -323,17 +331,21 @@ storiesOf('CompoundButton Converged', module)
         id={buttonId}
         className={styles.longText}
         secondaryContent="This is some secondary text"
-        icon="X"
+        icon={<CalendarMonth />}
         size="large"
       >
         Long text wraps after it hits the max width of the component
       </CompoundButton>
     );
   })
-  .addStory('Icon only', () => <CompoundButton id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <CompoundButton id={buttonId} shape="circular" icon="X" />, {
-    includeRtl: true,
-  });
+  .addStory('Icon only', () => <CompoundButton id={buttonId} icon={<CalendarMonth />} />)
+  .addStory(
+    'Circular and icon only',
+    () => <CompoundButton id={buttonId} shape="circular" icon={<CalendarMonth />} />,
+    {
+      includeRtl: true,
+    },
+  );
 
 storiesOf('ToggleButton Converged', module)
   .addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
@@ -395,19 +407,19 @@ storiesOf('ToggleButton Converged', module)
     </ToggleButton>
   ))
   .addStory('Size small', () => (
-    <ToggleButton id={buttonId} icon="X" size="small">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />} size="small">
       Hello, world
     </ToggleButton>
   ))
   .addStory('Size large', () => (
-    <ToggleButton id={buttonId} icon="X" size="large">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />} size="large">
       Hello, world
     </ToggleButton>
   ))
   .addStory('Size small - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <ToggleButton id={buttonId} className={styles.longText} icon="X" size="small">
+      <ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
         Long text wraps after it hits the max width of the component
       </ToggleButton>
     );
@@ -415,7 +427,7 @@ storiesOf('ToggleButton Converged', module)
   .addStory('Size medium - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <ToggleButton id={buttonId} className={styles.longText} icon="X" size="medium">
+      <ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
         Long text wraps after it hits the max width of the component
       </ToggleButton>
     );
@@ -423,23 +435,23 @@ storiesOf('ToggleButton Converged', module)
   .addStory('Size large - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <ToggleButton id={buttonId} className={styles.longText} icon="X" size="large">
+      <ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
         Long text wraps after it hits the max width of the component
       </ToggleButton>
     );
   })
   .addStory('With icon before content', () => (
-    <ToggleButton id={buttonId} icon="X">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />}>
       Hello, world
     </ToggleButton>
   ))
   .addStory('With icon after content', () => (
-    <ToggleButton id={buttonId} icon="X" iconPosition="after">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />} iconPosition="after">
       Hello, world
     </ToggleButton>
   ))
-  .addStory('Icon only', () => <ToggleButton id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <ToggleButton id={buttonId} shape="circular" icon="X" />)
+  .addStory('Icon only', () => <ToggleButton id={buttonId} icon={<CalendarMonth />} />)
+  .addStory('Circular and icon only', () => <ToggleButton id={buttonId} shape="circular" icon={<CalendarMonth />} />)
   .addStory('Checked', () => (
     <ToggleButton id={buttonId} checked>
       Hello, world
@@ -515,19 +527,19 @@ storiesOf('MenuButton Converged', module)
     </MenuButton>
   ))
   .addStory('Size small', () => (
-    <MenuButton id={buttonId} icon="X" size="small">
+    <MenuButton id={buttonId} icon={<CalendarMonth />} size="small">
       Hello, world
     </MenuButton>
   ))
   .addStory('Size large', () => (
-    <MenuButton id={buttonId} icon="X" size="large">
+    <MenuButton id={buttonId} icon={<CalendarMonth />} size="large">
       Hello, world
     </MenuButton>
   ))
   .addStory('Size small - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <MenuButton id={buttonId} className={styles.longText} icon="X" size="small">
+      <MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
         Long text wraps after it hits the max width of the component
       </MenuButton>
     );
@@ -535,7 +547,7 @@ storiesOf('MenuButton Converged', module)
   .addStory('Size medium - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <MenuButton id={buttonId} className={styles.longText} icon="X" size="medium">
+      <MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
         Long text wraps after it hits the max width of the component
       </MenuButton>
     );
@@ -543,15 +555,15 @@ storiesOf('MenuButton Converged', module)
   .addStory('Size large - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <MenuButton id={buttonId} className={styles.longText} icon="X" size="large">
+      <MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
         Long text wraps after it hits the max width of the component
       </MenuButton>
     );
   })
   .addStory('With icon', () => (
-    <MenuButton id={buttonId} icon="X">
+    <MenuButton id={buttonId} icon={<CalendarMonth />}>
       Hello, world
     </MenuButton>
   ))
-  .addStory('Icon only', () => <MenuButton id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon="X" />);
+  .addStory('Icon only', () => <MenuButton id={buttonId} icon={<CalendarMonth />} />)
+  .addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon={<CalendarMonth />} />);