feat(listbox-button): added error state (#2063)

eBay · Jan 22, 2024 · 94e224b · 94e224b
1 parent 37a249a
commit 94e224b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 2 deletions.
diff --git a/src/components/ebay-listbox-button/component.ts b/src/components/ebay-listbox-button/component.ts
@@ -19,6 +19,7 @@ interface ListboxButtonInput extends Omit<Marko.Input<"div">, `on${string}`> {
     disabled?: boolean;
     "button-name"?: string;
     invalid?: boolean;
+    hasError?: boolean;
     "prefix-label"?: string;
     "collapse-on-select"?: boolean;
     "on-expand"?: () => void;

diff --git a/src/components/ebay-listbox-button/examples/with-error.marko b/src/components/ebay-listbox-button/examples/with-error.marko
@@ -0,0 +1,12 @@
+<span class="field">
+    <ebay-listbox-button name="formFieldName" hasError aria-describedby:scoped="listbox-description">
+        <@option value="1" text="Option 1" selected/>
+        <@option value="2" text="Option 2"/>
+        <@option value="3" text="Option 3"/>
+    </ebay-listbox-button>
+
+    <div class="field__description field__description--attention" id:scoped="listbox-description">
+        <ebay-attention-filled-16-icon/>
+        <span>There was an error</span>
+    </div>
+</span>
diff --git a/src/components/ebay-listbox-button/index.marko b/src/components/ebay-listbox-button/index.marko
@@ -18,6 +18,8 @@ $ const {
     collapseOnSelect,
     listSelection,
     variant,
+    hasError,
+    ariaDescribedby: describedby,
     ...htmlInput
 } = input;
 
@@ -30,7 +32,7 @@ $ var isForm = variant === 'form';
 <${truncate && !fluid ? "div" : "span"}
     ...processHtmlAttributes(htmlInput)
     key="container"
-    class=["listbox-button", inputClass, fluid && "listbox-button--fluid", isForm && `listbox-button--form`]
+    class=["listbox-button", inputClass, fluid && "listbox-button--fluid", isForm && `listbox-button--form`, hasError && 'listbox-button--error']
     on-expander-expand("handleExpand")
     on-expander-collapse("handleCollapse")>
     <button
@@ -48,6 +50,7 @@ $ var isForm = variant === 'form';
         disabled=disabled
         name=buttonName
         aria-haspopup="listbox"
+        aria-describedby=describedby
         aria-labelledby=(labelId && `${prefixId} ${labelId}`)
         aria-invalid=(invalid && "true")>
         <span class="btn__cell">

diff --git a/src/components/ebay-listbox-button/listbox-button.stories.ts b/src/components/ebay-listbox-button/listbox-button.stories.ts
@@ -7,6 +7,10 @@ import Readme from "./README.md";
 import Component from "./index.marko";
 import WithDescriptionTemplate from "./examples/with-description.marko";
 import WithDescriptionTemplateCode from "./examples/with-description.marko?raw";
+import WithErrorTemplate from "./examples/with-error.marko";
+import WithErrorTemplateCode from "./examples/with-error.marko?raw";
+
+
 
 const Template = (args) => ({
     input: addRenderBodies(args),
@@ -49,6 +53,11 @@ export default {
             description:
                 "will truncate the text of the button onto a single line, and adds an ellipsis, when the buttons text overflows",
         },
+        hasError: {
+            type: "boolean",
+            control: { type: "boolean" },
+            description: "whether listbox is in an error state or not",
+        },
         collapseOnSelect: {
             type: "boolean",
             control: { type: "boolean" },
@@ -176,3 +185,9 @@ export const withDescription = buildExtensionTemplate(
     WithDescriptionTemplate,
     WithDescriptionTemplateCode
 );
+
+export const withError = buildExtensionTemplate(
+    WithErrorTemplate,
+    WithErrorTemplateCode
+);
+
diff --git a/src/components/ebay-listbox-button/marko-tag.json b/src/components/ebay-listbox-button/marko-tag.json
@@ -8,13 +8,15 @@
     "@grow": "boolean",
     "@borderless": "boolean",
     "@collapseOnSelect": "boolean",
+    "@hasError": "boolean",
     "@fluid": "boolean",
     "@invalid": "boolean",
     "@truncate": "boolean",
     "@prefix-id": "string",
     "@prefix-label": "string",
     "@floating-label": "string",
     "@unselected-text": "string",
+    "@aria-describedby": "string",
     "@list-selection": {
         "enum": ["manual", "auto"]
     },

diff --git a/src/components/ebay-listbox-button/test/test.server.js b/src/components/ebay-listbox-button/test/test.server.js
@@ -2,7 +2,7 @@ import { composeStories } from "@storybook/marko";
 import { snapshotHTML } from "../../../common/test-utils/snapshots";
 import * as stories from "../listbox-button.stories";
 
-const { Default, withDescription } = composeStories(stories);
+const { Default, withDescription, withError } = composeStories(stories);
 
 const htmlSnap = snapshotHTML(__dirname);
 
@@ -42,4 +42,8 @@ describe("listbox", () => {
     it("renders with description", async () => {
         await htmlSnap(withDescription);
     });
+
+    it("renders with error", async () => {
+        await htmlSnap(withError);
+    });
 });