refactor: hide toggle button for readonly fields in base styles (#10432)

Author: web-padawan

packages/combo-box/src/styles/vaadin-combo-box-base-styles.js

@@ -14,4 +14,8 @@ export const comboBoxStyles = css`
   [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-chevron-down);
   }
+
+  :host([readonly]) [part~='toggle-button'] {
+    display: none;
+  }
 `;

packages/combo-box/test/visual/base/screenshots/combo-box/baseline/state-readonly.png

@@ -27,4 +27,8 @@ export const datePickerStyles = css`
   [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-calendar);
   }
+
+  :host([readonly]) [part~='toggle-button'] {
+    display: none;
+  }
 `;

packages/date-picker/src/styles/vaadin-date-picker-base-styles.js

@@ -43,6 +43,11 @@ export const multiSelectComboBoxStyles = [
       padding: 0;
     }
 
+    :host([readonly]:not([disabled])) [part~='toggle-button'] {
+      display: block;
+      color: var(--vaadin-input-field-button-text-color, var(--vaadin-text-color-secondary));
+    }
+
     :host([readonly]:not([disabled])) [part$='button'] {
       cursor: var(--vaadin-clickable-cursor);
     }

packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-readonly.png

@@ -35,4 +35,8 @@ export const selectStyles = css`
   [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-chevron-down);
   }
+
+  :host([readonly]) [part~='toggle-button'] {
+    display: none;
+  }
 `;