feat: allow filter menu items to be disabled

cordeliadillon · Oct 5, 2022 · 08a1cf0 · 08a1cf0
1 parent 0f3d1b2
commit 08a1cf0
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 0 deletions.
diff --git a/dist/filter-menu-button/filter-menu-button.css b/dist/filter-menu-button/filter-menu-button.css
@@ -167,6 +167,15 @@ span.filter-menu-button__radio svg.icon--radio-checked {
 .filter-menu-button__item:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
+.filter-menu-button__item[class$="--disabled"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu-button__item[class$="--disabled"] svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu-button__item[class$="--disabled"]:hover {
+  background-color: inherit;
+}
 .filter-menu-button__item:hover {
   background-color: var(--color-state-primary-hover);
 }
@@ -215,6 +224,15 @@ button.filter-menu-button__footer {
 button.filter-menu-button__footer:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
+button.filter-menu-button__footer[class$="--disabled"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu-button__footer[class$="--disabled"] svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu-button__footer[class$="--disabled"]:hover {
+  background-color: inherit;
+}
 button.filter-menu-button__footer:focus,
 button.filter-menu-button__footer:hover {
   background-color: var(--color-state-primary-hover);

diff --git a/dist/filter-menu/filter-menu.css b/dist/filter-menu/filter-menu.css
@@ -97,6 +97,21 @@ span.filter-menu-form__item {
 .filter-menu-form__item:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
+.filter-menu__item[role="menuitemcheckbox"][class$="--disabled"],
+.filter-menu__item[role="menuitemradio"][class$="--disabled"],
+.filter-menu-form__item[class$="--disabled"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu__item[role="menuitemcheckbox"][class$="--disabled"] svg,
+.filter-menu__item[role="menuitemradio"][class$="--disabled"] svg,
+.filter-menu-form__item[class$="--disabled"] svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu__item[role="menuitemcheckbox"][class$="--disabled"]:hover,
+.filter-menu__item[role="menuitemradio"][class$="--disabled"]:hover,
+.filter-menu-form__item[class$="--disabled"]:hover {
+  background-color: inherit;
+}
 .filter-menu__item[role="menuitemcheckbox"]:last-child,
 .filter-menu__item[role="menuitemradio"]:last-child,
 .filter-menu-form__item:last-child {
@@ -124,6 +139,18 @@ button.filter-menu__footer:hover,
 button.filter-menu-form__footer[type="submit"]:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
+button.filter-menu__footer[class$="--disabled"],
+button.filter-menu-form__footer[type="submit"][class$="--disabled"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu__footer[class$="--disabled"] svg,
+button.filter-menu-form__footer[type="submit"][class$="--disabled"] svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu__footer[class$="--disabled"]:hover,
+button.filter-menu-form__footer[type="submit"][class$="--disabled"]:hover {
+  background-color: inherit;
+}
 button.filter-menu__footer:hover,
 button.filter-menu-form__footer[type="submit"]:hover {
   background-color: var(--color-state-primary-hover);

diff --git a/src/less/mixins/private/filter-menu-mixins.less b/src/less/mixins/private/filter-menu-mixins.less
@@ -12,4 +12,15 @@
     &:hover {
         background-color: var(--color-state-primary-hover, color-state-primary-hover);
     }
+
+    &[class$="--disabled"] {
+        .color-token(filter-menu-item-foreground-color-disabled, color-foreground-disabled);
+        svg {
+            .color-token(filter-menu-item-icon-color-disabled, color-foreground-disabled);
+        }
+
+        &:hover {
+            background-color: inherit;
+        }
+    }
 }