Apply v12 Avatar migration on polaris.shopify.com

sam-b-rose · sam-b-rose · commit 23fdb01ed9e1 · 2023-09-13T13:20:17.000-04:00
diff --git a/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx b/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx
@@ -22,7 +22,7 @@ function ActionListWithPrefixSuffixExample() {
           },
           {
             content: 'Or there',
-            prefix: <Avatar customer name="Farrah" size="small" />,
+            prefix: <Avatar name="Farrah" size="large" />,
             suffix: <Icon source={ChevronRightMinor} />,
           },
         ]}
diff --git a/polaris.shopify.com/pages/examples/app-provider-default.tsx b/polaris.shopify.com/pages/examples/app-provider-default.tsx
@@ -49,7 +49,7 @@ function AppProviderExample() {
             ]}
             renderItem={(item) => {
               const {id, url, name, location} = item;
-              const media = <Avatar customer size="medium" name={name} />;
+              const media = <Avatar size="xl" name={name} />;
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
diff --git a/polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx b/polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx
@@ -49,7 +49,7 @@ function AppProviderI18NExample() {
             ]}
             renderItem={(item) => {
               const {id, url, name, location} = item;
-              const media = <Avatar customer size="medium" name={name} />;
+              const media = <Avatar size="xl" name={name} />;
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
diff --git a/polaris.shopify.com/pages/examples/filters-disabled.tsx b/polaris.shopify.com/pages/examples/filters-disabled.tsx
@@ -101,7 +101,7 @@ function FiltersDisabledExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx b/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx
@@ -177,7 +177,7 @@ function FiltersWithAResourceListExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-children-content.tsx b/polaris.shopify.com/pages/examples/filters-with-children-content.tsx
@@ -105,7 +105,7 @@ function FiltersWithChildrenContentExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx b/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx
@@ -178,7 +178,7 @@ function FiltersWithQueryFieldDisabledExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx b/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx
@@ -187,7 +187,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-some-disabled.tsx b/polaris.shopify.com/pages/examples/filters-with-some-disabled.tsx
@@ -124,7 +124,7 @@ function FiltersWithSomeDisabledExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-disabled.tsx b/polaris.shopify.com/pages/examples/legacy-filters-disabled.tsx
@@ -98,7 +98,7 @@ function DisableAllFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-some-disabled.tsx b/polaris.shopify.com/pages/examples/legacy-filters-some-disabled.tsx
@@ -127,7 +127,7 @@ function DisableSomeFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-a-resource-list.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-a-resource-list.tsx
@@ -173,7 +173,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-children-content.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-children-content.tsx
@@ -101,7 +101,7 @@ function FiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-help-text.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-help-text.tsx
@@ -175,7 +175,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-disabled.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-disabled.tsx
@@ -174,7 +174,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-hidden.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-hidden.tsx
@@ -174,7 +174,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-without-clear-button.tsx b/polaris.shopify.com/pages/examples/legacy-filters-without-clear-button.tsx
@@ -106,7 +106,7 @@ function Playground() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="xl" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx b/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx
@@ -82,7 +82,7 @@ function PopoverLazyLoadExample() {
     return (
       <ResourceList.Item
         id={name}
-        media={<Avatar size="medium" name={name} initials={initials} />}
+        media={<Avatar size="xl" name={name} initials={initials} />}
         onClick={handleResourceListItemClick}
       >
         {name}
diff --git a/polaris.shopify.com/pages/examples/resource-item-with-media.tsx b/polaris.shopify.com/pages/examples/resource-item-with-media.tsx
@@ -30,14 +30,7 @@ function ResourceItemExample() {
             <ResourceItem
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="xl" name={name} source={avatarSource} />}
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >
diff --git a/polaris.shopify.com/pages/examples/resource-item-with-shortcut-actions.tsx b/polaris.shopify.com/pages/examples/resource-item-with-shortcut-actions.tsx
@@ -34,14 +34,7 @@ function ResourceItemExample() {
             <ResourceItem
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="xl" name={name} source={avatarSource} />}
               shortcutActions={shortcutActions}
               accessibilityLabel={`View details for ${name}`}
               name={name}
diff --git a/polaris.shopify.com/pages/examples/resource-item-with-vertical-alignment.tsx b/polaris.shopify.com/pages/examples/resource-item-with-vertical-alignment.tsx
@@ -31,14 +31,7 @@ function ResourceItemExample() {
               verticalAlignment="center"
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="xl" name={name} source={avatarSource} />}
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >
diff --git a/polaris.shopify.com/pages/examples/resource-list-default.tsx b/polaris.shopify.com/pages/examples/resource-list-default.tsx
@@ -29,7 +29,7 @@ function ResourceListExample() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="xl" name={name} />;
 
           return (
             <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx b/polaris.shopify.com/pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx
@@ -104,7 +104,7 @@ function ResourceListWithFilteringExample() {
     location: string;
   }) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="xl" name={name} />;
 
     return (
       <ResourceItem id={id} url={url} media={media}>
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-all-of-its-elements.tsx b/polaris.shopify.com/pages/examples/resource-list-with-all-of-its-elements.tsx
@@ -154,7 +154,7 @@ function ResourceListExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location, latestOrderUrl} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="xl" name={name} />;
     const shortcutActions = latestOrderUrl
       ? [{content: 'View latest order', url: latestOrderUrl}]
       : undefined;
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-alternate-tool.tsx b/polaris.shopify.com/pages/examples/resource-list-with-alternate-tool.tsx
@@ -43,7 +43,7 @@ function ResourceListWithAlternateToolExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="xl" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-bulk-actions.tsx b/polaris.shopify.com/pages/examples/resource-list-with-bulk-actions.tsx
@@ -72,7 +72,7 @@ function ResourceListWithBulkActionsExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="xl" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-filtering.tsx b/polaris.shopify.com/pages/examples/resource-list-with-filtering.tsx
@@ -108,7 +108,7 @@ function ResourceListWithFilteringExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="xl" name={name} />;
 
     return (
       <ResourceItem id={id} url={url} media={media}>
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-item-shortcut-actions.tsx b/polaris.shopify.com/pages/examples/resource-list-with-item-shortcut-actions.tsx
@@ -31,7 +31,7 @@ function ResourceListExample() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location, latestOrderUrl} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="xl" name={name} />;
           const shortcutActions = latestOrderUrl
             ? [
                 {
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-loading-state.tsx b/polaris.shopify.com/pages/examples/resource-list-with-loading-state.tsx
@@ -78,7 +78,7 @@ function ResourceListWithLoadingExample() {
     location: string;
   }) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="xl" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-multiselect.tsx b/polaris.shopify.com/pages/examples/resource-list-with-multiselect.tsx
@@ -97,7 +97,7 @@ function ResourceListExample() {
 
   function renderItem(item: typeof items[number], _: string, index: number) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="xl" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx b/polaris.shopify.com/pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx
@@ -31,7 +31,7 @@ function ResourceListExample() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location, latestOrderUrl} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="xl" name={name} />;
           const shortcutActions = latestOrderUrl
             ? [
                 {
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx b/polaris.shopify.com/pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx
@@ -49,7 +49,7 @@ function ResourceListWithSelectionExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="xl" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-sorting.tsx b/polaris.shopify.com/pages/examples/resource-list-with-sorting.tsx
@@ -52,7 +52,7 @@ function ResourceListWithSortingExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="xl" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-total-count.tsx b/polaris.shopify.com/pages/examples/resource-list-with-total-count.tsx
@@ -29,7 +29,7 @@ function ResourceListWithTotalItemsCount() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="xl" name={name} />;
 
           return (
             <ResourceItem

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ function ActionListWithPrefixSuffixExample() {`
`22`	`22`	`},`
`23`	`23`	`{`
`24`	`24`	`content: 'Or there',`
`25`		`- prefix: <Avatar customer name="Farrah" size="small" />,`
	`25`	`+ prefix: <Avatar name="Farrah" size="large" />,`
`26`	`26`	`suffix: <Icon source={ChevronRightMinor} />,`
`27`	`27`	`},`
`28`	`28`	`]}`