#131 Updated comment from "min" to "max" - added line break (space) a…

…fter code block - removed duplicated keypress event - changed background color of date fields from color-grayscale-800 to 600 - changed color of date input field's labels - removed color shade 800 from _color.scss - move static attribute without value after static one with value - add form.date value property to make it a directive - changed input field width

Signed-off-by: BeneRichi <[email protected]>

src/components/c-date-picker.vue

@@ -149,7 +149,7 @@
       },
 
       /**
-       * Allows to set a min date.
+       * Allows to set a max date.
        */
       maxDate: {
         type: Date,
@@ -224,6 +224,7 @@
         } else {
           this.close();
         }
+
         this.onChange();
       },
 

src/components/e-date.vue

@@ -10,8 +10,7 @@
       :class="b('input')"
       :maxlength="format.length"
       :name="name"
-      @keypress.enter.prevent
-      @keypress="onEnter"
+      @keypress.enter.prevent="onEnter"
       @focus="onFocus"
       @blur="onBlur"
     >
@@ -270,13 +269,13 @@
     align-items: center;
     padding: 0 variables.$spacing--25; // Equalizes vertical centering
     border: $border solid transparent;
-    background: variables.$color-grayscale--800;
+    background: variables.$color-grayscale--600;
     border-radius: variables.$border-radius--500;
 
     &__label-text {
       grid-area: label;
       align-self: center;
-      color: variables.$color-primary--1;
+      color: variables.$color-grayscale--200;
     }
 
     &__input,
@@ -289,7 +288,7 @@
       @extend %input-reset;
 
       grid-area: input;
-      width: 14ch; // 8 letters + 2 dividers + some, because IE11 does not count outer spacing of 0
+      width: var(--e-date-format-length, 10ch); // 8 letters + 2 dividers
       height: $height - (2 * $border) - 1px;
       margin-bottom: 1px; // Improves vertical centering.
     }

src/setup/scss/variables/_color.scss

@@ -8,7 +8,6 @@ $color-grayscale--400: #afafaf;
 $color-grayscale--500: #d8d8d8;
 $color-grayscale--600: #f3f3f3;
 $color-grayscale--700: #fcfcfc;
-$color-grayscale--800: #f5f5f5;
 $color-grayscale--1000: #ffffff;
 
 $color-gradient--1-0: $color-grayscale--0;

src/styleguide/routes/forms.vue

@@ -111,8 +111,8 @@
           <eDate v-model="form.date" name="date" />
           <cDatePicker :start.sync="form.startDate"
                        :end.sync="form.endDate"
-                       range
-                       name="date-picker" />
+                       name="date-picker"
+                       range />
         </e-fieldset>
 
         <e-button type="submit" primary>
@@ -164,6 +164,7 @@
           topics: [],
           frequency: '',
           businessFields: [],
+          date: new Date(),
           startDate: new Date(),
           endDate: new Date()
         },