feat: sync styling with menus and listboxes

cordeliadillon · Oct 5, 2022 · 0ac6562 · 0ac6562
1 parent 3084703
commit 0ac6562
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 0 deletions.
diff --git a/dist/combobox/combobox.css b/dist/combobox/combobox.css
@@ -77,6 +77,12 @@ span.combobox {
 .combobox__option[role^="option"]:active {
   font-weight: bold;
 }
+.combobox__option[role^="option"]:disabled,
+.combobox__option[role^="option"][aria-disabled="true"] {
+  color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
+}
 .combobox__option[role^="option"]:first-child {
   border-top-left-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));
   border-top-right-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));

diff --git a/dist/listbox-button/listbox-button.css b/dist/listbox-button/listbox-button.css
@@ -103,6 +103,12 @@ div.listbox-button__option[role="option"]:hover {
 div.listbox-button__option[role="option"]:active {
   font-weight: bold;
 }
+div.listbox-button__option[role="option"]:disabled,
+div.listbox-button__option[role="option"][aria-disabled="true"] {
+  color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
+}
 div.listbox-button__option[role="option"]:first-child {
   border-top-left-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
   border-top-right-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));

diff --git a/dist/listbox/listbox.css b/dist/listbox/listbox.css
@@ -47,6 +47,12 @@ div.listbox__option[role="option"]:hover {
 div.listbox__option[role="option"]:active {
   font-weight: bold;
 }
+div.listbox__option[role="option"]:disabled,
+div.listbox__option[role="option"][aria-disabled="true"] {
+  color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
+}
 span.listbox__value {
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/dist/menu/menu.css b/dist/menu/menu.css
@@ -88,6 +88,8 @@ a.fake-menu__item:not([href]),
 button.fake-menu__item[disabled],
 div.menu__item[role^="menuitem"][aria-disabled="true"] {
   color: var(--menu-menuitem-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
 }
 div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-small {
   opacity: 1;

diff --git a/src/less/menu/menu.less b/src/less/menu/menu.less
@@ -66,6 +66,8 @@ a.fake-menu__item:not([href]),
 button.fake-menu__item[disabled],
 div.menu__item[role^="menuitem"][aria-disabled="true"] {
     .color-token(menu-menuitem-disabled-foreground-color, color-foreground-disabled);
+    background-color: unset;
+    font-weight: unset;
 }
 
 div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-small {

diff --git a/src/less/mixins/private/listbox-mixins.less b/src/less/mixins/private/listbox-mixins.less
@@ -17,6 +17,13 @@
     &:active {
         font-weight: bold;
     }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+        .color-token(listbox-option-disabled-foreground-color, color-foreground-disabled);
+        background-color: unset;
+        font-weight: unset;
+    }
 }
 
 .listbox-option-status() {