feat(mosaic): add Menu.Indicator trailing slot for the action menu spinner

Author: austincalvelage

packages/mosaic/src/components/action-menu/action-menu.tsx

@@ -76,13 +76,17 @@ export function ActionMenu({ label, actions, triggerRef, disabled, focusableWhen
               </Menu.Media>
             ) : null}
             <Menu.Label>{action.label}</Menu.Label>
-            {action.progress === 'pending' && showSpinner ? (
-              <Spinner
-                size='sm'
-                role='progressbar'
-                aria-hidden={undefined}
-                aria-label={action.label}
-              />
+            {action.progress !== undefined ? (
+              <Menu.Indicator>
+                {action.progress === 'pending' && showSpinner ? (
+                  <Spinner
+                    size='sm'
+                    role='progressbar'
+                    aria-hidden={undefined}
+                    aria-label={action.label}
+                  />
+                ) : null}
+              </Menu.Indicator>
             ) : null}
           </Menu.Item>
         ))}

packages/mosaic/src/components/menu/menu.styles.ts

@@ -160,6 +160,17 @@ export const label = stylex.create({
   },
 });
 
+export const indicator = stylex.create({
+  base: {
+    alignItems: 'center',
+    aspectRatio: '1/1',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'center',
+    width: space['4'],
+  },
+});
+
 export const separator = stylex.create({
   base: {
     // Full-bleed across the popup: cancel the viewport's inline padding.

packages/mosaic/src/components/menu/menu.tsx

@@ -167,11 +167,32 @@ export const MenuLabel = React.forwardRef<HTMLSpanElement, MenuLabelProps>(funct
   });
 });
 
+/** `span`, not `div`: the item this sits in is a button, so its children are phrasing content. */
+export type MenuIndicatorProps = MosaicComponentProps<'span'>;
+
+/**
+ * Square trailing column for a mark at the end of the row (a check, a spinner). It keeps its width
+ * while empty, so a mark that appears later does not shift the label.
+ */
+export const MenuIndicator = React.forwardRef<HTMLSpanElement, MenuIndicatorProps>(function MosaicMenuIndicator(
+  { render, xstyle, ...rest },
+  ref,
+) {
+  return useRender({
+    defaultTagName: 'span',
+    render,
+    ref,
+    props: {
+      ...mergeStyleProps(themeProps('menu-indicator'), stylex.props(reset.base, slots.indicator.base, xstyle), rest),
+    },
+  });
+});
+
 export interface MenuItemProps extends Omit<PrimitiveMenuItemProps, 'className' | 'style'>, MosaicStyleProps {
   /** Semantic color of the action. */
   color?: 'neutral' | 'negative';
   /**
-   * The row's content, composed from `Menu.Media` and `Menu.Label`. Required, and text goes in
+   * The row's content, composed from `Menu.Media`, `Menu.Label` and `Menu.Indicator`. Required, and text goes in
    * `Menu.Label` rather than straight in here: a bare text node is not a flex item the row can
    * size, so it neither lines up with the other rows nor truncates.
    */
@@ -227,5 +248,6 @@ export const Menu = {
   Item: MenuItem,
   Media: MenuMedia,
   Label: MenuLabel,
+  Indicator: MenuIndicator,
   Separator: MenuSeparator,
 };

packages/swingset/src/stories/menu.component.mdx

@@ -70,7 +70,7 @@ props (ARIA attributes, click and keyboard handlers) to spread.
 ### Items
 
 `label` names the item for typeahead and for assistive technology. What the row shows is composed
-from `Menu.Media` and `Menu.Label`, and those children are required: text dropped straight into the
+from `Menu.Media`, `Menu.Label` and `Menu.Indicator`, and those children are required: text dropped straight into the
 item is not a flex child the row can size, so it neither lines up with the other rows nor
 truncates. A row with nothing to lead it is `Menu.Label` alone. Use
 `color='negative'` for destructive actions; the color is inherited by the children. `disabled` items
@@ -121,7 +121,13 @@ line. Items whose text is a name — an account, an organization — need it mos
 the menu instead of ellipsing. It is also what pushes a trailing mark to the end of the row. Use it
 for every composed item, so rows built from parts all read the same.
 
-The two together are the whole of a row that leads with an avatar and trails with a check:
+### Indicator
+
+`Menu.Indicator` is a square trailing column for a mark at the end of the row, such as a check or a
+spinner. It keeps its width while empty, so render it on any item whose mark can appear later and
+the label does not shift when it does.
+
+Together they make a row that leads with an avatar and trails with a check:
 
 ```tsx
 <Menu.Item label='colin@clerk.dev'>
@@ -134,7 +140,9 @@ The two together are the whole of a row that leads with an avatar and trails wit
     </Avatar.Root>
   </Menu.Media>
   <Menu.Label>colin@clerk.dev</Menu.Label>
-  <Icon glyph={Checkmark} size='sm' />
+  <Menu.Indicator>
+    <Icon glyph={Checkmark} size='sm' />
+  </Menu.Indicator>
 </Menu.Item>
 ```
 

packages/swingset/src/stories/menu.component.stories.tsx

@@ -78,12 +78,14 @@ export function Accounts() {
               </Avatar.Root>
             </Menu.Media>
             <Menu.Label>{account.identifier}</Menu.Label>
-            {account.active ? (
-              <Icon
-                glyph={Checkmark}
-                size='sm'
-              />
-            ) : null}
+            <Menu.Indicator>
+              {account.active ? (
+                <Icon
+                  glyph={Checkmark}
+                  size='sm'
+                />
+              ) : null}
+            </Menu.Indicator>
           </Menu.Item>
         ))}
       </Menu.Popup>