carbon-design-system · alisonjoseph · May 17, 2018 · May 4, 2018 · May 4, 2018 · May 4, 2018
diff --git a/demo/js/components/PageHeader/page-header.scss b/demo/js/components/PageHeader/page-header.scss
@@ -34,11 +34,11 @@
 
 .page-header__title {
   @include typescale('mega');
+  @include letter-spacing;
   color: $text-01;
   font-weight: 300;
   margin: -1.15rem 0 0 -3px;
   line-height: 1.25;
-  letter-spacing: 0;
   padding: 0;
   transition: $transition--base $bx--standard-easing;
 

diff --git a/demo/scss/_markdown-page.scss b/demo/scss/_markdown-page.scss
@@ -58,11 +58,11 @@
     margin-bottom: 4rem;
 
     strong {
+      @include letter-spacing;
       font-size: 1.125rem;
       line-height: 1.5;
       font-weight: 600;
       word-wrap: break-word;
-      letter-spacing: 0;
     }
   }
 
@@ -187,7 +187,7 @@
           line-height: 1.25;
 
           strong {
-            letter-spacing: 0;
+            @include letter-spacing;
           }
 
           &:first-child {
@@ -216,14 +216,7 @@
     }
   }
 
-  main[data-page='style-overview-typography']
-    &
-    hr
-    + hr
-    + table
-    tbody
-    tr
-    td:nth-child(2) {
+  main[data-page='style-overview-typography'] & hr + hr + table tbody tr td:nth-child(2) {
     @media all and (max-width: 600px) {
       text-align: left;
       font-size: 3rem;
@@ -456,12 +449,12 @@
       margin-bottom: 3rem;
 
       strong {
+        @include letter-spacing;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 2;
         color: $color__white;
-        letter-spacing: 0;
         font-size: 1.625rem;
         top: 2.2rem;
         left: 1.625rem;

diff --git a/demo/scss/_page.scss b/demo/scss/_page.scss
@@ -61,14 +61,14 @@ td {
 
   .page__desc {
     @include font-smoothing;
+    @include letter-spacing;
     max-width: 38rem;
     color: $text-01;
     word-wrap: break-word;
     font-size: 1.125rem;
     line-height: 1.5;
     font-weight: 600;
     padding-bottom: 1rem;
-    letter-spacing: 0;
 
     span {
       color: $brand-01;
@@ -95,9 +95,9 @@ td {
 
     h1 {
       @include typescale('mega');
+      @include letter-spacing;
       font-weight: 300;
       line-height: 1.25;
-      letter-spacing: 0px;
 
       &#helvetica-neue-light {
         font-weight: 300;
@@ -170,10 +170,10 @@ td {
 
     h3 {
       @include typescale('delta');
+      @include letter-spacing;
       color: $brand-01;
       padding: 4rem 0 1rem;
       font-weight: 600;
-      letter-spacing: 0;
 
       & + h4 {
         padding-top: 0;

diff --git a/docs/contributing.md b/docs/contributing.md
@@ -210,7 +210,7 @@ When you're at a good stopping place and you're ready for feedback from other co
 > - `<scope>` The scope could be anything specifying place of the commit change or the thing(s) that changed.
 >
 > __Commit message format:__
-> ```
+```
 <type>(<scope>): <subject>
 <BLANK LINE>
 <body>

diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -82,22 +82,52 @@
       @include typescale('zeta');
     }
   }
-}
 
-.#{$prefix}--accordion__item--active {
-  overflow: visible;
+  .#{$prefix}--accordion__item--active {
+    overflow: visible;
 
-  .#{$prefix}--accordion__content {
-    padding-top: $spacing-md;
-    padding-bottom: $spacing-lg;
-    height: auto;
-    visibility: visible;
-    opacity: 1;
-    transition: all $transition--expansion $carbon--ease-in;
+    .#{$prefix}--accordion__content {
+      padding-top: $spacing-md;
+      padding-bottom: $spacing-lg;
+      height: auto;
+      visibility: visible;
+      opacity: 1;
+      transition: all $transition--expansion $carbon--ease-in;
+    }
+
+    .#{$prefix}--accordion__arrow {
+      transform: rotate(90deg);
+      fill: $brand-01;
+    }
   }
 
-  .#{$prefix}--accordion__arrow {
-    transform: rotate(90deg);
-    fill: $brand-01;
+  // Skeleton state
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading,
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button {
+    cursor: default;
+  }
+
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow {
+    pointer-events: none;
+    fill: $ui-05;
+    cursor: default;
+
+    &:hover,
+    &:focus,
+    &:active {
+      border: none;
+      outline: none;
+      cursor: default;
+    }
+  }
+
+  .#{$prefix}--skeleton .#{$prefix}--accordion__heading:focus .#{$prefix}--accordion__arrow {
+    border: none;
+    outline: none;
+    cursor: default;
+  }
+
+  .#{$prefix}--accordion__title.#{$prefix}--skeleton__text {
+    margin-bottom: 0;
   }
 }
diff --git a/src/components/breadcrumb/_breadcrumb.scss b/src/components/breadcrumb/_breadcrumb.scss
@@ -3,6 +3,7 @@
 @import '../../globals/scss/mixins';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/spacing';
+@import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
 @import '../../globals/scss/css--typography';
 @import '../link/link';
@@ -63,4 +64,11 @@
       }
     }
   }
