dbeaver/pro#7567 [CB] [F] invalid style for dropdown button (#3932)

* dbeaver/pro#7567 fix: update disabled state styles for select and combobox components

* dbeaver/pro#7567 fix: update foreground variable for disclosure component

webapp/common-react/@dbeaver/ui-kit/src/Select/SelectField.css

@@ -27,5 +27,6 @@
 
   .dbv-kit-select[aria-disabled='true'] .dbv-kit-select__arrow-icon {
     color: var(--dbv-kit-select-disabled-foreground);
+    opacity: var(--dbv-kit-select-disabled-arrow-icon-opacity);
   }
 }

webapp/common-react/@dbeaver/ui-kit/src/Select/_base.css

@@ -31,5 +31,7 @@
     --dbv-kit-select-item-hover-background: var(--tw-color-gray-200);
     --dbv-kit-select-item-hover-foreground: var(--dbv-kit-select-foreground);
     --dbv-kit-select-item-selected-background: var(--dbv-kit-color-primary-100);
+
+    --dbv-kit-select-disabled-arrow-icon-opacity: 0.5;
   }
 }

webapp/packages/core-blocks/src/Expand/Expandable.css

@@ -1,5 +1,6 @@
 @layer components {
   .dbv-kit-disclosure__disclosure {
+    --dbv-kit-disclosure-foreground: var(--theme-text-on-surface);
     outline-offset: var(--dbv-kit-disclosure-outline-offset) !important;
 
     &[aria-expanded='true'] .disclosure-icon {

webapp/packages/core-blocks/src/FormControls/Combobox.css

@@ -31,3 +31,23 @@
     line-height: 1.25;
   }
 }
+
+@layer base.components {
+  .cb-combobox__disclosure-icon {
+    position: absolute;
+    right: calc(var(--tw-spacing) * 2);
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: var(--tw-text-sm);
+    line-height: var(--tw-leading, var(--tw-text-sm--line-height));
+    cursor: pointer;
+
+    & > svg {
+      fill: none !important;
+    }
+
+    &[aria-disabled='true'] {
+      color: var(--theme-input-color-disabled);
+    }
+  }
+}

webapp/packages/core-blocks/src/FormControls/Combobox.tsx

@@ -229,12 +229,7 @@ export const Combobox: ComboboxType = observer(function Combobox({
                   onClick={() => handleSelect(null)}
                 />
               )}
-              {displayPopover && (
-                <ComboboxDisclosure
-                  disabled={disabled || loading || readOnly}
-                  className="tw:absolute tw:right-2 tw:top-[50%] tw:-translate-y-1/2 tw:[&>svg]:fill-none! tw:text-sm! tw:cursor-pointer"
-                />
-              )}
+              {displayPopover && <ComboboxDisclosure disabled={disabled || loading || readOnly} className="cb-combobox__disclosure-icon" />}
             </>
           )}
           {icon && <div className="tw:absolute tw:left-3 tw:w-4 tw:h-4">{typeof icon === 'string' ? <IconOrImage icon={icon} /> : icon}</div>}

webapp/packages/core-blocks/src/FormControls/Select.css

@@ -38,6 +38,10 @@
     --dbv-kit-control-outline-offset: -2px;
   }
 
+  .dbv-kit-select__arrow-icon {
+    --dbv-kit-select-disabled-foreground: var(--theme-input-color-disabled);
+  }
+
   .dbv-kit-select {
     padding-left: 12px;
     padding-right: 6px;