adds 'count' prop to IconButton

Author: mperrotti

packages/react/src/Button/ButtonBase.module.css

@@ -85,6 +85,20 @@
     }
   }
 
+  &.IconButton--withCount {
+    width: unset;
+    min-width: var(--control-medium-size);
+    padding-inline: var(--control-small-paddingInline-condensed);
+
+    &:where([data-size='small']) {
+      min-width: var(--control-small-size);
+    }
+
+    &:where([data-size='large']) {
+      min-width: var(--control-large-size);
+    }
+  }
+
   /* LinkButton */
 
   &[href] {

packages/react/src/Button/ButtonBase.tsx

@@ -123,7 +123,21 @@ const ButtonBase = forwardRef(
               ) : isElement(Icon) ? (
                 Icon
               ) : (
-                <Icon />
+                <span data-component="buttonContent" data-align={alignContent} className={classes.ButtonContent}>
+                  <Icon />
+                  {count !== undefined
+                    ? renderModuleVisual(
+                        () => (
+                          <CounterLabel className={classes.CounterLabel} data-component="ButtonCounter">
+                            {count}
+                          </CounterLabel>
+                        ),
+                        Boolean(loading) && !LeadingVisual,
+                        'trailingVisual',
+                        true,
+                      )
+                    : null}
+                </span>
               )
             ) : (
               <>
@@ -244,7 +258,21 @@ const ButtonBase = forwardRef(
             ) : isElement(Icon) ? (
               Icon
             ) : (
-              <Icon />
+              <span data-component="buttonContent" data-align={alignContent} className={classes.ButtonContent}>
+                <Icon />
+                {count !== undefined
+                  ? renderModuleVisual(
+                      () => (
+                        <CounterLabel className={classes.CounterLabel} data-component="ButtonCounter">
+                          {count}
+                        </CounterLabel>
+                      ),
+                      Boolean(loading) && !LeadingVisual,
+                      'trailingVisual',
+                      true,
+                    )
+                  : null}
+              </span>
             )
           ) : (
             <>

packages/react/src/Button/IconButton.features.stories.tsx

@@ -94,3 +94,5 @@ export const KeybindingHintOnDescription = () => (
 )
 
 export const KeybindingHint = () => <IconButton icon={BoldIcon} aria-label="Bold" keybindingHint="Mod+B" />
+
+export const TrailingCounter = () => <IconButton icon={HeartIcon} aria-label="Favorite" count={42} />

packages/react/src/Button/IconButton.tsx

@@ -18,6 +18,7 @@ const IconButton = forwardRef(
       description,
       disabled,
       tooltipDirection,
+      count,
       // This is planned to be a temporary prop until the default tooltip on icon buttons are fully rolled out.
       unsafeDisableTooltip = false,
       keyshortcuts,
@@ -47,12 +48,15 @@ const IconButton = forwardRef(
       return (
         <ButtonBase
           icon={Icon}
-          className={clsx(className, classes.IconButton)}
+          className={clsx(className, classes.IconButton, {
+            [classes['IconButton--withCount']]: count === 0 || Boolean(count),
+          })}
           data-component="IconButton"
           sx={sxStyles}
           type="button"
           aria-label={ariaLabel}
           disabled={disabled}
+          count={count}
           {...props}
           // @ts-expect-error StyledButton wants both Anchor and Button refs
           ref={forwardedRef}
@@ -70,10 +74,13 @@ const IconButton = forwardRef(
         >
           <ButtonBase
             icon={Icon}
-            className={clsx(className, classes.IconButton)}
+            className={clsx(className, classes.IconButton, {
+              [classes['IconButton--withCount']]: count === 0 || Boolean(count),
+            })}
             data-component="IconButton"
             sx={sxStyles}
             type="button"
+            count={count}
             aria-keyshortcuts={keyshortcuts ?? undefined}
             // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
             aria-label={description ? ariaLabel : undefined}

packages/react/src/Button/types.ts

@@ -94,6 +94,7 @@ export type IconButtonProps = ButtonA11yProps & {
   unsafeDisableTooltip?: boolean
   description?: string
   tooltipDirection?: TooltipDirection
+  count?: ButtonProps['count']
   /** @deprecated Use `keybindingHint` instead. */
   keyshortcuts?: string
   keybindingHint?: string