@lotics/ui 23.2.0 → 24.0.0

package/src/text_link.tsx

@@ -1,39 +1,49 @@
 import { Text, type TextProps } from "./text";
 import { Icon, type IconName } from "./icon";
+import { colors } from "./colors";
 import { getTextColor } from "./text_utils";
 
 export interface TextLinkProps extends TextProps {
   /** Optional leading icon. */
   icon?: IconName;
   /** A URL — renders a real anchor (`<a href>` on web; middle-click / open-in-new-tab
-   *  work). For in-app routing, wrap `TextLink` or use `onPress`. */
+   *  work). For in-app routing, wrap `TextLink` in your own pressable. */
   href?: string;
-  /** An in-app action. With NEITHER `href` nor `onPress`, `TextLink` is just
-   *  underlined text you wrap in your own pressable (e.g. a table cell). */
-  onPress?: () => void;
 }
 
 /**
- * Underlined text that is OPTIONALLY a link (`href` → a web anchor) or an action
- * (`onPress` → pressable); with neither it's plain underlined text you drop inside
- * your own pressable (a table cell, a custom row). Colour comes from `color` (it
- * inherits every `Text` prop) — the neutral, configurable counterpart to `Link`,
- * which is fixed blue + `role="link"` for the "this opens somewhere else" signal.
+ * Underlined text that NAVIGATES — `href` renders a real anchor; with no `href`
+ * it is plain underlined text you drop inside your own pressable (a table cell, a
+ * custom row), or a MARKER that a value leads somewhere (a record reference).
+ * Colour comes from `color` (it inherits every `Text` prop) — the neutral,
+ * configurable counterpart to `Link`, which is fixed blue + `role="link"` for the
+ * "this opens somewhere else" signal.
+ *
+ * It does NOT act. An `onPress` here used to resolve to `role="button"`, so one
+ * export was three components — a link, a button, and a passive marker — behind
+ * one name, inside `OptionList`, `FilterChip` and others. That mode is
+ * `TextButton` now — also underlined, since that is what marks a surface-less
+ * control interactive, but in ZINC: blue is reserved for navigation, so the ink is
+ * what says whether a press moves you or acts. Pick by what the press DOES.
  */
 export function TextLink(props: TextLinkProps) {
-  const { icon, href, onPress, children, color, style, ...textProps } = props;
-  const interactive = href != null || onPress != null;
+  const { icon, href, children, color, style, ...textProps } = props;
   return (
     <Text
       decoration="underline"
       weight="medium"
       color={color}
       href={href}
-      onPress={onPress}
-      accessibilityRole={href != null ? "link" : onPress != null ? "button" : undefined}
+      accessibilityRole={href != null ? "link" : undefined}
       style={[
         icon ? { display: "flex", flexDirection: "row", alignItems: "center", gap: 4 } : null,
-        interactive ? { cursor: "pointer" } : null,
+        // Blue only when it actually NAVIGATES. An `href` is a destination, so it
+        // takes the navigation ink (`color` still overrides). Without one this is
+        // underlined text you wrap yourself, or a MARKER on a value that leads
+        // somewhere — the record's customer field is one, and pressing it opens a
+        // PEEK, so blue there would promise a trip it never takes.
+        href != null && color == null ? { color: colors.blue[600] } : null,
+        href != null ? { cursor: "pointer" } : null,
         style,
       ]}
       {...textProps}