From df28c92740492c2c84c82e94a07d290a20cbfcf2 Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Wed, 12 Jun 2019 21:57:28 -0700
Subject: [PATCH 1/3] Upgrade @zendeskgarden/css-avatars

---
 packages/avatars/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/avatars/package.json b/packages/avatars/package.json
index 3400052a202..d463ba8d4e8 100644
--- a/packages/avatars/package.json
+++ b/packages/avatars/package.json
@@ -29,7 +29,7 @@
     "styled-components": "^4.2.0"
   },
   "devDependencies": {
-    "@zendeskgarden/css-avatars": "5.0.0",
+    "@zendeskgarden/css-avatars": "6.0.0",
     "@zendeskgarden/react-theming": "^6.0.1"
   },
   "keywords": [

From cd1e82fa05fa76853b782fa701be00f2bf8cfb4c Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Wed, 12 Jun 2019 21:58:21 -0700
Subject: [PATCH 2/3] Fix `system` -> `isSystem`

---
 packages/avatars/src/Avatar.example.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/avatars/src/Avatar.example.md b/packages/avatars/src/Avatar.example.md
index 32efda60ec3..4da314cc2b8 100644
--- a/packages/avatars/src/Avatar.example.md
+++ b/packages/avatars/src/Avatar.example.md
@@ -27,7 +27,7 @@ const StyledSvgAvatar = styled(Avatar)`
     </Col>
     <Col md>
       <h3>System</h3>
-      <Avatar system>
+      <Avatar isSystem>
         <img src="images/system.png" alt="System avatar" />
       </Avatar>
     </Col>
@@ -75,22 +75,22 @@ const StyledSvgAvatar = styled(Avatar)`
   </Row>
   <Row alignItems="center" justifyContent="center">
     <Col md>
-      <Avatar size="extrasmall" system>
+      <Avatar size="extrasmall" isSystem>
         <img src="images/system.png" alt="System Avatar" />
       </Avatar>
     </Col>
     <Col md>
-      <Avatar size="small" system>
+      <Avatar size="small" isSystem>
         <img src="images/system.png" alt="System Avatar" />
       </Avatar>
     </Col>
     <Col md>
-      <Avatar system>
+      <Avatar isSystem>
         <img src="images/system.png" alt="System Avatar" />
       </Avatar>
     </Col>
     <Col md>
-      <Avatar size="large" system>
+      <Avatar size="large" isSystem>
         <img src="images/system.png" alt="System Avatar" />
       </Avatar>
     </Col>

From 31fb3f3b80c94c30c33e18681165a7842f52f0ff Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Wed, 12 Jun 2019 22:00:28 -0700
Subject: [PATCH 3/3] =?UTF-8?q?Remove=20`badge`=20element=20=E2=80=93?=
 =?UTF-8?q?=C2=A0now=20handled=20via=20data=20attribute?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/avatars/src/Avatar.js      | 20 ++++----------------
 packages/avatars/src/Avatar.spec.js | 10 +++-------
 packages/avatars/src/styled.js      | 13 -------------
 packages/avatars/src/styled.spec.js | 10 +---------
 4 files changed, 8 insertions(+), 45 deletions(-)

diff --git a/packages/avatars/src/Avatar.js b/packages/avatars/src/Avatar.js
index a76b3ac04b7..fa9555ffd26 100644
--- a/packages/avatars/src/Avatar.js
+++ b/packages/avatars/src/Avatar.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyledAvatar, StyledBadge } from './styled';
+import { StyledAvatar } from './styled';
 
 const SIZE = {
   EXTRASMALL: 'extrasmall',
@@ -27,32 +27,20 @@ const STATUS = {
 const Avatar = ({ isSystem, size, status, children, badge, ...other }) => {
   let computedStatus = status;
 
-  if (status === STATUS.AVAILABLE && badge !== undefined) {
+  if (status === STATUS.AVAILABLE && badge) {
     computedStatus = STATUS.ACTIVE;
   }
 
-  const FormattedBadge = () => {
-    if (status === undefined || status === STATUS.AWAY) {
-      return null;
-    }
-
-    if (computedStatus === STATUS.AVAILABLE) {
-      return <StyledBadge />;
-    }
-
-    return <StyledBadge>{badge}</StyledBadge>;
-  };
-
   return (
     <StyledAvatar
       isSystem={isSystem}
       size={size}
       status={computedStatus}
+      data-badge={badge}
       aria-live="polite"
       {...other}
     >
       {children}
-      <FormattedBadge />
     </StyledAvatar>
   );
 };
@@ -60,7 +48,7 @@ const Avatar = ({ isSystem, size, status, children, badge, ...other }) => {
 Avatar.propTypes = {
   /** Applies system styling */
   isSystem: PropTypes.bool,
-  badge: PropTypes.node,
+  badge: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
   size: PropTypes.oneOf([SIZE.EXTRASMALL, SIZE.SMALL, SIZE.LARGE]),
   status: PropTypes.oneOf([STATUS.AVAILABLE, STATUS.AWAY]),
   children: PropTypes.node
diff --git a/packages/avatars/src/Avatar.spec.js b/packages/avatars/src/Avatar.spec.js
index d6c0e7c4b27..ecffd257cee 100644
--- a/packages/avatars/src/Avatar.spec.js
+++ b/packages/avatars/src/Avatar.spec.js
@@ -35,19 +35,15 @@ describe('Avatar', () => {
   });
 
   it('applies active styling if provided with badge', () => {
-    const { container } = render(
-      <Avatar status="available" badge={<span data-test-id="badge">2</span>} />
-    );
+    const { container } = render(<Avatar status="available" badge="2" />);
 
     expect(container.firstChild).toHaveClass('is-active');
   });
 
   it('renders badge if provided with status', () => {
-    const { getByTestId } = render(
-      <Avatar status="available" badge={<span data-test-id="badge">2</span>} />
-    );
+    const { container } = render(<Avatar status="available" badge="2" />);
 
-    expect(getByTestId('badge')).not.toBeUndefined();
+    expect(container.firstChild).toHaveAttribute('data-badge');
   });
 
   it('does not render badge if away status is provided', () => {
diff --git a/packages/avatars/src/styled.js b/packages/avatars/src/styled.js
index dbe33358df2..a1197633ce8 100644
--- a/packages/avatars/src/styled.js
+++ b/packages/avatars/src/styled.js
@@ -58,19 +58,6 @@ StyledAvatar.propTypes = {
   status: PropTypes.oneOf([STATUS.AVAILABLE, STATUS.ACTIVE, STATUS.AWAY])
 };
 
-const BADGE_COMPONENT_ID = 'avatars.badge';
-
-/**
- * Accepts all `<figcaption>` attributes
- */
-export const StyledBadge = styled.figcaption.attrs({
-  'data-garden-id': BADGE_COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION,
-  className: AvatarStyles['c-avatar__badge']
-})`
-  ${props => retrieveTheme(BADGE_COMPONENT_ID, props)};
-`;
-
 const TEXT_COMPONENT_ID = 'avatars.text';
 
 /**
diff --git a/packages/avatars/src/styled.spec.js b/packages/avatars/src/styled.spec.js
index aea91d25e59..b1f88c074a7 100644
--- a/packages/avatars/src/styled.spec.js
+++ b/packages/avatars/src/styled.spec.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
-import { StyledAvatar, StyledBadge, StyledText } from './styled';
+import { StyledAvatar, StyledText } from './styled';
 
 describe('Styled Elements', () => {
   describe('StyledAvatar', () => {
@@ -52,14 +52,6 @@ describe('Styled Elements', () => {
     });
   });
 
-  describe('StyledBadge', () => {
-    it('renders badge styling by default', () => {
-      const { container } = render(<StyledBadge />);
-
-      expect(container.firstChild).toHaveClass(`c-avatar__badge`);
-    });
-  });
-
   describe('StyledText', () => {
     it('renders text styling by default', () => {
       const { container } = render(<StyledText />);