From a622544db457e87fc88223bc78b84782c69674f3 Mon Sep 17 00:00:00 2001
From: clarkjennings <98601178+clarkjennings@users.noreply.github.com>
Date: Thu, 16 Jun 2022 14:01:19 -0400
Subject: [PATCH] [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 3d2768f299a2f29be9d52dbfae9dde1e2aace99e.

* 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                    |  5 +++++
 polaris-react/src/components/Avatar/Avatar.scss      |  4 ++++
 polaris-react/src/components/Avatar/Avatar.tsx       | 12 +++++++++++-
 polaris-react/src/components/Avatar/README.md        |  8 ++++++++
 .../src/components/Avatar/tests/Avatar.test.tsx      | 10 ++++++++++
 5 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/yellow-worms-behave.md

diff --git a/.changeset/yellow-worms-behave.md b/.changeset/yellow-worms-behave.md
new file mode 100644
index 00000000000..4959f926f56
--- /dev/null
+++ b/.changeset/yellow-worms-behave.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added a `shape` prop to `Avatar`
diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
index b9e069da0a7..e71f465ccbd 100644
--- a/polaris-react/src/components/Avatar/Avatar.scss
+++ b/polaris-react/src/components/Avatar/Avatar.scss
@@ -24,6 +24,10 @@
   }
 }
 
+.shapeSquare {
+  border-radius: var(--p-border-radius-05);
+}
+
 .hidden {
   visibility: hidden;
 }
diff --git a/polaris-react/src/components/Avatar/Avatar.tsx b/polaris-react/src/components/Avatar/Avatar.tsx
index 2613ea03753..fc4fee0124c 100644
--- a/polaris-react/src/components/Avatar/Avatar.tsx
+++ b/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}
diff --git a/polaris-react/src/components/Avatar/README.md b/polaris-react/src/components/Avatar/README.md
index 0aec6173c26..a7c30c4b65c 100644
--- a/polaris-react/src/components/Avatar/README.md
+++ b/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
diff --git a/polaris-react/src/components/Avatar/tests/Avatar.test.tsx b/polaris-react/src/components/Avatar/tests/Avatar.test.tsx
index dbbe3e0cce8..6ab803f550c 100644
--- a/polaris-react/src/components/Avatar/tests/Avatar.test.tsx
+++ b/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'),
+      });
+    });
+  });
 });