[Avatar] Add back customer prop (#10584)

Added back the `customer` prop to support the gray + customer icon combination.
Shopify · Sep 20, 2023 · 08a0f2f · 08a0f2f
1 parent b3c83f9
commit 08a0f2f
Show file tree

Hide file tree

Showing 50 changed files with 126 additions and 107 deletions.
diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md
@@ -12,7 +12,6 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 
 `npx @shopify/polaris-migrator v12-react-avatar-component <path>`
 
-- Remove the `customer` prop
 - Replace the `size` prop with the new mapping below
 
 | Before                    | After       |

diff --git a/...tor/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.output.tsx b/...tor/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.output.tsx
@@ -4,11 +4,11 @@ import {Avatar} from '@shopify/polaris';
 export function App() {
   return (
     <>
-      <Avatar size="unknown" />
-      <Avatar size="xs" />
-      <Avatar size="sm" />
-      <Avatar size="md" />
-      <Avatar size="lg" />
+      <Avatar customer size="unknown" />
+      <Avatar customer size="xs" />
+      <Avatar customer size="sm" />
+      <Avatar customer size="md" />
+      <Avatar customer size="lg" />
       <Avatar size="xl" />
       <Avatar size="xl" />
     </>

diff --git a/polaris-migrator/src/migrations/v12-react-avatar-component/transform.ts b/polaris-migrator/src/migrations/v12-react-avatar-component/transform.ts
@@ -6,7 +6,7 @@ import {
   hasImportSpecifier,
   normalizeImportSourcePaths,
 } from '../../utilities/imports';
-import {removeJSXAttributes, replaceJSXAttributes} from '../../utilities/jsx';
+import {replaceJSXAttributes} from '../../utilities/jsx';
 
 export interface MigrationOptions extends Options {
   relative?: boolean;
@@ -45,8 +45,6 @@ export default function transformer(
 
   // Find all JSX elements with the name 'Avatar'
   source.findJSXElements(localElementName).forEach((element) => {
-    // Remove the 'customer' prop
-    removeJSXAttributes(j, element, 'customer');
     // Replace the 'size' prop value with the new size
     replaceJSXAttributes(j, element, 'size', 'size', sizeMapping);
   });

diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx
@@ -374,7 +374,7 @@ export function WithAPrefixAndASuffix() {
           },
           {
             content: 'Or there',
-            prefix: <Avatar name="Farrah" size="sm" />,
+            prefix: <Avatar customer name="Farrah" size="sm" />,
             suffix: <Icon source={ChevronRightMinor} />,
           },
         ]}

diff --git a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
@@ -58,7 +58,7 @@ export function Default(_, context) {
             ]}
             renderItem={(item) => {
               const {id, url, name, location} = item;
-              const media = <Avatar size="md" name={name} />;
+              const media = <Avatar customer size="md" name={name} />;
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
@@ -121,7 +121,7 @@ export function WithI18n(_, context) {
             ]}
             renderItem={(item) => {
               const {id, url, name, location} = item;
-              const media = <Avatar size="md" name={name} />;
+              const media = <Avatar customer size="md" name={name} />;
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>

diff --git a/polaris-react/src/components/Avatar/Avatar.stories.tsx b/polaris-react/src/components/Avatar/Avatar.stories.tsx
@@ -79,7 +79,7 @@ export function All() {
             </Text>
             <InlineStack gap="2" blockAlign="center">
               {sizes.map((size) => (
-                <Avatar key={size} size={size} />
+                <Avatar customer key={size} size={size} />
               ))}
             </InlineStack>
           </BlockStack>
@@ -189,11 +189,11 @@ export function ExtraSmallInContext() {
           items={[
             {
               content: 'Chet Baker',
-              prefix: <Avatar size="xs" name="Chet Baker" />,
+              prefix: <Avatar customer size="xs" name="Chet Baker" />,
             },
             {
               content: 'Farrah Fawcett',
-              prefix: <Avatar size="xs" name="Farrah Fawcett" />,
+              prefix: <Avatar customer size="xs" name="Farrah Fawcett" />,
             },
           ]}
         />

diff --git a/polaris-react/src/components/Avatar/Avatar.tsx b/polaris-react/src/components/Avatar/Avatar.tsx
@@ -55,6 +55,8 @@ export interface AvatarProps {
   name?: string;
   /** Initials of person to display */
   initials?: string;
+  /** Whether the avatar is for a customer */
+  customer?: boolean;
   /** URL of the avatar image which falls back to initials if the image fails to load */
   source?: string;
   /** Callback fired when the image fails to load  */
@@ -68,6 +70,7 @@ export function Avatar({
   source,
   onError,
   initials,
+  customer,
   size = 'md',
   accessibilityLabel,
 }: AvatarProps) {
@@ -112,7 +115,9 @@ export function Avatar({
     styles.Avatar,
     size && styles[variationName('size', size)],
     hasImage && status === Status.Loaded && styles.imageHasLoaded,
-    !source && styles[variationName('style', styleClass(nameString))],
+    !customer &&
+      !source &&
+      styles[variationName('style', styleClass(nameString))],
   );
 
   const textClassName = classNames(
@@ -158,20 +163,21 @@ export function Avatar({
     </>
   );
 
-  const avatarBody = !initials ? (
-    avatarPath
-  ) : (
-    <text
-      className={textClassName}
-      x="50%"
-      y="50%"
-      dy={verticalOffset}
-      fill="currentColor"
-      textAnchor="middle"
-    >
-      {initials}
-    </text>
-  );
+  const avatarBody =
+    customer || !initials ? (
+      avatarPath
+    ) : (
+      <text
+        className={textClassName}
+        x="50%"
+        y="50%"
+        dy={verticalOffset}
+        fill="currentColor"
+        textAnchor="middle"
+      >
+        {initials}
+      </text>
+    );
 
   const svgMarkup = hasImage ? null : (
     <span className={styles.Initials}>

diff --git a/polaris-react/src/components/Avatar/tests/Avatar.test.tsx b/polaris-react/src/components/Avatar/tests/Avatar.test.tsx
@@ -46,19 +46,19 @@ describe('<Avatar />', () => {
 
   describe('customer', () => {
     it('renders an inline svg', () => {
-      const avatar = mountWithApp(<Avatar />);
+      const avatar = mountWithApp(<Avatar customer />);
       expect(avatar).toContainReactComponentTimes('svg', 1);
     });
 
     it('does not render a customer Avatar if a source is provided', () => {
       const src = 'image/path/';
-      const avatar = mountWithApp(<Avatar source={src} />);
+      const avatar = mountWithApp(<Avatar customer source={src} />);
       expect(avatar).not.toContainReactComponent('svg');
     });
 
     it('does not apply a style class', () => {
       const src = 'image/path/';
-      const avatar = mountWithApp(<Avatar source={src} />);
+      const avatar = mountWithApp(<Avatar customer source={src} />);
       expect(avatar).toContainReactComponent('span', {
         className: 'Avatar sizeMd',
       });

diff --git a/polaris-react/src/components/Filters/Filters.stories.tsx b/polaris-react/src/components/Filters/Filters.stories.tsx
@@ -184,7 +184,7 @@ export function WithAResourceList() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -500,7 +500,7 @@ export function WithChildrenContent() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -631,7 +631,7 @@ export function Disabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -781,7 +781,7 @@ export function SomeDisabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -983,7 +983,7 @@ export function WithQueryFieldHidden() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1181,7 +1181,7 @@ export function WithQueryFieldDisabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1405,7 +1405,7 @@ export function WithAdditionalFilterSections() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item

diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.stories.tsx b/polaris-react/src/components/LegacyFilters/LegacyFilters.stories.tsx
@@ -179,7 +179,7 @@ export function WithAResourceList() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -493,7 +493,7 @@ export function WithChildrenContent() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -621,7 +621,7 @@ export function Disabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -768,7 +768,7 @@ export function SomeDisabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -897,7 +897,7 @@ export function WithoutClearButton() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1090,7 +1090,7 @@ export function WithHelpText() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1286,7 +1286,7 @@ export function WithQueryFieldHidden() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1482,7 +1482,7 @@ export function WithQueryFieldDisabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar size="md" name={name} />;
+            const media = <Avatar customer size="md" name={name} />;
 
             return (
               <ResourceList.Item

diff --git a/polaris-react/src/components/OptionList/OptionList.stories.tsx b/polaris-react/src/components/OptionList/OptionList.stories.tsx
@@ -334,7 +334,7 @@ export function All() {
                 {
                   value: 'avatar_extra_small',
                   label: 'Avatar extra small',
-                  media: <Avatar name="Hello World" size="sm" />,
+                  media: <Avatar name="Hello World" size="xs" />,
                 },
                 {
                   value: 'avatar_small',

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx
@@ -102,7 +102,9 @@ export function SelectableWithMedia() {
             <ResourceItem
               id={id}
               url={url}
-              media={<Avatar size="md" name={name} source={avatarSource} />}
+              media={
+                <Avatar customer size="md" name={name} source={avatarSource} />
+              }
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >
@@ -142,7 +144,9 @@ export function WithMedia() {
             <ResourceItem
               id={id}
               url={url}
-              media={<Avatar size="md" name={name} source={avatarSource} />}
+              media={
+                <Avatar customer size="md" name={name} source={avatarSource} />
+              }
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >
@@ -183,7 +187,9 @@ export function WithShortcutActions() {
             <ResourceItem
               id={id}
               url={url}
-              media={<Avatar size="md" name={name} source={avatarSource} />}
+              media={
+                <Avatar customer size="md" name={name} source={avatarSource} />
+              }
               shortcutActions={[
                 {content: 'View latest order', url: latestOrderUrl},
               ]}
@@ -230,7 +236,9 @@ export function WithPersistedShortcutActions() {
             <ResourceItem
               id={id}
               url={url}
-              media={<Avatar size="md" name={name} source={avatarSource} />}
+              media={
+                <Avatar customer size="md" name={name} source={avatarSource} />
+              }
               persistActions
               shortcutActions={shortcutActions}
               accessibilityLabel={`View details for ${name}`}
@@ -273,7 +281,9 @@ export function WithVerticalAlignment() {
               verticalAlignment="center"
               id={id}
               url={url}
-              media={<Avatar size="md" name={name} source={avatarSource} />}
+              media={
+                <Avatar customer size="md" name={name} source={avatarSource} />
+              }
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >

diff --git a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
@@ -559,7 +559,7 @@ describe('<ResourceItem />', () => {
     it('includes an <Avatar /> if one is provided', () => {
       const wrapper = mountWithApp(
         <ResourceListContext.Provider value={mockDefaultContext}>
-          <ResourceItem id={itemId} url={url} media={<Avatar />} />
+          <ResourceItem id={itemId} url={url} media={<Avatar customer />} />
         </ResourceListContext.Provider>,
       );
       expect(wrapper).toContainReactComponent(Avatar);