Update react-icons usage to resizable icons (microsoft#21074)

* Update react-icons usage to resizable icons * Change files * Update Avatar snapshot * Update Menu snapshots * Revert Menu snapshots and icon * revert avatar changes
mlp73 · Jan 17, 2022 · 3af2fb3 · 3af2fb3
1 parent 0671d20
commit 3af2fb3
Show file tree

Hide file tree

Showing 40 changed files with 175 additions and 137 deletions.
diff --git a/change/@fluentui-react-accordion-a2e955b3-5791-4da5-8ae3-f43d7844e553.json b/change/@fluentui-react-accordion-a2e955b3-5791-4da5-8ae3-f43d7844e553.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update react-icons usage to resizable icons",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-847eac6d-f652-4ed8-b2ee-2852f3455336.json b/change/@fluentui-react-badge-847eac6d-f652-4ed8-b2ee-2852f3455336.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update react-icons usage to resizable icons",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-button-1bb53f07-edff-4734-8156-11bb2f7dc9fe.json b/change/@fluentui-react-button-1bb53f07-edff-4734-8156-11bb2f7dc9fe.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update react-icons usage to resizable icons",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-149fa98e-02f9-4d01-82c4-2dbfd39066b7.json b/change/@fluentui-react-card-149fa98e-02f9-4d01-82c4-2dbfd39066b7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update react-icons usage to resizable icons",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-cc39741f-4fc5-4ec0-82a5-217ae9e533f3.json b/change/@fluentui-react-menu-cc39741f-4fc5-4ec0-82a5-217ae9e533f3.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update react-icons usage to resizable icons",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-accordion/src/stories/AccordionExpandIcon.stories.tsx b/packages/react-accordion/src/stories/AccordionExpandIcon.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Rocket20Regular as RocketIcon } from '@fluentui/react-icons';
+import { RocketRegular as RocketIcon } from '@fluentui/react-icons';
 
 import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionHeaderProps } from '../index';
 
@@ -27,7 +27,7 @@ export const ExpandIcon = (args: AccordionHeaderProps) => (
 );
 
 ExpandIcon.args = {
-  expandIcon: <RocketIcon />,
+  expandIcon: <RocketIcon fontSize={20} />,
 } as AccordionHeaderProps;
 
 ExpandIcon.parameters = {

diff --git a/packages/react-accordion/src/stories/AccordionWithIcon.stories.tsx b/packages/react-accordion/src/stories/AccordionWithIcon.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Rocket20Regular as RocketIcon } from '@fluentui/react-icons';
+import { RocketRegular as RocketIcon } from '@fluentui/react-icons';
 
 import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionHeaderProps } from '../index';
 
