@zendeskgarden/react-avatars 9.7.2 → 9.8.0

package/dist/esm/elements/StatusIndicator.js

@@ -36,16 +36,17 @@ const StatusIndicator = forwardRef((_ref, ref) => {
   const defaultLabel = useMemo(() => ['status'].concat(type || []).join(': '), [type]);
   const ariaLabel = useText(StatusIndicator, {
     'aria-label': label
-  }, 'aria-label', defaultLabel);
+  }, 'aria-label', defaultLabel, label !== null);
   return (
     React__default.createElement(StyledStandaloneStatus, Object.assign({
       role: "status",
       ref: ref
     }, props), React__default.createElement(StyledStandaloneStatusIndicator, {
+      "aria-hidden": label === null ? true : undefined,
+      "aria-label": ariaLabel,
       role: "img",
       $type: type,
-      $size: isCompact ? 'small' : 'medium',
-      "aria-label": ariaLabel
+      $size: isCompact ? 'small' : 'medium'
     }, type === 'away' ? React__default.createElement(ClockIcon, {
       "data-icon-status": type,
       "aria-hidden": "true"
@@ -57,6 +58,7 @@ const StatusIndicator = forwardRef((_ref, ref) => {
 });
 StatusIndicator.displayName = 'StatusIndicator';
 StatusIndicator.propTypes = {
+  'aria-label': PropTypes.string,
   type: PropTypes.oneOf(STATUS),
   isCompact: PropTypes.bool
 };

package/dist/esm/styled/StyledAvatar.js

@@ -108,7 +108,7 @@ const sizeStyles = props => {
 };
 const StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"

package/dist/esm/styled/StyledStandaloneStatus.js

@@ -11,7 +11,7 @@ import { TRANSITION_DURATION } from './utility.js';
 const COMPONENT_ID = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"

package/dist/esm/styled/StyledStandaloneStatusCaption.js

@@ -14,7 +14,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled.figcaption.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"

package/dist/esm/styled/StyledStandaloneStatusIndicator.js

@@ -12,7 +12,7 @@ import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"

package/dist/esm/styled/StyledStatusIndicator.js

@@ -9,12 +9,13 @@ import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-t
 import { math } from 'polished';
 import { SIZE } from '../types/index.js';
 import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
-import { includes, getStatusBorderOffset } from './utility.js';
+import { getStatusBorderOffset, includes } from './utility.js';
 
 const COMPONENT_ID = 'avatars.status_indicator';
 const [xxs, xs, s, m, l] = SIZE;
 const sizeStyles = props => {
-  const isVisible = !includes([xxs, xs], props.$size);
+  const isVisible = props.$size !== xxs;
+  const iconSize = props.$size === xs ? `${props.theme.space.base * 2}px` : undefined;
   const borderWidth = getStatusBorderOffset(props);
   let padding = '0';
   if (props.$size === s) {
@@ -22,7 +23,7 @@ const sizeStyles = props => {
   } else if (includes([m, l], props.$size)) {
     padding = math(`${props.theme.space.base + 3}px - (${borderWidth} * 2)`);
   }
-  return css(["max-width:calc(2em + (", " * 3));box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", "}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;');
+  return css(["max-width:calc(2em + (", " * 3));box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", " width:", ";height:", ";}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', iconSize, iconSize);
 };
 const colorStyles = _ref => {
   let {
@@ -50,7 +51,7 @@ const colorStyles = _ref => {
 };
 const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"

package/dist/esm/styled/StyledStatusIndicatorBase.js

@@ -13,7 +13,7 @@ const iconFadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 const sizeStyles = props => {
   const offset = getStatusBorderOffset(props);
   const size = getStatusSize(props, offset);
-  return css(["border:", " ", ";border-radius:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
+  return css(["border:", " ", ";border-radius:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";inset-inline-start:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);inset-inline-start:", ";}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1, props.$size === 'extrasmall' ? '-1px' : undefined);
 };
 const colorStyles = _ref => {
   let {
@@ -40,7 +40,7 @@ const colorStyles = _ref => {
 };
 const StyledStatusIndicatorBase = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"

package/dist/esm/styled/StyledText.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'avatars.text';
 const StyledText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"

package/dist/index.cjs.js

@@ -123,7 +123,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
 const COMPONENT_ID$6 = 'avatars.text';
 const StyledText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -216,7 +216,7 @@ const iconFadeIn = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 const sizeStyles$3 = props => {
   const offset = getStatusBorderOffset(props);
   const size = getStatusSize(props, offset);
-  return styled.css(["border:", " ", ";border-radius:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
+  return styled.css(["border:", " ", ";border-radius:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";inset-inline-start:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);inset-inline-start:", ";}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1, props.$size === 'extrasmall' ? '-1px' : undefined);
 };
 const colorStyles$2 = _ref => {
   let {
@@ -243,7 +243,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledStatusIndicatorBase = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -256,7 +256,8 @@ StyledStatusIndicatorBase.defaultProps = {
 const COMPONENT_ID$4 = 'avatars.status_indicator';
 const [xxs, xs, s, m, l] = SIZE;
 const sizeStyles$2 = props => {
-  const isVisible = !includes([xxs, xs], props.$size);
+  const isVisible = props.$size !== xxs;
+  const iconSize = props.$size === xs ? `${props.theme.space.base * 2}px` : undefined;
   const borderWidth = getStatusBorderOffset(props);
   let padding = '0';
   if (props.$size === s) {
@@ -264,7 +265,7 @@ const sizeStyles$2 = props => {
   } else if (includes([m, l], props.$size)) {
     padding = polished.math(`${props.theme.space.base + 3}px - (${borderWidth} * 2)`);
   }
-  return styled.css(["max-width:calc(2em + (", " * 3));box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", "}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;');
+  return styled.css(["max-width:calc(2em + (", " * 3));box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", " width:", ";height:", ";}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', iconSize, iconSize);
 };
 const colorStyles$1 = _ref => {
   let {
@@ -292,7 +293,7 @@ const colorStyles$1 = _ref => {
 };
 const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -398,7 +399,7 @@ const sizeStyles$1 = props => {
 };
 const StyledAvatar = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -411,7 +412,7 @@ StyledAvatar.defaultProps = {
 const COMPONENT_ID$2 = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -424,7 +425,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -433,7 +434,7 @@ const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.2'
+  'data-garden-version': '9.8.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -540,16 +541,17 @@ const StatusIndicator = React.forwardRef((_ref, ref) => {
   const defaultLabel = React.useMemo(() => ['status'].concat(type || []).join(': '), [type]);
   const ariaLabel = reactTheming.useText(StatusIndicator, {
     'aria-label': label
-  }, 'aria-label', defaultLabel);
+  }, 'aria-label', defaultLabel, label !== null);
   return (
     React__namespace.default.createElement(StyledStandaloneStatus, Object.assign({
       role: "status",
       ref: ref
     }, props), React__namespace.default.createElement(StyledStandaloneStatusIndicator, {
+      "aria-hidden": label === null ? true : undefined,
+      "aria-label": ariaLabel,
       role: "img",
       $type: type,
-      $size: isCompact ? 'small' : 'medium',
-      "aria-label": ariaLabel
+      $size: isCompact ? 'small' : 'medium'
     }, type === 'away' ? React__namespace.default.createElement(ClockIcon, {
       "data-icon-status": type,
       "aria-hidden": "true"
@@ -561,6 +563,7 @@ const StatusIndicator = React.forwardRef((_ref, ref) => {
 });
 StatusIndicator.displayName = 'StatusIndicator';
 StatusIndicator.propTypes = {
+  'aria-label': PropTypes__default.default.string,
   type: PropTypes__default.default.oneOf(STATUS),
   isCompact: PropTypes__default.default.bool
 };

package/dist/typings/types/index.d.ts

@@ -39,7 +39,9 @@ export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
     /** Sets the badge text and applies active styling */
     badge?: string | number;
 }
-export interface IStatusIndicatorProps extends HTMLAttributes<HTMLElement> {
+export interface IStatusIndicatorProps extends Omit<HTMLAttributes<HTMLElement>, 'aria-label'> {
+    /** Overrides the label for the status indicator. Use `null` to mark the indicator as decorative. */
+    'aria-label'?: string | null;
     /** Applies status type for styling and default aria-label */
     type?: (typeof STATUS)[number];
     /** Applies compact styling */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "9.7.2",
+  "version": "9.8.0",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/react-typography": "^9.7.2",
+    "@zendeskgarden/react-typography": "^9.8.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },
@@ -32,8 +32,8 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-dropdowns": "^9.7.2",
-    "@zendeskgarden/react-theming": "^9.7.2",
+    "@zendeskgarden/react-dropdowns": "^9.8.0",
+    "@zendeskgarden/react-theming": "^9.8.0",
     "@zendeskgarden/svg-icons": "7.5.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "6cef5e656fa78619c4e42af330a53014c336a259"
+  "gitHead": "3f857a99f2e7c6c6d5db454a2fdfa1b0e129b7ab"
 }