From 6ecd59bf5292dd411c6a951c528ac25b3553b604 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Mon, 18 Nov 2019 09:38:54 +0100
Subject: [PATCH] Polish datetime popover. (#18235)

* Polish datetime popover.

The popover inherited a min-width of 260, which is insufficient, then overrode it just for the edit-post-schedule flow. This means the datetime component looks fine in the sidebar, but no-where else.

This PR changes the base inherited minwidth to 270, so the component can be used outside of the sidebar.

* Better code, embrace padding.

The DateTime component as it exists, references a 3rd party library that uses lots of inline styles and hard-coded widths and dimensions.

Having explored various other approaches now, there are only two ways to fix this.

1. Actually add the padding to the component itself. This is the only way to make it work inside popovers when used outside of WordPress.
2. Do a major refactor to include a different datetime library.

In order to move forward, I'm therefore embracing the padding.
---
 packages/components/src/date-time/style.scss  | 38 +++++++++++++------
 .../sidebar/post-schedule/style.scss          |  8 ----
 .../components/post-publish-panel/style.scss  |  6 +++
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss
index 2863fb908ff10..931271752c02b 100644
--- a/packages/components/src/date-time/style.scss
+++ b/packages/components/src/date-time/style.scss
@@ -5,8 +5,10 @@
 /*rtl:end:ignore*/
 
 .components-datetime {
+	padding: $grid-size-large;
+
 	.components-datetime__calendar-help {
-		padding: $grid-size;
+		padding: $grid-size-large;
 
 		h4 {
 			margin: 0;
@@ -16,8 +18,6 @@
 	.components-datetime__date-help-button {
 		display: block;
 		margin-left: auto;
-		margin-right: $grid-size;
-		margin-top: 0.5em;
 	}
 
 	fieldset {
@@ -28,21 +28,33 @@
 
 	select,
 	input {
-		box-sizing: border-box;
-		height: 28px;
-		vertical-align: middle;
-		padding: 0;
 		@include input-style__neutral();
 	}
+
+	// Override inherited conflicting styles to be consistent.
+	select,
+	input[type="number"],
+	.components-button {
+		height: 30px;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 }
 
 .components-datetime__date {
 	min-height: 236px;
 	border-top: 1px solid $light-gray-500;
-	margin-left: -$grid-size;
-	margin-right: -$grid-size;
 
 	// Override external DatePicker styles.
+	.CalendarMonthGrid {
+		// The included component contains an arbitrary 13px padding that misaligns things.
+		margin-left: -13px;
+	}
+
+	.DayPickerNavigation_leftButton__horizontalDefault {
+		left: 0;
+	}
+
 	.CalendarMonth_caption {
 		font-size: $default-font-size;
 	}
@@ -82,11 +94,15 @@
 }
 
 .components-datetime__time {
-	margin-bottom: 1em;
+	padding-bottom: $grid-size-large;
 
 	fieldset {
-		margin-top: 0.5em;
 		position: relative;
+		margin-bottom: 0.5em;
+	}
+
+	fieldset + fieldset {
+		margin-bottom: 0;
 	}
 
 	.components-datetime__time-field-am-pm fieldset {
diff --git a/packages/edit-post/src/components/sidebar/post-schedule/style.scss b/packages/edit-post/src/components/sidebar/post-schedule/style.scss
index 800fe7c6e6d24..cea429f48f22b 100644
--- a/packages/edit-post/src/components/sidebar/post-schedule/style.scss
+++ b/packages/edit-post/src/components/sidebar/post-schedule/style.scss
@@ -6,11 +6,3 @@
 .components-button.edit-post-post-schedule__toggle {
 	text-align: right;
 }
-
-.edit-post-post-schedule__dialog .components-popover__content {
-	padding: 10px;
-
-	@include break-medium {
-		width: 270px;
-	}
-}
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index e008cd988ce39..887f25ffe9fc3 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -79,6 +79,12 @@
 	.editor-post-visibility__dialog-legend {
 		display: none;
 	}
+
+	// The DateTime component has an intrinsic padding in order for the horizontal scrolling to function inside a popover.
+	// We unset that here when used inline.
+	.components-datetime {
+		padding: 0;
+	}
 }
 
 .post-publish-panel__postpublish .components-panel__body {