feat(menu-button): added filter chips menu (#226)

Author: agliga

.changeset/weak-dancers-wish.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(menu-button): added filter chip

packages/skin/dist/menu-button/menu-button.css

@@ -160,6 +160,39 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     opacity: 1;
 }
 
+.menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
+    svg.icon--unchecked,
+.menu-button__item[role="menuitemradio"][aria-checked="true"]
+    svg.icon--unchecked {
+    display: none;
+}
+.menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
+    svg.icon--checked,
+.menu-button__item[role="menuitemradio"][aria-checked="true"]
+    svg.icon--checked {
+    display: block;
+}
+.menu-button__item[role="menuitemcheckbox"] svg.icon--unchecked {
+    color: var(--color-foreground-secondary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu-button__item[role="menuitemcheckbox"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+.menu-button__item[role="menuitemradio"] svg.icon--unchecked {
+    color: var(--color-foreground-primary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu-button__item[role="menuitemradio"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+
 .fake-menu-button__menu a.fake-menu-button__item,
 .fake-menu-button__menu button.fake-menu-button__item {
     background-color: initial;
@@ -289,6 +322,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 .fake-menu-button__button[aria-expanded="true"] ~ .fake-menu-button__menu,
 .menu-button .btn[aria-expanded="true"] ~ .menu-button__menu,
 .menu-button .expand-btn[aria-expanded="true"] ~ .menu-button__menu,
+.menu-button .filter-chip[aria-expanded="true"] ~ .menu-button__menu,
 .menu-button__button[aria-expanded="true"] ~ .menu-button__menu {
     display: block;
 }
@@ -298,6 +332,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 .expand-btn ~ .menu-button__menu--static,
 .expand_btn ~ .fake-menu-button__menu--static,
 .fake-menu-button__button ~ .fake-menu-button__menu--static,
+.filter-chip ~ .fake-menu-button__menu--static,
 .menu-button__button ~ .menu-button__menu--static {
     position: static;
 }
@@ -315,6 +350,22 @@ hr.menu-button__separator {
     border-width: 1px;
     margin: 0;
 }
+
+.menu-button__footer {
+    align-items: center;
+    background-color: var(--color-background-elevated);
+    border: none;
+    border-color: var(--color-stroke-subtle);
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: flex;
+    justify-content: center;
+    padding: var(--spacing-200);
+}
+
+.menu-button--filter div.menu-button__item[role^="menuitem"] {
+    justify-content: flex-start;
+}
 div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }

packages/skin/dist/menu/menu.css

@@ -148,6 +148,35 @@ div.menu__item--badged[role^="menuitem"] span.badge {
     z-index: 1;
 }
 
+.menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--unchecked,
+.menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--unchecked {
+    display: none;
+}
+.menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checked,
+.menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--checked {
+    display: block;
+}
+.menu__item[role="menuitemcheckbox"] svg.icon--unchecked {
+    color: var(--color-foreground-secondary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu__item[role="menuitemcheckbox"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+.menu__item[role="menuitemradio"] svg.icon--unchecked {
+    color: var(--color-foreground-primary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu__item[role="menuitemradio"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+
 .menu__items--scroll[role="menu"] {
     overflow-y: scroll;
 }
@@ -180,6 +209,22 @@ hr.menu__separator {
     border-style: solid;
     border-width: 1px;
 }
+
+.menu__footer {
+    align-items: center;
+    background-color: var(--color-background-elevated);
+    border: none;
+    border-color: var(--color-stroke-subtle);
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: flex;
+    justify-content: center;
+    padding: var(--spacing-200);
+}
+
+.menu--filter div.menu__item[role^="menuitem"] {
+    justify-content: flex-start;
+}
 div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }