fix: status item styles, add option to place status icon before status text

src/components/Avatar/Avatar.stories.tsx

@@ -5,8 +5,9 @@ import { IconName } from '../Icon';
 import {
   Avatar,
   AvatarProps,
-  StatusItemsPosition,
   getStatusItemSizeAndPadding,
+  StatusItemIconAlign,
+  StatusItemsPosition,
 } from './';
 import { Stack } from '../Stack';
 import { TooltipTheme } from '../Tooltip';
@@ -216,6 +217,7 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
           backgroundColor: 'var(--blue-color-20)',
           path: IconName.mdiCalendar,
           text: '20',
+          alignIcon: StatusItemIconAlign.Left,
         },
       },
     },

src/components/Avatar/Avatar.tsx

@@ -8,6 +8,7 @@ import {
   AvatarOutlineProps,
   AvatarProps,
   BaseAvatarProps,
+  StatusItemIconAlign,
   StatusItemsPosition,
   StatusItemsProps,
 } from './';
@@ -43,6 +44,7 @@ export const getStatusItemSizeAndPadding = (
 const StatusItemWrapperPaddingFactor: number = 0.06;
 const DefaultStatusItemMaxTextLength: number = 3;
 const MinStatusItemFontSize: number = 12;
+const StatusItemFontDiff: string = '2px';
 
 const StatusItemOutlineDefaults: React.CSSProperties = {
   outlineColor: 'var(--grey-color-80)',
@@ -152,13 +154,29 @@ const AvatarStatusItems: FC<BaseAvatarProps> = React.forwardRef(
       <>
         {Object.keys(statusItems).map((position: StatusItemsPosition) => {
           const statusItemProps: StatusItemsProps = statusItems[position];
+          const alignIcon: StatusItemIconAlign =
+            statusItemProps.alignIcon ?? StatusItemIconAlign.Right;
           const showStatusItemText: boolean =
             statusItemProps.text &&
             statusItemProps.text.length <=
               (statusItemProps.textMaxLength ?? DefaultStatusItemMaxTextLength);
           const wrapperPadding: string | number =
             statusItemProps?.wrapperStyle?.padding ??
             `(${size} * ${StatusItemWrapperPaddingFactor})`;
+          const statusItemTextClasses = mergeClasses([
+            styles.avatarStatusItemText,
+            { [styles.avatarStatusItemTextRtl]: htmlDir === 'rtl' },
+            {
+              [styles.textMarginRight]: alignIcon == StatusItemIconAlign.Right,
+            },
+            { [styles.textMarginLeft]: alignIcon == StatusItemIconAlign.Left },
+          ]);
+          const statusItemIconElement = (
+            <Icon
+              {...statusItemProps}
+              classNames={styles.avatarStatusItemIcon}
+            />
+          );
           return (
             <div
               key={position}
@@ -200,21 +218,21 @@ const AvatarStatusItems: FC<BaseAvatarProps> = React.forwardRef(
                 ? { 'aria-label': statusItemProps.ariaLabel }
                 : {})}
             >
-              {showStatusItemText && (showStatusItemsText[position] ?? true) ? (
+              {alignIcon == StatusItemIconAlign.Left && statusItemIconElement}
+              {showStatusItemText && (showStatusItemsText[position] ?? true) && (
                 <span
                   ref={(el) => (statusItemsRef.current[position] = el)}
                   style={{
-                    fontSize: statusItemProps.size,
                     color: statusItemProps.color,
+                    fontSize: `calc(${statusItemProps.size} + ${StatusItemFontDiff})`,
+                    lineHeight: statusItemProps.size,
                   }}
-                  className={styles.avatarStatusItemText}
+                  className={statusItemTextClasses}
                 >
                   {statusItemProps.text}
                 </span>
-              ) : (
-                ''
               )}
-              <Icon {...statusItemProps} />
+              {alignIcon == StatusItemIconAlign.Right && statusItemIconElement}
             </div>
           );
         })}

src/components/Avatar/Avatar.types.ts

@@ -20,6 +20,11 @@ export enum StatusItemsPosition {
   BottomLeft = 'bottomLeft',
 }
 
+export enum StatusItemIconAlign {
+  Left = 'left',
+  Right = 'right',
+}
+
 export interface AvatarOutlineProps {
   /**
    * Outline color
@@ -67,6 +72,11 @@ export interface StatusItemsProps extends IconProps {
    * Class for status item wrapper
    */
   wrapperClassName?: string;
+  /**
+   * Status item icon alignment
+   * @default StatusItemIconAlign.Right
+   */
+  alignIcon?: StatusItemIconAlign;
   /**
    * Text present with icon
    */

src/components/Avatar/Styles/group.scss

@@ -1,12 +1,12 @@
 .avatar-group {
   display: inline-flex;
 
-  :not(:first-child):not(.avatar-group-tooltip):not(.avatar-status-item) {
+  :not(:first-child):not(.avatar-group-tooltip):not(.avatar-status-item):not(.avatar-status-item-text):not(.avatar-status-item-icon) {
     margin-left: -$space-xs;
   }
 
   &.spaced {
-    :not(:first-child):not(.avatar-group-tooltip):not(.avatar-status-item) {
+    :not(:first-child):not(.avatar-group-tooltip):not(.avatar-status-item):not(.avatar-status-item-text):not(.avatar-status-item-icon) {
       margin-left: -$space-xxxs;
     }
   }

src/components/Avatar/Styles/rtl.scss

@@ -1,15 +1,27 @@
 .avatar-group {
   &-rtl {
-    :not(:first-child):not(.avatar-group-tooltip):not(.avatar-status-item) {
+    :not(:first-child):not(.avatar-group-tooltip):not(.avatar-status-item):not(.avatar-status-item-text):not(.avatar-status-item-icon) {
       margin-right: -$space-xs;
       margin-left: 0;
     }
 
     &.spaced {
-      :not(:first-child):not(.avatar-group-spaced-tooltip):not(.avatar-status-item) {
+      :not(:first-child):not(.avatar-group-spaced-tooltip):not(.avatar-status-item):not(.avatar-status-item-text):not(.avatar-status-item-icon) {
         margin-right: -$space-xxxs;
         margin-left: 0;
       }
     }
   }
 }
+
+.avatar-status-item-text-rtl {
+  &.text-margin-right {
+    margin-right: 0;
+    margin-left: 2px;
+  }
+
+  &.text-margin-left {
+    margin-left: 0;
+    margin-right: 2px;
+  }
+}

src/components/Avatar/avatar.module.scss

@@ -81,7 +81,19 @@
 }
 
 .avatar-status-item-text {
-  margin-right: 2px;
+  font-weight: 600;
+
+  &.text-margin-right {
+    margin-right: 2px;
+  }
+
+  &.text-margin-left {
+    margin-left: 2px;
+  }
+}
+
+.avatar-status-item-icon {
+  margin: 0;
 }
 
 .avatar-img-wrapper {

src/octuple.ts

@@ -9,6 +9,7 @@ import {
   Avatar,
   AvatarGroup,
   AvatarGroupVariant,
+  StatusItemIconAlign,
   StatusItemsPosition,
 } from './components/Avatar';
 
@@ -335,6 +336,7 @@ export {
   Stack,
   Stat,
   StatThemeName,
+  StatusItemIconAlign,
   StatusItemsPosition,
   StatValidationStatus,
   Step,