@lotics/ui 45.5.0 → 45.5.1

package/MIGRATION.md

@@ -20,11 +20,14 @@ chips from carrying their own remove ✕.
 now means the removable RESTING chip and takes `(option, { remove })`, so borrowing it for the
 menu put a ✕ on every option in the list.
 
-**Every option list's rows sit 4px apart.** `OptionList` declared that spacing all along, but
+**Every option list's rows sit 2px apart.** `OptionList` declared that spacing all along, but
 put it on the ScrollView's viewport rather than its content container, where it fell between
 nothing — so rows rendered flush and two adjacent SELECTED rows merged into one tinted block. Every
 selector that opens a list (`Select`, `Picker`, `InlineSelect`, the member pickers, menus) is now
-slightly taller for the same number of rows, and a list capped at its 320px max shows one fewer.
+slightly taller for the same number of rows. A field's chips take 4px on BOTH axes — the row gap was
+half the column gap, pinching a wrapped field against its own first line. A list row is read top to
+bottom and needs only enough space not to merge with its neighbour; a chip sits beside other
+objects and wants the wider setting.
 
 **A multi `InlineSelect`'s chips follow the working set while its list is open** — the draft you
 are building, not the stored value. Ticking a row or pressing a chip's ✕ now shows immediately

package/package.json

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

package/src/inline_select.tsx

@@ -306,6 +306,9 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
 }
 
 const styles = StyleSheet.create({
-  tags: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 4, rowGap: 2 },
+  // ONE gap on both axes: a wrapped chip is the same object as the one beside it,
+  // so the second line should breathe like the first. The row gap used to be half
+  // the column gap, which pinched a wrapped field against its own first line.
+  tags: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 4 },
   error: { marginTop: 4 },
 });

package/src/option_list.tsx

@@ -244,7 +244,11 @@ const styles = StyleSheet.create({
     maxHeight: 320,
   },
   optionsContent: {
-    gap: 4,
+    // 2, where a field's chips sit at 4. A row here is a 40px LIST line read top to
+    // bottom, and needs only enough space to stop two tinted rows reading as one
+    // block; a chip is an object sitting beside other objects and wants the wider
+    // setting. Two numbers because they answer two questions, not one token split.
+    gap: 2,
   },
   selectAllContainer: {
     flexDirection: "row",