@microbit/ui 0.1.0-alpha.3 → 0.1.0-alpha.31

package/src/Button.recipe.ts

@@ -5,26 +5,24 @@
  */
 import { defineRecipe } from "@pandacss/dev";
 
-// Chakra's transition.property.common, inlined (Panda has no transitionProperty
-// token category). Matches Chakra's Button base transition.
+// The common transition-property list, inlined (Panda has no
+// transitionProperty token category). No box-shadow: focus indication
+// must never fade in.
 const transitionCommon =
-  "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform";
+  "background-color, border-color, color, fill, stroke, opacity, transform";
 
 /**
- * Button recipe — Chakra's default Button base + sizes, with this app's
- * borderRadius (`button` = 2rem) and variant set ported from
- * `components/button.ts`. Interaction conditions (`_hover`/`_active`/
+ * Button recipe — the family button base + sizes, with the house
+ * borderRadius (`button` = 2rem). Interaction conditions (`_hover`/`_active`/
  * `_disabled`/`_focusVisible`) are widened in the preset to also match
- * react-aria-components' data attributes, so these Chakra-shaped variant
- * objects work unchanged on RAC's <Button>.
+ * react-aria-components' data attributes, so these variant objects work
+ * unchanged on RAC's <Button>.
  *
  * A config recipe (not a component cva): styles land in the `recipes` layer so
  * call sites can override with plain style props, and presets extend the
- * variants. This file holds the brand-independent variant set — the core
- * Chakra variants plus the family-wide `language`/`toolbar` variants; a
- * consuming app's preset extends it with app vocabulary (e.g. ml-trainer's
- * `led`/`record*`/`secondary-disabled`). Brand divergence within a variant is
- * token-driven (see the `languageText` semantic tokens).
+ * variants. Colour reaches a variant either through the `button.*` semantic
+ * tokens (the app's button idiom) or through `tone`, never through a per-app
+ * fork of a shape.
  *
  * Registered in the base preset (base-preset.ts).
  */
