fix(avatars): explicitly set box sizing for status indicator icon container (#1564)

Author: Francois-Esquire

packages/avatars/.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 21646,
-    "minified": 15766,
-    "gzipped": 4079
+    "bundled": 21669,
+    "minified": 15789,
+    "gzipped": 4081
   },
   "index.esm.js": {
-    "bundled": 19928,
-    "minified": 14251,
-    "gzipped": 3856,
+    "bundled": 19951,
+    "minified": 14274,
+    "gzipped": 3859,
     "treeshaked": {
       "rollup": {
-        "code": 11632,
+        "code": 11655,
         "import_statements": 341
       },
       "webpack": {
-        "code": 12478
+        "code": 12501
       }
     }
   }

packages/avatars/demo/~patterns/stories/StatusMenuStory.tsx

@@ -10,6 +10,7 @@ import { Story } from '@storybook/react';
 import { Col, Grid, Row } from '@zendeskgarden/react-grid';
 import { Dropdown, Trigger, Menu, Item } from '@zendeskgarden/react-dropdowns';
 import { Avatar, IStatusIndicatorProps, StatusIndicator } from '@zendeskgarden/react-avatars';
+import { IconButton } from '@zendeskgarden/react-buttons';
 
 export const StatusMenuStory: Story = ({ isCompact }) => {
   const [selectedType, setSelectedType] = useState<IStatusIndicatorProps['type']>();
@@ -20,9 +21,11 @@ export const StatusMenuStory: Story = ({ isCompact }) => {
         <Col textAlign="center" alignSelf="center">
           <Dropdown selectedItem={selectedType} onSelect={value => setSelectedType(value)}>
             <Trigger>
-              <Avatar status={selectedType} size={isCompact ? 'small' : 'medium'}>
-                <img alt="Example User" src="images/avatars/chrome.png" />
-              </Avatar>
+              <IconButton>
+                <Avatar status={selectedType} size={isCompact ? 'small' : 'medium'}>
+                  <img alt="Example User" src="images/avatars/chrome.png" />
+                </Avatar>
+              </IconButton>
             </Trigger>
             <Menu isCompact={isCompact}>
               <Item value="offline">

packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts

@@ -18,6 +18,7 @@ export const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase)
   'data-garden-version': PACKAGE_VERSION
 })<IStyledStatusIndicatorProps>`
   position: relative;
+  box-sizing: content-box;
   margin-top: ${props =>
     `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`};