refactor(chips-combobox): use attr tags for options (#2073)

eBay · Jan 26, 2024 · 708b3d3 · 708b3d3
1 parent af3843c
commit 708b3d3
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 65 deletions.
diff --git a/src/components/ebay-chips-combobox/chips-combobox.stories.ts b/src/components/ebay-chips-combobox/chips-combobox.stories.ts
@@ -1,7 +1,12 @@
-import { addRenderBodies } from "../../../.storybook/utils";
+import {
+    addRenderBodies,
+    buildExtensionTemplate,
+} from "../../../.storybook/utils";
 import { tagToString } from "../../../.storybook/storybook-code-source";
 import Readme from "./README.md";
 import Combobox from "./index.marko";
+import DefaultTemplate from "./examples/default.marko";
+import DefaultCode from "./examples/default.marko?raw";
 
 const Template = (args) => ({
     input: addRenderBodies(args),
@@ -54,11 +59,16 @@ export default {
                 "The role description for accessibility. Default text is set and will be in english. Pass this to override for different locales",
         },
         options: {
-            type: "array",
-            control: { type: "object" },
-            description: "array of autofill options to display",
+            name: "@option",
+            description:
+                "Repeatable attribute tag containing the autofill options",
+        },
+        text: {
+            table: {
+                category: "@option attributes",
+            },
+            description: "The text contained in the autofill option",
         },
-
         onChange: {
             action: "on-change",
             table: {
@@ -87,30 +97,4 @@ export default {
     },
 };
 
-export const Isolated = Template.bind({});
-Isolated.args = {
-    options: [
-        "football",
-        "baseball",
-        "basketball",
-        "hockey",
-        "soccer",
-        "volleyball",
-        "golf",
-        "tennis",
-    ],
-};
-Isolated.parameters = {
-    docs: {
-        source: {
-            code: tagToString("ebay-combobox", Isolated.args, {
-                options: "option",
-            }),
-        },
-    },
-    expanded: {
-        table: {
-            category: "disabled",
-        },
-    },
-};
+export const Default = buildExtensionTemplate(DefaultTemplate, DefaultCode);
diff --git a/src/components/ebay-chips-combobox/component.ts b/src/components/ebay-chips-combobox/component.ts
@@ -11,7 +11,7 @@ interface ChipsComboboxInput extends Omit<Marko.Input<"input">, `on${string}`> {
     fluid?: boolean;
     error?: boolean;
     "list-selection"?: "manual" | "automatic";
-    options: string[];
+    option?: Marko.RepeatableAttrTag<{ text: string }>;
     selected?: string[];
     roledescription?: AttrString;
     "a11y-delete-button"?: AttrString;

diff --git a/src/components/ebay-chips-combobox/examples/default.marko b/src/components/ebay-chips-combobox/examples/default.marko
@@ -0,0 +1,5 @@
+<ebay-chips-combobox>
+    <@option text="Option 1"/>
+    <@option text="Option 2"/>
+    <@option text="Option 3"/>
+</ebay-chips-combobox>
diff --git a/src/components/ebay-chips-combobox/index.marko b/src/components/ebay-chips-combobox/index.marko
@@ -1,5 +1,5 @@
 $ const {
-    options,
+    option,
     selected: inputSelected,
     class: inputClass,
     fluid,
@@ -10,6 +10,8 @@ $ const {
     ...comboboxInput
 } = input as Omit<typeof input, `on${string}`>;
 
+$ const options = [...option || []].map((o) => o.text)
+
 <span
     class=[
         "chips-combobox",

diff --git a/src/components/ebay-chips-combobox/marko-tag.json b/src/components/ebay-chips-combobox/marko-tag.json
@@ -5,43 +5,17 @@
         "type": "expression"
     },
     "@html-attributes": "expression",
-    "@borderless": "boolean",
-    "@autocomplete": "string",
     "@expanded": "boolean",
-    "@list-selection": {
-        "enum": ["automatic", "manual"]
-    },
-    "@disabled": "#html-disabled",
-    "@form": "#html-form",
-    "@name": "#html-name",
-    "@placeholder": "#html-placeholder",
-    "@required": "#html-required",
-    "@value": "#html-value",
-    "@role": "never",
-    "@aria-autocomplete": "never",
-    "@aria-haspopup": "never",
-    "@floating-label": "string",
-    "@actionable <actionable>": {
+    "@fluid": "boolean",
+    "@error": "boolean",
+    "@list-selection": "string",
+    "@option <option>[]": {
         "attribute-groups": ["html-attributes"],
         "@*": {
             "targetProperty": null,
             "type": "expression"
         },
         "@html-attributes": "expression"
     },
-    "@options <option>[]": {
-        "attribute-groups": ["html-attributes"],
-        "@*": {
-            "targetProperty": null,
-            "type": "expression"
-        },
-        "@html-attributes": "expression",
-        "@value": "string",
-        "@text": "string",
-        "@selected": "boolean",
-        "@tabindex": "never",
-        "@role": "never",
-        "@aria-selected": "never",
-        "@sticky": "boolean"
-    }
+    "@selected": "array"
 }