fix: improve readonly invalid input container styles (#7204)

vaadin · Mar 14, 2024 · 1875686 · 1875686
1 parent d0f0c6e
commit 1875686
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/packages/input-container/test/visual/lumo/input-container.test.js b/packages/input-container/test/visual/lumo/input-container.test.js
@@ -35,6 +35,12 @@ describe('input-container', () => {
     await visualDiff(div, 'invalid');
   });
 
+  it('readonly invalid', async () => {
+    element.readonly = true;
+    element.invalid = true;
+    await visualDiff(div, 'readonly-invalid');
+  });
+
   it('prefix icon', async () => {
     const icon = document.createElement('vaadin-icon');
     icon.setAttribute('slot', 'prefix');

diff --git a/...iner/test/visual/lumo/screenshots/input-container/baseline/readonly-invalid.png b/...iner/test/visual/lumo/screenshots/input-container/baseline/readonly-invalid.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
@@ -93,7 +93,7 @@ registerStyles(
       background: var(--_invalid-background);
     }
 
-    :host([invalid])::after {
+    :host([invalid]:not([readonly]))::after {
       background: var(--_invalid-hover-highlight);
     }