Enlarge icons for mobile screens using viewBox strategy (#11708)

Remerge changes from  #11626  but with #11707

- [Spin
link](https://admin.web.responsive-icons.sam-rose.us.spin.dev/store/shop1)
- [Snapshot PR](Shopify/web#120771)

---------

Co-authored-by: Charles Lee <charles.lee@shopify.com>

Author: sam-b-rose

.changeset/twelve-dolphins-grow.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Increase icon size using viewBox for mobile screen sizes. This will enlarge icons on mobile without affecting the icon wrapper.

polaris-react/src/components/AccountConnection/tests/AccountConnection.test.tsx

@@ -1,20 +1,11 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 
 import {Avatar} from '../../Avatar';
 import {Button} from '../../Button';
 import {AccountConnection} from '../AccountConnection';
 
 describe('<AccountConnection />', () => {
-  beforeEach(() => {
-    matchMedia.mock();
-  });
-
-  afterEach(() => {
-    matchMedia.restore();
-  });
-
   describe('title', () => {
     it('shows the title when one is provided', () => {
       const title = 'Example app';

polaris-react/src/components/AppProvider/tests/AppProvider.test.tsx

@@ -1,5 +1,4 @@
 import React, {useContext} from 'react';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
 import {LinkContext} from '../../../utilities/link';
@@ -8,14 +7,6 @@ import {MediaQueryProvider} from '../../MediaQueryProvider';
 import {AppProvider} from '../AppProvider';
 
 describe('<AppProvider />', () => {
-  beforeEach(() => {
-    matchMedia.mock();
-  });
-
-  afterEach(() => {
-    matchMedia.restore();
-  });
-
   it('updates context when props change', () => {
     const Child: React.FunctionComponent = () => {
       return useContext(LinkContext) ? <div id="child" /> : null;

polaris-react/src/components/Banner/tests/Banner.test.tsx

@@ -27,16 +27,6 @@ import {
 import type {BannerTone} from '../Banner';
 import type {BannerHandles} from '../utilities';
 
-window.matchMedia =
-  window.matchMedia ||
-  function () {
-    return {
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-
 describe('<Banner />', () => {
   it('renders a title', () => {
     const banner = mountWithApp(<Banner title="Banner title" />);

polaris-react/src/components/Card/tests/Card.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 import {setMediaWidth} from 'tests/utilities/breakpoints';
 
 import {WithinContentContext} from '../../../utilities/within-content-context';
@@ -11,14 +10,6 @@ const heading = <p>Online store dashboard</p>;
 const subheading = <p>View a summary of your online store performance</p>;
 
 describe('Card', () => {
-  beforeEach(() => {
-    matchMedia.mock();
-  });
-
-  afterEach(() => {
-    matchMedia.restore();
-  });
-
   it('has a child with prop withinContentContainer set to true', () => {
     function TestComponent(_: {withinContentContainer: any}) {
       return null;

polaris-react/src/components/Filters/components/FilterPill/tests/FilterPill.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 import {ChevronDownIcon} from '@shopify/polaris-icons';
 
@@ -21,13 +20,11 @@ describe('<Filters />', () => {
 
   beforeEach(() => {
     originalScroll = HTMLElement.prototype.scroll;
-    matchMedia.mock();
     mockUseBreakpoints(false);
   });
 
   afterEach(() => {
     HTMLElement.prototype.scroll = originalScroll;
-    matchMedia.restore();
     jest.clearAllMocks();
   });
 

polaris-react/src/components/Filters/components/FiltersBar/tests/FiltersBar.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
 import {ActionList} from '../../../../ActionList';
@@ -13,12 +12,10 @@ describe('<FiltersBar />', () => {
 
   beforeEach(() => {
     originalScroll = HTMLElement.prototype.scroll;
-    matchMedia.mock();
   });
 
   afterEach(() => {
     HTMLElement.prototype.scroll = originalScroll;
-    matchMedia.restore();
   });
 
   const defaultProps: FiltersBarProps = {

polaris-react/src/components/Filters/components/SearchField/tests/SearchField.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import type {ComponentProps} from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 
 import {SearchField} from '..';
 import {TextField} from '../../../../TextField';
@@ -30,14 +29,9 @@ describe('SearchField', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    matchMedia.mock();
     mockUseBreakpoints(false);
   });
 
-  afterEach(() => {
-    matchMedia.restore();
-  });
-
   it('will call onChange when changed', () => {
     const props = {...defaultProps};
     const spy = jest.fn();

polaris-react/src/components/Filters/tests/Filters.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
 import {Filters} from '../Filters';
@@ -11,12 +10,10 @@ describe('<Filters />', () => {
 
   beforeEach(() => {
     originalScroll = HTMLElement.prototype.scroll;
-    matchMedia.mock();
   });
 
   afterEach(() => {
     HTMLElement.prototype.scroll = originalScroll;
-    matchMedia.restore();
   });
 
   const defaultProps: FiltersProps = {

polaris-react/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx

@@ -6,16 +6,6 @@ import {Toast} from '../../Toast';
 import {Frame} from '../../../Frame';
 import {ToastManager} from '../ToastManager';
 
-window.matchMedia =
-  window.matchMedia ||
-  function () {
-    return {
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-
 describe('<ToastManager />', () => {
   it('updates toast safely', () => {
     const toastManager = mountWithApp(

polaris-react/src/components/Grid/tests/Grid.test.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import {matchMedia, timer} from '@shopify/jest-dom-mocks';
+import {timer} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
 import {formatAreas, Grid} from '../Grid';
 
 describe('<Grid />', () => {
   beforeEach(() => {
-    matchMedia.mock();
     timer.mock();
   });
 
   afterEach(() => {
-    matchMedia.restore();
     timer.restore();
   });
 

polaris-react/src/components/Icon/Icon.module.scss

@@ -4,6 +4,7 @@
   display: block;
   height: 20px;
   width: 20px;
+
   max-height: 100%;
   max-width: 100%;
   margin: auto;

polaris-react/src/components/Icon/Icon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Text} from '../Text';
 import {classNames, variationName} from '../../utilities/css';
+import {useBreakpoints} from '../../utilities/breakpoints';
 import type {IconSource} from '../../types';
 
 import styles from './Icon.module.scss';
@@ -62,13 +63,19 @@ export function Icon({source, tone, accessibilityLabel}: IconProps) {
     tone && styles[variationName('tone', tone)],
   );
 
+  const {mdDown} = useBreakpoints();
+
   const SourceComponent = source;
   const contentMarkup = {
     function: (
       <SourceComponent
         className={styles.Svg}
         focusable="false"
         aria-hidden="true"
+        // On Mobile we're scaling the viewBox to 18x18 to make the icons bigger
+        // Also, we're setting the viewport origin to 1x1 to center the icon
+        // We use this syntax so we don't override the existing viewBox value if we don't need to.
+        {...(mdDown ? {viewBox: '1 1 18 18'} : {})}
       />
     ),
     placeholder: <div className={styles.Placeholder} />,

polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import type {ComponentProps} from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 
 import {Tabs} from '../../Tabs';
 import {Filters} from '../../Filters';
@@ -93,13 +92,8 @@ describe('IndexFilters', () => {
     showEditColumnsButton: false,
   };
 
-  beforeEach(() => {
-    matchMedia.mock();
-  });
-
   afterEach(() => {
     jest.resetAllMocks();
-    matchMedia.restore();
   });
 
   it('reacts correctly to pressing the search button and invokes setMode with the filtering argument', () => {

polaris-react/src/components/LegacyFilters/tests/LegacyFilters.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
+import {matchMedia} from '@shopify/jest-dom-mocks';
 
 import {Button} from '../../Button';
 import type {ButtonProps} from '../../Button';
@@ -51,14 +51,6 @@ describe('<LegacyFilters />', () => {
     jest.useFakeTimers();
   });
 
-  beforeEach(() => {
-    matchMedia.mock();
-  });
-
-  afterEach(() => {
-    matchMedia.restore();
-  });
-
   it('renders WithinFilterContext with a value of true', () => {
     WithinFilterContext;
     const filters = mountWithApp(<LegacyFilters {...mockProps} />);

polaris-react/src/components/MediaQueryProvider/tests/MediaQueryProvider.test.tsx

@@ -1,22 +1,14 @@
 import React from 'react';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 import {act} from 'react-dom/test-utils';
 import {mountWithApp} from 'tests/utilities';
+import {matchMedia} from '@shopify/jest-dom-mocks';
 
 // eslint-disable-next-line import/no-deprecated
 import {EventListener} from '../../EventListener';
 import {MediaQueryProvider} from '../MediaQueryProvider';
 import {useMediaQuery} from '../../../utilities/media-query';
 
 describe('MediaQueryProvider', () => {
-  beforeEach(() => {
-    matchMedia.mock();
-  });
-
-  afterEach(() => {
-    matchMedia.restore();
-  });
-
   it('renders EventListener with the resize event', () => {
     const mediaQueryProvider = mountWithApp(<MediaQueryProvider />);
     // eslint-disable-next-line import/no-deprecated

polaris-react/src/components/Navigation/components/Item/tests/Item.test.tsx

@@ -18,14 +18,6 @@ import {SecondaryNavigation} from '../components';
 import {Tooltip} from '../../../../Tooltip';
 
 describe('<Nav.Item />', () => {
-  beforeEach(() => {
-    matchMedia.mock();
-  });
-
-  afterEach(() => {
-    matchMedia.restore();
-  });
-
   // eslint-disable-next-line jest/no-disabled-tests
   it.skip('sets expanded to false on resize when !navigationBarCollapsed and location does not match', () => {
     const spy = jest.fn();

polaris-react/src/components/Navigation/components/Section/tests/Section.test.tsx

@@ -17,7 +17,6 @@ describe('<Navigation.Section />', () => {
   let cancelAnimationFrameSpy: jest.SpyInstance;
 
   beforeEach(() => {
-    matchMedia.mock();
     animationFrame.mock();
     context = {
       location: '/admin/products',
@@ -27,7 +26,6 @@ describe('<Navigation.Section />', () => {
   });
 
   afterEach(() => {
-    matchMedia.restore();
     animationFrame.restore();
     cancelAnimationFrameSpy.mockRestore();
   });

polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import type {AllHTMLAttributes} from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 import {setMediaWidth} from 'tests/utilities/breakpoints';
 
 import {Avatar} from '../../Avatar';
@@ -21,12 +20,10 @@ describe('<ResourceItem />', () => {
   beforeEach(() => {
     spy = jest.spyOn(window, 'open');
     spy.mockImplementation(() => {});
-    matchMedia.mock();
   });
 
   afterEach(() => {
     spy.mockRestore();
-    matchMedia.restore();
   });
 
   const mockDefaultContext = {

polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 import type {Root, Node, Element} from '@shopify/react-testing';
-import {matchMedia} from '@shopify/jest-dom-mocks';
 
 import {BulkActions} from '../../BulkActions';
 import {CheckableButton} from '../../CheckableButton';
@@ -55,14 +54,6 @@ const alternateTool = <div id="AlternateTool">Alternate Tool</div>;
 const defaultWindowWidth = window.innerWidth;
 
 describe('<ResourceList />', () => {
-  beforeEach(() => {
-    matchMedia.mock();
-  });
-
-  afterEach(() => {
-    matchMedia.restore();
-  });
-
   describe('renderItem', () => {
     it('renders list items', () => {
       const resourceList = mountWithApp(