Merge pull request #22 from joshsylvester/px-datetime-input-11

Fix for px-datetime-field#10 miscalculating width of px-datetime-entry in IE/Edge
predixdesignsystem · Jan 10, 2019 · e4addd6 · e4addd6
2 parents 9596703 + ae8f02e
commit e4addd6
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 57 deletions.
diff --git a/css/px-datetime-entry-cell-styles.html b/css/px-datetime-entry-cell-styles.html
@@ -17,7 +17,7 @@
 <dom-module id="px-datetime-entry-cell-styles">
 <template>
 <style>
-@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{background-color:var(--px-base-background-color,#fff);font-size:15px;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;color:inherit;height:2rem;display:flex;align-items:center}.text-input--bare{text-align:right;cursor:text;color:inherit;background:0 0;margin:0;padding:0;border:0;width:0;font-family:inherit;font-size:var(--px-datetime-entry-font-size,inherit);-moz-appearance:textfield}.text-input--bare::-webkit-inner-spin-button,.text-input--bare::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.text-input--bare:focus{background-color:var(--px-datetime-entry-selected,#87cefa);outline:0}.text-input--bare::-webkit-input-placeholder{color:var(--px-datetime-text-color--placeholder,#748b99)}.text-input--bare::-moz-placeholder{color:var(--px-datetime-text-color--placeholder,#748b99)}.text-input--bare:-ms-input-placeholder{color:var(--px-datetime-text-color--placeholder,#748b99)}.text-input--bare::placeholder{color:var(--px-datetime-text-color--placeholder,#748b99)}.text-input--bare:focus::-webkit-input-placeholder{color:var(--px-datetime-text-color--placeholder--focused,#748b99)}.text-input--bare:focus::-moz-placeholder{color:var(--px-datetime-text-color--placeholder--focused,#748b99)}.text-input--bare:focus:-ms-input-placeholder{color:var(--px-datetime-text-color--placeholder--focused,#748b99)}.text-input--bare:focus::placeholder{color:var(--px-datetime-text-color--placeholder--focused,#748b99)}input:invalid{color:var(--px-validation-error-text-color,red)}
+@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{background-color:var(--px-base-background-color,#fff);font-size:15px;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;color:inherit;height:2rem;display:flex;align-items:center}.text-input--bare{text-align:right;cursor:text;color:inherit;background:0 0;margin:0;padding:0;border:0;width:0;font-family:inherit;font-size:var(--px-datetime-entry-font-size,inherit);-moz-appearance:textfield}.text-input--bare::-webkit-inner-spin-button,.text-input--bare::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.text-input--bare:focus{background-color:var(--px-datetime-entry-selected,#87cefa);outline:0}.text-input--bare:-ms-input-placeholder{color:var(--px-datetime-text-color--placeholder,#748b99)}.text-input--bare::placeholder{color:var(--px-datetime-text-color--placeholder,#748b99)}.text-input--bare:focus:-ms-input-placeholder{color:var(--px-datetime-text-color--placeholder--focused,#748b99)}.text-input--bare:focus::placeholder{color:var(--px-datetime-text-color--placeholder--focused,#748b99)}input:invalid{color:var(--px-validation-error-text-color,red)}
 </style>
 </template>
 </dom-module>
diff --git a/css/px-datetime-entry-styles.html b/css/px-datetime-entry-styles.html
diff --git a/demo/index.html b/demo/index.html
@@ -52,10 +52,9 @@
       <px-demo-code-editor slot="px-demo-code-editor" props="{{props}}" config="[[chosenConfig]]"></px-demo-code-editor>
 
       <!-- Component ---------------------------------------------------------->
-      <px-demo-component slot="px-demo-component">
-        <p class=u-mb0>Event fired: <strong>px-datetime-submitted</strong></p>
+      <px-demo-component slot="px-demo-component" class="px-datetime-common-demo">
+        <p class="u-mb0">Event fired: <strong>px-datetime-submitted</strong></p>
         <p class="zeta u-mt0">See API Reference below for more details</p>
-
         <px-datetime-entry
             block-future-dates="{{props.blockFutureDates.value}}"
             block-past-dates="{{props.blockPastDates.value}}"

diff --git a/index.html b/index.html
@@ -63,7 +63,7 @@
     <!--
       Load the light theme (default theme).
     -->
-    <link rel="import" href="../px-theme/px-theme-styles.html">
+    <link rel="import" href="../px-theme/px-theme-styles.html" />
 
     <!--
       Asynchronously import the px-catalog element, which is the entrypoint

diff --git a/px-datetime-behavior.html b/px-datetime-behavior.html
@@ -99,21 +99,21 @@
     /**
      * Rollback value of temp moment to use public momentObj
      */
-     _rollbackTempMoment: function() {
+    _rollbackTempMoment: function() {
       this.set('_tempMomentObj', this.momentObj);
     },
     /**
      * Make sure the moment obj pick up the possibly new moment locale
      */
-     _localeChangedTemp: function() {
+    _localeChangedTemp: function() {
       if(this.language !== undefined && this._tempMomentObj) {
         this.set('_tempMomentObj', this._tempMomentObj.locale(Px.moment.locale()));
       }
     },
     /**
      * Makes sure the moment object reflects the right timezone.
      */
-     _timeZoneChangedTemp: function() {
+    _timeZoneChangedTemp: function() {
       if(this.timeZone !== undefined && this._tempMomentObj) {
         var newMom = this._tempMomentObj.clone().tz(this.timeZone);
         this.set('_tempMomentObj', newMom);

diff --git a/px-datetime-entry-cell.html b/px-datetime-entry-cell.html
@@ -246,7 +246,7 @@
       }
       ctx.font = fontSize + " " + fontFamily;
       if(this.$$('.datetime-entry-input').value) {
-        length = ctx.measureText(this.$$('.datetime-entry-input').value.toUpperCase()).width;
+        length = ctx.measureText(this.$$('.datetime-entry-input').value.toUpperCase()).width + 1;
       }
       else {
         length = ctx.measureText(this.$$('.datetime-entry-input').placeholder).width;
@@ -269,7 +269,7 @@
     /**
      * Sets up separator keybindings
      */
-     _addSeparatorKeyBinding: function(){
+    _addSeparatorKeyBinding: function(){
       var separator = (this.symbol.trim() === '') ? 'space' : this.symbol.trim();
       this.addOwnKeyBinding(separator,'_moveFocusForward');
     },
@@ -345,7 +345,7 @@
     _checkValue: function(){
       //if our format requires two digits and we only have one, add a 0 in front
       if(this.$$('.datetime-entry-input').value && this.$$('.datetime-entry-input').value.length === 1 &&
-       /^(?:MM|DD|HH|hh|kk|mm|ss|YY)$/.test(this.momentFormat)){
+        /^(?:MM|DD|HH|hh|kk|mm|ss|YY)$/.test(this.momentFormat)){
         this.$$('.datetime-entry-input').value =  '0' + this.$$('.datetime-entry-input').value;
       }
       //if the format is YYYY or Y and the input is 2 characters then convert the input to a 4 character year representation
@@ -398,10 +398,10 @@
     /**
      * Sets the AM/PM value.
      */
-     _setAMPM: function(ampm){
-       var mo = Px.moment.tz('01:00:00 ' + ampm, 'hh:mm:ss ' + this.momentFormat, this.timeZone);
-       this.$$('.datetime-entry-input').value = mo.tz(this.timeZone).format(this.momentFormat);
-     },
+    _setAMPM: function(ampm){
+      var mo = Px.moment.tz('01:00:00 ' + ampm, 'hh:mm:ss ' + this.momentFormat, this.timeZone);
+      this.$$('.datetime-entry-input').value = mo.tz(this.timeZone).format(this.momentFormat);
+    },
      /**
      * Prevent the delete button from navigating back
      */

diff --git a/px-datetime-entry.html b/px-datetime-entry.html
@@ -57,36 +57,36 @@
 
     <div id="wrapper" class="flex flex--middle">
       <div class="flex flex--middle dt-flex--no-shrink">
-          <button class$="{{_getIconClass(hideIcon)}} btn btn--bare dt-icon-button" on-tap="_iconClicked">
-              <span class="a11y">{{dateOrTime}}</span>
-              <template is="dom-if" if="{{!hideIcon}}">
-                <px-icon
-                  id="icon"
-                  class="dt-icon"
-                  icon="[[_setIcon(dateOrTime)]]">
-                </px-icon>
-              </template>
-          </button>
-          <template is="dom-repeat" items="{{_cellFormatArray}}">
-            <px-datetime-entry-cell
-              id="cell{{index}}"
-              class="cell"
-              order='{{index}}'
-              moment-obj="[[momentObj]]"
-              moment-format='[[item]]'
-              symbol=[[_returnSymbol(index,_symbolCharArray)]]
-              time-zone="[[timeZone]]"
-              is-selected="{{isSelected}}"
-              resources="[[resources]]"
-              language="[[language]]"
-              formats="[[formats]]">
-            </px-datetime-entry-cell>
-            <template is="dom-if" if={{_isSymbol(index,_symbolCharArray)}}>
-              <div class="dt-entry-symbol">
-                {{_returnSymbol(index,_symbolCharArray)}}
-              </div>
+        <button class$="{{_getIconClass(hideIcon)}} btn btn--bare dt-icon-button" on-tap="_iconClicked">
+            <span class="a11y">{{dateOrTime}}</span>
+            <template is="dom-if" if="{{!hideIcon}}">
+              <px-icon
+                id="icon"
+                class="dt-icon"
+                icon="[[_setIcon(dateOrTime)]]">
+              </px-icon>
             </template>
+        </button>
+        <template is="dom-repeat" items="{{_cellFormatArray}}">
+          <px-datetime-entry-cell
+            id="cell{{index}}"
+            class="cell"
+            order='{{index}}'
+            moment-obj="[[momentObj]]"
+            moment-format='[[item]]'
+            symbol=[[_returnSymbol(index,_symbolCharArray)]]
+            time-zone="[[timeZone]]"
+            is-selected="{{isSelected}}"
+            resources="[[resources]]"
+            language="[[language]]"
+            formats="[[formats]]">
+          </px-datetime-entry-cell>
+          <template is="dom-if" if={{_isSymbol(index,_symbolCharArray)}}>
+            <div class="dt-entry-symbol">
+              {{_returnSymbol(index,_symbolCharArray)}}
+            </div>
           </template>
+        </template>
       </div>
       <div class$="{{_getTimeZoneTextClass(showTimeZone, isValid)}}">
         <template is="dom-if" if="{{_showTimeZoneDropdown(showTimeZone)}}">
@@ -188,7 +188,7 @@
       /**
        * Specifies if the dropdown content should get hoisted to a container in order to escape its current stacking context
        */
-       hoist: {
+      hoist: {
         type: Boolean,
         value: false
       }
@@ -201,6 +201,7 @@
       'px-request-datetime-entry-paste': '_handlePaste',
       'px-dropdown-selection-changed': '_updateTimeZone'
     },
+
     /**
      * calls `_formatChanged` if `momentFormat` is defined
      */
@@ -221,22 +222,24 @@
     /**
      * Resets the input value for each entry-cell input field to the current momentObj.
      */
-     setValueFromMoment: function() {
+    setValueFromMoment: function() {
       var cells = Polymer.dom(this.root).querySelectorAll('.cell');
       cells.forEach(function(cell) {
         cell.setValueFromMoment();
       });
     },
     /**
-     * runs when `momentFormat` is changed
+     * Runs when `momentFormat` is changed
      * Updates `_cellFormatArray` and `_symbolCharArray` if one of them as changed
+     *
+     * This will also always size the symbols, regardless if the format changes - to ensure that
+     * the symbols are sized properly during all render steps
      */
     _formatChanged: function(newMomentFormat) {
       if(newMomentFormat !== undefined) {
         var format = this._splitFormat(newMomentFormat);
 
         if (format._cellFormatArray !== this._cellFormatArray || format._symbolCharArray !== this._symbolCharArray) {
-
           this._cellFormatArray = format._cellFormatArray;
           this._symbolCharArray = format._symbolCharArray;
 
@@ -263,6 +266,7 @@
 
       symbols.forEach(function(symbol, index) {
         length = ctx.measureText(symbol.innerHTML.trim().replace('&nbsp;',' ')).width;
+        length = Math.ceil(length);
         symbol.style['width'] = length + 'px';
       });
     },

diff --git a/px-datetime-shared-behavior.html b/px-datetime-shared-behavior.html
@@ -68,22 +68,22 @@
         value: function() {
           return Px.moment.tz.guess();
         }
-       },
+      },
        /**
         * set a default for localizing
         */
-       language: {
-         type: String,
-         value: 'en'
-       },
+      language: {
+        type: String,
+        value: 'en'
+      },
        /**
         * Use the key for localization if value for  language is missing. Should
         * always be true for  our components
         */
-       useKeyIfMissing: {
-         type: Boolean,
-         value: true
-       },
+      useKeyIfMissing: {
+        type: Boolean,
+        value: true
+      },
        /**
        * The minimum / earliest allowed date, as a a Moment object or an ISO 8601 String (dates before this will be disabled and unclickable).
        */

diff --git a/sass/px-datetime-entry.scss b/sass/px-datetime-entry.scss
@@ -86,6 +86,14 @@ $inuit-enable-btn--bare : true;
   flex: 0 0 auto;
 }
 
+// When not rendered inside of a px-datetime-input, the dt-icon renders at full size.
+:host-context(.px-datetime-common-demo) {
+  .dt-icon {
+    max-width: 32px;
+    max-height: 32px;
+  }
+}
+
 
 // Trumps
 $inuit-enable-margins--tiny     : true;