fix: readonly select value should use secondary text color (#3606)

vaadin · Mar 28, 2022 · 1d73239 · 1d73239
1 parent dd30f82
commit 1d73239
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 0 deletions.
diff --git a/packages/select/test/visual/lumo/screenshots/select/baseline/readonly.png b/packages/select/test/visual/lumo/screenshots/select/baseline/readonly.png
diff --git a/packages/select/test/visual/lumo/select.test.js b/packages/select/test/visual/lumo/select.test.js
@@ -42,6 +42,7 @@ describe('select', () => {
   });
 
   it('readonly', async () => {
+    element.value = 'item 1';
     element.readonly = true;
     await visualDiff(div, 'readonly');
   });

diff --git a/packages/select/theme/lumo/vaadin-select-styles.js b/packages/select/theme/lumo/vaadin-select-styles.js
@@ -27,6 +27,10 @@ const select = css`
     color: var(--lumo-body-text-color);
   }
 
+  :host([readonly]) [part='input-field'] ::slotted([slot='value']:not([placeholder])) {
+    color: var(--lumo-secondary-text-color);
+  }
+
   /* placeholder styles */
   [part='input-field'] ::slotted([slot='value'][placeholder]) {
     color: inherit;