[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>
AnnaCheba · Sep 14, 2023 · 15352ad · 15352ad
1 parent 54ac269
commit 15352ad
Show file tree

Hide file tree

Showing 65 changed files with 336 additions and 266 deletions.
diff --git a/.changeset/hot-apples-press.md b/.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"` |
diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/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"`

diff --git a/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/transform.ts b/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;
       }
 

diff --git a/polaris-migrator/src/migrations/v12-react-avatar-component/tests/transform.test.ts b/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,
+    },
+  });
+}
diff --git a/...ator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.input.tsx b/...ator/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" />
+    </>
+  );
+}
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
@@ -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" />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-avatar-component/transform.ts b/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',
+};
diff --git a/polaris-migrator/src/utilities/jsx.ts b/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];
+        }
       });
   });
 }

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 customer name="Farrah" size="small" />,
+            prefix: <Avatar 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 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}>

diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
@@ -2,18 +2,17 @@
 
 .Avatar {
   // stylelint-disable -- Polaris component custom properties
-  --pc-avatar-extra-small-size: 20px;
-  --pc-avatar-small-size: 24px;
-  --pc-avatar-medium-size: 28px;
-  --pc-avatar-large-size: 32px;
-  --pc-avatar-xl-size-experimental: 40px;
-  --pc-avatar-2xl-size-experimental: 54px;
+  --pc-avatar-xs-size: 20px;
+  --pc-avatar-sm-size: 24px;
+  --pc-avatar-md-size: 28px;
+  --pc-avatar-lg-size: 32px;
+  --pc-avatar-xl-size: 40px;
   // stylelint-enable
   position: relative;
   display: block;
   overflow: hidden;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  min-width: var(--pc-avatar-extra-small-size);
+  min-width: var(--pc-avatar-xs-size);
   max-width: 100%;
   background: var(--p-color-avatar-background-experimental);
   color: var(--p-color-avatar-color-experimental);
@@ -48,48 +47,41 @@
   visibility: hidden;
 }
 
-.sizeExtraSmall {
+.sizeXs {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--pc-avatar-extra-small-size);
+  width: var(--pc-avatar-xs-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 4px;
 }
 
-.sizeSmall {
+.sizeSm {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--pc-avatar-small-size);
+  width: var(--pc-avatar-sm-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 6px;
 }
 
-.sizeMedium {
+.sizeMd {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--pc-avatar-medium-size);
+  width: var(--pc-avatar-md-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 6px;
 }
 
-.sizeLarge {
+.sizeLg {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--pc-avatar-large-size);
+  width: var(--pc-avatar-lg-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 8px;
 }
 
-.sizeXl-experimental {
+.sizeXl {
   // stylelint-disable-next-line -- custom overrides
-  width: var(--pc-avatar-xl-size-experimental);
+  width: var(--pc-avatar-xl-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 8px;
 }
 
-.size2xl-experimental {
-  // stylelint-disable-next-line -- custom overrides
-  width: var(--pc-avatar-2xl-size-experimental);
-  // stylelint-disable-next-line -- custom overrides
-  border-radius: 10px;
-}
-
 .styleOne {
   background: var(--p-color-avatar-style-one-background-experimental);
   color: var(--p-color-avatar-style-one-color-experimental);