merged master in

styleguide/.eslintrc.js

@@ -1,18 +1,14 @@
 module.exports = {
   root: true,
   env: {
-    browser: true,
     node: true
   },
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
-  extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
-  // required to lint *.vue files
-  plugins: ['vue', 'prettier'],
-  // add your custom rules here
+  extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
   }
 }

styleguide/src/system/components/data-input/shared/input.scss

@@ -2,7 +2,7 @@
   .#{$class}-wrap {
     position: relative;
   }
-  
+
   .#{$class} {
     appearance: none;
     box-sizing: border-box;
@@ -12,57 +12,51 @@
     width: 100%;
     padding: $input-padding-vertical $space-x-small;
     height: $input-height;
-  
+
     color: $text-color-base;
     background: $background-color-base;
-  
     border: $input-border-size solid $border-color-base;
     border-radius: $border-radius-base;
     outline: none;
     transition: all $duration-short $ease-out;
-  
+
     &::placeholder {
       color: $text-color-disabled;
     }
-  
     .ds-input-has-focus &,
     &:focus {
       border-color: $border-color-active;
       background: $background-color-base;
     }
-  
     .ds-input-is-disabled &,
     &:disabled {
       color: $text-color-disabled;
       opacity: $opacity-disabled;
       cursor: not-allowed;
     }
-  
     .ds-input-has-error & {
       border-color: $border-color-danger;
     }
   }
-  
   .ds-input-size-small {
     font-size: $font-size-small;
-  
+
     .#{$class} {
       font-size: $input-font-size-small;
       height: $input-height-small;
       padding: $input-padding-vertical-small $space-x-small;
     }
   }
-  
   .ds-input-size-large {
     font-size: $font-size-large;
-  
+
     .#{$class} {
       font-size: $input-font-size-large;
       height: $input-height-large;
       padding: $input-padding-vertical-large $space-x-small;
     }
   }
-  
+
   .#{$class}-icon,
   .#{$class}-icon-right {
     position: absolute;
@@ -76,7 +70,7 @@
     color: $text-color-softer;
     transition: color $duration-short $ease-out;
     pointer-events: none;
-  
+
     .ds-input-has-focus & {
       color: $text-color-base;
     }
@@ -89,15 +83,28 @@
       width: $input-height-large;
     }
   }
-  
+
+    .ds-input-size-small & {
+      width: $input-height-small;
+    }
+
+    .ds-input-size-large & {
+      width: $input-height-large;
+    }
+  }
+
   .#{$class}-icon-right {
     right: 0;
     left: auto;
   }
-  
+
   .#{$class}-has-icon {
     padding-left: $input-height;
-  
+
+    .ds-input-size-small & {
+      padding-left: $input-height-small;
+    }
+
     .ds-input-size-small & {
       padding-left: $input-height-small;
     }
@@ -106,7 +113,7 @@
       padding-left: $input-height-large;
     }
   }
-  
+
   .#{$class}-has-icon-right {
     padding-right: $input-height;
 
@@ -117,5 +124,9 @@
     .ds-input-size-large & {
       padding-right: $input-height-large;
     }
-  }         
+
+    .ds-input-size-large & {
+      padding-right: $input-height-large;
+    }
+  }
 }

styleguide/src/system/components/navigation/Menu/Menu.vue

@@ -13,9 +13,13 @@
           :route="route"
           :parents="[]"
           :name="route.name">
-          <ds-menu-item
-            :key="route.path ? route.path : index"
-            :route="route" />
+          <slot
+            :route="route"
+            name="Navigation">
+            <ds-menu-item
+              :key="route.path ? route.path : index"
+              :route="route" />
+          </slot>
         </slot>
       </slot>
     </ul>