@propeller-commerce/propeller-v2-react-ui 0.4.6 → 0.4.7

package/CHANGELOG.md

@@ -8,6 +8,31 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.4.7] - 2026-06-19
+
+### Changed
+
+- **Mobile product card layout (below 768px).** On narrow viewports the
+  `ProductCard` action area no longer overflows the card edge — the quantity
+  stepper and "Add to cart" button were clipped. Below `md` (768px):
+  - **List view** (`columns === 1`): the footer becomes two rows — stock and
+    price share the first row (`justify-between`), and the full-width
+    `AddToCart` (stepper + button) sits on the second row.
+  - **Grid view** (`columns > 1`): the footer becomes three rows — stock ↔
+    price, then a full-width stepper, then a full-width button.
+
+  At `md` and up the previous desktop layout is unchanged. This flows through
+  every surface that renders `ProductCard` / `ProductGrid` (catalog, search,
+  product slider). Implemented purely with responsive Tailwind classes — no
+  JavaScript width detection.
+
+### Added
+
+- **Cart icon in the `AddToCart` button.** The submit button now renders a
+  built-in cart glyph (`.propeller-add-to-cart__icon`) before its label, drawn
+  with `currentColor` and `em` sizing so consumers can restyle its size,
+  colour and stroke via CSS.
+
 ## [0.4.6] - 2026-06-09
 
 ### Fixed

package/dist/index.cjs

@@ -4024,8 +4024,8 @@ function AddToCart(rawProps) {
       className: `propeller-add-to-cart ${props.className || ""}`,
       "data-loading": loading ? "true" : "false",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__controls flex items-center gap-2 w-full", children: [
-          props.allowIncrDecr !== false ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__stepper flex items-center border border-input rounded-control bg-card h-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__controls flex flex-wrap items-center gap-2 w-full md:flex-nowrap", children: [
+          props.allowIncrDecr !== false ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__stepper flex items-center border border-input rounded-control bg-card h-10 w-full md:w-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
@@ -4044,7 +4044,7 @@ function AddToCart(rawProps) {
               "input",
               {
                 type: "number",
-                className: "propeller-add-to-cart__quantity w-12 text-center text-sm bg-transparent border-none focus:ring-0 focus:outline-none h-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                className: "propeller-add-to-cart__quantity flex-1 md:flex-none md:w-12 text-center text-sm bg-transparent border-none focus:ring-0 focus:outline-none h-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                 min: getMinQuantity(props.product),
                 step: getStep(props.product),
                 value: quantity,
@@ -4077,7 +4077,7 @@ function AddToCart(rawProps) {
             "input",
             {
               type: "number",
-              className: "propeller-add-to-cart__quantity w-16 h-10 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-secondary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+              className: "propeller-add-to-cart__quantity w-full md:w-16 h-10 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-secondary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
               min: getMinQuantity(props.product),
               step: getStep(props.product),
               value: quantity,
@@ -4095,10 +4095,28 @@ function AddToCart(rawProps) {
             "button",
             {
               type: "button",
-              className: "propeller-add-to-cart__submit flex-1 inline-flex justify-center items-center h-10 px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+              className: "propeller-add-to-cart__submit flex-1 basis-full md:basis-auto inline-flex justify-center items-center gap-2 h-10 px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
               onClick: () => handleAddToCart(),
               disabled: loading,
               children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    className: "propeller-add-to-cart__icon w-[1.1em] h-[1.1em] flex-shrink-0",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "21", r: "1" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "21", r: "1" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" })
+                    ]
+                  }
+                ),
                 loading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: propellerV2CoreUi.getLabel(props.labels, "adding", "Adding...") }) : null,
                 !loading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: propellerV2CoreUi.getLabel(props.labels, "add", "Add") }) : null
               ]
@@ -13262,22 +13280,28 @@ function ProductCardRoot(rawProps) {
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardShortDescription, {}) : null
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer w-full md:w-auto flex items-center gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
-            props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) : null,
-            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-sm" }) : null,
-            props.allowAddToCart !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__cta flex-shrink-0 ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardAddToCart, {}) }) : null
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer w-full md:w-auto flex flex-col gap-2 md:flex-row md:items-center md:gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer-meta flex items-center justify-between gap-3 md:contents", children: [
+              props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) : null,
+              props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-sm" }) : null
+            ] }),
+            props.allowAddToCart !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__cta w-full md:w-auto md:flex-shrink-0 md:ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardAddToCart, {}) }) : null
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__body flex flex-1 flex-col gap-1.5 p-3 sm:gap-2 sm:p-4", children: [
             props.showSku !== false && sku ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardName, { linkable: true }) : null,
             textLabelValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardTextLabels, {}) : null,
-            props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) : null,
+            props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) }) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardShortDescription, {}) : null,
-            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__price mt-auto pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-base sm:text-lg" }) }) : null
+            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__price mt-auto pt-1 hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-base sm:text-lg" }) }) : null
           ] }),
-          props.allowAddToCart !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__cta px-3 pb-3 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardAddToCart, {}) }) : null
+          props.showStock && !!product.inventory || props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer-meta flex items-center justify-between gap-2 px-3 pt-1 sm:px-4 md:hidden", children: [
+            props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) : null,
+            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-base" }) : null
+          ] }) : null,
+          props.allowAddToCart !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__cta px-3 pb-3 pt-2 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardAddToCart, {}) }) : null
         ] })
       ]
     }