diff --git a/core/src/components/datetime/datetime.ionic.scss b/core/src/components/datetime/datetime.ionic.scss index 3518ccec20..14a4891114 100644 --- a/core/src/components/datetime/datetime.ionic.scss +++ b/core/src/components/datetime/datetime.ionic.scss @@ -14,6 +14,41 @@ --focus-ring-width: #{globals.$ionic-border-radius-050}; } +// Header +// ----------------------------------- +:host .datetime-header { + @include globals.padding( + globals.$ionic-space-200, + globals.$ionic-space-400, + globals.$ionic-space-400, + globals.$ionic-space-400 + ); + + display: flex; + + flex-direction: column; + align-items: start; + justify-content: space-between; + + height: globals.$ionic-scale-1400; + + margin-bottom: globals.$ionic-space-200; + + border-bottom: globals.$ionic-border-style-solid globals.$ionic-border-size-025 globals.$ionic-color-neutral-300; +} + +:host .datetime-header .datetime-title { + @include globals.typography(globals.$ionic-heading-h6-medium); + + color: globals.$ionic-color-neutral-800; +} + +:host .datetime-header .datetime-selected-date { + @include globals.typography(globals.$ionic-body-md-regular); + + color: globals.$ionic-color-neutral-1000; +} + // Calendar Header // ----------------------------------- diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index a7ff644f53..35f027b5cc 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -29,6 +29,19 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti await expect(datetime).toHaveScreenshot(screenshot(`datetime-basic`)); }); + + test('should render default title', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const datetime = page.locator('ion-datetime'); + + await expect(datetime).toHaveScreenshot(screenshot(`datetime-basic-default-title`)); + }); }); }); diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ebc326fae8 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..dda762f6ca Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4a4f5ec23f Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7bb5794c32 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6c7c773440 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..feab8469ee Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2c66caf107 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0d53137698 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..645a869ce5 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-md-ltr-Mobile-Safari-linux.png differ