feat(filter-menu): added search header (#2496)

eBay · Nov 14, 2024 · 66e73f8 · 66e73f8
1 parent fef21d3
commit 66e73f8
Show file tree

Hide file tree

Showing 5 changed files with 524 additions and 2 deletions.
diff --git a/.changeset/big-plums-applaud.md b/.changeset/big-plums-applaud.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(filter-menu): added search header
diff --git 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,