feat: add input-fields stylable part to date-time-picker (#10441)

web-padawan · web-flow · commit 5550c66faa10 · 2025-11-05T12:16:17.000+02:00
diff --git a/packages/date-time-picker/src/styles/vaadin-date-time-picker-base-styles.js b/packages/date-time-picker/src/styles/vaadin-date-time-picker-base-styles.js
@@ -11,17 +11,17 @@ export const dateTimePickerStyles = css`
     width: calc(var(--vaadin-field-default-width, 12em) * 2 + var(--vaadin-date-time-picker-gap, var(--vaadin-gap-s)));
   }
 
-  .slots {
+  [part='input-fields'] {
     display: flex;
     gap: var(--vaadin-date-time-picker-gap, var(--vaadin-gap-s));
   }
 
-  .slots ::slotted([slot='date-picker']) {
+  [part='input-fields'] ::slotted([slot='date-picker']) {
     min-width: 0;
     flex: 1 1 auto;
   }
 
-  .slots ::slotted([slot='time-picker']) {
+  [part='input-fields'] ::slotted([slot='time-picker']) {
     min-width: 0;
     flex: 1 1.65 auto;
   }
diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.d.ts b/packages/date-time-picker/src/vaadin-date-time-picker.d.ts
@@ -63,6 +63,7 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
  * Part name            | Description
  * ---------------------|----------------
  * `label`              | The slotted label element wrapper
+ * `input-fields`       | The date and time pickers wrapper
  * `helper-text`        | The slotted helper text element wrapper
  * `error-message`      | The slotted error message element wrapper
  * `required-indicator` | The `required` state indicator element
diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.js b/packages/date-time-picker/src/vaadin-date-time-picker.js
@@ -35,6 +35,7 @@ import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
  * Part name            | Description
  * ---------------------|----------------
  * `label`              | The slotted label element wrapper
+ * `input-fields`       | The date and time pickers wrapper
  * `helper-text`        | The slotted helper text element wrapper
  * `error-message`      | The slotted error message element wrapper
  * `required-indicator` | The `required` state indicator element
@@ -117,7 +118,7 @@ class DateTimePicker extends DateTimePickerMixin(
           <span part="required-indicator" aria-hidden="true"></span>
         </div>
 
-        <div class="slots">
+        <div part="input-fields">
           <slot name="date-picker" id="dateSlot"></slot>
           <slot name="time-picker" id="timeSlot"></slot>
         </div>
diff --git a/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js b/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js
@@ -582,7 +582,7 @@ snapshots["vaadin-date-time-picker shadow default"] =
     >
     </span>
   </div>
-  <div class="slots">
+  <div part="input-fields">
     <slot
       id="dateSlot"
       name="date-picker"
diff --git a/packages/vaadin-lumo-styles/src/components/date-time-picker.css b/packages/vaadin-lumo-styles/src/components/date-time-picker.css
@@ -8,17 +8,17 @@
     --vaadin-field-default-width: auto;
   }
 
-  .slots {
+  [part='input-fields'] {
     display: flex;
     --vaadin-field-default-width: 12em;
   }
 
-  .slots ::slotted([slot='date-picker']) {
+  [part='input-fields'] ::slotted([slot='date-picker']) {
     min-width: 0;
     flex: 1 1 auto;
   }
 
-  .slots ::slotted([slot='time-picker']) {
+  [part='input-fields'] ::slotted([slot='time-picker']) {
     min-width: 0;
     flex: 1 1.65 auto;
   }

Original file line number	Diff line number	Diff line change
@@ -11,17 +11,17 @@ export const dateTimePickerStyles = css`
`11`	`11`	`width: calc(var(--vaadin-field-default-width, 12em) * 2 + var(--vaadin-date-time-picker-gap, var(--vaadin-gap-s)));`
`12`	`12`	`}`
`13`	`13`
`14`		`- .slots {`
	`14`	`+ [part='input-fields'] {`
`15`	`15`	`display: flex;`
`16`	`16`	`gap: var(--vaadin-date-time-picker-gap, var(--vaadin-gap-s));`
`17`	`17`	`}`
`18`	`18`
`19`		`- .slots ::slotted([slot='date-picker']) {`
	`19`	`+ [part='input-fields'] ::slotted([slot='date-picker']) {`
`20`	`20`	`min-width: 0;`
`21`	`21`	`flex: 1 1 auto;`
`22`	`22`	`}`
`23`	`23`
`24`		`- .slots ::slotted([slot='time-picker']) {`
	`24`	`+ [part='input-fields'] ::slotted([slot='time-picker']) {`
`25`	`25`	`min-width: 0;`
`26`	`26`	`flex: 1 1.65 auto;`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -582,7 +582,7 @@ snapshots["vaadin-date-time-picker shadow default"] =`
`582`	`582`	`>`
`583`	`583`	`</span>`
`584`	`584`	`</div>`
`585`		`- <div class="slots">`
	`585`	`+ <div part="input-fields">`
`586`	`586`	`<slot`
`587`	`587`	`id="dateSlot"`
`588`	`588`	`name="date-picker"`
Original file line number	Diff line number	Diff line change
`@@ -8,17 +8,17 @@`
`8`	`8`	`--vaadin-field-default-width: auto;`
`9`	`9`	`}`
`10`	`10`
`11`		`- .slots {`
	`11`	`+ [part='input-fields'] {`
`12`	`12`	`display: flex;`
`13`	`13`	`--vaadin-field-default-width: 12em;`
`14`	`14`	`}`
`15`	`15`
`16`		`- .slots ::slotted([slot='date-picker']) {`
	`16`	`+ [part='input-fields'] ::slotted([slot='date-picker']) {`
`17`	`17`	`min-width: 0;`
`18`	`18`	`flex: 1 1 auto;`
`19`	`19`	`}`
`20`	`20`
`21`		`- .slots ::slotted([slot='time-picker']) {`
	`21`	`+ [part='input-fields'] ::slotted([slot='time-picker']) {`
`22`	`22`	`min-width: 0;`
`23`	`23`	`flex: 1 1.65 auto;`
`24`	`24`	`}`