From 6fb442a006f1061616bffb4698e9ebada45021ad Mon Sep 17 00:00:00 2001
From: Alex Page <alex.page@shopify.com>
Date: Thu, 30 Nov 2023 12:43:41 +1100
Subject: [PATCH 1/4] Add story for every Polaris Icon

This will help us test and debug icon changes with visual regressions
---
 .../src/components/Icon/Icon.stories.tsx      | 57 ++++++++++++-------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
index c9950b50728..ee6c3ba5fb5 100644
--- a/polaris-react/src/components/Icon/Icon.stories.tsx
+++ b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Icon, Text, BlockStack} from '@shopify/polaris';
-import {CirclePlusMinor} from '@shopify/polaris-icons';
+import {Icon, Text, BlockStack, InlineStack} from '@shopify/polaris';
+import * as polarisIcons from '@shopify/polaris-icons';
+import iconMetadata from '@shopify/polaris-icons/metadata';
 
 export default {
   component: Icon,
 } as ComponentMeta<typeof Icon>;
 
 export function Default() {
-  return <Icon source={CirclePlusMinor} />;
+  return <Icon source={(polarisIcons as any).CirclePlusMinor} />;
 }
 
 export function Colored() {
@@ -17,71 +18,74 @@ export function Colored() {
       <Text as="p" variant="bodyMd" alignment="center">
         Base tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="base" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="base" />
       <Text as="p" variant="bodyMd" alignment="center">
         Subdued tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="subdued" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="subdued" />
       <Text as="p" variant="bodyMd" alignment="center">
         Primary tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="primary" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="primary" />
       <Text as="p" variant="bodyMd" alignment="center">
         Info tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="info" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="info" />
       <Text as="p" variant="bodyMd" alignment="center">
         Success tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="success" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="success" />
       <Text as="p" variant="bodyMd" alignment="center">
         Caution tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="caution" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="caution" />
       <Text as="p" variant="bodyMd" alignment="center">
         Warning tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="warning" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="warning" />
       <Text as="p" variant="bodyMd" alignment="center">
         Critical tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="critical" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="critical" />
       <Text as="p" variant="bodyMd" alignment="center">
         Emphasis tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="emphasis" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="emphasis" />
       <Text as="p" variant="bodyMd" alignment="center">
         Magic tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="magic" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="magic" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Primary tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="textPrimary" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textPrimary" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Caution tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="textCaution" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textCaution" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Warning tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="textWarning" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textWarning" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Critical tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="textCritical" />
+      <Icon
+        source={(polarisIcons as any).CirclePlusMinor}
+        tone="textCritical"
+      />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Info tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="textInfo" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textInfo" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Success tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="textSuccess" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textSuccess" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Magic tone
       </Text>
-      <Icon source={CirclePlusMinor} tone="textMagic" />
+      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textMagic" />
     </BlockStack>
   );
 }
@@ -115,3 +119,16 @@ export function WithCustomSVGAndColor() {
 
   return <Icon source={iconContent} tone="warning" />;
 }
+
+export function PolarisIconsLibrary() {
+  return (
+    <BlockStack as="ul" gap="100" inlineAlign="start">
+      {Object.keys(iconMetadata).map((icon) => (
+        <InlineStack key={icon} gap="200">
+          <Icon source={polarisIcons[icon]} />
+          <Text as="span">{icon}</Text>
+        </InlineStack>
+      ))}
+    </BlockStack>
+  );
+}

From c044ea5e11b1c25e49ba6c474ef69356087cd624 Mon Sep 17 00:00:00 2001
From: Alex Page <alex.page@shopify.com>
Date: Thu, 30 Nov 2023 12:44:51 +1100
Subject: [PATCH 2/4] Create twenty-maps-applaud.md

---
 .changeset/twenty-maps-applaud.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/twenty-maps-applaud.md

diff --git a/.changeset/twenty-maps-applaud.md b/.changeset/twenty-maps-applaud.md
new file mode 100644
index 00000000000..04a871f3587
--- /dev/null
+++ b/.changeset/twenty-maps-applaud.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Add storybook example for all icons in @shopify/polaris-icons

From 554d449f82f35284afa3113d417d49b71ab08d97 Mon Sep 17 00:00:00 2001
From: Alex Page <alex.page@shopify.com>
Date: Fri, 1 Dec 2023 14:41:59 +1100
Subject: [PATCH 3/4] Update Icon.stories.tsx

