[Avatar] Remove customer prop and experiemntal values

Author: sam-b-rose

.changeset/hot-apples-press.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed experimental suffix from Avatar size values

documentation/guides/migrating-from-v11-to-v12.md

@@ -8,6 +8,16 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 
 ## Quick migration guide
 
+**Avatar**
+
+- Customer
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Avatar" --from="customer" --to=""`
+
+- Size
+
+`... coming soon`
+
 **Layout.Section**
 
 - One third:

polaris-react/src/components/ActionList/ActionList.stories.tsx

@@ -374,7 +374,7 @@ export function WithAPrefixAndASuffix() {
           },
           {
             content: 'Or there',
-            prefix: <Avatar customer name="Farrah" size="small" />,
+            prefix: <Avatar name="Farrah" size="small" />,
             suffix: <Icon source={ChevronRightMinor} />,
           },
         ]}

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 customer size="medium" name={name} />;
+              const media = <Avatar size="medium" 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 customer size="medium" name={name} />;
+              const media = <Avatar size="medium" name={name} />;
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>

polaris-react/src/components/Avatar/Avatar.stories.tsx

@@ -23,12 +23,12 @@ export default {
 const sizes: {
   [S in NonNullable<AvatarProps['size']>]: string;
 } = {
-  '2xl-experimental': 'XXL',
-  'xl-experimental': 'XL',
+  '2xl': 'XXL',
+  xl: 'XL',
   large: 'Large',
   medium: 'Medium',
   small: 'Small',
-  extraSmall: 'XS',
+  xs: 'XS',
 };
 
 const sizeEntries = Object.entries(sizes) as Entries<typeof sizes>;
@@ -84,7 +84,7 @@ export function All() {
             </Text>
             <InlineStack gap="2" blockAlign="center">
               {sizeEntries.map(([size]) => (
-                <Avatar key={size} size={size} customer />
+                <Avatar key={size} size={size} />
               ))}
             </InlineStack>
           </BlockStack>
@@ -194,13 +194,11 @@ export function ExtraSmallInContext() {
           items={[
             {
               content: 'Chet Baker',
-              prefix: <Avatar customer size="extraSmall" name="Chet Baker" />,
+              prefix: <Avatar size="extraSmall" name="Chet Baker" />,
             },
             {
               content: 'Farrah Fawcett',
-              prefix: (
-                <Avatar customer size="extraSmall" name="Farrah Fawcett" />
-              ),
+              prefix: <Avatar size="extraSmall" name="Farrah Fawcett" />,
             },
           ]}
         />

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

@@ -1,19 +1,13 @@
 import React, {useState, useCallback, useEffect} from 'react';
 
-import type {Experimental} from '../../types';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {useIsAfterInitialMount} from '../../utilities/use-is-after-initial-mount';
 import {Image} from '../Image';
 
 import styles from './Avatar.scss';
 
-type Size =
-  | 'extraSmall'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | Experimental<'xl' | '2xl'>;
+type Size = 'xs' | 'small' | 'medium' | 'large' | 'xl' | '2xl';
 
 enum Status {
   Pending = 'PENDING',
@@ -24,12 +18,12 @@ enum Status {
 export const STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five'] as const;
 
 const avatarStrokeWidth: {[S in Size]: string} = {
-  extraSmall: '3',
+  xs: '3',
   small: '2.5',
   medium: '2.5',
   large: '2.5',
-  'xl-experimental': '2',
-  '2xl-experimental': '1.5',
+  xl: '2',
+  '2xl': '1.5',
 };
 
 /**
@@ -62,8 +56,6 @@ 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  */
@@ -77,7 +69,6 @@ export function Avatar({
   source,
   onError,
   initials,
-  customer,
   size = 'medium',
   accessibilityLabel,
 }: AvatarProps) {
@@ -122,9 +113,7 @@ export function Avatar({
     styles.Avatar,
     size && styles[variationName('size', size)],
     hasImage && status === Status.Loaded && styles.imageHasLoaded,
-    !customer &&
-      !source &&
-      styles[variationName('style', styleClass(nameString))],
+    !source && styles[variationName('style', styleClass(nameString))],
   );
 
   const textClassName = classNames(
@@ -170,21 +159,20 @@ export function Avatar({
     </>
   );
 
-  const avatarBody =
-    customer || !initials ? (
-      avatarPath
-    ) : (
-      <text
-        className={textClassName}
-        x="50%"
-        y="50%"
-        dy={verticalOffset}
-        fill="currentColor"
-        textAnchor="middle"
-      >
-        {initials}
-      </text>
-    );
+  const avatarBody = !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}>

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 customer />);
+      const avatar = mountWithApp(<Avatar />);
       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 customer source={src} />);
+      const avatar = mountWithApp(<Avatar source={src} />);
       expect(avatar).not.toContainReactComponent('svg');
     });
 
     it('does not apply a style class', () => {
       const src = 'image/path/';
-      const avatar = mountWithApp(<Avatar customer source={src} />);
+      const avatar = mountWithApp(<Avatar source={src} />);
       expect(avatar).toContainReactComponent('span', {
         className: 'Avatar sizeMedium',
       });

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 customer />} />
+          <ResourceItem id={itemId} url={url} media={<Avatar />} />
         </ResourceListContext.Provider>,
       );
       expect(wrapper).toContainReactComponent(Avatar);

polaris.shopify.com/content/components/images-and-icons/avatar.md

@@ -32,12 +32,14 @@ examples:
 
 ## Best practices
 
-Avatars should be one of 4 sizes:
-
-- Extra small (24 x 24 px): use in tightly condensed layouts
-- Small (32 × 32 px): use when the medium size is too big for the layout, or when the avatar has less importance
-- Medium (40 × 40 px): use as the default size
-- Large (60 × 60 px): use when an avatar is a focal point, such as on a single customer card
+Avatars should be one of 6 sizes:
+
+- Extra small (20 x 20 px): use in tightly condensed layouts
+- Small (24 × 24 px): use when the medium size is too big for the layout, or when the avatar has less importance
+- Medium (28 × 28 px): use as the default size
+- Large (32 × 32 px): use when an avatar is a focal point, such as on a single customer card
+- Extra large (40 × 40 px): use when an avatar is a focal point, such as on a single customer card
+- 2 extra large (54 × 54 px): use when an avatar is a focal point, such as on a single customer card
 
 ---
 

polaris.shopify.com/pages/examples/avatar-default.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AvatarExample() {
-  return <Avatar customer name="Farrah" />;
+  return <Avatar name="Farrah" />;
 }
 
 export default withPolarisExample(AvatarExample);