Merge pull request #10 from appinteractive/fix-some-issues

Fix some issues

Author: visualjerk

src/styleguide/components/ComponentOptionsDoc.vue

@@ -10,14 +10,14 @@
             slot="name"
             slot-scope="{row}">
             <ds-code inline>
-              {{ row.name }}
+              {{ row.name | kebabCase }}
             </ds-code>
             <div v-if="row.required">
               <ds-tag v-if="row.required" color="warning">required</ds-tag>
             </div>
             <ds-space :margin-bottom="null" margin-top="small">
               <div v-if="row.options">
-                <ds-chip v-for="option in row.options" :key="option">
+                <ds-chip size="small" v-for="option in row.options" :key="option">
                   {{ option }}
                 </ds-chip>
               </div>

src/styleguide/components/Navigation.vue

@@ -5,8 +5,7 @@
       <ds-input
         v-model="searchString"
         placeholder="Filter menu ..."
-        icon="search"
-        size="small" />
+        icon="search" />
     </div>
     <ds-menu
       @navigate="$emit('navigate')"

src/system/components/data-input/Input/Input.vue

@@ -13,7 +13,7 @@
           iconRight && `ds-input-has-icon-right`
         ]"
         :id="id"
-        :name="model"
+        :name="name ? name : model"
         :type="type"
         :autofocus="autofocus"
         :placeholder="placeholder"

src/system/components/data-input/Input/demo.md

@@ -1,7 +1,7 @@
 ## Basic usage
 
 ```
-<ds-input placeholder="Name ..."/>
+<ds-input placeholder="Name ..." />
 ```
 
 ## Usage with label
@@ -10,7 +10,13 @@
 <ds-input
   id="name"
   label="Your name"
-  placeholder="Name ..."/>
+  placeholder="Name ..." />
+```
+
+## Disabled
+
+```
+<ds-input placeholder="Name ..." disabled />
 ```
 
 ## Input types

src/system/components/data-input/Select/Select.vue

@@ -48,7 +48,9 @@
           <input
             ref="search"
             class="ds-select-search"
+            autocomplete="off"
             :id="id"
+            :name="name ? name : model"
             :autofocus="autofocus"
             :placeholder="placeholder"
             :tabindex="tabindex"
@@ -83,7 +85,9 @@
           v-if="!multiple"
           ref="search"
           class="ds-select-search"
+          autocomplete="off"
           :id="id"
+          :name="name ? name : model"
           :autofocus="autofocus"
           :placeholder="placeholder"
           :tabindex="tabindex"

src/system/components/data-input/shared/input.js

@@ -30,6 +30,13 @@ export default {
       type: String,
       default: null
     },
+    /**
+     * Name to use on the input for accessibility
+     */
+    name: {
+      type: String,
+      default: null
+    },
     /**
      * The label of the input.
      */

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

@@ -37,6 +37,7 @@
       opacity: $opacity-disabled;
       pointer-events: none;
       cursor: not-allowed;
+      background-color: $background-color-disabled;
     }
 
     .ds-input-is-readonly & {
@@ -122,5 +123,5 @@
     .ds-input-size-large & {
       padding-right: $input-height-large;
     }
-  }         
+  }
 }

src/system/components/layout/Space/Space.vue

@@ -4,7 +4,7 @@
     :style="styles"
     class="ds-space"
     :class="[
-      centered && `ds-space-centered`,
+      centered && `ds-space-centered`
     ]"
   >
     <slot />

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

@@ -13,9 +13,14 @@
           :route="route"
           :parents="[]"
           :name="route.name">
-          <ds-menu-item
-            :key="route.path ? route.path : index"
-            :route="route" />
+          <!-- @slot Scoped slot for providing a custom menu item -->
+          <slot
+            :route="route"
+            name="menuitem">
+            <ds-menu-item
+              :key="route.path ? route.path : index"
+              :route="route" />
+          </slot>
         </slot>
       </slot>
     </ul>

src/system/components/navigation/Menu/demo.md

@@ -214,7 +214,7 @@ If you want to keep the sub menu for this menu item, be sure to use the `ds-menu
   <ds-menu :routes="routes">
     <ds-menu-item
       @click="handleClick"
-      slot="Navigation"
+      slot="menuitem"
       slot-scope="item"
       :route="item.route"
       :parents="item.parents">

src/system/components/typography/Chip/style.scss

@@ -1,11 +1,12 @@
 .ds-chip {
   @include reset;
   @include stack-space($space-xx-small);
+  @include inline-space($font-space-xx-small);
   position: relative;
   display: inline-block;
   font-family: $font-family-text;
   line-height: $line-height-base;
-  padding: $space-xx-small $space-x-small;
+  padding: $font-space-xx-small $font-space-large;
   border-radius: $border-radius-base;
   font-weight: $font-weight-bold;
   color: $text-color-base;
@@ -45,23 +46,24 @@
   border-radius: $border-radius-rounded;
 }
 
-.ds-chip-size-base {
-  font-size: $font-size-small;
+.ds-chip-size-small {
+  font-size: $font-size-xx-small;
+  padding: $font-space-xxx-small $font-space-large;
 }
 
-.ds-chip-size-small {
-  font-size: $font-size-x-small;
-  padding: $space-xxx-small $space-x-small;
+.ds-chip-size-base {
+  font-size: $font-size-small;
 }
 
 .ds-chip-size-large {
   font-size: $font-size-base;
+  padding: $font-space-xx-small $font-space-x-large;
 }
 
 .ds-chip-close {
   @include reset-button;
   position: absolute;
-  right: $space-xx-small;
+  right: $font-space-base;
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
@@ -71,12 +73,11 @@
   width: $space-small;
   height: $space-small;
   border-radius: $border-radius-circle;
-  //background-color: $background-color-base;
   opacity: $opacity-soft;
   cursor: pointer;
   transition: all $duration-short $ease-out-sharp;
 
   &:hover {
     opacity: 1;
   }
-}
+}

src/system/components/typography/Tag/style.scss

@@ -1,6 +1,7 @@
 .ds-tag {
   @include reset;
   @include stack-space($space-xx-small);
+  @include inline-space($font-space-xx-small);
   display: inline-block;
   font-family: $font-family-text;
   line-height: $line-height-base;
@@ -52,4 +53,4 @@
 
 .ds-tag-size-large {
   font-size: $font-size-small;
-}
+}

src/system/mixins/media-query.js

@@ -23,10 +23,15 @@ function initListener() {
   if (init) {
     return
   }
-  if (window && typeof window !== 'undefined') {
-    window.addEventListener('resize', updateWindowSize)
-    updateWindowSize()
+  try {
+    if (window && typeof window !== 'undefined') {
+      window.addEventListener('resize', updateWindowSize)
+      updateWindowSize()
+    }
+    init = true
+  } catch (err) {
     init = true
+    return false
   }
 }
 

src/system/tokens/color.yml

@@ -218,6 +218,10 @@ props:
     value: *color-neutral-30
     category: background-color
 
+  - name: background-color-disabled
+    value: *color-neutral-90
+    category: background-color
+
   - name: background-color-primary
     value: *color-primary
     category: background-color

src/system/tokens/font-spacing.yml

@@ -22,6 +22,8 @@ props:
     value: "0.3em"
   - name: font-space-xx-small
     value: "0.2em"
+  - name: font-space-xxx-small
+    value: "0.1em"
 global:
   type: number
   category: font-spacing