@mohasinac/appkit 4.52.2 → 4.52.3

package/dist/features/tester/seed-data/authored/design-ux__feature-badge-picker.js

@@ -0,0 +1,82 @@
+/*
+ * WHY: Authored six-part procedures for the design-ux/feature-badge-picker page.
+ * WHAT: 5 case(s), keyed by full checklist id.
+ *
+ * @tag domain:tester
+ * @tag layer:seed
+ * @tag pattern:none
+ * @tag access:server-only
+ * @tag consumers:seed-data/authored/index.ts
+ * @tag sideEffects:none
+ */
+export const authored = {
+    "checklist-design-ux-feature-badge-picker-features-are-searchable": {
+        roles: ["seller"],
+        startPage: "/store/products",
+        steps: [
+            "Sign in as the seller who owns the store and open /store/products.",
+            "Open any product for editing.",
+            "Scroll to the 'Feature badges' section of the form.",
+            "Open the control and type a few letters of a badge name.",
+        ],
+        expectedBehaviour: "Anything over five options is a searchable picker in this codebase. The control loads the platform badges eligible for this listing type plus the store's own, and filters them client-side as you type.",
+        expectedUiState: "'Feature badges' is a SINGLE control that opens a searchable list with a text input — not a two-column grid of bordered checkbox tiles, which is what it was. Typing narrows the visible options, and selected badges appear as removable chips on the control.",
+        endResult: "Closing and reopening the picker preserves the current selection. Nothing is saved until the product form itself is saved.",
+    },
+    "checklist-design-ux-feature-badge-picker-features-search-matches-description": {
+        roles: ["seller"],
+        startPage: "/store/products",
+        steps: [
+            "With the badge picker open, note a badge whose description contains a word that is NOT in its label — 'Sealed' is described as 'Factory wrap intact and never opened'.",
+            "Type that description-only word into the picker's search box, e.g. 'factory'.",
+        ],
+        inputs: { "picker search": "factory" },
+        expectedBehaviour: "Each option's description is folded into its label text specifically so it remains searchable after the conversion. In the old grid the description was visible on every tile, so it was findable by eye; in a filtered list it would be unreachable unless it is part of what is matched.",
+        expectedUiState: "The badge whose DESCRIPTION contains the typed word is listed, even though its name does not contain it. Searching a word in neither the label nor any description shows the no-results message instead.",
+        endResult: "Clearing the search box restores the full list. No selection has changed.",
+    },
+    "checklist-design-ux-feature-badge-picker-features-scope-is-visible": {
+        roles: ["seller"],
+        startPage: "/store/products",
+        steps: [
+            "Open the badge picker on a product belonging to a store that has at least one custom badge of its own.",
+            "Read the full text of several options in the list.",
+            "Select one platform badge and one store badge, then close the picker and read the two chips.",
+        ],
+        expectedBehaviour: "The grid separated the two scopes under 'Platform features' and 'Store custom features' headings. A flat searchable list has no headings, so the scope is carried in each option's own text — which also means it survives into the selected chip, where the grid's headings never reached.",
+        expectedUiState: "Every option ends with '(platform)' or '(your store)'. The two selected chips each still show which scope they came from. An option with no scope marker at all is a regression.",
+        endResult: "The distinction persists after saving and reopening the product — it is derived from the badge's own scope, not from selection order.",
+    },
+    "checklist-design-ux-feature-badge-picker-features-respects-the-cap": {
+        roles: ["seller"],
+        startPage: "/store/products",
+        steps: [
+            "Open the badge picker and read the 'Selected: N of 24' line above it.",
+            "Select badges one at a time until N reaches the stated maximum.",
+            "Try to select one more badge.",
+        ],
+        expectedBehaviour: "The ceiling is applied to the incoming selection rather than by disabling unticked rows, because a multi-select has no per-row disabled state. Selections beyond the cap are refused, keeping the earliest ones — so the badge that fails is the one just clicked, which is what a user expects.",
+        expectedUiState: "The counter stops at the maximum and does not go above it. Attempting to add one more does not increase the count and does not silently replace an existing selection. The counter line always matches the number of chips shown.",
+        expectedData: { "selected badge count": "never exceeds the stated maximum" },
+        endResult: "Saving the product stores at most the maximum number of badges. Reopening the product shows the same set.",
+    },
+    "checklist-design-ux-feature-badge-picker-features-inline-create": {
+        roles: ["seller"],
+        startPage: "/store/products",
+        steps: [
+            "Open the badge picker on one of your own products.",
+            "Choose 'Create a badge for my store'.",
+            "Enter a label such as 'QA inline badge' and leave the icon as its default.",
+            "Submit the create form.",
+            "Close the picker, reload the page, and reopen the picker.",
+        ],
+        inputs: { "Badge label": "QA inline badge", Icon: "star" },
+        expectedBehaviour: "Creating posts to the store-scope features route, which sets the owning store server-side rather than trusting the request body, and scopes the new badge to the listing type being edited. The picker's option list is refetched afterwards so the badge becomes a real option rather than a chip with nothing behind it.",
+        expectedUiState: "The create drawer closes on success and the new badge appears immediately as a SELECTED chip. Reopening the picker lists it among the options, marked '(your store)'. After a full page reload it is still listed and still selected on the product.",
+        expectedData: {
+            "new badge scope": "store",
+            "new badge owner": "the signed-in seller's store",
+        },
+        endResult: "The badge persists as a store-scope feature and is available on that store's other products too. Remove it from the store's feature settings afterwards so it does not accumulate.",
+    },
+};

