V9 merge 05162018 (#773)

* fix(data-table-v2): fix the icon that becomes small when column header wraps, resolves #720 (#742) * fix(tooltip): Firefox overflowing text when you have a long enough string without spaces (#737) * 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 * docs(components): add component model explainer (#739) * fix(grid): center grid at largest breakpoint (#747) * 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(select): added disabled styling to option in select (#751) * fix(select): added disabled styling to select item * fix(select): removed disabled * fix(select): added cursor not allowed * fix(dropdown): added tabindex logic to dropdown (#749) * fix(input): remove red focus ring when input marked as required firefox (#750) * fix(multi-select): fixed width and hover color (#752) * 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(skeleton-states): Add helper-mixins import to components using skeleton states (#755) * fix(data-table): update data-table to use the new search component (#754) * fix(structured-list): Update header alignment to bottom to match designs (#753) * feat(truncation): add truncation classes (#757) * feat(truncation): add truncation classes * fix(truncation): update truncation classes to be more semantic * fix(truncation): use prefix variable * fix(structured-list): fixed column header text size (#766) * fix(structured-list): fixed column header text size * chore(structured-list): deleted extra file * fix(forms): Add helper-mixins import (#767) * fix(helper-classes): import vars file (#768)
carbon-design-system · May 30, 2018 · dad879b · dad879b
1 parent ae7ba9a
commit dad879b
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 2 deletions.
diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss
@@ -229,4 +229,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/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
@@ -151,4 +151,15 @@
   .#{$prefix}--number--light input[type='number'] {
     background: $field-02;
   }
+
+  // Skeleton State
+  .#{$prefix}--number.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+    height: 2.5rem;
+
+    input[type='number'] {
+      display: none;
+    }
+  }
 }
diff --git a/src/components/order-summary/order-summary.hbs b/src/components/order-summary/order-summary.hbs
@@ -12,13 +12,13 @@
             <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">USD</a>
           </li>
           <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-            <a class="bx--dropdown-link" title="NOKNOKNOKNOKNOK" ref="javascript:void(0)" tabindex="-1">NOKNOKNOKNOKNOK</a>
+            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">NOK</a>
           </li>
           <li data-option data-value="staging" class="bx--dropdown-item">
             <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">GBP</a>
           </li>
           <li data-option data-value="dea" class="bx--dropdown-item">
-            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">WWW</a>
+            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">EUR</a>
           </li>
         </ul>
       </li>

diff --git a/src/components/skeleton/skeleton.hbs b/src/components/skeleton/skeleton.hbs
@@ -0,0 +1,124 @@
+
+<p>Skeleton Text</p>
+<div class="bx--skeleton__text"></div>
+<div class="bx--skeleton__text bx--skeleton__heading"></div>
+
+<p>Button</p>
+<button class="bx--skeleton bx--btn" type="button"></button>
+&nbsp;<a class="bx--skeleton bx--btn" href="#" role="button"></a>
+&nbsp;<button class="bx--skeleton bx--btn bx--btn--sm" type="button"></button>
+
+<p>Label</p>
+<label class="bx--label bx--skeleton"></label>
+
+<p>Breadcrumb</p>
+<div class="bx--breadcrumb bx--skeleton">
+  <div class="bx--breadcrumb-item">
+    <a href="/#" class="bx--link">&nbsp;</a>
+  </div>
+  <div class="bx--breadcrumb-item">
+    <a href="/#" class="bx--link">&nbsp;</a>
+  </div>
+  <div class="bx--breadcrumb-item">
+    <a href="/#" class="bx--link">&nbsp;</a>
+  </div>
+</div>
+
+<p>Dropdown</p>
+<div class="bx--skeleton bx--dropdown-v2 bx--list-box bx--form-item">
+  <div role="button" class="bx--list-box__field">
+    <span class="bx--list-box__label"></span>
+  </div>
+</div>
+
+<p>Progress Indicator</p>
+<ul class="bx--progress bx--skeleton">
+    <li class="bx--progress-step bx--progress-step--incomplete">
+        <svg>
+            <g>
+                <circle cx="12" cy="12" r="12"></circle>
+            </g>
+        </svg>
+        <p class="bx--progress-label"></p>
+        <span class="bx--progress-line"></span>
+    </li>
+    <li class="bx--progress-step bx--progress-step--incomplete">
+        <svg>
+            <g>
+                <circle cx="12" cy="12" r="12"></circle>
+            </g>
+        </svg>
+        <p class="bx--progress-label"></p>
+        <span class="bx--progress-line"></span>
+    </li>
+    <li class="bx--progress-step bx--progress-step--incomplete">
+        <svg>
+            <g>
+                <circle cx="12" cy="12" r="12"></circle>
+            </g>
+        </svg>
+        <p class="bx--progress-label"></p>
+        <span class="bx--progress-line"></span>
+    </li>
+    <li class="bx--progress-step bx--progress-step--incomplete">
+        <svg>
+            <g>
+                <circle cx="12" cy="12" r="12"></circle>
+            </g>
+        </svg>
+        <p class="bx--progress-label"></p>
+        <span class="bx--progress-line"></span>
+    </li>
+</ul>
+
+<p>Toggle</p>
+<div class="bx--form-item">
+  <input type="checkbox" class="bx--toggle bx--skeleton" value="on">
+  <label class="bx--toggle__label bx--skeleton">
+    <span class="bx--toggle__text--left"></span><span class="bx--toggle__appearance"></span><span class="bx--toggle__text--right"></span>
+  </label>
+</div>
+
+<p>Small Toggle</p>
+<div class="bx--form-item">
+  <input type="checkbox" class="bx--toggle bx--toggle--small bx--skeleton" value="on">
+  <label class="bx--toggle__label bx--skeleton"><span class="bx--toggle__appearance"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"></path></svg></span>
+  </label>
+</div>
+
+<p>Slider</p>
+<div class="bx--form-item">
+  <label class="bx--label bx--skeleton"></label>
+  <div class="bx--slider-container bx--skeleton"><span class="bx--slider__range-label"></span>
+    <div class="bx--slider">
+      <div class="bx--slider__track"></div>
+      <div class="bx--slider__filled-track"></div>
+      <div class="bx--slider__thumb"></div>
+    </div><span class="bx--slider__range-label"></span>
+  </div>
+</div>
+
+<p>Tag</p>
+<span class="bx--tag bx--skeleton"></span>
+
+<p>Tabs</p>
+<nav class="bx--tabs bx--skeleton">
+  <div class="bx--tabs-trigger"><a href="javascript:void(0)" class="bx--tabs-trigger-text">&nbsp;</a>
+    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <path d="M10 0L5 5 0 0z"></path>
+    </svg>
+  </div>
+  <ul class="bx--tabs__nav bx--tabs__nav--hidden">
+    <li class="bx--tabs__nav-item bx--tabs__nav-item--selected"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
+    </li>
+    <li class="bx--tabs__nav-item"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
+    </li>
+    <li class="bx--tabs__nav-item"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
+    </li>
+    <li class="bx--tabs__nav-item"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
+    </li>
+  </ul>
+</nav>
+
+<p>Icon</p>
+<div class="bx--icon--skeleton"></div>
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
@@ -83,4 +83,14 @@
       color: transparent;
     }
   }
+
+  // Skeleton State
+  .#{$prefix}--text-input.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
 }