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 · May 18, 2018 · 23be17d · 23be17d
1 parent 994569c
commit 23be17d
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 21 deletions.
diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
@@ -68,7 +68,7 @@
   }
 
   .#{$prefix}--dropdown[data-value=''] .#{$prefix}--dropdown-text {
-    color: $text-02;
+    color: $text-01;
   }
 
   .#{$prefix}--dropdown-text {

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
@@ -87,4 +87,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/_css--font-face.scss b/src/globals/scss/_css--font-face.scss
@@ -57,9 +57,11 @@ $font-path: 'https://unpkg.com/carbon-components@latest/src/globals/fonts' !defa
 }
 
 @include exports('css--font-face') {
-  @if global-variable-exists('css--plex') and $css--plex == true {
-    @include plex-font-face;
-  } @else {
-    @include helvetica-font-face;
+  @if not global-variable-exists('css--font-face') or $css--font-face == true {
+    @if global-variable-exists('css--plex') and $css--plex == true {
+      @include plex-font-face;
+    } @else {
+      @include helvetica-font-face;
+    }
   }
 }
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) {

diff --git a/src/globals/scss/styles.scss b/src/globals/scss/styles.scss
@@ -2,7 +2,7 @@
 // 🌍 Global
 //-------------------------
 
-$css--font-face: false !default;
+$css--font-face: true !default;
 $css--helpers: true !default;
 $css--body: true !default;
 $css--use-experimental-grid: false !default;