@lotics/ui 45.8.0 → 45.8.1

package/docs/catalog.md

@@ -835,13 +835,18 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   rather than a value). Throws when the clipboard is unreachable — never resolve a write
   that did not happen, or the caller confirms a lie. Web-only (native has no
   `navigator.clipboard`).
-- **`back_button`** — `BackButton`: the one go-back control — don't hand-roll it (an
-  `arrow-left` `MenuButton` reads as another nav ITEM, not an exit). `onPress` +
-  `accessibilityLabel` (defaults to `label`, else the locale's `nav.back` — "Back" /
-  "Quay lại"). Bare, it's the chevron-left `IconButton` (lg, secondary) heading a
-  screen/panel; pass **`label`** to name where back GOES ("Danh sách") — the SAME
-  circular glyph with the destination beside it, ONE pressable over disc + words —
-  never an icon button beside unclickable prose.
+- **`back_button`** — `BackButton`: the CIRCULAR go-back control that HEADS a screen or
+  panel — don't hand-roll it (an `arrow-left` `MenuButton` reads as another nav ITEM, not
+  an exit). `onPress` + `accessibilityLabel` (defaults to `label`, else the locale's
+  `nav.back` — "Back" / "Quay lại"). Bare it is the 40px chevron-left disc; pass
+  **`label`** to name where back GOES ("Danh sách") — the SAME disc with the destination
+  beside it, ONE pressable over disc + words, never an icon button beside unclickable
+  prose. It takes no size or colour: one purpose, one look, and both variants draw the
+  one disc so they cannot drift.
+  **A back affordance INSIDE a header row is not this** — beside a drawer's title a 40px
+  disc outweighs the name it belongs to, so that one is a small `IconButton` (see
+  `screen_router` below). The distinction is prominence: this HEADS a surface, that
+  annotates a title.
 - **`link`** — `Link`: the EXTERNAL hyperlink — fixed underline+blue + `role="link"`;
   `onPress` only (the consumer wires the opener).
 - **`text_link`** — `TextLink`: underlined text that NAVIGATES — `href` renders a real

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "45.8.0",
+  "version": "45.8.1",
   "type": "module",
   "exports": {
     "./vite": {

package/src/back_button.tsx

@@ -1,9 +1,8 @@
-import { IconButton } from "./icon_button";
 import { View } from "react-native";
 import { Icon } from "./icon";
 import { Text } from "./text";
 import { colors } from "./colors";
-import { CURSOR_ACTION } from "./control_surface";
+import { CONTROL_HEIGHT, CURSOR_ACTION } from "./control_surface";
 import { PressableHighlight } from "./pressable_highlight";
 import { useLoticsLocale } from "./locale";
 
@@ -18,26 +17,66 @@ interface BackButtonProps {
   accessibilityLabel?: string;
 }
 
+/**
+ * THE DISC, drawn ONCE for both variants and pressable in neither.
+ *
+ * It used to exist twice: the bare variant delegated to an `IconButton`, the
+ * labelled one hand-rolled the identical circle and restated that component's
+ * spec in a comment — "mirrors IconButton lg/secondary (40px, zinc-100, 20px
+ * zinc-900 glyph)". A spec copied into a comment is a spec that drifts: change
+ * `secondary` and one variant of ONE component follows while the other does not.
+ *
+ * Delegating both to `IconButton` is not the fix and never was. The labelled
+ * form is ONE pressable over the disc AND the words — an `IconButton` inside it
+ * is a button nested in a button, which is why the copy got written in the first
+ * place. So the shared thing is the SURFACE, not the control: inert here, and
+ * whichever pressable wraps it owns the gesture.
+ *
+ * IT BORROWS NOTHING FROM ANOTHER CONTROL. An earlier pass took the glyph ink
+ * from `getButtonIconColor("secondary")`, which reads as sharing until you say it
+ * out loud: this is not a secondary BUTTON, and tying its ink to that ladder
+ * means a change to the button palette silently restyles the back affordance for
+ * a reason no one would connect. The ink is `zinc-900` because that is what this
+ * glyph is.
+ *
+ * `CONTROL_HEIGHT` stays, and is not the same kind of borrowing: it is the
+ * SYSTEM's band height — the promise every 40px control aligns to — not another
+ * component's opinion. Typing `40` here would be the drift, not the reuse.
+ */
+const GLYPH = 20;
+
+function Disc() {
+  return (
+    <View
+      style={{
+        width: CONTROL_HEIGHT,
+        height: CONTROL_HEIGHT,
+        borderRadius: 999,
+        backgroundColor: colors.zinc[100],
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Icon name="chevron-left" size={GLYPH} color={colors.zinc[900]} />
+    </View>
+  );
+}
+
+/**
+ * THE go-back control: a circular glyph that leaves the current screen or panel,
+ * optionally naming where it goes.
+ *
+ * It is one purpose, so it takes no size or colour — a caller reaching for those
+ * wants a different control. In particular a drawer header's small inline arrow
+ * is NOT this: that sits beside a title inside a header row, where a 40px disc
+ * would outweigh the name it belongs to. That one is an `IconButton`, and the
+ * distinction is prominence — this one HEADS a surface, that one annotates a
+ * title.
+ */
 export function BackButton(props: BackButtonProps) {
   const locale = useLoticsLocale();
   const { onPress, label, accessibilityLabel = label ?? locale.nav.back } = props;
-  // Bare — the circular glyph IS the control.
-  if (label === undefined) {
-    return (
-      <IconButton
-        icon="chevron-left"
-        size="lg"
-        color="secondary"
-        accessibilityLabel={accessibilityLabel}
-        onPress={onPress}
-        style={{ alignSelf: "flex-start" }}
-      />
-    );
-  }
-  // Labelled — the SAME circular glyph, the destination named beside it, ONE
-  // pressable pill over both (words you can't press are a lie). The disc
-  // mirrors IconButton lg/secondary (40px, zinc-100, 20px zinc-900 glyph); the
-  // pill takes PressableHighlight's default hover/press wash + focus ring.
+
   return (
     <PressableHighlight
       focusRing
@@ -45,16 +84,28 @@ export function BackButton(props: BackButtonProps) {
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
       onPress={onPress}
-      // Going back ACTS, exactly as the bare variant's `IconButton` does —
-      // without this, one component shows two cursors decided by a label.
-      style={{ cursor: CURSOR_ACTION, flexDirection: "row", alignItems: "center", gap: 8, alignSelf: "flex-start", borderRadius: 999, paddingRight: 14 }}
+      // Going back ACTS. One cursor for both variants — a label must not decide
+      // whether the same control looks pressable.
+      //
+      // The pill's own padding exists only when there are words to seat: bare,
+      // the disc IS the target and any padding would inflate it past the 40px
+      // every other control in the band is aligned to.
+      style={{
+        cursor: CURSOR_ACTION,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        alignSelf: "flex-start",
+        borderRadius: 999,
+        paddingRight: label === undefined ? 0 : 14,
+      }}
     >
-      <View style={{ width: 40, height: 40, borderRadius: 999, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
-        <Icon name="chevron-left" size={20} color={colors.zinc[900]} />
-      </View>
-      <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
-        {label}
-      </Text>
+      <Disc />
+      {label === undefined ? null : (
+        <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
+          {label}
+        </Text>
+      )}
     </PressableHighlight>
   );
 }