---
 polaris-react/src/components/Icon/Icon.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
index ee6c3ba5fb5..23918abb186 100644
--- a/polaris-react/src/components/Icon/Icon.stories.tsx
+++ b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -122,7 +122,7 @@ export function WithCustomSVGAndColor() {
 
 export function PolarisIconsLibrary() {
   return (
-    <BlockStack as="ul" gap="100" inlineAlign="start">
+    <BlockStack gap="100" inlineAlign="start">
       {Object.keys(iconMetadata).map((icon) => (
         <InlineStack key={icon} gap="200">
           <Icon source={polarisIcons[icon]} />

From 7d6738c6597b808841fa7dce421ac74acc000ed7 Mon Sep 17 00:00:00 2001
From: Alex Page <alex.page@shopify.com>
Date: Fri, 1 Dec 2023 14:44:04 +1100
Subject: [PATCH 4/4] Remove type casting

---
 .../src/components/Icon/Icon.stories.tsx      | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
index 23918abb186..75c8f3b5212 100644
--- a/polaris-react/src/components/Icon/Icon.stories.tsx
+++ b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -8,8 +8,13 @@ export default {
   component: Icon,
 } as ComponentMeta<typeof Icon>;
 
+interface Icons {
+  [key: string]: any;
+}
+const icons: Icons = polarisIcons;
+
 export function Default() {
-  return <Icon source={(polarisIcons as any).CirclePlusMinor} />;
+  return <Icon source={icons.CirclePlusMinor} />;
 }
 
 export function Colored() {
@@ -18,74 +23,71 @@ export function Colored() {
       <Text as="p" variant="bodyMd" alignment="center">
         Base tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="base" />
+      <Icon source={icons.CirclePlusMinor} tone="base" />
       <Text as="p" variant="bodyMd" alignment="center">
         Subdued tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="subdued" />
+      <Icon source={icons.CirclePlusMinor} tone="subdued" />
       <Text as="p" variant="bodyMd" alignment="center">
         Primary tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="primary" />
+      <Icon source={icons.CirclePlusMinor} tone="primary" />
       <Text as="p" variant="bodyMd" alignment="center">
         Info tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="info" />
+      <Icon source={icons.CirclePlusMinor} tone="info" />
       <Text as="p" variant="bodyMd" alignment="center">
         Success tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="success" />
+      <Icon source={icons.CirclePlusMinor} tone="success" />
       <Text as="p" variant="bodyMd" alignment="center">
         Caution tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="caution" />
+      <Icon source={icons.CirclePlusMinor} tone="caution" />
       <Text as="p" variant="bodyMd" alignment="center">
         Warning tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="warning" />
+      <Icon source={icons.CirclePlusMinor} tone="warning" />
       <Text as="p" variant="bodyMd" alignment="center">
         Critical tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="critical" />
+      <Icon source={icons.CirclePlusMinor} tone="critical" />
       <Text as="p" variant="bodyMd" alignment="center">
         Emphasis tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="emphasis" />
+      <Icon source={icons.CirclePlusMinor} tone="emphasis" />
       <Text as="p" variant="bodyMd" alignment="center">
         Magic tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="magic" />
+      <Icon source={icons.CirclePlusMinor} tone="magic" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Primary tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textPrimary" />
+      <Icon source={icons.CirclePlusMinor} tone="textPrimary" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Caution tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textCaution" />
+      <Icon source={icons.CirclePlusMinor} tone="textCaution" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Warning tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textWarning" />
+      <Icon source={icons.CirclePlusMinor} tone="textWarning" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Critical tone
       </Text>
-      <Icon
-        source={(polarisIcons as any).CirclePlusMinor}
-        tone="textCritical"
-      />
+      <Icon source={icons.CirclePlusMinor} tone="textCritical" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Info tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textInfo" />
+      <Icon source={icons.CirclePlusMinor} tone="textInfo" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Success tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textSuccess" />
+      <Icon source={icons.CirclePlusMinor} tone="textSuccess" />
       <Text as="p" variant="bodyMd" alignment="center">
         Text Magic tone
       </Text>
-      <Icon source={(polarisIcons as any).CirclePlusMinor} tone="textMagic" />
+      <Icon source={icons.CirclePlusMinor} tone="textMagic" />
     </BlockStack>
   );
 }