feat: add field-button part to all field buttons (#10168)

Author: web-padawan

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

@@ -11,7 +11,7 @@ export const comboBoxStyles = css`
     pointer-events: auto;
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-chevron-down);
   }
 `;

packages/combo-box/src/vaadin-combo-box.d.ts

@@ -181,6 +181,7 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
  * ---------------------|----------------
  * `label`              | The label element
  * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
  * `clear-button`       | The clear button
  * `error-message`      | The error message element
  * `helper-text`        | The helper text element wrapper

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

@@ -113,6 +113,7 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
  * ---------------------|----------------
  * `label`              | The label element
  * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
  * `clear-button`       | The clear button
  * `error-message`      | The error message element
  * `helper-text`        | The helper text element wrapper
@@ -217,8 +218,8 @@ class ComboBox extends ComboBoxDataProviderMixin(
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
+          <div id="clearButton" part="field-button clear-button" slot="suffix" aria-hidden="true"></div>
+          <div id="toggleButton" part="field-button toggle-button" slot="suffix" aria-hidden="true"></div>
         </vaadin-input-container>
 
         <div part="helper-text">

packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js

@@ -520,14 +520,14 @@ snapshots["vaadin-combo-box shadow default"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
       id="toggleButton"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>
@@ -580,14 +580,14 @@ snapshots["vaadin-combo-box shadow disabled"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
       id="toggleButton"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>
@@ -640,14 +640,14 @@ snapshots["vaadin-combo-box shadow readonly"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
       id="toggleButton"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>
@@ -700,14 +700,14 @@ snapshots["vaadin-combo-box shadow invalid"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
       id="toggleButton"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>
@@ -760,14 +760,14 @@ snapshots["vaadin-combo-box shadow theme"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
       id="toggleButton"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>

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

@@ -24,7 +24,7 @@ export const datePickerStyles = css`
     text-align: left;
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-calendar);
   }
 `;

packages/date-picker/src/vaadin-date-picker.d.ts

@@ -84,6 +84,7 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * ---------------------|----------------
  * `label`              | The label element
  * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
  * `clear-button`       | The clear button
  * `error-message`      | The error message element
  * `helper-text`        | The helper text element wrapper

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

@@ -48,6 +48,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * ---------------------|----------------
  * `label`              | The label element
  * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
  * `clear-button`       | The clear button
  * `error-message`      | The error message element
  * `helper-text`        | The helper text element wrapper
@@ -204,8 +205,8 @@ class DatePicker extends DatePickerMixin(
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-          <div part="toggle-button" slot="suffix" aria-hidden="true" @click="${this._toggle}"></div>
+          <div id="clearButton" part="field-button clear-button" slot="suffix" aria-hidden="true"></div>
+          <div part="field-button toggle-button" slot="suffix" aria-hidden="true" @click="${this._toggle}"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -272,7 +273,7 @@ class DatePicker extends DatePickerMixin(
 
     this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
 
-    const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
+    const toggleButton = this.shadowRoot.querySelector('[part="field-button toggle-button"]');
     toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
   }
 

packages/date-picker/test/basic.test.js

@@ -270,7 +270,7 @@ describe('clear button', () => {
   beforeEach(async () => {
     datePicker = fixtureSync('<vaadin-date-picker clear-button-visible></vaadin-date-picker>');
     await nextRender();
-    clearButton = datePicker.shadowRoot.querySelector('[part="clear-button"]');
+    clearButton = datePicker.shadowRoot.querySelector('[part~="clear-button"]');
   });
 
   it('should have clearButtonVisible property', () => {
@@ -385,7 +385,7 @@ describe('auto open disabled', () => {
     datePicker = fixtureSync('<vaadin-date-picker value="2000-01-01"></vaadin-date-picker>');
     await nextRender();
     input = datePicker.inputElement;
-    toggleButton = datePicker.shadowRoot.querySelector('[part="toggle-button"]');
+    toggleButton = datePicker.shadowRoot.querySelector('[part~="toggle-button"]');
     datePicker.autoOpenDisabled = true;
   });
 

packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js

@@ -548,13 +548,13 @@ snapshots["vaadin-date-picker shadow default"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>
@@ -608,13 +608,13 @@ snapshots["vaadin-date-picker shadow disabled"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>
@@ -668,13 +668,13 @@ snapshots["vaadin-date-picker shadow readonly"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>
@@ -728,13 +728,13 @@ snapshots["vaadin-date-picker shadow invalid"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>
@@ -788,13 +788,13 @@ snapshots["vaadin-date-picker shadow theme"] =
     <div
       aria-hidden="true"
       id="clearButton"
-      part="clear-button"
+      part="field-button clear-button"
       slot="suffix"
     >
     </div>
     <div
       aria-hidden="true"
-      part="toggle-button"
+      part="field-button toggle-button"
       slot="suffix"
     >
     </div>

packages/date-picker/test/dropdown.test.js

@@ -60,7 +60,7 @@ describe('dropdown', () => {
     let toggleButton;
 
     beforeEach(() => {
-      toggleButton = datePicker.shadowRoot.querySelector('[part="toggle-button"]');
+      toggleButton = datePicker.shadowRoot.querySelector('[part~="toggle-button"]');
     });
 
     it('should open by tapping the calendar icon', async () => {