feat: add styling for disabled options

bpmn-io · Aug 12, 2024 · 4382fce · 4382fce
1 parent 0c33ad0
commit 4382fce
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/assets/properties-panel.css b/src/assets/properties-panel.css
@@ -517,6 +517,14 @@ textarea.bio-properties-panel-input {
   --input-border-color: var(--input-focus-border-color);
 }
 
+.bio-properties-panel-select-option-disabled {
+  color: var(--input-disabled-color);
+
+  option {
+    color: var(--text-base-color);
+  }
+}
+
 .bio-properties-panel-input:disabled {
   border-color: var(--input-disabled-border-color);
   background-color: var(--input-disabled-background-color);

diff --git a/src/components/entries/Select.js b/src/components/entries/Select.js
@@ -67,6 +67,8 @@ function Select(props) {
     setLocalValue(value);
   }, [ value ]);
 
+  const selectedOptionDisabled = options.find(option => option.value === value && option.disabled);
+
   return (
     <div class="bio-properties-panel-select">
       <label for={ prefixId(id) } class="bio-properties-panel-label">
@@ -78,7 +80,7 @@ function Select(props) {
         ref={ ref }
         id={ prefixId(id) }
         name={ id }
-        class="bio-properties-panel-input"
+        class={ classNames('bio-properties-panel-input', { 'bio-properties-panel-select-option-disabled': selectedOptionDisabled }) }
         onInput={ handleChange }
         onFocus={ onFocus }
         onBlur={ onBlur }
@@ -94,6 +96,7 @@ function Select(props) {
                     key={ idx }
                     value={ child.value }
                     disabled={ child.disabled }
+                    hidden={ child.hidden }
                   >
                     {child.label}
                   </option>
@@ -103,7 +106,7 @@ function Select(props) {
           }
 
           return (
-            <option key={ idx } value={ option.value } disabled={ option.disabled }>
+            <option key={ idx } value={ option.value } disabled={ option.disabled } hidden={ option.hidden }>
               {option.label}
             </option>
           );