chore: unify disabled & read-only styling (#974)

* add placeholder %is-disabled & replace :disabled and :read-only styles with %is-disabled * fixes to replace pointer-events:none * fix menuItem background when disabled
Jahia · Mar 3, 2025 · 4afe6c6 · 4afe6c6
1 parent 19c34b6
commit 4afe6c6
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 58 deletions.
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
@@ -22,13 +22,7 @@
 
 .moonstone-disabled {
     & > .moonstone-treeView_item {
-        @include is-disabled;
-
-        pointer-events: none;
-
-        &:hover {
-            pointer-events: none;
-        }
+        @extend %is-disabled;
     }
 }
 
@@ -42,13 +36,7 @@
     cursor: pointer;
 
     &.moonstone-disabled {
-        @include is-disabled;
-
-        pointer-events: none;
-
-        &:hover {
-            pointer-events: none;
-        }
+        @extend %is-disabled;
     }
 
     // ---
@@ -63,6 +51,15 @@
         border: var(--border-selector_active);
     }
 
+    &:focus-visible {
+        border: var(--border-selector_focus);
+        outline: none;
+    }
+
+    &:hover:not(.moonstone-disabled) {
+        color: var(--color-accent);
+    }
+
     &:not(.moonstone-filled) .moonstone-dropdown_label {
         font-style: italic;
         color: var(--color-gray_dark60);
@@ -78,7 +75,7 @@
     border: var(--border-selector);
     background-color: var(--background-selector);
 
-    &:hover {
+    &:hover:not(.moonstone-disabled) {
         border: var(--border-selector_hover);
     }
 

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -171,7 +171,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             className={clsx('moonstone-dropdown_container', className)}
             {...props}
             onKeyPress={e => {
-                if (e.key === 'Enter') {
+                if (e.key === 'Enter' && !isDisabled) {
                     handleOpenMenu(e);
                 }
             }}
@@ -181,7 +181,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
                 role="dropdown"
                 className={clsx(cssDropdown)}
                 tabIndex={0}
-                onClick={handleOpenMenu}
+                onClick={!isDisabled && handleOpenMenu}
                 onKeyPress={(e: React.KeyboardEvent) => {
                     if (e.key === 'Enter') {
                         handleSelect(e);

diff --git a/src/components/Input/BaseInput/BaseInput.scss b/src/components/Input/BaseInput/BaseInput.scss
@@ -19,18 +19,9 @@ $min-width: 40px;
 
     cursor: text;
 
-    &:not(:has(input:disabled), :has(input:read-only)) {
-        &:has(input:hover) {
-            border: var(--border-selector_hover);
-        }
-
-        &:has(input:focus) {
-            border: var(--border-selector_focus);
-        }
-    }
-
-    &:has(input:disabled) {
-        background-color: var(--color-gray_light40);
+    &:has(input:disabled),
+    &:has(input:read-only) {
+        @extend %is-disabled;
     }
 
     &.moonstone-big {
@@ -80,6 +71,8 @@ $min-width: 40px;
     height: calc($default-size - 2px);
     margin: 0; // Reset for Safari
 
+    color: inherit;
+
     border: 0;
     background: none;
 
@@ -112,23 +105,6 @@ $min-width: 40px;
         }
     }
 
-    &:read-only {
-        border: none;
-    }
-
-    &:disabled {
-        color: var(--color-gray);
-
-        border: none;
-
-        cursor: default;
-        opacity: 1; // Reset iOS opacity
-
-        ~ .moonstone-baseInput_icon {
-            color: var(--color-gray);
-        }
-    }
-
     // Check if the input is empty
     &:placeholder-shown {
         ~ .moonstone-baseInput_icon {

diff --git a/src/components/Menu/MenuItem.scss b/src/components/Menu/MenuItem.scss
@@ -46,7 +46,7 @@
 
     &.moonstone-disabled,
     &.moonstone-disabled:hover {
-        @include is-disabled;
+        @extend %is-disabled;
 
         background: none;
     }

diff --git a/src/components/Textarea/ControlledTextarea.tsx b/src/components/Textarea/ControlledTextarea.tsx
@@ -25,9 +25,9 @@ export const ControlledTextarea = React.forwardRef<HTMLTextAreaElement, Controll
             placeholder={placeholder}
             disabled={isDisabled}
             readOnly={isReadOnly}
-            onChange={onChange}
-            onBlur={onBlur}
-            onFocus={onFocus}
+            onChange={(!isDisabled || !isReadOnly) && onChange}
+            onBlur={(!isDisabled || !isReadOnly) && onBlur}
+            onFocus={(!isDisabled || !isReadOnly) && onFocus}
             {...props}
         />
     );

diff --git a/src/components/Textarea/Textarea.scss b/src/components/Textarea/Textarea.scss
@@ -43,11 +43,8 @@ $minHeight-size: 50px;
         }
     }
 
-    &:disabled {
-        color: var(--color-gray);
-
-        background-color: var(--color-gray_light40);
-        cursor: default;
-        opacity: 1; // Reset iOS opacity
+    &:disabled,
+    &:read-only {
+        @extend %is-disabled;
     }
 }
diff --git a/src/utils/_mixins.scss b/src/utils/_mixins.scss
@@ -11,8 +11,11 @@
     text-overflow: ellipsis;
 }
 
-@mixin is-disabled() {
-    color: var(--color-gray40);
+%is-disabled {
+    color: var(--color-gray);
+
+    background-color: var(--color-gray_light40);
 
     cursor: not-allowed;
+    opacity: 0.6;
 }