From 0638e8568facf57c37fda6706b86ae2c2eabef00 Mon Sep 17 00:00:00 2001
From: Geoffrey Mon <geofbot@gmail.com>
Date: Tue, 7 Mar 2017 22:18:45 -0500
Subject: [PATCH] Make infused and non-infused DateInputWidget consistent

* Infused DateInputWidget should inherit from TextInputWidget to match the
  non-infused version
* Adjust CSS so that the non-infused version looks approx. the same

Bug: T120733
Change-Id: I8625fee07385b5f9afe3e22f876e11d22832be86
---
 .../mw.widgets.DateInputWidget.js             | 15 +++++------
 .../mw.widgets.DateInputWidget.less           | 26 ++++++++++++-------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
index 0ec6a4c518..dd2ce2acf5 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
@@ -56,7 +56,7 @@
 	 *     } );
 	 *
 	 * @class
-	 * @extends OO.ui.InputWidget
+	 * @extends OO.ui.TextInputWidget
 	 * @mixins OO.ui.mixin.IndicatorElement
 	 *
 	 * @constructor
@@ -116,7 +116,7 @@
 
 		// Properties (must be set before parent constructor, which calls #setValue)
 		this.$handle = $( '<div>' );
-		this.label = new OO.ui.LabelWidget();
+		this.innerLabel = new OO.ui.LabelWidget();
 		this.textInput = new OO.ui.TextInputWidget( {
 			required: config.required,
 			placeholder: placeholderDateFormat,
@@ -135,8 +135,8 @@
 		this.longDisplayFormat = config.longDisplayFormat;
 		this.required = config.required;
 		this.placeholderLabel = config.placeholderLabel;
-
 		// Validate and set min and max dates as properties
+
 		if ( config.mustBeAfter !== undefined ) {
 			mustBeAfter = moment( config.mustBeAfter, 'YYYY-MM-DD' );
 			if ( mustBeAfter.isValid() ) {
@@ -149,7 +149,6 @@
 				this.mustBeBefore = mustBeBefore;
 			}
 		}
-
 		// Parent constructor
 		mw.widgets.DateInputWidget.parent.call( this, config );
 
@@ -180,7 +179,7 @@
 		// Move 'tabindex' from this.$input (which is invisible) to the visible handle
 		this.setTabIndexedElement( this.$handle );
 		this.$handle
-			.append( this.label.$element, this.$indicator )
+			.append( this.innerLabel.$element, this.$indicator )
 			.addClass( 'mw-widget-dateInputWidget-handle' );
 		this.calendar.$element
 			.addClass( 'mw-widget-dateInputWidget-calendar' );
@@ -239,7 +238,7 @@
 
 	/* Inheritance */
 
-	OO.inheritClass( mw.widgets.DateInputWidget, OO.ui.InputWidget );
+	OO.inheritClass( mw.widgets.DateInputWidget, OO.ui.TextInputWidget );
 	OO.mixinClass( mw.widgets.DateInputWidget, OO.ui.mixin.IndicatorElement );
 
 	/* Methods */
@@ -367,7 +366,7 @@
 		if ( this.getValue() === '' ) {
 			this.textInput.setValue( '' );
 			this.calendar.setDate( null );
-			this.label.setLabel( this.placeholderLabel );
+			this.innerLabel.setLabel( this.placeholderLabel );
 			this.$element.addClass( 'mw-widget-dateInputWidget-empty' );
 		} else {
 			moment = this.getMoment();
@@ -377,7 +376,7 @@
 			if ( !this.inCalendar ) {
 				this.calendar.setDate( this.getValue() );
 			}
-			this.label.setLabel( moment.format( this.getDisplayFormat() ) );
+			this.innerLabel.setLabel( moment.format( this.getDisplayFormat() ) );
 			this.$element.removeClass( 'mw-widget-dateInputWidget-empty' );
 		}
 	};
diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
index 8ba9a99162..cad2b02c9a 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
@@ -30,15 +30,18 @@
 @indicator-size: unit( 12 / 16 / 0.8, em );
 
 .mw-widget-dateInputWidget {
-	display: inline-block;
-	position: relative;
-	width: 21em;
-	margin-top: 0.25em;
-	.oo-ui-inline-spacing( 0.5em );
-	margin-bottom: 0.25em;
-	margin-left: 0;
-
-	&-handle {
+	&.oo-ui-textInputWidget {
+		display: inline-block;
+		position: relative;
+		width: 21em;
+		margin-top: 0.25em;
+		.oo-ui-inline-spacing( 0.5em );
+		margin-bottom: 0.25em;
+		margin-left: 0;
+	}
+
+	&-handle,
+	&.oo-ui-textInputWidget input {
 		background-color: #fff;
 		display: inline-block;
 		position: relative;
@@ -51,6 +54,11 @@
 		border-radius: 2px;
 		outline: 0;
 		line-height: 1.275;
+		/**
+		 * Ensures non-infused and infused widget have the same height.
+		 * Equal to line height + top padding + bottom padding
+		 */
+		height: 2.275em;
 
 		> .oo-ui-labelElement-label {
 			padding: 0;
-- 
2.20.1