@veevarts/design-system 2.2.2 → 2.4.0

package/dist/patterns/TileSelect/TileSelect.d.ts

@@ -11,9 +11,47 @@ export interface TileSelectOption {
     icon: string | React.ReactNode;
     /** Disable the tile (greyed out, no click). */
     isDisabled?: boolean;
+    /**
+     * One line of supporting copy. Rendered only by `variant="compact"`,
+     * for an option that ended up in the "More" menu, where the label
+     * alone ("Other") rarely says enough.
+     */
+    description?: string;
+    /**
+     * `variant="compact"` only: keep this option in the "More" menu at
+     * every width, however much room the track has. For an action that is
+     * secondary by decision rather than by measurement — a payments picker
+     * that wants "Other" one click away so the methods people actually
+     * reach for own the row.
+     *
+     * The menu is rendered whenever an option asks for it, so this also
+     * overrides the rule that suppresses a menu holding a single option.
+     */
+    alwaysInMenu?: boolean;
+    /**
+     * `variant="compact"` only: what this option is worth keeping on the
+     * track. When the pill runs out of room the LOWEST priority folds into
+     * the menu first; equal priorities fold from the end of the list.
+     * Default `0`.
+     *
+     * Display order is untouched — this decides what survives a squeeze,
+     * not where anything sits. A payments picker can list "Other" before
+     * "Split payment" and still lose "Other" first, because splitting a
+     * payment is the rarer, weightier thing to reach for.
+     */
+    priority?: number;
     /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
     'data-testid'?: string;
 }
+/**
+ * `'tiles'` — the icon-over-label grid, with a `<Select>` dropdown under
+ * `md`. The picker is the subject of the step.
+ *
+ * `'compact'` — a segmented pill of label-only toggles at every width,
+ * keeping every option the track can hold and folding the rest into a
+ * "More" menu rather than scrolling. The picker is a control among others.
+ */
+export type TileSelectVariant = 'tiles' | 'compact';
 export interface TileSelectProps {
     /** Options to render in order. */
     options: readonly TileSelectOption[];
@@ -30,7 +68,33 @@ export interface TileSelectProps {
      * heading element.
      */
     ariaLabel?: string;
-    /** Grid columns on >= sm. Default `3`. Mobile collapses to 2. */
+    /**
+     * How the options render. Default `'tiles'`.
+     * See {@link TileSelectVariant}.
+     */
+    variant?: TileSelectVariant;
+    /**
+     * `variant="compact"` only: a CAP on how many options stay on the pill.
+     * Unset by default, and normally best left that way — the pill already
+     * measures the track and keeps every option that fits, folding only
+     * what is left over. Set it when a surface wants a shorter row than
+     * its width allows.
+     *
+     * The cap gives way in one case: when honouring it would leave a single
+     * option in the menu that the track had room for. A "More" button is
+     * wider than most labels, so that fold costs space and buys a click.
+     */
+    maxVisible?: number;
+    /**
+     * `variant="compact"` only: label for the overflow trigger. Shown
+     * until an option inside the menu is selected, after which the
+     * trigger carries that option's label. Translatable. Default `'More'`.
+     */
+    moreLabel?: string;
+    /**
+     * Grid columns on >= sm. Default `3`. Mobile collapses to 2.
+     * Ignored by `variant="compact"`, which is a single strip.
+     */
     columnsDesktop?: 2 | 3 | 4;
     columnsMobile?: 1 | 2;
     className?: string;

package/dist/patterns/TileSelect/index.d.ts

@@ -1,2 +1,2 @@
 export { TileSelect } from './TileSelect';
-export type { TileSelectProps, TileSelectOption } from './TileSelect';
+export type { TileSelectProps, TileSelectOption, TileSelectVariant } from './TileSelect';

package/dist/patterns/index.d.ts

@@ -82,7 +82,7 @@ export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, TenderRow, Te
 export { ModalShell, ModalShellHeader, ModalShellFooter } from './ModalShell';
 export type { ModalShellProps, ModalShellHeaderProps, ModalShellFooterProps } from './ModalShell';
 export { TileSelect } from './TileSelect';
-export type { TileSelectProps, TileSelectOption } from './TileSelect';
+export type { TileSelectProps, TileSelectOption, TileSelectVariant } from './TileSelect';
 export { PaymentTotalBanner } from './PaymentTotalBanner';
 export type { PaymentTotalBannerProps } from './PaymentTotalBanner';
 export { LoadingOverlay } from './LoadingOverlay';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.2.2",
+    "version": "2.4.0",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",