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

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
index 0ec6a4c..dd2ce2a 100644 (file)
--- 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 8ba9a99..cad2b02 100644 (file)
--- 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;