package/dist/features/tester/seed-data/authored/index.js

@@ -87,6 +87,8 @@ import { authored as a_cta_layout__editor_action_bar } from "./cta-layout__edito
 import { authored as a_cta_layout__product_bottom_bar } from "./cta-layout__product-bottom-bar.js";
 import { authored as a_design_ux__back_to_top_button } from "./design-ux__back-to-top-button.js";
 import { authored as a_design_ux__rich_text_readability } from "./design-ux__rich-text-readability.js";
+import { authored as a_design_ux__action_bar_placement } from "./design-ux__action-bar-placement.js";
+import { authored as a_design_ux__feature_badge_picker } from "./design-ux__feature-badge-picker.js";
 import { authored as a_design_ux__dashboard_layout } from "./design-ux__dashboard-layout.js";
 import { authored as a_design_ux__footer_theme } from "./design-ux__footer-theme.js";
 import { authored as a_design_ux__form_validation_errors } from "./design-ux__form-validation-errors.js";
@@ -210,6 +212,8 @@ export const AUTHORED_CASES = {
     ...a_cta_layout__product_bottom_bar,
     ...a_design_ux__back_to_top_button,
     ...a_design_ux__rich_text_readability,
+    ...a_design_ux__action_bar_placement,
+    ...a_design_ux__feature_badge_picker,
     ...a_design_ux__dashboard_layout,
     ...a_design_ux__footer_theme,
     ...a_design_ux__form_validation_errors,

package/dist/features/tester/seed-data/tester-checklist-seed-data.js

@@ -3892,6 +3892,86 @@ const rawTesterChecklistItems = [
                 },
             ],
         },
