@ebay/skin 18.0.8 → 18.2.0

package/src/modules/chips-combobox.marko

@@ -0,0 +1,784 @@
+<div id="chips-combobox">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>
+        Chips Combobox are creators and managers of
+        <span class="highlight">
+            chip
+        </span>
+        ${" "}components. They allow user search of existing chip options, additions, and removals of chips. The search/selection follows the pattern of the combobox pattern.
+    </p>
+
+    <h3>Empty Chips Combobox</h3>
+    <p>
+        This is the simplest type of implementation with an empty chips combobox component usually encountered on initial information entry.
+    </p>
+
+    <p>
+        <strong>NOTE</strong>
+        : For empty Chips Combobox implementations, to avoid layout issues, make sure${" "}
+        <span class="highlight">
+            .chips-combobox__items
+        </span>
+         does NOT have any whitespace.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="chips-combobox">
+                <ul class="chips-combobox__items" aria-label="Selected sports"/>
+                <span class="combobox combobox--js chips-combobox__combobox">
+                    <span class="combobox__control chips-combobox_combobox__control">
+                        <input
+                            id="chips-combobox-1-input"
+                            role="combobox"
+                            type="text"
+                            placeholder="Add Sport"
+                            aria-haspopup="listbox"
+                            aria-owns="listbox-chips-combobox-1"
+                        >
+                        <svg
+                            class="icon icon--16"
+                            height="16"
+                            width="16"
+                            aria-hidden="true"
+                        >
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                    <div class="combobox__listbox">
+                        <div
+                            id="listbox-chips-combobox-1"
+                            class="combobox__options"
+                            role="listbox"
+                        >
+                            <div class="combobox__option" role="option">
+                                <span>Soccer</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Hockey</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Tennis</span>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<span class="chips-combobox">
+    <ul class="chips-combobox__items" aria-label="Selected sports"></ul>
+    <span class="combobox combobox--js chips-combobox__combobox">
+        <span class="combobox__control chips-combobox_combobox__control">
+            <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+        <div class="combobox__listbox">
+            <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
+                <div class="combobox__option" role="option">
+                    <span>Soccer</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Hockey</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Tennis</span>
+                </div>
+            </div>
+        </div>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Fluid Chips Combobox</h3>
+    <p>
+        Adding the modifier,
+        <span class="highlight">
+            .chips-combobox--fluid
+        </span>
+         makes the component fluid and expands it to the width of its container.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="chips-combobox chips-combobox--fluid">
+                <ul class="chips-combobox__items" aria-label="Selected sports"/>
+                <span class="combobox combobox--js chips-combobox__combobox">
+                    <span class="combobox__control chips-combobox_combobox__control">
+                        <input
+                            id="chips-combobox-1-input"
+                            role="combobox"
+                            type="text"
+                            placeholder="Add Sport"
+                            aria-haspopup="listbox"
+                            aria-owns="listbox-chips-combobox-1"
+                        >
+                        <svg
+                            class="icon icon--16"
+                            height="16"
+                            width="16"
+                            aria-hidden="true"
+                        >
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                    <div class="combobox__listbox">
+                        <div
+                            id="listbox-chips-combobox-1"
+                            class="combobox__options"
+                            role="listbox"
+                        >
+                            <div class="combobox__option" role="option">
+                                <span>Soccer</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Hockey</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Tennis</span>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<span class="chips-combobox chips-combobox--fluid">
+    <ul class="chips-combobox__items" aria-label="Selected sports"></ul>
+    <span class="combobox combobox--js chips-combobox__combobox">
+        <span class="combobox__control chips-combobox_combobox__control">
+            <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+        <div class="combobox__listbox">
+            <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
+                <div class="combobox__option" role="option">
+                    <span>Soccer</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Hockey</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Tennis</span>
+                </div>
+            </div>
+        </div>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Prefilled Chips Combobox</h3>
+    <p>
+        This is the chips combobox with pre-populated chip items, something you'd see when editing a chips combobox component.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="chips-combobox">
+                <ul class="chips-combobox__items" aria-label="Selected sports">
+                    <li>
+                        <span class="chip">
+                            <span
+                                id="chip-interactive-1-1-text"
+                                class="chip__text"
+                            >
+                                Football
+                            </span>
+                            <button
+                                class="chip__button"
+                                type="button"
+                                aria-label="Remove"
+                                aria-describedby="chip-interactive-1-1-text"
+                            >
+                                <svg
+                                    class="icon icon--12"
+                                    width="13"
+                                    height="12"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-12"/>
+                                </svg>
+                            </button>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="chip">
+                            <span
+                                id="chip-interactive-1-2-text"
+                                class="chip__text"
+                            >
+                                Basketball
+                            </span>
+                            <button
+                                class="chip__button"
+                                type="button"
+                                aria-label="Remove"
+                                aria-describedby="chip-interactive-1-2-text"
+                            >
+                                <svg
+                                    class="icon icon--12"
+                                    width="13"
+                                    height="12"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-12"/>
+                                </svg>
+                            </button>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="chip">
+                            <span
+                                id="chip-interactive-1-3-text"
+                                class="chip__text"
+                            >
+                                Baseball
+                            </span>
+                            <button
+                                class="chip__button"
+                                type="button"
+                                aria-label="Remove"
+                                aria-describedby="chip-interactive-1-3-text"
+                            >
+                                <svg
+                                    class="icon icon--12"
+                                    width="13"
+                                    height="12"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-12"/>
+                                </svg>
+                            </button>
+                        </span>
+                    </li>
+                </ul>
+                <span class="combobox combobox--js chips-combobox__combobox">
+                    <span class="combobox__control chips-combobox_combobox__control">
+                        <input
+                            id="chips-combobox-1-input"
+                            role="combobox"
+                            type="text"
+                            placeholder="Add Sport"
+                            aria-haspopup="listbox"
+                            aria-owns="listbox-chips-combobox-1"
+                        >
+                        <svg
+                            class="icon icon--16"
+                            height="16"
+                            width="16"
+                            aria-hidden="true"
+                        >
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                    <div class="combobox__listbox">
+                        <div
+                            id="listbox-chips-combobox-1"
+                            class="combobox__options"
+                            role="listbox"
+                        >
+                            <div class="combobox__option" role="option">
+                                <span>Soccer</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Hockey</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Tennis</span>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<span class="chips-combobox">
+    <ul class="chips-combobox__items" aria-label="Selected sports">
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+    </ul>
+    <span class="combobox combobox--js chips-combobox__combobox">
+        <span class="combobox__control chips-combobox_combobox__control">
+            <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+        <div class="combobox__listbox">
+            <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
+                <div class="combobox__option" role="option">
+                    <span>Soccer</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Hockey</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Tennis</span>
+                </div>
+            </div>
+        </div>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Chips Combobox in Disabled State</h3>
+    <p>
+        When disabled, Chips Combobox becomes "frozen" and users are unable to interact with the module - search for, add, and remove chips.
+    </p>
+    <p>
+        To turn on this state, add
+        <span class="highlight">
+            aria-disabled="true"
+        </span>
+        ${" "}to the outer element of the module. Additonally, you'll need to add the${" "}
+        <span class="highlight">
+            disabled
+        </span>
+         attribute to all the buttons inside as well as the
+        <span class="highlight">
+            input
+        </span>
+         element for combobox.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="chips-combobox" aria-disabled="true">
+                <ul class="chips-combobox__items" aria-label="Selected sports">
+                    <li>
+                        <span class="chip">
+                            <span
+                                id="chip-interactive-1-1-text"
+                                class="chip__text"
+                            >
+                                Football
+                            </span>
+                            <button
+                                class="chip__button"
+                                type="button"
+                                aria-label="Remove"
+                                aria-describedby="chip-interactive-1-1-text"
+                                disabled
+                            >
+                                <svg
+                                    class="icon icon--12"
+                                    width="13"
+                                    height="12"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-12"/>
+                                </svg>
+                            </button>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="chip">
+                            <span
+                                id="chip-interactive-1-2-text"
+                                class="chip__text"
+                            >
+                                Basketball
+                            </span>
+                            <button
+                                class="chip__button"
+                                type="button"
+                                aria-label="Remove"
+                                aria-describedby="chip-interactive-1-2-text"
+                                disabled
+                            >
+                                <svg
+                                    class="icon icon--12"
+                                    width="13"
+                                    height="12"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-12"/>
+                                </svg>
+                            </button>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="chip">
+                            <span
+                                id="chip-interactive-1-3-text"
+                                class="chip__text"
+                            >
+                                Baseball
+                            </span>
+                            <button
+                                class="chip__button"
+                                type="button"
+                                aria-label="Remove"
+                                aria-describedby="chip-interactive-1-3-text"
+                                disabled
+                            >
+                                <svg
+                                    class="icon icon--12"
+                                    width="13"
+                                    height="12"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-12"/>
+                                </svg>
+                            </button>
+                        </span>
+                    </li>
+                </ul>
+                <span class="combobox combobox--js chips-combobox__combobox">
+                    <span class="combobox__control chips-combobox_combobox__control">
+                        <input
+                            id="chips-combobox-1-input"
+                            role="combobox"
+                            type="text"
+                            placeholder="Add Sport"
+                            aria-haspopup="listbox"
+                            aria-owns="listbox-chips-combobox-1"
+                            disabled
+                        >
+                        <svg
+                            class="icon icon--16"
+                            height="16"
+                            width="16"
+                            aria-hidden="true"
+                        >
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                    <div class="combobox__listbox">
+                        <div
+                            id="listbox-chips-combobox-1"
+                            class="combobox__options"
+                            role="listbox"
+                        >
+                            <div class="combobox__option" role="option">
+                                <span>Soccer</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Hockey</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Tennis</span>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<span class="chips-combobox" aria-disabled="true">
+    <ul class="chips-combobox__items" aria-label="Selected sports">
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+    </ul>
+    <span class="combobox combobox--js chips-combobox__combobox">
+        <span class="combobox__control chips-combobox_combobox__control">
+            <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+        <div class="combobox__listbox">
+            <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
+                <div class="combobox__option" role="option">
+                    <span>Soccer</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Hockey</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Tennis</span>
+                </div>
+            </div>
+        </div>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Chips Combobox in Error State </h3>
+    <p>
+        When a user enters text that is considered to be invalid, the Chips Combobox module can enter an error state. Developers can validate the text entry and trigger invalid/valid states as needed.
+    </p>
+    <p>
+        To turn on the error state, add a class of
+        <span class="highlight">
+            chips-combobox--error
+        </span>
+        ${" "}to the outer element of the module. To turn off the error state, remove the class.
+    </p>
+    <p>
+        In addition to the inclusion of the modifier to turn on the error state, there should also be an accompanying error message relevant to the reason for the error. Per${" "}
+        <span class="highlight">
+            a11y
+        </span>
+        ${" "}rules, color alone should not be used to indicate an error. For more information, please see the${" "}
+        <a href="#field-error-state">
+            field error state docs
+        </a>
+        .
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="chips-combobox chips-combobox--error">
+                <ul class="chips-combobox__items" aria-label="Selected sports">
+                    <li>
+                        <span class="chip">
+                            <span
+                                id="chip-interactive-1-1-text"
+                                class="chip__text"
+                            >
+                                Football
+                            </span>
+                            <button
+                                class="chip__button"
+                                type="button"
+                                aria-label="Remove"
+                                aria-describedby="chip-interactive-1-1-text"
+                            >
+                                <svg
+                                    class="icon icon--12"
+                                    width="13"
+                                    height="12"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-12"/>
+                                </svg>
+                            </button>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="chip">
+                            <span
+                                id="chip-interactive-1-2-text"
+                                class="chip__text"
+                            >
+                                Basketball
+                            </span>
+                            <button
+                                class="chip__button"
+                                type="button"
+                                aria-label="Remove"
+                                aria-describedby="chip-interactive-1-2-text"
+                            >
+                                <svg
+                                    class="icon icon--12"
+                                    width="13"
+                                    height="12"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-12"/>
+                                </svg>
+                            </button>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="chip">
+                            <span
+                                id="chip-interactive-1-3-text"
+                                class="chip__text"
+                            >
+                                Baseball
+                            </span>
+                            <button
+                                class="chip__button"
+                                type="button"
+                                aria-label="Remove"
+                                aria-describedby="chip-interactive-1-3-text"
+                            >
+                                <svg
+                                    class="icon icon--12"
+                                    width="13"
+                                    height="12"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-12"/>
+                                </svg>
+                            </button>
+                        </span>
+                    </li>
+                </ul>
+                <span class="combobox combobox--js chips-combobox__combobox">
+                    <span class="combobox__control chips-combobox_combobox__control">
+                        <input
+                            id="chips-combobox-1-input"
+                            role="combobox"
+                            type="text"
+                            placeholder="Add Sport"
+                            aria-haspopup="listbox"
+                            aria-owns="listbox-chips-combobox-1"
+                        >
+                        <svg
+                            class="icon icon--16"
+                            height="16"
+                            width="16"
+                            aria-hidden="true"
+                        >
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                    <div class="combobox__listbox">
+                        <div
+                            id="listbox-chips-combobox-1"
+                            class="combobox__options"
+                            role="listbox"
+                        >
+                            <div class="combobox__option" role="option">
+                                <span>Soccer</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Hockey</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Tennis</span>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<span class="chips-combobox chips-combobox--error">
+    <ul class="chips-combobox__items" aria-label="Selected sports">
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+    </ul>
+    <span class="combobox combobox--js chips-combobox__combobox">
+        <span class="combobox__control chips-combobox_combobox__control">
+            <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+        <div class="combobox__listbox">
+            <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
+                <div class="combobox__option" role="option">
+                    <span>Soccer</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Hockey</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Tennis</span>
+                </div>
+            </div>
+        </div>
+    </span>
+</span>
+    </highlight-code>
+</div>
+export const metadata = {
+    "ds-component": {
+        name: "combobox",
+        version: "1.0.0",
+    },
+    submodules: ["chip", "combobox"],
+};