@@ -772,7 +778,7 @@ export class DatePicker implements IxDatePickerComponent {
this.changeToAdjacentMonth(1)}
ghost
- icon="chevron-right"
+ icon={iconChevronRightSmall}
variant="primary"
class="arrows"
>
diff --git a/packages/core/src/components/date-time-card/date-time-card.scss b/packages/core/src/components/date-time-card/date-time-card.scss
index 9189111adfa..910d38ab2d4 100644
--- a/packages/core/src/components/date-time-card/date-time-card.scss
+++ b/packages/core/src/components/date-time-card/date-time-card.scss
@@ -54,7 +54,7 @@
}
.content {
- padding: 0 $medium-space $medium-space $medium-space;
+ padding: 0 $default-space $default-space $default-space;
flex: 1 1 auto;
display: flex;
flex-direction: column;
diff --git a/packages/core/src/components/datetime-picker/datetime-picker.scss b/packages/core/src/components/datetime-picker/datetime-picker.scss
index a4d2fd01615..cc592c0ff46 100644
--- a/packages/core/src/components/datetime-picker/datetime-picker.scss
+++ b/packages/core/src/components/datetime-picker/datetime-picker.scss
@@ -19,11 +19,13 @@
position: relative;
width: min-content;
- .min-width {
- width: min-content;
+ .no-padding {
+ padding: 0;
}
- .no-padding {
+ ix-col {
+ display: flex;
+ flex-direction: column;
padding: 0;
}
@@ -36,10 +38,19 @@
@media (min-width: 576px) {
min-width: max-content;
- .btn-select-date {
- left: unset !important;
+ .btn-select-date-container {
+ display: inline-flex;
+ flex-grow: 1;
+
+ ix-button {
+ margin-left: auto;
+ margin-top: auto;
+ }
}
+ .min-width {
+ width: min-content;
+ }
}
.individual {
@@ -47,11 +58,13 @@
border: none;
}
- .btn-select-date {
- position: absolute;
- bottom: $default-space;
- right: $default-space;
- left: $default-space;
- }
+ .btn-select-date-container {
+ padding: 0 $default-space $default-space;
+ @media (max-width: 576px) {
+ & .btn-select-date {
+ width: 100%;
+ }
+ }
+ }
}
diff --git a/packages/core/src/components/datetime-picker/datetime-picker.tsx b/packages/core/src/components/datetime-picker/datetime-picker.tsx
index 3c71b684ad4..7f63d18f842 100644
--- a/packages/core/src/components/datetime-picker/datetime-picker.tsx
+++ b/packages/core/src/components/datetime-picker/datetime-picker.tsx
@@ -55,7 +55,7 @@ export class DatetimePicker
*
* @since 1.1.0
*/
- @Prop() minDate: string;
+ @Prop() minDate?: string;
/**
* The latest date that can be selected by the date picker.
@@ -63,7 +63,7 @@ export class DatetimePicker
*
* @since 1.1.0
*/
- @Prop() maxDate: string;
+ @Prop() maxDate?: string;
/**
* Date format string.
@@ -87,7 +87,7 @@ export class DatetimePicker
*
* @since 1.1.0
*/
- @Prop() from: string | undefined;
+ @Prop() from?: string;
/**
* The selected end date. If the the picker is not in range mode this property has no impact.
@@ -95,14 +95,14 @@ export class DatetimePicker
*
* @since 1.1.0
*/
- @Prop() to: string | undefined;
+ @Prop() to?: string;
/**
* Select time with format string
*
* @since 1.1.0
*/
- @Prop() time: string;
+ @Prop() time?: string;
/**
* Show time reference input
@@ -110,12 +110,12 @@ export class DatetimePicker
*
* @since 1.1.0
*/
- @Prop() showTimeReference = undefined;
+ @Prop() showTimeReference: boolean = false;
/**
* Set time reference
*/
- @Prop() timeReference: 'AM' | 'PM';
+ @Prop() timeReference?: 'AM' | 'PM';
/**
* Text of date select button
@@ -123,7 +123,7 @@ export class DatetimePicker
* @since 1.1.0
* @deprecated since 2.1.0. Use `i18nDone`
*/
- @Prop() textSelectDate: string;
+ @Prop() textSelectDate?: string;
/**
* Text of date select button
@@ -146,7 +146,7 @@ export class DatetimePicker
*
* @since 2.1.0
*/
- @Prop() locale: string = undefined;
+ @Prop() locale?: string;
/**
* Default behavior of the done event is to join the two events (date and time) into one combined string output.
@@ -163,43 +163,45 @@ export class DatetimePicker
* Set `doneEventDelimiter` to null or undefine to get the typed event
* @deprecated Use `this.dateChange`
*/
- @Event() done: EventEmitter
;
+ @Event() done!: EventEmitter;
/**
* Time change
*
* @since 1.1.0
*/
- @Event() timeChange: EventEmitter;
+ @Event() timeChange!: EventEmitter;
/**
* Date change
*
* @since 1.1.0
*/
- @Event() dateChange: EventEmitter;
+ @Event() dateChange!: EventEmitter;
/**
* Datetime selection event is fired after confirm button is pressed
*
* @since 1.1.0
*/
- @Event() dateSelect: EventEmitter;
+ @Event() dateSelect!: EventEmitter;
- private datePickerElement: HTMLIxDatePickerElement;
- private timePickerElement: HTMLIxTimePickerElement;
+ private datePickerElement?: HTMLIxDatePickerElement;
+ private timePickerElement?: HTMLIxTimePickerElement;
private async onDone() {
- const date = await this.datePickerElement.getCurrentDate();
- const time = await this.timePickerElement.getCurrentTime();
+ const date = await this.datePickerElement?.getCurrentDate();
+ const time = await this.timePickerElement?.getCurrentTime();
this.dateSelect.emit({
- from: date.from,
- to: date.to,
- time: time,
+ from: date?.from ?? '',
+ to: date?.to ?? '',
+ time: time ?? '',
});
- this.done.emit([date.from, date.to ?? '', time].join(this.eventDelimiter));
+ this.done.emit(
+ [date?.from, date?.to ?? '', time].join(this.eventDelimiter)
+ );
}
private async onDateChange(event: CustomEvent) {
@@ -223,7 +225,7 @@ export class DatetimePicker
-
+
(this.datePickerElement = ref)}
corners="left"
@@ -240,7 +242,7 @@ export class DatetimePicker
>
-
+
(this.timePickerElement = ref)}
@@ -252,16 +254,14 @@ export class DatetimePicker
format={this.timeFormat}
time={this.time}
>
-
-
-
-
- this.onDone()}
- >
- {this.textSelectDate || this.i18nDone}
-
+
+ this.onDone()}
+ >
+ {this.textSelectDate || this.i18nDone}
+
+
diff --git a/packages/core/src/components/time-picker/time-picker.scss b/packages/core/src/components/time-picker/time-picker.scss
index 78b1bccd570..a0b390cdd9d 100644
--- a/packages/core/src/components/time-picker/time-picker.scss
+++ b/packages/core/src/components/time-picker/time-picker.scss
@@ -17,11 +17,11 @@
display: block;
position: relative;
- width: 22rem;
+ width: 21rem;
@media (max-width: 576px) {
.clock {
- padding: 1.5rem 0;
+ padding: 1.5rem 0 1rem 0;
}
.header {
@@ -31,7 +31,7 @@
@media (min-width: 576px) {
.clock {
- padding: 4.25rem 0;
+ padding: 4.25rem 0 3.75rem 0;
}
.header {
@@ -97,6 +97,10 @@
.button {
display: flex;
justify-content: flex-end;
+
+ &.standalone {
+ padding-top: 0.5rem;
+ }
}
.default-space {
diff --git a/packages/core/src/components/time-picker/time-picker.tsx b/packages/core/src/components/time-picker/time-picker.tsx
index 58330a3011b..41544020bc0 100644
--- a/packages/core/src/components/time-picker/time-picker.tsx
+++ b/packages/core/src/components/time-picker/time-picker.tsx
@@ -20,6 +20,12 @@ import {
} from '@stencil/core';
import { DateTime } from 'luxon';
import { DateTimeCardCorners } from '../date-time-card/date-time-card';
+import {
+ iconChevronDown,
+ iconChevronDownSmall,
+ iconChevronUp,
+ iconChevronUpSmall,
+} from '@siemens/ix-icons/icons';
export type TimePickerCorners = DateTimeCardCorners;
@@ -126,22 +132,22 @@ export class TimePicker {
/**
* Time event
*/
- @Event() timeSelect: EventEmitter;
+ @Event() timeSelect!: EventEmitter;
/**
* Time event
* @deprecated Will be removed in 3.0.0. Use `time-select` event.
*/
- @Event() done: EventEmitter;
+ @Event() done!: EventEmitter;
/**
* Time change event
*/
- @Event() timeChange: EventEmitter;
+ @Event() timeChange!: EventEmitter;
- @State() private _time: DateTime;
- @State() private _timeRef: 'AM' | 'PM' | undefined;
- @State() private _formattedTime: TimeOutputFormat;
+ @State() private _time?: DateTime;
+ @State() private _timeRef?: 'AM' | 'PM';
+ @State() private _formattedTime?: TimeOutputFormat;
componentWillLoad() {
this._time = DateTime.fromFormat(this.time, this.format);
@@ -163,6 +169,10 @@ export class TimePicker {
@Watch('_time')
formatTime() {
+ if (!this._time) {
+ return;
+ }
+
const [hour, minute, second] = this._time
.toFormat(this.format)
.split(' ')[0]
@@ -177,8 +187,8 @@ export class TimePicker {
@Watch('_time')
onInternalTimeChange() {
- this.timeChange.emit(this._time.toFormat(this.format));
- if (this._timeRef) this._timeRef = this._time.toFormat('a') as 'AM' | 'PM';
+ this.timeChange.emit(this._time?.toFormat(this.format));
+ if (this._timeRef) this._timeRef = this._time?.toFormat('a') as 'AM' | 'PM';
}
timeUpdate(unit: 'hour' | 'minute' | 'second', value: number): number {
@@ -193,7 +203,7 @@ export class TimePicker {
value = 0;
}
- this._time = this._time.set({
+ this._time = this._time?.set({
[unit]: value,
});
return value;
@@ -202,8 +212,8 @@ export class TimePicker {
changeTimeReference() {
this._timeRef = this._timeRef === 'AM' ? 'PM' : 'AM';
- if (!this._time.toFormat('a').includes(this._timeRef)) {
- this._time = this._time.plus({
+ if (!this._time?.toFormat('a').includes(this._timeRef)) {
+ this._time = this._time?.plus({
hour: 12,
});
}
@@ -214,7 +224,7 @@ export class TimePicker {
*/
@Method()
async getCurrentTime() {
- return this._time.toFormat(this.format);
+ return this._time?.toFormat(this.format);
}
render() {
@@ -256,12 +266,12 @@ export class TimePicker {
- (this._time = this._time.plus({
+ (this._time = this._time?.plus({
[descriptor.unit]: 1,
}))
}
ghost
- icon="chevron-up"
+ icon={iconChevronUpSmall}
variant="primary"
class="arrows"
>
@@ -274,13 +284,13 @@ export class TimePicker {
value={
this._formattedTime
? this._formattedTime[descriptor.unit]
- : null
+ : ''
}
onKeyDown={(e) => {
if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
const value = e.key === 'ArrowUp' ? 1 : -1;
- this._time = this._time.plus({
+ this._time = this._time?.plus({
[descriptor.unit]: value,
});
e.preventDefault();
@@ -297,12 +307,12 @@ export class TimePicker {
- (this._time = this._time.minus({
+ (this._time = this._time?.minus({
[descriptor.unit]: 1,
}))
}
ghost
- icon="chevron-down"
+ icon={iconChevronDownSmall}
variant="primary"
class="arrows"
>
@@ -332,7 +342,7 @@ export class TimePicker {
size="16"
onClick={() => this.changeTimeReference()}
ghost
- icon="chevron-up"
+ icon={iconChevronUp}
variant="primary"
class="arrows"
>
@@ -341,17 +351,23 @@ export class TimePicker {
size="16"
onClick={() => this.changeTimeReference()}
ghost
- icon="chevron-down"
+ icon={iconChevronDown}
variant="primary"
class="arrows"
>
+
{
- this.timeSelect.emit(this._time.toFormat(this.format));
- this.done.emit(this._time.toFormat(this.format));
+ this.timeSelect.emit(this._time?.toFormat(this.format));
+ this.done.emit(this._time?.toFormat(this.format));
}}
>
{this.textSelectTime}
diff --git a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-dark-linux.png
index 4e00ecaa9f5..81f26dbb5ec 100644
Binary files a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-light-linux.png
index 4ec97b767c1..557b7b30741 100644
Binary files a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-range-options---custom-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-range-options---custom-1-chromium---theme-classic-dark-linux.png
index 81ab9cbb81a..a6ce1e87bc3 100644
Binary files a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-range-options---custom-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-range-options---custom-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-range-options---custom-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-range-options---custom-1-chromium---theme-classic-light-linux.png
index d0889205d83..066626f9fd3 100644
Binary files a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-range-options---custom-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-range-options---custom-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png
index b54b1d1eb09..36f741d08ad 100644
Binary files a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png
index d5286706022..de606c761d3 100644
Binary files a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png
index 1a77e57ea5b..5133a584cdd 100644
Binary files a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png
index 3133aa40547..d32ad561dee 100644
Binary files a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-week-start-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-week-start-1-chromium---theme-classic-dark-linux.png
index 1bf88ec9867..4d4fa5f7652 100644
Binary files a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-week-start-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-week-start-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-week-start-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-week-start-1-chromium---theme-classic-light-linux.png
index effeca50c7d..797506ec984 100644
Binary files a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-week-start-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-week-start-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-year-month-selection-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-year-month-selection-1-chromium---theme-classic-dark-linux.png
index 4eebcc0b7ea..fc144a27458 100644
Binary files a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-year-month-selection-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-year-month-selection-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-year-month-selection-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-year-month-selection-1-chromium---theme-classic-light-linux.png
index 1fbaf4a3869..166b3356d2c 100644
Binary files a/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-year-month-selection-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-picker-rework/date-picker-rework.e2e.ts-snapshots/date-picker-year-month-selection-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png
index b54b1d1eb09..36f741d08ad 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png
index d5286706022..de606c761d3 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-dark-linux.png
index 6bcd5de2f07..d5e0ac55e8c 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-light-linux.png
index 9e51e94c957..c04d9f69100 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png
index 1a77e57ea5b..5133a584cdd 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png
index 3133aa40547..d32ad561dee 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/datetime-picker-rework/datetime-picker-rework.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/datetime-picker-rework/datetime-picker-rework.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-dark-linux.png
index eedd627041b..599ef3f8eec 100644
Binary files a/packages/core/src/tests/datetime-picker-rework/datetime-picker-rework.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/datetime-picker-rework/datetime-picker-rework.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/datetime-picker-rework/datetime-picker-rework.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/datetime-picker-rework/datetime-picker-rework.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-light-linux.png
index 0fa1f3db0ae..0b473021cf9 100644
Binary files a/packages/core/src/tests/datetime-picker-rework/datetime-picker-rework.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/datetime-picker-rework/datetime-picker-rework.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts
index 4e18659d5fc..dd30ddac8de 100644
--- a/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts
+++ b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts
@@ -8,7 +8,7 @@
*/
import { expect } from '@playwright/test';
-import { regressionTest } from '@utils/test';
+import { regressionTest, viewPorts } from '@utils/test';
regressionTest.describe('datetime picker', () => {
regressionTest('basic', async ({ page }) => {
@@ -17,4 +17,12 @@ regressionTest.describe('datetime picker', () => {
maxDiffPixels: 5,
});
});
+
+ regressionTest('mobile', async ({ page }) => {
+ await page.setViewportSize(viewPorts.sm);
+ await page.goto('datetime-picker/basic');
+ expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+ maxDiffPixels: 5,
+ });
+ });
});
diff --git a/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-dark-linux.png
index 3b6010e760d..b888db09a85 100644
Binary files a/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-light-linux.png
index 06c0527fd19..8662c107bb7 100644
Binary files a/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-mobile-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-mobile-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..c97e4a4fa00
Binary files /dev/null and b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-mobile-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-mobile-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-mobile-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..0e6cdf018ce
Binary files /dev/null and b/packages/core/src/tests/datetime-picker/datetime-picker.e2e.ts-snapshots/datetime-picker-mobile-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/time-picker-rework/time-picker-rework.e2e.ts-snapshots/time-picker-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/time-picker-rework/time-picker-rework.e2e.ts-snapshots/time-picker-basic-1-chromium---theme-classic-dark-linux.png
index ddf615be395..c319288eb33 100644
Binary files a/packages/core/src/tests/time-picker-rework/time-picker-rework.e2e.ts-snapshots/time-picker-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/time-picker-rework/time-picker-rework.e2e.ts-snapshots/time-picker-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/time-picker-rework/time-picker-rework.e2e.ts-snapshots/time-picker-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/time-picker-rework/time-picker-rework.e2e.ts-snapshots/time-picker-basic-1-chromium---theme-classic-light-linux.png
index 31863ef4e79..d8d5607b361 100644
Binary files a/packages/core/src/tests/time-picker-rework/time-picker-rework.e2e.ts-snapshots/time-picker-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/time-picker-rework/time-picker-rework.e2e.ts-snapshots/time-picker-basic-1-chromium---theme-classic-light-linux.png differ