+
+  // Skeleton State
+  .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
+    @include skeleton;
+    width: rem(100px);
+    height: 1rem;
+  }
 }
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -2,6 +2,7 @@
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/spacing';
+@import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
 @import 'mixins';
 @import '../../globals/scss/css--reset';
@@ -135,13 +136,19 @@
   }
 
   .#{$prefix}--btn--sm {
+    @include letter-spacing;
     height: 2rem;
     padding: $button-padding-sm;
-    letter-spacing: 0;
   }
 
   .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary,
   .#{$prefix}--btn--tertiary + .#{$prefix}--btn--danger--primary {
     margin-left: $spacing-md;
   }
+
+  // Skeleton State
+  .#{$prefix}--btn.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(150px);
+  }
 }
diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss
@@ -160,4 +160,16 @@
       }
     }
   }
+
+  // Skeleton state
+  .#{$prefix}--checkbox-label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(100px);
+    height: rem(18px);
+
+    &:after,
+    &:before {
+      border: none;
+    }
+  }
 }
diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss
@@ -2,6 +2,7 @@
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/spacing';
+@import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/css--reset';
@@ -208,4 +209,24 @@
   .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
     right: auto;
   }
+
+  // Skeleton State
+  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
+    height: rem(98px);
+  }
+
+  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
+    height: rem(56px);
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
+    height: 100%;
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton code {
+    @include skeleton;
+    width: 100%;
+    height: 1rem;
+    display: block;
+  }
 }
diff --git a/src/components/data-table-v2/README.md b/src/components/data-table-v2/README.md
@@ -69,7 +69,7 @@ The update to tables splits out the `scss` files into multiple partial files wit
 ### FAQ
 
 **How do I sort the tables**
-The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action `here`.
+The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action [in the React Storybook](http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20sorting&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel).
 
 **How do I use the expandable rows**
 If you would like to programmatically expand table rows, you can add the `bx--expandable-row-v2` to the `selectorParentRows` elements.

diff --git a/src/components/data-table-v2/_data-table-v2-action.scss b/src/components/data-table-v2/_data-table-v2-action.scss
@@ -16,12 +16,6 @@
         outline: 0;
       }
     }
-
-    .#{$prefix}--search-close {
-      height: 10px;
-      width: 10px;
-      top: calc(50% - 5px);
-    }
   }
 
   .#{$prefix}--toolbar-content {

diff --git a/src/components/data-table-v2/_data-table-v2-skeleton.scss b/src/components/data-table-v2/_data-table-v2-skeleton.scss
@@ -0,0 +1,45 @@
+@import '../../globals/scss/import-once';
+
+@include exports('data-table-v2-skeleton') {
+  .#{$prefix}--data-table-v2.#{$prefix}--skeleton {
+    th {
+      border-bottom: 1px solid $brand-01;
+
+      &:nth-child(3n + 1) {
+        width: 10%;
+      }
+
+      &:nth-child(3n + 2) {
+        width: 30%;
+      }
+
+      &:nth-child(3n + 3) {
+        width: 15%;
+      }
+    }
+
+    th span,
+    td span {
+      @include skeleton;
+      width: 75%;
+      height: 1rem;
+      display: block;
+    }
+
+    tr:hover {
+      td {
+        border-color: $ui-04;
+        background: transparent;
+
+        &:first-of-type,
+        &:last-of-type {
+          border-color: $ui-04;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--data-table-v2.#{$prefix}--skeleton .#{$prefix}--table-sort-v2 {
+    pointer-events: none;
+  }
+}
diff --git a/src/components/data-table-v2/_data-table-v2-sort.scss b/src/components/data-table-v2/_data-table-v2-sort.scss
@@ -54,6 +54,6 @@
     height: rem(9px);
     padding: $spacing-3xs;
     width: auto;
-    max-width: 14px;
+    min-width: 14px;
   }
 }
diff --git a/src/components/data-table-v2/_data-table-v2.scss b/src/components/data-table-v2/_data-table-v2.scss
@@ -7,3 +7,4 @@
 @import 'data-table-v2-expandable';
 @import 'data-table-v2-sort';
 @import 'data-table-v2-inline-edit';
+@import 'data-table-v2-skeleton';
diff --git a/src/components/data-table-v2/data-table-v2--expandable.hbs b/src/components/data-table-v2/data-table-v2--expandable.hbs
@@ -7,11 +7,14 @@
           <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
           <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
         </svg>
-        <label id="search-input-label-10" class="bx--label" for="search__input-10">Search</label>
-        <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Search" aria-labelledby="search-input-label-10">
-        <svg class="bx--search-close bx--search-close--hidden" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-          <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-        </svg>
+        <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
+        <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
+        <button class="bx--search-close bx--search-close--hidden" title="Clear search
+        input" aria-label="Clear search input">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+          </svg>
+        </button>
       </div>
     </div>
   </div>

diff --git a/src/components/data-table-v2/data-table-v2--pagination.hbs b/src/components/data-table-v2/data-table-v2--pagination.hbs
@@ -36,11 +36,14 @@
           <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
           <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
         </svg>
-        <label id="search-input-label-10" class="bx--label" for="search__input-10">Filter table</label>
-        <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Filter table" aria-labelledby="search-input-label-10">
-        <svg class="bx--search-close bx--search-close--hidden" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-          <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-        </svg>
+        <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
+        <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
+        <button class="bx--search-close bx--search-close--hidden" title="Clear search
+        input" aria-label="Clear search input">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+          </svg>
+        </button>
       </div>
     </div>