Merge pull request #3187 from kev1n77/fmy/ui-main

fix(ui): shrink-wrap floating menus and align terminal font and global search spacing

Author: kev1n77

design-system/packages/design-tokens/src/system.tokens.json

@@ -33,7 +33,7 @@
       },
       "mono": {
         "$type": "fontFamily",
-        "$value": "'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', 'Cascadia Code', Consolas, 'Liberation Mono', 'Courier New', monospace"
+        "$value": "'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', 'Cascadia Code', Consolas, 'Liberation Mono', 'Courier New', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', monospace"
       }
     },
     "size": {
@@ -859,6 +859,10 @@
     "menu": {
       "$type": "dimension",
       "inlineSize": { "$value": "220px" },
+      "minInlineSize": {
+        "$description": "Lower bound for content-sized menus; overlay.menu.inlineSize stays their upper bound.",
+        "$value": "160px"
+      },
       "maxBlockSize": { "$value": "480px" },
       "surfacePadding": { "$value": "{space.2}" },
       "surfaceRadius": { "$value": "{radius.xl}" },

design-system/packages/design-tokens/tests/contract.test.mjs

@@ -242,6 +242,11 @@ test("Menu tokens preserve the compact grouped surface contract", async () => {
   const systemDocument = await readSource("system.tokens.json");
 
   assert.equal(tokens["overlay.menu.inlineSize"], "220px");
+  assert.equal(tokens["overlay.menu.minInlineSize"], "160px");
+  assert.ok(
+    Number.parseFloat(tokens["overlay.menu.minInlineSize"]) < Number.parseFloat(tokens["overlay.menu.inlineSize"]),
+    "content-sized menus need a minimum strictly below the fixed width",
+  );
   assert.equal(tokens["overlay.menu.maxBlockSize"], "480px");
   assert.equal(tokens["overlay.menu.headingHeight"], "24px");
   assert.equal(tokens["overlay.menu.itemHeight"], "30px");

design-system/packages/ui/README.md

@@ -598,6 +598,12 @@ Product code owns positioning and viewport limits, and must not patch private
 list/section-items/group-options gaps. A deliberate density variation belongs
 on the owning surface via `--openbitfun-overlay-menu-row-gap`.
 
+Menus use `overlay.menu.inlineSize` by default. `Menu` / `MenuPopover` accept
+`inlineSize="content"` for short, product-owned surfaces such as a context menu:
+the surface then hugs its widest row, stays at or above
+`overlay.menu.minInlineSize`, and never exceeds the fixed token. Long menus that
+share a column with the same triggering control keep the fixed width.
+
 ActionItem hover and pressed surfaces use the semantic neutral hover fill;
 pressed text remains semibold. Menu and navigation captions consume the final
 caption color directly, avoiding a second opacity multiplier. The nested-menu

design-system/packages/ui/src/components/ActionItem/ActionItem.module.css

@@ -126,6 +126,16 @@
     white-space: nowrap;
   }
 
+  /* A text shortcut hint is secondary text, so it must not inherit the surface body size. */
+  .shortcut {
+    font-family: var(--openbitfun-type-meta-font-family);
+    font-size: var(--openbitfun-type-meta-font-size);
+    font-weight: var(--openbitfun-type-meta-font-weight);
+    line-height: var(--openbitfun-type-meta-line-height);
+    letter-spacing: var(--openbitfun-type-meta-letter-spacing);
+    white-space: nowrap;
+  }
+
   .root[data-disabled="true"] .metadata {
     color: inherit;
   }

design-system/packages/ui/src/components/Menu/Menu.meta.ts

@@ -10,6 +10,7 @@ export const menuMeta = {
     { name: "MenuList.children", type: "ReactNode (row stack inside custom scroll or animation wrappers)" },
     { defaultValue: "false", name: "autoFocusFirstItem", type: "boolean" },
     { defaultValue: "auto", name: "scrollbarVisibility", type: "auto | always | hidden" },
+    { defaultValue: "fixed", name: "inlineSize", type: "fixed | content" },
     { name: "MenuPopover.items", type: "readonly MenuEntry[]" },
     { name: "MenuPopover.open / onClose", type: "boolean / () => void" },
     { name: "MenuPopover.anchorRef / position", type: "RefObject<HTMLElement> / { x: number; y: number }" },
@@ -29,6 +30,7 @@ export const menuMeta = {
     "color.selection.surface",
     "color.focus.ring",
     "overlay.menu.inlineSize",
+    "overlay.menu.minInlineSize",
     "overlay.menu.maxBlockSize",
     "overlay.menu.surfacePadding",
     "overlay.menu.surfaceRadius",

design-system/packages/ui/src/components/Menu/Menu.module.css

@@ -23,6 +23,13 @@
     box-shadow: var(--openbitfun-shadow-menu);
   }
 
+  /* Content-driven menus hug their widest row; the fixed token stays the upper bound. */
+  .root[data-openbitfun-inline-size="content"] {
+    inline-size: max-content;
+    min-inline-size: var(--openbitfun-overlay-menu-min-inline-size);
+    max-inline-size: min(var(--openbitfun-overlay-menu-inline-size), 100%);
+  }
+
   .viewport {
     flex: 1 1 auto;
     min-inline-size: 0;

design-system/packages/ui/src/components/Menu/Menu.tsx

@@ -21,10 +21,14 @@ import styles from "./Menu.module.css";
 
 export type MenuItemRole = "menuitem" | "menuitemcheckbox" | "menuitemradio";
 
+/** `fixed` keeps the menu width token; `content` fits the rows between the menu minimum and that token. */
+export type MenuInlineSize = "fixed" | "content";
+
 export interface MenuProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "autoFocus" | "role"> {
   autoFocusFirstItem?: boolean;
   children: ReactNode;
+  inlineSize?: MenuInlineSize;
   scrollbarVisibility?: ScrollbarVisibility;
 }
 
@@ -105,6 +109,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({
   autoFocusFirstItem = false,
   children,
   className,
+  inlineSize = "fixed",
   onFocusCapture,
   onKeyDown,
   scrollbarVisibility = "auto",
@@ -210,6 +215,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({
       {...props}
       className={classNames(styles.root, className)}
       data-openbitfun-component="menu"
+      data-openbitfun-inline-size={inlineSize}
       onFocusCapture={handleFocusCapture}
       onKeyDown={handleKeyDown}
       ref={setRootRef}

design-system/packages/ui/src/components/Menu/MenuPopover.tsx

@@ -121,7 +121,7 @@ interface MenuLevelProps extends Omit<MenuProps, "children"> {
   parts?: MenuPopoverParts;
 }
 
-function MenuLevel({ items, open, phase, treeId, onClose, onBack, anchorRef, position, placement, menuRef: externalRef, autoFocusFirstItem, className, style, parts, ...props }: MenuLevelProps) {
+function MenuLevel({ items, open, phase, treeId, onClose, onBack, anchorRef, position, placement, menuRef: externalRef, autoFocusFirstItem, className, inlineSize, style, parts, ...props }: MenuLevelProps) {
   const MenuSurface = parts?.root ?? Menu;
   const Item = parts?.item ?? MenuItem;
   const Separator = parts?.separator ?? MenuSeparator;
@@ -197,12 +197,12 @@ function MenuLevel({ items, open, phase, treeId, onClose, onBack, anchorRef, pos
     return () => doc?.removeEventListener("keydown", keyboard, true);
   });
 
-  const submenu = activeEntry ? <SubmenuBoundary className={styles.submenuBoundary}><MenuLevel key={activeEntry.id} id={submenuId} aria-label={activeEntry.label} menuRef={submenuRef} items={activeEntry.submenu!} open={open} phase={phase} treeId={treeId} onClose={onClose} parts={parts}
+  const submenu = activeEntry ? <SubmenuBoundary className={styles.submenuBoundary}><MenuLevel key={activeEntry.id} id={submenuId} aria-label={activeEntry.label} menuRef={submenuRef} items={activeEntry.submenu!} open={open} phase={phase} treeId={treeId} onClose={onClose} parts={parts} inlineSize={inlineSize}
     onBack={() => { intent.closeNow(); submenuAnchor.current?.focus(); }} anchorRef={submenuAnchor} placement="right" autoFocusFirstItem={keyboardOpen.current}
     onPointerEnter={intent.keepOpen} onPointerLeave={intent.requestClose} /></SubmenuBoundary> : null;
 
   return <>
-    <MenuSurface {...props} ref={node => { (menuRef as { current: HTMLDivElement | null }).current = node; }} className={classNames(styles.popup, className)} autoFocusFirstItem={open && autoFocusFirstItem && Boolean(layout)} tabIndex={-1}
+    <MenuSurface {...props} ref={node => { (menuRef as { current: HTMLDivElement | null }).current = node; }} className={classNames(styles.popup, className)} inlineSize={inlineSize} autoFocusFirstItem={open && autoFocusFirstItem && Boolean(layout)} tabIndex={-1}
       style={{ ...layout?.style, ...style, visibility: layout ? undefined : "hidden" }} data-openbitfun-native-webview-occlusion data-openbitfun-menu-tree={treeId} data-placement={layout?.placement ?? placement} data-state={phase}
       aria-hidden={!open || undefined} {...(!open ? { inert: "" } : {})} onContextMenu={event => event.preventDefault()}>
       {items.map(item => item.separator ? <Separator key={item.id} /> : <Item key={item.id} data-menu-id={item.id} leading={item.icon ? <Leading className={styles.icon} data-openbitfun-icon-slot="true">{item.icon}</Leading> : undefined} shortcut={item.shortcut ? <Shortcut>{item.shortcut}</Shortcut> : undefined} tone={item.tone} role={item.role} checked={item.checked}

design-system/packages/ui/tests/menu.test.mjs

@@ -143,3 +143,24 @@ test("Menu keeps equal item insets while its scrollbar stays on the surface edge
   );
   assert.doesNotMatch(styles, /scrollbar-gutter:\s*stable/);
 });
+
+test("content-sized menus hug their widest row inside the shared menu bounds", async () => {
+  const styles = await readFile(new URL("../src/components/Menu/Menu.module.css", import.meta.url), "utf8");
+  const popover = await readFile(new URL("../src/components/Menu/MenuPopover.tsx", import.meta.url), "utf8");
+  const contentRule = styles.match(/\.root\[data-openbitfun-inline-size="content"\]\s*\{[^}]*\}/)?.[0] ?? "";
+
+  assert.notEqual(contentRule, "");
+  assert.match(contentRule, /inline-size:\s*max-content/);
+  assert.match(contentRule, /min-inline-size:\s*var\(--openbitfun-overlay-menu-min-inline-size\)/);
+  assert.match(contentRule, /max-inline-size:\s*min\(var\(--openbitfun-overlay-menu-inline-size\), 100%\)/);
+  // The default surface keeps the fixed token instead of hugging content.
+  assert.match(styles, /\.root\s*\{[^}]*inline-size:\s*var\(--openbitfun-overlay-menu-inline-size\)/);
+
+  const contentMarkup = renderToStaticMarkup(createElement(Menu, { inlineSize: "content" }, createElement(MenuItem, null, "Paste")));
+  const defaultMarkup = renderToStaticMarkup(createElement(Menu, null, createElement(MenuItem, null, "Paste")));
+  assert.match(contentMarkup, /data-openbitfun-inline-size="content"/);
+  assert.match(defaultMarkup, /data-openbitfun-inline-size="fixed"/);
+  // Submenus are separate surfaces and must inherit the requested sizing mode.
+  assert.match(popover, /items=\{activeEntry\.submenu!\}[^>]*inlineSize=\{inlineSize\}/);
+});
+

src/apps/data-migrator/ui/generated/design-system.css

@@ -163,7 +163,7 @@
     --openbitfun-focus-offset: 2px;
     --openbitfun-focus-width: 2px;
     --openbitfun-font-family-control: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    --openbitfun-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', 'Cascadia Code', Consolas, 'Liberation Mono', 'Courier New', monospace;
+    --openbitfun-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', 'Cascadia Code', Consolas, 'Liberation Mono', 'Courier New', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', monospace;
     --openbitfun-font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     --openbitfun-font-size-2xl: 18px;
     --openbitfun-font-size-2xl-plus: 20px;
@@ -388,6 +388,7 @@
     --openbitfun-overlay-menu-item-padding-inline: var(--openbitfun-space-2);
     --openbitfun-overlay-menu-item-radius: var(--openbitfun-radius-base);
     --openbitfun-overlay-menu-max-block-size: 480px;
+    --openbitfun-overlay-menu-min-inline-size: 160px;
     --openbitfun-overlay-menu-row-gap: 2px;
     --openbitfun-overlay-menu-scrollbar-gap: 2px;
     --openbitfun-overlay-menu-section-gap: var(--openbitfun-space-2);