@@ -27,7 +27,7 @@ export const WithIcon = (args: AccordionHeaderProps) => (
 );
 
 WithIcon.args = {
-  icon: <RocketIcon />,
+  icon: <RocketIcon fontSize={20} />,
 } as AccordionHeaderProps;
 
 WithIcon.parameters = {

diff --git a/packages/react-badge/src/stories/BadgeIcon.stories.tsx b/packages/react-badge/src/stories/BadgeIcon.stories.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 import { Badge } from '../index';
-import { ClipboardPaste20Regular as PasteIcon } from '@fluentui/react-icons';
+import { ClipboardPasteRegular as PasteIcon } from '@fluentui/react-icons';
 
 export const Icon = () => {
-  return <Badge size="medium" icon={<PasteIcon />} />;
+  return <Badge size="medium" icon={<PasteIcon fontSize={20} />} />;
 };
 
 Icon.parameters = {

diff --git a/packages/react-button/src/components/Button/stories/ButtonDisabled.stories.tsx b/packages/react-button/src/components/Button/stories/ButtonDisabled.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { Button } from '../../../Button';
 
 export const Disabled = () => {
@@ -13,10 +13,10 @@ export const Disabled = () => {
         <Button disabledFocusable>Disabled focusable</Button>
       </div>
       <div style={groupStyles}>
-        <Button appearance="primary" icon={<CalendarMonth24Regular />}>
+        <Button appearance="primary" icon={<CalendarMonthRegular fontSize={24} />}>
           Primary
         </Button>
-        <Button appearance="primary" disabled icon={<CalendarMonth24Regular />}>
+        <Button appearance="primary" disabled icon={<CalendarMonthRegular fontSize={24} />}>
           Primary disabled
         </Button>
         <Button appearance="primary" disabledFocusable>

diff --git a/packages/react-button/src/components/Button/stories/ButtonIcon.stories.tsx b/packages/react-button/src/components/Button/stories/ButtonIcon.stories.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { Button } from '../../../Button';
 
 export const Icon = () => (
   <>
-    <Button icon={<CalendarMonth24Regular />}>Text</Button>
-    <Button icon={<CalendarMonth24Regular />} iconPosition="after">
+    <Button icon={<CalendarMonthRegular fontSize={24} />}>Text</Button>
+    <Button icon={<CalendarMonthRegular fontSize={24} />} iconPosition="after">
       Text
     </Button>
-    <Button icon={<CalendarMonth24Regular />} />
+    <Button icon={<CalendarMonthRegular fontSize={24} />} />
   </>
 );
 Icon.parameters = {

diff --git a/packages/react-button/src/components/Button/stories/ButtonSize.stories.tsx b/packages/react-button/src/components/Button/stories/ButtonSize.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { Button } from '../../../Button';
 
 export const Size = () => {
@@ -11,24 +11,24 @@ export const Size = () => {
       <div style={groupStyles}>
         <h4 style={headerStyles}>small</h4>
         <Button size="small">Text</Button>
-        <Button size="small" icon={<CalendarMonth24Regular />}>
+        <Button size="small" icon={<CalendarMonthRegular fontSize={24} />}>
           Text
         </Button>
-        <Button size="small" icon={<CalendarMonth24Regular />} />
+        <Button size="small" icon={<CalendarMonthRegular fontSize={24} />} />
       </div>
       <div style={groupStyles}>
         <h4 style={headerStyles}>medium</h4>
         <Button>Text</Button>
-        <Button icon={<CalendarMonth24Regular />}>Text</Button>
-        <Button icon={<CalendarMonth24Regular />} />
+        <Button icon={<CalendarMonthRegular fontSize={24} />}>Text</Button>
+        <Button icon={<CalendarMonthRegular fontSize={24} />} />
       </div>
       <div style={groupStyles}>
         <h4 style={headerStyles}>large</h4>
         <Button size="large">Text</Button>
-        <Button size="large" icon={<CalendarMonth24Regular />}>
+        <Button size="large" icon={<CalendarMonthRegular fontSize={24} />}>
           Text
         </Button>
-        <Button size="large" icon={<CalendarMonth24Regular />} />
+        <Button size="large" icon={<CalendarMonthRegular fontSize={24} />} />
       </div>
     </>
   );

diff --git a/...ges/react-button/src/components/CompoundButton/stories/CompoundButtonDisabled.stories.tsx b/...ges/react-button/src/components/CompoundButton/stories/CompoundButtonDisabled.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { CompoundButton } from '../../../CompoundButton';
 
 export const Disabled = () => {
@@ -20,15 +20,15 @@ export const Disabled = () => {
         <CompoundButton
           secondaryContent="This is the secondary content"
           appearance="primary"
-          icon={<CalendarMonth24Regular />}
+          icon={<CalendarMonthRegular fontSize={24} />}
         >
           Primary
         </CompoundButton>
         <CompoundButton
           secondaryContent="This is the secondary content"
           appearance="primary"
           disabled
-          icon={<CalendarMonth24Regular />}
+          icon={<CalendarMonthRegular fontSize={24} />}
         >
           Primary disabled
         </CompoundButton>

diff --git a/packages/react-button/src/components/CompoundButton/stories/CompoundButtonIcon.stories.tsx b/packages/react-button/src/components/CompoundButton/stories/CompoundButtonIcon.stories.tsx
@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { CompoundButton } from '../../../CompoundButton';
 
 export const Icon = () => (
   <>
-    <CompoundButton secondaryContent="This is the secondary content" icon={<CalendarMonth24Regular />}>
+    <CompoundButton secondaryContent="This is the secondary content" icon={<CalendarMonthRegular fontSize={24} />}>
       Text
     </CompoundButton>
     <CompoundButton
       secondaryContent="This is the secondary content"
-      icon={<CalendarMonth24Regular />}
+      icon={<CalendarMonthRegular fontSize={24} />}
       iconPosition="after"
     >
       Text
     </CompoundButton>
-    <CompoundButton secondaryContent="This is the secondary content" icon={<CalendarMonth24Regular />} />
+    <CompoundButton secondaryContent="This is the secondary content" icon={<CalendarMonthRegular fontSize={24} />} />
   </>
 );
 Icon.parameters = {

diff --git a/packages/react-button/src/components/MenuButton/stories/MenuButtonIcon.stories.tsx b/packages/react-button/src/components/MenuButton/stories/MenuButtonIcon.stories.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { CalendarMonth24Regular, Filter24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular, FilterRegular } from '@fluentui/react-icons';
 import { MenuButton } from '../../../MenuButton';
 
 export const Icon = () => (
   <>
     <Menu>
       <MenuTrigger>
-        <MenuButton icon={<CalendarMonth24Regular />}>This is a Menu Button</MenuButton>
+        <MenuButton icon={<CalendarMonthRegular fontSize={24} />}>This is a Menu Button</MenuButton>
       </MenuTrigger>
       <MenuPopover>
         <MenuList>
@@ -20,7 +20,7 @@ export const Icon = () => (
 
     <Menu>
       <MenuTrigger>
-        <MenuButton icon={<CalendarMonth24Regular />} menuIcon={<Filter24Regular />}>
+        <MenuButton icon={<CalendarMonthRegular fontSize={24} />} menuIcon={<FilterRegular fontSize={24} />}>
           This is a Menu Button
         </MenuButton>
       </MenuTrigger>
@@ -34,7 +34,7 @@ export const Icon = () => (
 
     <Menu>
       <MenuTrigger>
-        <MenuButton icon={<CalendarMonth24Regular />} />
+        <MenuButton icon={<CalendarMonthRegular fontSize={24} />} />
       </MenuTrigger>
       <MenuPopover>
         <MenuList>

diff --git a/packages/react-button/src/components/MenuButton/stories/MenuButtonSizeLarge.stories.tsx b/packages/react-button/src/components/MenuButton/stories/MenuButtonSizeLarge.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { MenuButton } from '../../../MenuButton';
 
 export const SizeLarge = () => {
@@ -22,7 +22,7 @@ export const SizeLarge = () => {
 
       <Menu>
         <MenuTrigger>
-          <MenuButton icon={<CalendarMonth24Regular />} size="large">
+          <MenuButton icon={<CalendarMonthRegular fontSize={24} />} size="large">
             This is a Menu Button
           </MenuButton>
         </MenuTrigger>

diff --git a/packages/react-button/src/components/MenuButton/stories/MenuButtonSizeMedium.stories.tsx b/packages/react-button/src/components/MenuButton/stories/MenuButtonSizeMedium.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { MenuButton } from '../../../MenuButton';
 
 export const SizeMedium = () => {
@@ -22,7 +22,7 @@ export const SizeMedium = () => {
 
       <Menu>
         <MenuTrigger>
-          <MenuButton icon={<CalendarMonth24Regular />} size="medium">
+          <MenuButton icon={<CalendarMonthRegular fontSize={24} />} size="medium">
             This is a Menu Button
           </MenuButton>
         </MenuTrigger>

diff --git a/packages/react-button/src/components/MenuButton/stories/MenuButtonSizeSmall.stories.tsx b/packages/react-button/src/components/MenuButton/stories/MenuButtonSizeSmall.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { MenuButton } from '../../../MenuButton';
 
 export const SizeSmall = () => {
@@ -22,7 +22,7 @@ export const SizeSmall = () => {
 
       <Menu>
         <MenuTrigger>
-          <MenuButton icon={<CalendarMonth24Regular />} size="small">
+          <MenuButton icon={<CalendarMonthRegular fontSize={24} />} size="small">
             This is a Menu Button
           </MenuButton>
         </MenuTrigger>

diff --git a/packages/react-button/src/components/MenuButton/useMenuButton.tsx b/packages/react-button/src/components/MenuButton/useMenuButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';
+import { ChevronDownRegular } from '@fluentui/react-icons';
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { useButton } from '../Button/index';
 import type { MenuButtonProps, MenuButtonState } from './MenuButton.types';
@@ -28,7 +28,8 @@ export const useMenuButton = (
 
     menuIcon: resolveShorthand(menuIcon, {
       defaultProps: {
-        children: buttonState.size === 'large' ? <ChevronDown24Regular /> : <ChevronDown20Regular />,
+        children:
+          buttonState.size === 'large' ? <ChevronDownRegular fontSize={24} /> : <ChevronDownRegular fontSize={20} />,
       },
       required: true,
     }),

diff --git a/packages/react-button/src/components/SplitButton/stories/SplitButtonIcon.stories.tsx b/packages/react-button/src/components/SplitButton/stories/SplitButtonIcon.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { CalendarMonth24Regular, Filter24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular, FilterRegular } from '@fluentui/react-icons';
 import { SplitButton, MenuButtonProps } from '../../../index'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-beta
 
 export const Icon = () => (
@@ -12,7 +12,7 @@ export const Icon = () => (
           <SplitButton
             menuButton={triggerProps}
             primaryActionButton={'This is a split button'}
-            icon={<CalendarMonth24Regular />}
+            icon={<CalendarMonthRegular fontSize={24} />}
           />
         )}
       </MenuTrigger>
@@ -30,8 +30,8 @@ export const Icon = () => (
           <SplitButton
             menuButton={triggerProps}
             primaryActionButton={'This is a split button'}
-            icon={<CalendarMonth24Regular />}
-            menuIcon={<Filter24Regular />}
+            icon={<CalendarMonthRegular fontSize={24} />}
+            menuIcon={<FilterRegular fontSize={24} />}
           />
         )}
       </MenuTrigger>
@@ -49,7 +49,7 @@ export const Icon = () => (
           <SplitButton
             menuButton={triggerProps}
             primaryActionButton={'This is a split button'}
-            icon={<CalendarMonth24Regular />}
+            icon={<CalendarMonthRegular fontSize={24} />}
           />
         )}
       </MenuTrigger>

diff --git a/packages/react-button/src/components/SplitButton/stories/SplitButtonSizeLarge.stories.tsx b/packages/react-button/src/components/SplitButton/stories/SplitButtonSizeLarge.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { SplitButton, MenuButtonProps } from '../../../index'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-beta
 
 export const SizeLarge = () => {
@@ -28,7 +28,7 @@ export const SizeLarge = () => {
             <SplitButton
               menuButton={triggerProps}
               primaryActionButton={'This is a split button'}
-              icon={<CalendarMonth24Regular />}
+              icon={<CalendarMonthRegular fontSize={24} />}
               size="large"
             />
           )}

diff --git a/packages/react-button/src/components/SplitButton/stories/SplitButtonSizeMedium.stories.tsx b/packages/react-button/src/components/SplitButton/stories/SplitButtonSizeMedium.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { SplitButton, MenuButtonProps } from '../../../index'; // codesandbox-dependency: @fluentui/react-button ^9.0.0-beta
 
 export const SizeMedium = () => {
@@ -28,7 +28,7 @@ export const SizeMedium = () => {
             <SplitButton
               menuButton={triggerProps}
               primaryActionButton={'This is a split button'}
-              icon={<CalendarMonth24Regular />}
+              icon={<CalendarMonthRegular fontSize={24} />}
               size="medium"
             />
           )}