feat: introduce style properties for disabled input (#7553)

* git experiment * Remove style from labels, radiobuttons, checkboxes and MSCB chips * revert mistakes * add global defaults
vaadin · Jul 30, 2024 · dc322e1 · dc322e1
1 parent 877d992
commit dc322e1
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/packages/input-container/test/visual/lumo/input-container.test.js b/packages/input-container/test/visual/lumo/input-container.test.js
@@ -33,6 +33,14 @@ describe('input-container', () => {
         await visualDiff(div, `${initialState}-disabled`);
       });
 
+      it('styled disabled', async () => {
+        div.style.setProperty('--vaadin-input-field-disabled-background', 'black');
+        div.style.setProperty('--vaadin-input-field-disabled-value-color', 'white');
+
+        element.disabled = true;
+        await visualDiff(div, `${initialState}-styled-disabled`);
+      });
+
       it('readonly', async () => {
         element.readonly = true;
         await visualDiff(div, `${initialState}-readonly`);

diff --git a/...test/visual/lumo/screenshots/input-container/baseline/empty-styled-disabled.png b/...test/visual/lumo/screenshots/input-container/baseline/empty-styled-disabled.png
diff --git a/.../visual/lumo/screenshots/input-container/baseline/non-empty-styled-disabled.png b/.../visual/lumo/screenshots/input-container/baseline/non-empty-styled-disabled.png
diff --git a/packages/input-container/theme/lumo/vaadin-input-container-styles.js b/packages/input-container/theme/lumo/vaadin-input-container-styles.js
@@ -32,6 +32,8 @@ registerStyles(
       --_icon-size: var(--vaadin-input-field-icon-size, var(--lumo-icon-size-m));
       --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
       --_invalid-hover-highlight: var(--vaadin-input-field-invalid-hover-highlight, var(--lumo-error-color-50pct));
+      --_disabled-background: var(--vaadin-input-field-disabled-background, var(--lumo-contrast-5pct));
+      --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
     }
 
     :host([dir='rtl']) {
@@ -82,12 +84,9 @@ registerStyles(
 
     /* Disabled */
     :host([disabled]) {
-      background-color: var(--lumo-contrast-5pct);
-    }
-
-    :host([disabled]) ::slotted(*) {
-      color: var(--lumo-disabled-text-color);
-      -webkit-text-fill-color: var(--lumo-disabled-text-color);
+      background: var(--_disabled-background);
+      -webkit-text-fill-color: var(--_disabled-value-color);
+      color: var(--_disabled-value-color);
     }
 
     /* Invalid */

diff --git a/packages/vaadin-lumo-styles/style.js b/packages/vaadin-lumo-styles/style.js
@@ -98,6 +98,8 @@ const globals = css`
     --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
     --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
     --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
+    --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
+    --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
     --vaadin-input-field-height: var(--lumo-size-m);
     --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
     --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);