feat(toggle-button-group): added min columns option (#2228)

eBay · Aug 7, 2024 · b1f4dc1 · b1f4dc1
1 parent 5659ebe
commit b1f4dc1
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 1 deletion.
diff --git a/.changeset/tame-beans-move.md b/.changeset/tame-beans-move.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+feat(toggle-button-group): added min columns option
diff --git a/src/components/ebay-toggle-button-group/component.ts b/src/components/ebay-toggle-button-group/component.ts
@@ -15,6 +15,7 @@ interface ToggleButtonGroupInput
     variant?: "checkbox" | "radio" | "radio-toggle";
     "a11y-text"?: string;
     "a11y-label-id"?: string;
+    columnsMin?: number;
     columnsXS?: number;
     columnsSM?: number;
     columnsMD?: number;

diff --git a/src/components/ebay-toggle-button-group/examples/columns.marko b/src/components/ebay-toggle-button-group/examples/columns.marko
@@ -1,4 +1,4 @@
-<ebay-toggle-button-group columnsSM=3 columnsXS=2 columnsMD=6 columnsXL=8 ...input>
+<ebay-toggle-button-group columnsMin=1 columnsSM=3 columnsXS=2 columnsMD=6 columnsXL=8 ...input>
     <@button>
         First Item
         <@subtitle>Empty on load</@subtitle>

diff --git a/src/components/ebay-toggle-button-group/index.marko b/src/components/ebay-toggle-button-group/index.marko
@@ -3,6 +3,7 @@ import { processHtmlAttributes } from "../../common/html-attributes";
 $ const {
     class: inputClass,
     layoutType: baseLayoutType,
+    columnsMin,
     columnsXS,
     columnsSM,
     columnsMD,
@@ -15,6 +16,7 @@ $ const {
 
 <div
     class=["toggle-button-group", inputClass]
+    data-columns-min=columnsMin
     data-columns-xs=columnsXS
     data-columns-sm=columnsSM
     data-columns-md=columnsMD

diff --git a/src/components/ebay-toggle-button-group/marko-tag.json b/src/components/ebay-toggle-button-group/marko-tag.json
@@ -6,6 +6,7 @@
     },
     "@html-attributes": "expression",
     "@radio": "boolean",
+    "@columnsMin": "number",
     "@columnsMD": "number",
     "@columnsSM": "number",
     "@columnsXS": "number",

diff --git a/...ents/ebay-toggle-button-group/test/__snapshots__/renders-custom-column-sizes.expected.txt b/...ents/ebay-toggle-button-group/test/__snapshots__/renders-custom-column-sizes.expected.txt
@@ -2,6 +2,7 @@
   [36m<div[39m
     [33mclass[39m=[32m"toggle-button-group"[39m
     [33mdata-columns-md[39m=[32m"6"[39m
+    [33mdata-columns-min[39m=[32m"1"[39m
     [33mdata-columns-sm[39m=[32m"3"[39m
     [33mdata-columns-xl[39m=[32m"8"[39m
     [33mdata-columns-xs[39m=[32m"2"[39m

diff --git a/src/components/ebay-toggle-button-group/toggle-button-group.stories.ts b/src/components/ebay-toggle-button-group/toggle-button-group.stories.ts
@@ -38,6 +38,12 @@ export default {
             description:
                 'Selection type for the buttons in the group. May be `"checkbox"` (default), `"radio"`, or `"radio-toggle"` (same as radio but with the option to deselect)',
         },
+        columnsMin: {
+            type: "number",
+            control: { type: "number" },
+            description:
+                "Preferred minimum number of columns for smallest container/screen (1-3). If this is not set will do an automatic layout. It is recommended to not set this unless needed.",
+        },
         columnsXS: {
             type: "number",
             control: { type: "number" },
@@ -145,6 +151,7 @@ export const PerferedColumns = buildExtensionTemplate(
     columnsTemplate,
     columnsCode,
     {
+        columnsMin: 1,
         columnsSM: 3,
         columnsXS: 2,
         columnsMD: 6,