[Avatar] Add shape parameter (#6103)

* Add shape param to Avatar

* Add example to polaris.shopify.com page

* Revert "Add example to polaris.shopify.com page"

This reverts commit 3d2768f.

* update fonts

* revert font size changes (unneeded)

* update font size

* Update .changeset/yellow-worms-behave.md

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>

* use variationName for square css class (per code review)

* add a test

* Improve documentation to provide proper usage instructions

* Update .changeset/yellow-worms-behave.md

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>

.changeset/yellow-worms-behave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added a `shape` prop to `Avatar`

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

@@ -24,6 +24,10 @@
   }
 }
 
+.shapeSquare {
+  border-radius: var(--p-border-radius-05);
+}
+
 .hidden {
   visibility: hidden;
 }

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

@@ -9,6 +9,8 @@ import styles from './Avatar.scss';
 
 type Size = 'extraSmall' | 'small' | 'medium' | 'large';
 
+type Shape = 'square' | 'round';
+
 enum Status {
   Pending = 'PENDING',
   Loaded = 'LOADED',
@@ -23,6 +25,11 @@ export interface AvatarProps {
    * @default 'medium'
    */
   size?: Size;
+  /**
+   * Shape of avatar
+   * @default 'round'
+   */
+  shape?: Shape;
   /** The name of the person */
   name?: string;
   /** Initials of person to display */
@@ -44,6 +51,7 @@ export function Avatar({
   initials,
   customer,
   size = 'medium',
+  shape = 'round',
   accessibilityLabel,
 }: AvatarProps) {
   const i18n = useI18n();
@@ -96,6 +104,7 @@ export function Avatar({
     size && styles[variationName('size', size)],
     !customer && styles[variationName('style', styleClass(nameString))],
     hasImage && status === Status.Loaded && styles.imageHasLoaded,
+    shape && styles[variationName('shape', shape)],
   );
 
   const imageClassName = classNames(
@@ -129,7 +138,8 @@ export function Avatar({
         y="50%"
         dy={verticalOffset}
         fill="currentColor"
-        fontSize="20"
+        fontSize={shape === 'square' ? '15.5' : '20'}
+        fontWeight={shape === 'square' ? '600' : '400'}
         textAnchor="middle"
       >
         {initials}

polaris-react/src/components/Avatar/README.md

@@ -115,6 +115,14 @@ function ExtraSmallAvatarExample() {
 }
 ```
 
+### Square avatar
+
+Use a `square` shape when the avatar represents a non-person entity like an app, channel, or store.
+
+```jsx
+<Avatar name="Shop One" shape="square" />
+```
+
 ---
 
 ## Related components

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

@@ -129,4 +129,14 @@ describe('<Avatar />', () => {
       });
     });
   });
+
+  describe('shape', () => {
+    it('renders a square background when square is passed to shape', () => {
+      const avatar = mountWithApp(<Avatar initials="DL" shape="square" />);
+
+      expect(avatar).toContainReactComponent('span', {
+        className: expect.stringContaining('shapeSquare'),
+      });
+    });
+  });
 });