From 4ac80d18c91e37bac1d51d5d42be236b6229e45f Mon Sep 17 00:00:00 2001
From: Arthur Khachatryan <arkhachatryan@ebay.com>
Date: Wed, 13 Nov 2024 13:16:59 -0800
Subject: [PATCH 1/2] feat(filter-menu): added search header

---
 dist/filter-menu/filter-menu.css              |  34 +-
 src/modules/filter-menu.marko                 | 364 ++++++++++++++++++
 src/sass/filter-menu/filter-menu.scss         |  34 +-
 .../stories/filter-menu.stories.js            |  89 +++++
 4 files changed, 519 insertions(+), 2 deletions(-)

diff --git a/dist/filter-menu/filter-menu.css b/dist/filter-menu/filter-menu.css
index 357c5b5f5..d9534c7b9 100644
--- a/dist/filter-menu/filter-menu.css
+++ b/dist/filter-menu/filter-menu.css
@@ -114,6 +114,38 @@ span.filter-menu__item[role^="menuitem"] {
     margin-bottom: 8px;
 }
 
+.filter-menu__header {
+    align-items: center;
+    background-color: var(--color-background-secondary);
+    display: flex;
+    gap: var(--spacing-100);
+    padding: 14px var(--spacing-200);
+}
+
+.filter-menu__header svg {
+    color: var(--color-foreground-secondary);
+}
+
+.filter-menu__header input {
+    background-color: inherit;
+    border: none;
+    color: var(--color-foreground-primary);
+    flex-grow: 1;
+    font-size: var(--font-size-default);
+}
+
+.filter-menu__header button {
+    border: none;
+    min-height: var(--spacing-250);
+    min-width: var(--spacing-250);
+    padding: 0;
+    width: var(--spacing-250);
+}
+
+.filter-menu__header button:focus-visible {
+    outline-style: solid;
+}
+
 button.filter-menu-form__footer[type="submit"],
 button.filter-menu__footer {
     background-color: var(
@@ -176,7 +208,7 @@ button.filter-menu__footer:hover {
 .filter-menu-form__text,
 .filter-menu__text {
     flex-grow: 1;
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }
 
 .filter-menu__item[role="menuitemcheckbox"] svg.icon--checked,
diff --git a/src/modules/filter-menu.marko b/src/modules/filter-menu.marko
index ef400e0a6..451c17c38 100644
--- a/src/modules/filter-menu.marko
+++ b/src/modules/filter-menu.marko
@@ -703,6 +703,370 @@
     </form>
 </div>
     </highlight-code>
+
+    <h3 id="filter-menu-with-footer">
+        Filter Menu with Footer
+    </h3>
+
+    <p>
+        For multiple selection variation, you can also add an "Apply" button as a footer(to "apply" the selection(s)).
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="filter-menu">
+                <div class="filter-menu__items" role="menu">
+                    <div
+                        class="filter-menu__item"
+                        role="menuitemcheckbox"
+                        aria-checked="false"
+                        data-makeup-group="filter"
+                    >
+                        <span class="filter-menu__checkbox">
+                            <svg
+                                class="icon icon--18 icon--unchecked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-unchecked-18"/>
+                            </svg>
+                            <svg
+                                class="icon icon--18 icon--checked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-checked-18"/>
+                            </svg>
+                        </span>
+                        <span class="filter-menu__text">
+                            Item 1
+                        </span>
+                    </div>
+                    <div
+                        class="filter-menu__item"
+                        role="menuitemcheckbox"
+                        aria-checked="false"
+                        data-makeup-group="filter"
+                    >
+                        <span class="filter-menu__checkbox">
+                            <svg
+                                class="icon icon--18 icon--unchecked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-unchecked-18"/>
+                            </svg>
+                            <svg
+                                class="icon icon--18 icon--checked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-checked-18"/>
+                            </svg>
+                        </span>
+                        <span class="filter-menu__text">
+                            Item 2
+                        </span>
+                    </div>
+                    <div
+                        class="filter-menu__item"
+                        role="menuitemcheckbox"
+                        aria-checked="false"
+                        data-makeup-group="filter"
+                    >
+                        <span class="filter-menu__checkbox">
+                            <svg
+                                class="icon icon--18 icon--unchecked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-unchecked-18"/>
+                            </svg>
+                            <svg
+                                class="icon icon--18 icon--checked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-checked-18"/>
+                            </svg>
+                        </span>
+                        <span class="filter-menu__text">
+                            Item 3
+                        </span>
+                    </div>
+                </div>
+                <button type="button" aria-label="Apply selections" class="filter-menu__footer">
+                    Apply
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<span class="filter-menu">
+    <div class="filter-menu__items" role="menu">
+        <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 1</span>
+        </div>
+        <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 2</span>
+        </div>
+        <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 3</span>
+        </div>
+    </div>
+    <button type="button" aria-label="Apply selections" class="filter-menu__footer">
+        Apply
+    </button>
+</span>
+    </highlight-code>
+
+    <h3 id="filter-menu-with-header">
+        Filter Menu with Header and Footer
+    </h3>
+
+    <p>
+        For multiple selection variation, you can also add a header to search the options.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="filter-menu">
+                <div class="filter-menu__header">
+                    <svg aria-hidden="true" class="icon icon--16" height="24" width="24">
+                        <use href="#icon-search-16"></use>
+                    </svg>
+                    <input
+                        type="text"
+                        class="filter-menu__search"
+                        placeholder="Search"
+                        aria-owns="filter-menu-search-items-1"
+                    />
+                    <button type="button" class="btn" aria-label="Clear search">
+                        <svg aria-hidden="true" class="icon icon--20" height="28" width="28">
+                            <use href="#icon-clear-20"></use>
+                        </svg>
+                    </button>
+                </div>
+                <div class="filter-menu__items" role="menu" id="filter-menu-search-items-1">
+                    <div
+                        class="filter-menu__item"
+                        role="menuitemcheckbox"
+                        aria-checked="false"
+                        data-makeup-group="filter"
+                    >
+                        <span class="filter-menu__checkbox">
+                            <svg
+                                class="icon icon--18 icon--unchecked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-unchecked-18"/>
+                            </svg>
+                            <svg
+                                class="icon icon--18 icon--checked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-checked-18"/>
+                            </svg>
+                        </span>
+                        <span class="filter-menu__text">
+                            Item 1
+                        </span>
+                    </div>
+                    <div
+                        class="filter-menu__item"
+                        role="menuitemcheckbox"
+                        aria-checked="false"
+                        data-makeup-group="filter"
+                    >
+                        <span class="filter-menu__checkbox">
+                            <svg
+                                class="icon icon--18 icon--unchecked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-unchecked-18"/>
+                            </svg>
+                            <svg
+                                class="icon icon--18 icon--checked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-checked-18"/>
+                            </svg>
+                        </span>
+                        <span class="filter-menu__text">
+                            Item 2
+                        </span>
+                    </div>
+                    <div
+                        class="filter-menu__item"
+                        role="menuitemcheckbox"
+                        aria-checked="false"
+                        data-makeup-group="filter"
+                    >
+                        <span class="filter-menu__checkbox">
+                            <svg
+                                class="icon icon--18 icon--unchecked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-unchecked-18"/>
+                            </svg>
+                            <svg
+                                class="icon icon--18 icon--checked"
+                                height="18"
+                                width="18"
+                            >
+                                <icon-symbol name="checkbox-checked-18"/>
+                            </svg>
+                        </span>
+                        <span class="filter-menu__text">
+                            Item 3
+                        </span>
+                    </div>
+                </div>
+                <button type="button" aria-label="Apply selections" class="filter-menu__footer">
+                    Apply
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<div class="filter-menu">
+    <div class="filter-menu__header">
+        <svg aria-hidden="true" class="icon icon--16" height="24" width="24">
+            <use href="#icon-search-16"></use>
+        </svg>
+        <input
+            type="text"
+            class="filter-menu__search"
+            placeholder="Search"
+            aria-owns="filter-menu-search-items-1"
+        />
+        <button type="button" class="btn" aria-label="Clear search">
+            <svg aria-hidden="true" class="icon icon--20" height="28" width="28">
+                <use href="#icon-clear-20"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="filter-menu__items" role="menu" id="filter-menu-search-items-1">
+        <div
+            class="filter-menu__item"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            data-makeup-group="filter"
+        >
+            <span class="filter-menu__checkbox">
+                <svg
+                    class="icon icon--18 icon--unchecked"
+                    height="18"
+                    width="18"
+                >
+                    <icon-symbol name="checkbox-unchecked-18"/>
+                </svg>
+                <svg
+                    class="icon icon--18 icon--checked"
+                    height="18"
+                    width="18"
+                >
+                    <icon-symbol name="checkbox-checked-18"/>
+                </svg>
+            </span>
+            <span class="filter-menu__text">
+                Item 1
+            </span>
+        </div>
+        <div
+            class="filter-menu__item"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            data-makeup-group="filter"
+        >
+            <span class="filter-menu__checkbox">
+                <svg
+                    class="icon icon--18 icon--unchecked"
+                    height="18"
+                    width="18"
+                >
+                    <icon-symbol name="checkbox-unchecked-18"/>
+                </svg>
+                <svg
+                    class="icon icon--18 icon--checked"
+                    height="18"
+                    width="18"
+                >
+                    <icon-symbol name="checkbox-checked-18"/>
+                </svg>
+            </span>
+            <span class="filter-menu__text">
+                Item 2
+            </span>
+        </div>
+        <div
+            class="filter-menu__item"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            data-makeup-group="filter"
+        >
+            <span class="filter-menu__checkbox">
+                <svg
+                    class="icon icon--18 icon--unchecked"
+                    height="18"
+                    width="18"
+                >
+                    <icon-symbol name="checkbox-unchecked-18"/>
+                </svg>
+                <svg
+                    class="icon icon--18 icon--checked"
+                    height="18"
+                    width="18"
+                >
+                    <icon-symbol name="checkbox-checked-18"/>
+                </svg>
+            </span>
+            <span class="filter-menu__text">
+                Item 3
+            </span>
+        </div>
+    </div>
+    <button type="button" aria-label="Apply selections" class="filter-menu__footer">
+        Apply
+    </button>
+</div>
+    </highlight-code>
+
 </div>
 export const metadata = {
     "ds-component": {
diff --git a/src/sass/filter-menu/filter-menu.scss b/src/sass/filter-menu/filter-menu.scss
index 0bc616251..167fadb9e 100644
--- a/src/sass/filter-menu/filter-menu.scss
+++ b/src/sass/filter-menu/filter-menu.scss
@@ -79,6 +79,38 @@ span.filter-menu-form__item {
     }
 }
 
+.filter-menu__header {
+    align-items: center;
+    background-color: var(--color-background-secondary);
+    display: flex;
+    gap: var(--spacing-100);
+    padding: 14px var(--spacing-200);
+}
+
+.filter-menu__header svg {
+    color: var(--color-foreground-secondary);
+}
+
+.filter-menu__header input {
+    background-color: inherit;
+    border: none;
+    color: var(--color-foreground-primary);
+    flex-grow: 1;
+    font-size: var(--font-size-default);
+}
+
+.filter-menu__header button {
+    border: none;
+    min-height: var(--spacing-250);
+    min-width: var(--spacing-250);
+    padding: 0;
+    width: var(--spacing-250);
+}
+
+.filter-menu__header button:focus-visible {
+    outline-style: solid;
+}
+
 button.filter-menu__footer,
 button.filter-menu-form__footer[type="submit"] {
     @include filter-menu-item-base();
@@ -98,7 +130,7 @@ button.filter-menu-form__footer[type="submit"] {
 .filter-menu__text,
 .filter-menu-form__text {
     flex-grow: 1;
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }
 
 .filter-menu__item[role="menuitemradio"] svg.icon--checked,
diff --git a/src/sass/filter-menu/stories/filter-menu.stories.js b/src/sass/filter-menu/stories/filter-menu.stories.js
index e8c1b4312..5b5acc79a 100644
--- a/src/sass/filter-menu/stories/filter-menu.stories.js
+++ b/src/sass/filter-menu/stories/filter-menu.stories.js
@@ -121,8 +121,81 @@ export const withFooterButton = () => `
 </span>
 `;
 
+export const withHeaderSearch = () => `
+<span class="filter-menu">
+    <div class="filter-menu__header">
+        <svg aria-hidden="true" class="icon icon--16" height="24" width="24">
+            <use href="#icon-search-16"></use>
+        </svg>
+        <input
+            type="text"
+            class="filter-menu__search"
+            placeholder="Search"
+            aria-owns="filter-menu-search-items-1"
+        />
+        <button type="button" class="btn" aria-label="Clear search">
+            <svg aria-hidden="true" class="icon icon--20" height="28" width="28">
+                <use href="#icon-clear-20"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="filter-menu__items" role="menu">
+        <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
+        </div>
+        <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 2</span>
+        </div>
+        <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 3</span>
+        </div>
+    </div>
+    <button type="button" class="filter-menu__footer">Apply</button>
+</span>
+`;
+
 export const textSpacing = () => `
 <span class="filter-menu demo-a11y-text-spacing">
+    <div class="filter-menu__header">
+        <svg aria-hidden="true" class="icon icon--16" height="24" width="24">
+            <use href="#icon-search-16"></use>
+        </svg>
+        <input
+            type="text"
+            class="filter-menu__search"
+            placeholder="Search"
+            aria-owns="filter-menu-search-items-1"
+        />
+        <button type="button" class="btn" aria-label="Clear search">
+            <svg aria-hidden="true" class="icon icon--20" height="28" width="28">
+                <use href="#icon-clear-20"></use>
+            </svg>
+        </button>
+    </div>
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
             <span class="filter-menu__checkbox">
@@ -218,6 +291,22 @@ export const RTL = () => `
 <div dir="rtl">
     <span class="filter-menu-form">
         <form name="filter-menu-form-1">
+            <div class="filter-menu__header">
+                <svg aria-hidden="true" class="icon icon--16" height="24" width="24">
+                    <use href="#icon-search-16"></use>
+                </svg>
+                <input
+                    type="text"
+                    class="filter-menu__search"
+                    placeholder="Search"
+                    aria-owns="filter-menu-search-items-1"
+                />
+                <button type="button" class="btn" aria-label="Clear search">
+                    <svg aria-hidden="true" class="icon icon--20" height="28" width="28">
+                        <use href="#icon-clear-20"></use>
+                    </svg>
+                </button>
+            </div>
             <div class="filter-menu-form__items">
                 <label for="filter-menu-form-checkbox-item-1" class="filter-menu-form__item">
                     <span class="checkbox">

From c13c516c83325c54c6e56ce85a133153f9029354 Mon Sep 17 00:00:00 2001
From: Arthur Khachatryan <arkhachatryan@ebay.com>
Date: Wed, 13 Nov 2024 13:24:32 -0800
Subject: [PATCH 2/2] Create big-plums-applaud.md

---
 .changeset/big-plums-applaud.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/big-plums-applaud.md

diff --git a/.changeset/big-plums-applaud.md b/.changeset/big-plums-applaud.md
new file mode 100644
index 000000000..7f2509cda
--- /dev/null
+++ b/.changeset/big-plums-applaud.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(filter-menu): added search header