@microbit/ui 0.1.0-alpha.29 → 0.1.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.29",
+  "version": "0.1.0-alpha.30",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",

package/src/Button.recipe.ts

@@ -176,10 +176,10 @@ export const button = defineRecipe({
     },
     /**
      * The palette behind `solid`/`outline`. An allowlist rather than Panda's
-     * open `colorPalette` prop, because a palette missing a stop a shape
-     * reads renders it as nothing at all, with no error anywhere
-     * (docs/hints.md): this is where a palette is vetted. A tone should
-     * alias a whole ramp, so it has nowhere to fall through. Apps may add
+     * open `colorPalette` prop: if a shape reads a stop the palette doesn't
+     * define, the button renders as nothing at all, with no error anywhere
+     * (docs/hints.md). This is where a palette is vetted, and a tone should
+     * alias a whole ramp so it has nowhere to fall through. Apps may add
      * their own.
      */
     tone: {

package/src/ButtonGroup.tsx

@@ -21,43 +21,57 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * ButtonGroup — lays out related buttons in a row. Works with any button
  * elements (shared-ui or native).
+ *
+ * Attached, the buttons divide by a hairline and the group keeps whatever
+ * outline the variant draws round the outside, so a 2px `secondary` reads as
+ * one bordered control with cells inside it rather than three boxes. A
+ * variant with no border of its own (`primary`, `solid`, `neutral`) divides
+ * by a gap in the same place, the surface behind the group showing through —
+ * see the `[data-attached]` rule in base-preset.ts.
  */
 export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
   function ButtonGroup({ isAttached, css: cssProp, className, ...rest }, ref) {
     return (
       <div
         ref={ref}
+        data-attached={isAttached ? "" : undefined}
         className={cx(
           css({
             display: "inline-flex",
             alignItems: "center",
-            // Buttons are position: relative, so without this an attached
-            // sibling paints over the focused button's focus-ring shadow.
-            // Raise only on :focus-visible, when the ring is actually shown:
-            // with the attached -1px overlap a raised button also paints over
-            // a seam its neighbour draws (e.g. a solid split button's white
-            // borderLeft).
+            // Buttons are position: relative, so a sibling would paint over
+            // the focused button's ring. Only while it shows: a permanently
+            // raised child would own the seam it shares, so a hover on its
+            // neighbour would stop short of it.
             "& > *": { _focusVisible: { zIndex: 1 } },
           }),
           isAttached
             ? css({
                 gap: 0,
-                // :first-child/:last-child, not :first-of-type: attached
-                // groups can mix element types (e.g. select + button), and
-                // -of-type matches per element type.
-                // marginEnd -1px overlaps adjacent borders so two 1px inner
-                // edges read as a single 1px seam. That assumes 1px borders;
-                // the bordered variants are 2px (microbit-foundation/ui#22).
-                "& > *:first-child:not(:last-child)": {
+                // :first-child/:last-child, not -of-type: attached groups can
+                // mix element types (e.g. select + button).
+                //
+                // A hairline whatever the variant's border, which stays as the
+                // group's outline — matching it made a 2px seam read as a gap
+                // (microbit-foundation/ui#22). Both sides of a seam keep a
+                // border and overlap by its width so the two paint as one
+                // line; dropping one instead would move that button's border
+                // box off the cell you see, and `focusRing` is an outline, so
+                // the ring would land on the seam rather than outside it.
+                //
+                // padding-box so a fill doesn't paint under the transparent
+                // seam a borderless variant gets from the preset. Here rather
+                // than with that rule because `bg` is the `background`
+                // shorthand, which resets it from `recipes`.
+                "& > *": { backgroundClip: "padding-box" },
+                "& > *:not(:last-child)": {
                   borderEndRadius: 0,
-                  marginEnd: "-1px",
-                },
-                "& > *:not(:first-child):not(:last-child)": {
-                  borderRadius: 0,
-                  marginEnd: "-1px",
+                  borderInlineEndWidth: "1px",
                 },
-                "& > *:not(:first-child):last-child": {
+                "& > *:not(:first-child)": {
                   borderStartRadius: 0,
+                  borderInlineStartWidth: "1px",
+                  marginInlineStart: "-1px",
                 },
               })
             : css({ gap: 2 }),

package/src/IconButton.tsx

@@ -10,13 +10,6 @@ export interface IconButtonProps
   extends Omit<ButtonProps, "leftIcon" | "rightIcon"> {
   /** Icon-only buttons have no visible label, so this is required. */
   "aria-label": string;
-  /**
-   * Circular rather than the recipe's border-radius.
-   * Usually a visual no-op here: the 2rem `button` radius already renders
-   * square icon buttons as circles. Kept for ported call sites and for
-   * variants/overrides with a smaller radius (e.g. `unstyled`).
-   */
-  isRound?: boolean;
 }
 
 /**
@@ -24,19 +17,16 @@ export interface IconButtonProps
  * padding (its size variants add `px`, which would squeeze a single glyph in a
  * fixed-width button) and keeps the `minW` from the size so the box stays
  * square. Pass the icon as children.
+ *
+ * Circular at every size without asking: the 2rem `button` radius exceeds half
+ * the tallest size (3rem), so CSS clamps it to a full round. Override
+ * `borderRadius` per instance for anything else — an attached group or a
+ * button that sits in a card corner needs per-corner control, not a shape flag.
  */
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  function IconButton({ isRound, css: cssProp, children, ...rest }, ref) {
+  function IconButton({ css: cssProp, children, ...rest }, ref) {
     return (
-      <Button
-        ref={ref}
-        css={{
-          px: 0,
-          ...(isRound ? { borderRadius: "full" } : {}),
-          ...cssProp,
-        }}
-        {...rest}
-      >
+      <Button ref={ref} css={{ px: 0, ...cssProp }} {...rest}>
         {children}
       </Button>
     );

package/src/MoreMenuButton.tsx

@@ -0,0 +1,63 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef } from "react";
+import { MdMoreVert } from "react-icons/md";
+import { Icon } from "./Icon";
+import { IconButton, IconButtonProps } from "./IconButton";
+
+export interface MoreMenuButtonProps
+  extends Omit<IconButtonProps, "children"> {}
+
+/**
+ * MoreMenuButton — the "more options" half of a split button. Use as the
+ * trigger inside a MenuTrigger, alongside the main action, both in an
+ * attached ButtonGroup:
+ *
+ * ```tsx
+ * <ButtonGroup isAttached>
+ *   <Button variant="primary" onPress={send}>Send</Button>
+ *   <MenuTrigger>
+ *     <MoreMenuButton variant="primary" aria-label="More send options" />
+ *     <MenuList>…</MenuList>
+ *   </MenuTrigger>
+ * </ButtonGroup>
+ * ```
+ *
+ * Give it the main action's `variant`, `tone` and `size`: the two halves are
+ * one control. The seam between them is ButtonGroup's job.
+ */
+export const MoreMenuButton = forwardRef<
+  HTMLButtonElement,
+  MoreMenuButtonProps
+>(function MoreMenuButton({ css: cssProp, ...props }, ref) {
+  return (
+    <IconButton ref={ref} css={cssProp} {...props}>
+      <Icon
+        as={MdMoreVert}
+        css={{
+          // Optical centring: an attached end button is a rectangle plus a
+          // semicircle, whose area sits 4.7% of the width towards the flat
+          // edge. A share of the width rather than a length because that is a
+          // property of the shape, not the size — the button stays square and
+          // the radius always clamps to half its height (see IconButton), so
+          // one percentage holds everywhere. Leading is the mirror image; a
+          // middle or lone button is symmetric and needs nothing.
+          //
+          // Position rather than margin so the nudge can't feed back into the
+          // width the percentage resolves against.
+          "[data-attached] > *:not(:first-child):last-child &": {
+            position: "relative",
+            insetInlineStart: "-4.7%",
+          },
+          "[data-attached] > *:first-child:not(:last-child) &": {
+            position: "relative",
+            insetInlineStart: "4.7%",
+          },
+        }}
+      />
+    </IconButton>
+  );
+});

package/src/base-preset.ts

@@ -363,6 +363,19 @@ export const basePreset = definePreset({
     "h1, h2, h3, h4, h5, h6": {
       textWrap: "wrap",
     },
+    // The colour of the seams an attached ButtonGroup draws (ButtonGroup.tsx).
+    // Transparent, so a variant with no border of its own divides by letting
+    // the surface show through rather than by a line in the text colour.
+    //
+    // From `base`, so a variant that does bring a border colours its seams
+    // from `recipes` (as the cursor rule above is overridden). Longhands
+    // because Panda resolves `transparent` to a token, and the logical
+    // *shorthand* with a var() value is the one Safari 14.x drops — the
+    // postcss-legacy-safari shim does not cover the border ones.
+    "[data-attached] > *": {
+      borderInlineStartColor: "transparent",
+      borderInlineEndColor: "transparent",
+    },
     // While a full-size dialog is open (the Modal stamps data-fullsize on
     // its overlay), release the scrollbar gutter that react-aria's scroll
     // lock reserves on the root. The reserved strip is scrollbar chrome to

package/src/index.ts

@@ -19,6 +19,7 @@ export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./Field";
 export * from "./IconButton";
+export * from "./MoreMenuButton";
 export * from "./Image";
 export * from "./Input";
 export * from "./InputGroup";