V9 merge 05182018 (#785)

* feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme (#746) * feat(dropdown): added inline dropdown * feat(dropdown): fixed js * fix(letter-spacing): Remove letter-spacing (#748) * fix(letter-spacing): remove letter-spacing across the board * fix(letter-spacing): change hard-coded letter-spacing values to use the mixin * fix(dropdown): added tabindex logic to dropdown (#749) * feat(Skeleton-states): Add skeleton state styles (#713) * feat(skeleton): Add skeleton loading mixin and styles * feat(skeleton): Add skeleton icon styles * feat(skeleton): Add skeleton styles to components * feat(skeleton): Add structured list skeleton * feat: skeleton styles * feat: add skeleton demo html * feat: update skeleton html * feat(skeleton-states): Update accordion skeleton styles * feat(skeleton-states): Update accordion * chore: Update px to rem * chore: remove duplicate code * chore: Add correct color value for skeleton state * feat(skeleton-states): Update data table * fix(font-face): bring missing $css--font-face reference back (#778) Fixes #777.
carbon-design-system · Jun 4, 2018 · 08872e6 · 08872e6
1 parent c299d3a
commit 08872e6
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 15 deletions.
diff --git a/src/components/dropdown/dropdown--inline.html b/src/components/dropdown/dropdown--inline.html
@@ -8,19 +8,19 @@
   <li>
     <ul class="bx--dropdown-list">
       <li data-option data-value="all" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a>
+        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
       </li>
       <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a>
+        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
       </li>
       <li data-option data-value="staging" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
+        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
       </li>
       <li data-option data-value="dea" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a>
+        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
       </li>
       <li data-option data-value="router" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a>
+        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
       </li>
     </ul>
   </li>

diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
@@ -152,6 +152,15 @@
     background: $field-02;
   }
 
+  .#{$prefix}--number[data-invalid] {
+    input[type='number'] {
+      box-shadow: 0 2px 0px 0px $support-01;
+    }
+    ~ .#{$prefix}--form-requirement {
+      max-height: rem(200px);
+    }
+  }
+
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;

diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss
@@ -86,4 +86,14 @@
       color: transparent;
     }
   }
+
+  // Skeleton State
+  #{$prefix}--text-area.#{$prefix}--skeleton {
+    @include skeleton;
+    height: rem(100px);
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
 }
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
@@ -93,4 +93,14 @@
       color: transparent;
     }
   }
+
+  // Skeleton State
+  .#{$prefix}--text-input.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
 }
diff --git a/src/globals/scss/_typography.scss b/src/globals/scss/_typography.scss
@@ -72,16 +72,16 @@ $typescale-map: (
 }
 
 $font-size-map: (
-  '76': 4.75rem,
-  '54': 3.375rem,
-  '36': 2.25rem,
-  '28': 1.75rem,
-  '20': 1.25rem,
-  '18': 1.125rem,
-  '16': 1rem,
-  '14': 0.875rem,
-  '12': 0.75rem,
-  '11': 0.6875rem
+  '76' : 4.75rem,
+  '54' : 3.375rem,
+  '36' : 2.25rem,
+  '28' : 1.75rem,
+  '20' : 1.25rem,
+  '18' : 1.125rem,
+  '16' : 1rem,
+  '14' : 0.875rem,
+  '12' : 0.75rem,
+  '11' : 0.6875rem
 );
 
 @mixin font-size($size) {