+        {
+            pageKey: "action-bar-placement",
+            pageLabel: "Action Bar & Back-to-Top — Desktop vs Mobile",
+            href: "/products",
+            cases: [
+                {
+                    key: "back-to-top-dismiss-visible",
+                    label: "The small ✕ beside the back-to-top button actually shows a ✕ — not an empty outlined pill",
+                    description: "Fixed 2026-10-15. BEFORE: the dismiss control was a `<Button size=\"sm\">` forced to 24px wide, but that size carries 12px of padding on each side — so the content box was exactly 0px and the ✕ glyph shrank to nothing. The button was there and clickable; the icon was invisible. AFTER: scroll any long page past ~400px. Two round controls appear in the corner: a large one with an up-chevron, and a small one with a clearly visible ✕. Clicking the ✕ hides both until you navigate to another page.",
+                    href: "/products",
+                },
+                {
+                    key: "action-bar-top-on-desktop",
+                    label: "ON DESKTOP (window wider than ~1024px): the page action bar sits directly UNDER the header, not welded to the bottom of the window",
+                    description: "Changed 2026-10-15. BEFORE: the same full-width bar was pinned to the bottom edge on every screen size — a mobile pattern on a desktop window, where it reads as a browser download bar and sits as far from the content as possible. AFTER: maximise the window and open a product detail page (or any admin list and tick a row to enter bulk mode). The bar must appear immediately below the site header, full width, with its shadow falling DOWNWARD onto the page.",
+                    href: "/products",
+                },
+                {
+                    key: "action-bar-bottom-on-mobile",
+                    label: "ON MOBILE (narrow window): the same action bar is still at the BOTTOM, stacked directly above the bottom tab bar",
+                    description: "The other half of the change, and the real regression risk — the two layouts share one component. Narrow the browser to phone width (or use device emulation) on the same page. The bar must be at the bottom, immediately above the bottom navigation, with its shadow falling UPWARD. Resize the window slowly across the ~1024px line both ways: the bar must move cleanly between the two positions and never appear in both places or in neither.",
+                    href: "/products",
+                },
+                {
+                    key: "action-bar-no-content-overlap",
+                    label: "ON DESKTOP: the top action bar never covers the first rows of page content, and leaves no empty gap when it is absent",
+                    description: "The bar is fixed, so the page reserves space for it. Two checks. (1) With the bar showing, the first heading/row of content must be fully readable, not hidden behind it. (2) On a page with NO action bar, there must be no blank band under the header — the reservation collapses to zero when nothing is published.",
+                    href: "/products",
+                },
+                {
+                    key: "action-bar-panels-open-into-screen",
+                    label: "Expandable panels on the action bar open INTO the screen — downward on desktop, upward on mobile",
+                    description: "On desktop, open an admin list, tick two rows to enter bulk mode, then open the action-type picker: it must expand DOWNWARD over the page. Repeat at phone width: it must expand UPWARD. A panel that opens off-screen is unusable, and the direction has to follow whichever edge the bar is attached to.",
+                    href: "/admin/products",
+                },
+                {
+                    key: "back-to-top-clears-the-bar",
+                    label: "The back-to-top button never overlaps the action bar or the bottom tab bar at any window width",
+                    description: "On mobile the button floats above whatever is stacked at the bottom edge; on desktop the bar is at the top so the button should sit lower. Scroll a long page at phone width with an action bar showing — the button must sit clear above it. Widen to desktop: the button must move down as the bottom tier empties, with no overlap at any point during the resize.",
+                    href: "/products",
+                },
+            ],
+        },
+        {
+            pageKey: "feature-badge-picker",
+            pageLabel: "Feature Badges — Searchable Picker",
+            href: "/store/products",
+            cases: [
+                {
+                    key: "features-are-searchable",
+                    label: "The product form's Feature badges control is a SEARCHABLE dropdown, not a long grid of checkboxes",
+                    description: "Changed 2026-10-15. BEFORE: every eligible badge rendered as a bordered checkbox tile in a two-column grid — a wall a seller had to read end-to-end, which grew every time an admin added a badge. AFTER: as a seller, open any product for editing and find 'Feature badges'. It must be a single control that opens a searchable list. Type part of a badge name and confirm the list narrows.",
+                    href: "/store/products",
+                },
+                {
+                    key: "features-search-matches-description",
+                    label: "Searching the badge picker matches a badge's DESCRIPTION, not only its name",
+                    description: "The description is folded into each option so it stays searchable. Open the picker and type a word that appears only in a badge's description (e.g. 'factory', which is in Sealed's description but not its label). That badge must still appear in the filtered list.",
+                    href: "/store/products",
+                },
+                {
+                    key: "features-scope-is-visible",
+                    label: "Each badge option says whether it is a platform badge or one of your own store's",
+                    description: "The old grid showed two separate headings. A flat searchable list has none, so the scope rides in the option text — every option must end with '(platform)' or '(your store)', and the selected chips must keep that distinction too.",
+                    href: "/store/products",
+                },
+                {
+                    key: "features-respects-the-cap",
+                    label: "Selecting more than the allowed number of badges is prevented, and an over-limit product loads without blocking save",
+                    description: "Select badges until you hit the stated limit ('Selected: N of 24'), then try to select one more — the selection must not exceed the cap. This replaced a mechanism that disabled every unticked checkbox at the limit, so confirm the control still communicates that you are full rather than silently ignoring clicks.",
+                    href: "/store/products",
+                },
+                {
+                    key: "features-inline-create",
+                    label: "A seller can create a NEW store badge from inside the picker, and it is immediately selectable",
+                    description: "Added 2026-10-15. As a seller, open the badge picker and use 'Create a badge for my store'. Fill in a label and icon and submit. The drawer must close, the new badge must appear as a selected chip, and reopening the picker must list it as a real option marked '(your store)' — not a one-off chip that disappears on reload. Reload the page and confirm it persisted.",
+                    href: "/store/products",
+                },
+            ],
+        },
         {
             pageKey: "rich-text-readability",
             pageLabel: "Admin-Authored Rich Text — Readability in Both Themes",