@@ -47,7 +45,7 @@ export const button = defineRecipe({
     verticalAlign: "middle",
     outline: "none",
     _focusVisible: {
-      focusShadow: "outline",
+      focusRing: "outline",
     },
     _disabled: {
       opacity: 0.4,
@@ -68,7 +66,7 @@ export const button = defineRecipe({
       xs: { h: "6", minW: "6", fontSize: "xs", px: "2" },
     },
     variant: {
-      // Chakra's unstyled reset + this app's border-radius removal.
+      // A full reset: the button renders as plain inline content.
       unstyled: {
         bg: "none",
         color: "inherit",
@@ -78,7 +76,7 @@ export const button = defineRecipe({
         p: "0",
         borderRadius: "unset",
       },
-      // Chakra's link layout (no padding/height) + this app's colours.
+      // Link-shaped button: no padding/height, underline on hover.
       link: {
         padding: 0,
         height: "auto",
@@ -92,13 +90,22 @@ export const button = defineRecipe({
           textDecoration: "underline",
         },
       },
+      // Colours come from the `button.*` semantic tokens so the family's two
+      // button idioms (brand-coloured vs black-on-white) share this recipe —
+      // see the token block in base-preset.ts.
       secondary: {
         borderWidth: "2px",
-        borderColor: "brand.500",
-        color: "brand.700",
+        borderColor: "button.secondaryBorder",
+        color: "button.secondaryText",
         bg: "transparent",
-        _hover: { borderColor: "brand.600" },
-        _active: { bg: "brand.50", borderColor: "brand.700" },
+        _hover: {
+          borderColor: "button.secondaryHoverBorder",
+          bg: "button.secondaryHoverBg",
+        },
+        _active: {
+          bg: "button.secondaryActiveBg",
+          borderColor: "button.secondaryActiveBorder",
+        },
       },
       ghost: {
         color: "black",
@@ -106,57 +113,88 @@ export const button = defineRecipe({
         _hover: { bg: "blackAlpha.50" },
         _active: { bg: "blackAlpha.100" },
       },
-      // Chakra had no `plain` variant, so `variant="plain"` fell through to
-      // base-only styling: a transparent, colour-inheriting button. Used for the
-      // action-bar icon-button menu triggers (settings/help), which supply their
-      // own colour and shape via instance styles.
+      // Base-only styling: a transparent, colour-inheriting button. Used for
+      // the action-bar icon-button menu triggers (settings/help), which supply
+      // their own colour and shape via instance styles.
       plain: {
         bg: "transparent",
         color: "inherit",
       },
       primary: {
         color: "white",
-        bg: "brand.500",
-        _hover: { bg: "brand.600", _disabled: { bg: "brand.500" } },
-        _active: { bg: "brand.700" },
+        bg: "button.primaryBg",
+        _hover: {
+          bg: "button.primaryHoverBg",
+          _disabled: { bg: "button.primaryBg" },
+        },
+        _active: { bg: "button.primaryActiveBg" },
       },
-      warning: {
+      // `solid`/`outline` are coloured by `tone`, and reference only the
+      // stops it guarantees (50/500/600/700). They are not `primary`/
+      // `secondary` in another colour: those follow the app's button idiom,
+      // which is black-on-white in half the family and so can't be a palette.
+      solid: {
+        color: "white",
+        bg: "colorPalette.500",
+        _hover: {
+          bg: "colorPalette.600",
+          _disabled: { bg: "colorPalette.500" },
+        },
+        _active: { bg: "colorPalette.700" },
+      },
+      // Border at 500 (a boundary needs only 3:1) so a `solid`/`outline`
+      // toggle pair shows the same edge either way; the label needs 600.
+      //
+      // Classroom restates two other outlines per call site — a neutral 1px
+      // grey one and a white-on-colour one. Promote either if a second
+      // consumer appears.
+      outline: {
         borderWidth: "2px",
-        borderColor: "danger.500",
-        color: "danger.500",
+        borderColor: "colorPalette.500",
+        color: "colorPalette.600",
         bg: "transparent",
-        _hover: { borderColor: "danger.600" },
-        _active: { bg: "danger.50", borderColor: "danger.500" },
+        _hover: { borderColor: "colorPalette.600", color: "colorPalette.700" },
+        _active: { bg: "colorPalette.50" },
       },
-      // Chakra's built-in solid + red colorScheme (destructive confirm
-      // buttons). Same values as `record` today, but a separate variant so
-      // recording UI and destructive actions can diverge - hence danger
-      // tokens here, red.* literals there.
-      warningSolid: {
-        color: "white",
-        bg: "danger.500",
-        _hover: { bg: "danger.600", _disabled: { bg: "danger.500" } },
-        _active: { bg: "danger.700" },
+      // Not a palette shape: a light fill under dark text is a different
+      // button from `solid`, and 350 exists in no other ramp.
+      neutral: {
+        color: "gray.800",
+        bg: "gray.100",
+        _hover: { bg: "gray.300", _disabled: { bg: "gray.100" } },
+        _active: { bg: "gray.350" },
       },
-      // Family-wide variants (every censused app has language- and
-      // toolbar-class buttons).
+      // Family-wide variant (every censused app has toolbar-class buttons).
+      // No ring override: the bar decides, and a dark one must spread
+      // `darkSurface` — an app adopting this variant needs the tag with it.
       toolbar: {
         color: "black",
         bg: "white",
         _hover: { bg: "whiteAlpha.900", _disabled: { bg: "white" } },
         _active: { bg: "whiteAlpha.800" },
-        _focusVisible: { focusShadow: "outlineDark" },
-      },
-      language: {
-        borderWidth: "2px",
-        borderColor: "gray.200",
-        color: "languageText",
-        _hover: { color: "languageTextHover", bg: "gray.100" },
       },
     },
+    /**
+     * The palette behind `solid`/`outline`. An allowlist rather than Panda's
+     * 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: {
+      brand: { colorPalette: "brand" },
+      // The destructive role, which a brand preset can re-point.
+      danger: { colorPalette: "danger" },
+      // Conventional red that isn't destructive (record buttons), so
+      // deliberately not following a brand's error colour.
+      red: { colorPalette: "red" },
+    },
   },
   defaultVariants: {
     variant: "secondary",
     size: "md",
+    // Never absent: a shape with no palette renders nothing.
+    tone: "brand",
   },
 });

package/src/Button.tsx

@@ -4,29 +4,42 @@
  * SPDX-License-Identifier: MIT
  */
 import { forwardRef, ReactNode } from "react";
+import { useIntl } from "react-intl";
 import {
   Button as RACButton,
   ButtonProps as RACButtonProps,
 } from "react-aria-components";
-import { css, cva, cx } from "styled-system/css";
+import { css, cx } from "styled-system/css";
 import { button, ButtonVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
+import { buttonIcon } from "./button-icon";
+import { uiMessage } from "./messages";
+import { Spinner } from "./Spinner";
 
-// Chakra's ButtonIcon: keeps the glyph centred and spaced from the label
-// (iconSpacing 0.5rem).
-const buttonIcon = cva({
-  base: {
-    display: "inline-flex",
-    alignSelf: "center",
-    flexShrink: 0,
-  },
-  variants: {
-    side: {
-      left: { marginEnd: "2" },
-      right: { marginStart: "2" },
-    },
-  },
-});
+// A 1em spinner centred over the hidden label. Out of flow, so the label alone
+// sets the button's size; the recipe's base `position: relative` is what it
+// anchors to. Its own component so useIntl runs only while a button is
+// actually loading — a bare Button must keep working without an IntlProvider
+// (test renders commonly lack one).
+const ButtonSpinner = () => {
+  const intl = useIntl();
+  return (
+    <span
+      className={css({
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      })}
+    >
+      <Spinner
+        aria-label={intl.formatMessage(uiMessage("ui.loading"))}
+        css={{ width: "1em", height: "1em" }}
+      />
+    </span>
+  );
+};
 
 export interface ButtonProps
   extends Omit<RACButtonProps, "className" | "children">,
@@ -34,10 +47,16 @@ export interface ButtonProps
   /** Per-instance style overrides, merged after the recipe. */
   css?: SystemStyleObject;
   className?: string;
-  /** Icon rendered before the label, matching Chakra's `leftIcon`. */
-  leftIcon?: ReactNode;
-  /** Icon rendered after the label, matching Chakra's `rightIcon`. */
-  rightIcon?: ReactNode;
+  /** Icon rendered before the label. */
+  startIcon?: ReactNode;
+  /** Icon rendered after the label. */
+  endIcon?: ReactNode;
+  /**
+   * Show a spinner in place of the label and disable interaction: the label
+   * stays in the layout but invisible, so the button keeps its size, and the
+   * dimmed disabled look applies.
+   */
+  isLoading?: boolean;
   children?: ReactNode;
 }
 
@@ -52,32 +71,51 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       variant,
       size,
+      tone,
       css: cssProp,
       className,
-      leftIcon,
-      rightIcon,
+      startIcon,
+      endIcon,
+      isLoading,
       children,
       ...rest
     },
     ref,
   ) {
+    const label = (
+      <>
+        {startIcon ? (
+          <span className={buttonIcon({ side: "start" })}>{startIcon}</span>
+        ) : null}
+        {children}
+        {endIcon ? (
+          <span className={buttonIcon({ side: "end" })}>{endIcon}</span>
+        ) : null}
+      </>
+    );
     return (
       <RACButton
         ref={ref}
         className={cx(
-          button({ variant, size }),
+          button({ variant, size, tone }),
           cssProp ? css(cssProp) : undefined,
           className,
         )}
+        data-loading={isLoading ? "" : undefined}
         {...rest}
+        isDisabled={isLoading || rest.isDisabled}
       >
-        {leftIcon ? (
-          <span className={buttonIcon({ side: "left" })}>{leftIcon}</span>
-        ) : null}
-        {children}
-        {rightIcon ? (
-          <span className={buttonIcon({ side: "right" })}>{rightIcon}</span>
-        ) : null}
+        {isLoading ? (
+          <>
+            <ButtonSpinner />
+            {/* Hidden with opacity, not removed: it keeps the button the size
+                it is when idle, so a row of buttons doesn't reflow. Still in
+                the accessibility tree, so the button keeps its name. */}
+            <span className={css({ opacity: 0 })}>{label}</span>
+          </>
+        ) : (
+          label
+        )}
       </RACButton>
     );
   },

package/src/ButtonGroup.tsx

@@ -9,8 +9,8 @@ import { SystemStyleObject } from "styled-system/types";
 
 export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Square the inner radii so adjacent buttons form one control (Chakra's
-   * `isAttached`). Otherwise buttons get a small gap.
+   * Square the inner radii so adjacent buttons form one control. Otherwise
+   * buttons get a small gap.
    */
   isAttached?: boolean;
   /** Per-instance style overrides. */
@@ -20,36 +20,58 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
 
 /**
  * ButtonGroup — lays out related buttons in a row. Works with any button
- * elements (shared-ui or native). Replaces Chakra's ButtonGroup.
+ * 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
-            // (Chakra's Button applied zIndex 1 on focus when grouped).
-            "& > *": { _focus: { zIndex: 1 } },
+            // 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.
-                "& > *: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,
+                  borderInlineEndWidth: "1px",
                 },
-                "& > *:not(:first-child):not(:last-child)": {
-                  borderRadius: 0,
-                },
-                "& > *:not(:first-child):last-child": {
+                "& > *:not(:first-child)": {
                   borderStartRadius: 0,
+                  borderInlineStartWidth: "1px",
+                  marginInlineStart: "-1px",
                 },
               })
             : css({ gap: 2 }),

package/src/Card.recipe.ts

@@ -6,8 +6,7 @@
 import { defineSlotRecipe } from "@pandacss/dev";
 
 /**
- * Card slot recipe — Chakra's Card at its default md size (light mode), with
- * the `elevated` (default) and `outline` variants this app uses.
+ * Card slot recipe, with `elevated` (default) and `outline` variants.
  *
  * Registered in the base preset (base-preset.ts); `variant` is
  * forwarded as a runtime prop so the variants are generated via `staticCss`.

package/src/Card.tsx

@@ -16,7 +16,8 @@ export interface CardProps
 }
 
 /**
- * Card — Chakra's <Card> equivalent (md size). Place a CardBody inside.
+ * Card — a container styled with the `card` config recipe (md size). Place a
+ * CardBody inside.
  */
 export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
   { variant, css: cssProp, className, ...rest },

package/src/Checkbox.recipe.ts

@@ -6,16 +6,15 @@
 import { defineSlotRecipe } from "@pandacss/dev";
 
 /**
- * Checkbox slot recipe — Chakra's md checkbox with the default blue
- * colorScheme (light mode). The control's `borderColor: inherit` picks up a
- * `borderColor` set on the root, matching Chakra's convention for tinting the
- * box from the call site.
+ * Checkbox slot recipe with an sm/md/lg size scale. The control's
+ * `borderColor: inherit` picks up a `borderColor` set on the root, so call
+ * sites can tint the box from there.
  *
  * State styling keys off data attributes stamped on the control by the
  * shared-ui Checkbox (react-aria provides the state via render props).
  *
- * Registered in the base preset (base-preset.ts). No variants, so it
- * needs no `staticCss` entry.
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
  */
 export const checkbox = defineSlotRecipe({
   className: "checkbox",
@@ -27,6 +26,11 @@ export const checkbox = defineSlotRecipe({
       verticalAlign: "top",
       cursor: "pointer",
       position: "relative",
+      // The accessible outline stop (WCAG 1.4.11), as the input recipe.
+      // Stated here rather than on the control — whose `borderColor:
+      // inherit` reads it — so a call site can still tint the whole control
+      // by setting borderColor on the root.
+      borderColor: "gray.400",
       "&[data-disabled]": { cursor: "not-allowed" },
     },
     control: {
@@ -34,11 +38,8 @@ export const checkbox = defineSlotRecipe({
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
-      width: "4",
-      height: "4",
-      transitionProperty: "box-shadow",
-      transitionDuration: "normal",
-      border: "2px solid",
+      borderWidth: "2px",
+      borderStyle: "solid",
       borderRadius: "sm",
       borderColor: "inherit",
       color: "white",
@@ -52,13 +53,23 @@ export const checkbox = defineSlotRecipe({
           borderColor: "controlCheckedHoverBg",
         },
       },
+      // Disabled greys; the selected block restates _hover so the widened
+      // native-:hover condition can't re-tint a disabled control.
+      "&[data-disabled]": {
+        bg: "gray.100",
+        borderColor: "gray.100",
+      },
+      "&[data-selected][data-disabled]": {
+        bg: "gray.200",
+        borderColor: "gray.200",
+        color: "gray.500",
+        _hover: { bg: "gray.200", borderColor: "gray.200" },
+      },
       "&[data-focus-visible]": {
-        focusShadow: "outline",
+        focusRing: "outline",
       },
     },
     icon: {
-      width: "0.75rem",
-      height: "0.75rem",
       transitionProperty: "transform",
       transitionDuration: "normal",
     },
@@ -68,4 +79,28 @@ export const checkbox = defineSlotRecipe({
       "&[data-disabled]": { opacity: 0.4 },
     },
   },
+  variants: {
+    // The icon dimensions are the 1.2em-wide check glyph at each size's icon
+    // fontSize (3xs/2xs/2xs), resolved to rem.
+    size: {
+      sm: {
+        control: { width: "3", height: "3" },
+        icon: { width: "0.54rem", height: "0.54rem" },
+        label: { fontSize: "sm" },
+      },
+      md: {
+        control: { width: "4", height: "4" },
+        icon: { width: "0.75rem", height: "0.75rem" },
+        label: { fontSize: "md" },
+      },
+      lg: {
+        control: { width: "5", height: "5" },
+        icon: { width: "0.75rem", height: "0.75rem" },
+        label: { fontSize: "lg" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
 });