[Avatar] Remove customer prop and experiemntal values (Shopify#10283)

### WHY are these changes introduced?

Fixes Shopify#9977

### WHAT is this pull request doing?

- [x] Remove `customer` boolean prop (make the default)
- [x] Remove `-experimental` from `size` prop
- [x] Update Avatar stories
- [x] Update Avatar documentation examples
- [x] Update `v12` migration guide
- [x] Write migration for `Avatar` prop changes 
  - [x] remove `customer` prop
  - [x] `size` prop mapping

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Sam Rose <11774595+samrose3@users.noreply.github.com>
Co-authored-by: aveline <aveline@users.noreply.github.com>

Author: sam-b-rose

.changeset/hot-apples-press.md

@@ -0,0 +1,14 @@
+---
+'@shopify/polaris': major
+---
+
+Renamed `size` prop values for the Avatar component. See the following table for the new prop mappings.
+
+| Before                    | After       |
+| ------------------------- | ----------- |
+| `size="extraSmall"`       | `size="xs"` |
+| `size="small"`            | `size="sm"` |
+| `size="medium"`           | `size="md"` |
+| `size="large"`            | `size="lg"` |
+| `size="xl-experimental"`  | `size="xl"` |
+| `size="2xl-experimental"` | `size="xl"` |

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

@@ -8,6 +8,22 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 
 ## Quick migration guide
 
+**Avatar**
+
+`npx @shopify/polaris-migrator v12-react-avatar-component <path>`
+
+- Remove the `customer` prop
+- Replace the `size` prop with the new mapping below
+
+| Before                    | After       |
+| ------------------------- | ----------- |
+| `size="extraSmall"`       | `size="xs"` |
+| `size="small"`            | `size="sm"` |
+| `size="medium"`           | `size="md"` |
+| `size="large"`            | `size="lg"` |
+| `size="xl-experimental"`  | `size="xl"` |
+| `size="2xl-experimental"` | `size="xl"` |
+
 **Badge**
 
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Badge" --from="status" --to="tone"`

polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/transform.ts

@@ -1,4 +1,10 @@
-import type {API, FileInfo, Options} from 'jscodeshift';
+import type {
+  API,
+  FileInfo,
+  Options,
+  ArrayExpression,
+  ASTPath,
+} from 'jscodeshift';
 
 import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
 import {
@@ -69,15 +75,12 @@ export default function transformer(
       return true;
     })
     .find(j.ArrayExpression)
-    .replaceWith((nodePath) => {
+    .replaceWith((nodePath: ASTPath<ArrayExpression>) => {
       const arrayOfBreadcrumbs = nodePath.node.elements;
 
       if (arrayOfBreadcrumbs.length === 0) {
-        removeJSXAttributes(
-          j,
-          nodePath.parentPath.parentPath.parentPath.parentPath,
-          'breadcrumbs',
-        );
+        const element = j(nodePath).closest(j.JSXElement).paths()[0];
+        removeJSXAttributes(j, element, 'breadcrumbs');
         return;
       }
 

polaris-migrator/src/migrations/v12-react-avatar-component/tests/transform.test.ts

@@ -0,0 +1,14 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v12-react-avatar-component';
+const fixtures = ['v12-react-avatar-component'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    transform,
+    options: {
+      relative: fixture.includes('relative') ? true : undefined,
+    },
+  });
+}

polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.input.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Avatar} from '@shopify/polaris';
+
+export function App() {
+  return (
+    <>
+      <Avatar customer size="unknown" />
+      <Avatar customer size="extraSmall" />
+      <Avatar customer size="small" />
+      <Avatar customer size="medium" />
+      <Avatar customer size="large" />
+      <Avatar size="xl-experimental" />
+      <Avatar size="2xl-experimental" />
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.output.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+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 size="xl" />
+      <Avatar size="xl" />
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-avatar-component/transform.ts

@@ -0,0 +1,66 @@
+import type {API, FileInfo, Options} from 'jscodeshift';
+
+import {
+  getImportSpecifierName,
+  hasImportDeclaration,
+  hasImportSpecifier,
+  normalizeImportSourcePaths,
+} from '../../utilities/imports';
+import {removeJSXAttributes, replaceJSXAttributes} from '../../utilities/jsx';
+
+export interface MigrationOptions extends Options {
+  relative?: boolean;
+}
+
+export default function transformer(
+  file: FileInfo,
+  {jscodeshift: j}: API,
+  options: MigrationOptions,
+) {
+  const source = j(file.source);
+
+  if (
+    !options.relative &&
+    !hasImportDeclaration(j, source, '@shopify/polaris')
+  ) {
+    return file.source;
+  }
+
+  const sourcePaths = normalizeImportSourcePaths(j, source, {
+    relative: options.relative,
+    from: 'Avatar',
+    to: 'Avatar',
+  });
+
+  if (!sourcePaths) return;
+  if (
+    !hasImportSpecifier(j, source, 'Avatar', sourcePaths.from) &&
+    !hasImportSpecifier(j, source, 'AvatarProps', sourcePaths.from)
+  ) {
+    return;
+  }
+
+  const localElementName =
+    getImportSpecifierName(j, source, 'Avatar', sourcePaths.from) || 'Avatar';
+
+  // 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);
+  });
+
+  return source.toSource();
+}
+
+// Define the mapping of old sizes to new sizes
+const sizeMapping = {
+  extraSmall: 'xs',
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  'xl-experimental': 'xl',
+  // 2xl-experimental is not supported in the new Avatar component
+  '2xl-experimental': 'xl',
+};

polaris-migrator/src/utilities/jsx.ts

@@ -39,7 +39,7 @@ export function removeJSXAttributes(
   element: ASTPath<JSXElement>,
   attributeName: string,
 ) {
-  const jsxAttributes = element.value.attributes?.filter(
+  const jsxAttributes = element.value.openingElement?.attributes?.filter(
     (attr) => attr.type === 'JSXAttribute' && attr.name.name === attributeName,
   );
 
@@ -97,10 +97,18 @@ export function replaceJSXAttributes(
     j(attribute)
       .find(j.StringLiteral)
       .forEach((literal) => {
-        literal.node.value =
-          typeof newAttributeValue === 'string'
-            ? newAttributeValue
-            : newAttributeValue[literal.node.value];
+        const isStringLiteral = typeof newAttributeValue === 'string';
+
+        if (isStringLiteral) {
+          literal.node.value = newAttributeValue;
+          return;
+        }
+
+        const value = literal.node.value as string;
+
+        if (value in newAttributeValue) {
+          literal.node.value = newAttributeValue[literal.node.value];
+        }
       });
   });
 }

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