feat: port date-time-picker Lumo styles to CSS files (#9353)

vursen · web-flow · commit 81db84c0c8b2 · 2025-06-03T16:29:35.000+03:00
diff --git a/dev/date-time-picker.html b/dev/date-time-picker.html
@@ -9,6 +9,7 @@
     <script type="module">
       import '@vaadin/date-time-picker';
       import '@vaadin/tooltip';
+      import '@vaadin/vaadin-lumo-styles/lumo.css';
     </script>
   </head>
   <body>
diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.js b/packages/date-time-picker/src/vaadin-date-time-picker.js
@@ -10,6 +10,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
 
@@ -97,7 +98,9 @@ import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
  * @mixes ThemableMixin
  * @mixes DateTimePickerMixin
  */
-class DateTimePicker extends DateTimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class DateTimePicker extends DateTimePickerMixin(
+  ThemableMixin(ElementMixin(CSSInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-date-time-picker';
   }
diff --git a/packages/date-time-picker/test/visual/lumo/date-time-picker.test.js b/packages/date-time-picker/test/visual/lumo/date-time-picker.test.js
@@ -1,7 +1,9 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/vaadin-lumo-styles/props.css';
+import '@vaadin/vaadin-lumo-styles/components/date-time-picker.css';
 import '../common.js';
-import '../../../theme/lumo/vaadin-date-time-picker.js';
+import '../../../vaadin-date-time-picker.js';
 
 describe('date-time-picker', () => {
   let div, element;
diff --git a/packages/vaadin-lumo-styles/components.css b/packages/vaadin-lumo-styles/components.css
@@ -8,6 +8,7 @@
 @import './components/combo-box.css';
 @import './components/custom-field.css';
 @import './components/date-picker.css';
+@import './components/date-time-picker.css';
 @import './components/details-summary.css';
 @import './components/details.css';
 @import './components/email-field.css';
diff --git a/packages/vaadin-lumo-styles/components/date-time-picker.css b/packages/vaadin-lumo-styles/components/date-time-picker.css
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './date-picker.css';
+@import './time-picker.css';
+
+@import '../src/mixins/base-layer-reset.css' vaadin-date-time-picker;
+@import '../src/mixins/field-label.css' vaadin-date-time-picker;
+@import '../src/mixins/field-required.css' vaadin-date-time-picker;
+@import '../src/mixins/field-error-message.css' vaadin-date-time-picker;
+@import '../src/mixins/field-button.css' vaadin-date-time-picker;
+@import '../src/mixins/field-helper.css' vaadin-date-time-picker;
+@import '../src/mixins/field-base.css' vaadin-date-time-picker;
+@import '../src/components/custom-field.css' vaadin-date-time-picker;
+@import '../src/components/date-time-picker.css' vaadin-date-time-picker;
+
+html {
+  --vaadin-date-time-picker-css-inject: 1;
+}
diff --git a/packages/vaadin-lumo-styles/src/components/date-time-picker.css b/packages/vaadin-lumo-styles/src/components/date-time-picker.css
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+.vaadin-date-time-picker-container {
+  --vaadin-field-default-width: auto;
+}
+
+.slots {
+  display: flex;
+  --vaadin-field-default-width: 12em;
+}
+
+.slots ::slotted([slot='date-picker']) {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.slots ::slotted([slot='time-picker']) {
+  min-width: 0;
+  flex: 1 1.65 auto;
+}
+
+::slotted([slot='date-picker']) {
+  margin-inline-end: 2px;
+  --vaadin-input-field-top-end-radius: 0;
+  --vaadin-input-field-bottom-end-radius: 0;
+}
+
+::slotted([slot='time-picker']) {
+  --vaadin-input-field-top-start-radius: 0;
+  --vaadin-input-field-bottom-start-radius: 0;
+}
