@snacky/ui 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -4,6 +4,43 @@ How `@snacky/ui` got to its current state. The README documents what the
 package *is*; this documents how it got there, including the mistakes, so the
 verification claims in the README can be taken at face value.
 
+## VariantBadge renamed to InfoBadge, with an icon slot (0.8.0)
+
+The badge that renders `Variant: 75 Grams` turned out to have a second use in
+Figma: `Points: 20,000` in the Home header. Identical in every respect -
+32 tall, 8px padding, `bg-surface-highlight` on a `primary-500` stroke,
+`radius/field` - except for a leading icon.
+
+Two things came out of that. First, the name was wrong: `variant` described
+one use of the pattern, not the pattern, and a third use (`Berat: 500g`,
+`Stok: 12`) would have had nowhere to go. It is now `InfoBadge`, named for the
+shape of the information - a static, non-interactive `Label: Value` chip.
+Second, the icon is a slot rather than a second component, because nothing
+else differs between the two; Figma models them as `Property 2=variant` /
+`Property 2=points`, which is a naming axis, not a structural one.
+
+Worth recording as evidence, since "is this really a component?" keeps coming
+up in this repo: the points version was **not** a one-off. Searching the
+`Customer App - English` page's full node dump turned up seven copies of the
+same 116x32 structure - one named `Points info`, six named `Frame 1064` -
+hand-copied across different screens rather than instanced. That is the same
+shape as the `Stepper` case (19 hand-drawn copies under two frame names), and
+the same conclusion: a repeated hand-drawn pattern is a missing component, not
+app composition.
+
+`VariantBadge` and `VariantBadgeProps` still export as `@deprecated` aliases,
+so existing code keeps working.
+
+One inconsistency was caught while verifying: compose-ui tinted the icon slot
+`icon-brand` (per Figma) but react-ui did not, so anyone copying the
+documented snippet would have got `#333`. The playground was hiding it by
+passing an explicit colour that the docs never mention. The tint now lives in
+`.snacky-info-badge__icon` itself, and the playground passes no colour, so it
+exercises the same path a consumer gets.
+
+The 12x12 icon sits below the icon sizing scale (`size/icon/sm` is 16), so it
+stays a raw value on both platforms, with a comment saying why.
+
 ## ImagePlaceholder added, a non-Figma utility (0.7.0)
 
 Every image prop (`ProductCard.imageUrl`, `ProductImage.src`, `Avatar.src`,
@@ -145,3 +182,27 @@ unverified - see the README's Verification status.
   control). Confirmed via computed styles in the Live Preview iframe, not
   just visually: the icon span and its inner SVG both resolve to exactly
   20x20 with Size=Small selected.
+- **That same fix used raw pixel values instead of the existing semantic
+  size tokens (0.7.3).** `tokens.json` already has `size.icon.md` (20px) and
+  `size.icon.lg` (24px), generated as `--size-icon-md`/`--size-icon-lg` in
+  react-ui and `SnackySize.Icon.md`/`.lg` in compose-ui - 0.7.2 hardcoded
+  `20px`/`24px` and `20.dp`/`24.dp` instead of reaching for them, caught right
+  after shipping. Swapped both platforms over to the token references; the
+  computed pixel values are unchanged (re-verified: still exactly 20px at
+  Small, now genuinely resolving through `--size-icon-md` rather than a
+  literal that happens to match it).
+- **Button's icon slot overlapped the label on any hug-width button (0.7.4).**
+  The icon is absolutely positioned (out of flow, per Figma's own "Slot Usage"
+  guideline), so it never reserved space for itself - the button's auto width
+  came from the label alone, and the icon rendered on top of it (`Add to cart`
+  read as the cart icon glyph covering the `A`, `dd to cart` visible after it).
+  Never caught before because no preview or story had ever passed an `icon`
+  prop to a real, narrow (hug-width) `Button` instance - confirmed directly
+  against Figma's "With Icon" example, which shows icon and label side by
+  side with a clear gap, never overlapping. Fixed by adding a
+  `.snacky-btn--with-icon` modifier that reserves exactly the icon's own
+  space (its `spacing-8` start inset + its size + a `gap-text-icon` gap) as
+  left padding, so the (still centered) label starts right after the icon
+  instead of on top of it. Ported the same fix to compose-ui's `SnackyButton`
+  (via `contentPadding`'s `start` value). Verified visually at both sizes: a
+  clean gap between icon and label, no overlap, `Add to cart` fully legible.

package/dist/index.cjs

@@ -39,6 +39,7 @@ __export(index_exports, {
   IconButton: () => IconButton,
   Illustration: () => Illustration,
   ImagePlaceholder: () => ImagePlaceholder,
+  InfoBadge: () => InfoBadge,
   NavBar: () => NavBar,
   NotificationBadge: () => NotificationBadge,
   NotificationListItem: () => NotificationListItem,
@@ -113,6 +114,7 @@ var Button = (0, import_react.forwardRef)(function Button2({ variant = "primary"
         `snacky-btn--${variant}`,
         size === "small" && "snacky-btn--small",
         danger && "snacky-btn--danger",
+        icon3 != null && "snacky-btn--with-icon",
         className
       ),
       ...rest,
@@ -844,9 +846,13 @@ function DiscountTag({ label, className }) {
 function SoldOutBadge({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
 }
-function VariantBadge({ label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx("snacky-variant-badge", className), children: label });
+function InfoBadge({ label, icon: icon3, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: cx("snacky-info-badge", className), children: [
+    icon3 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "snacky-info-badge__icon", children: icon3 }),
+    label
+  ] });
 }
+var VariantBadge = InfoBadge;
 
 // src/components/Callout/Callout.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -1312,6 +1318,7 @@ function ImagePlaceholder({ width, height, className }) {
   IconButton,
   Illustration,
   ImagePlaceholder,
+  InfoBadge,
   NavBar,
   NotificationBadge,
   NotificationListItem,