V9 merge 05212018 (#801)

* 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

* 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(tile): add check to make sure element exists (#786)

* feat(data-table-v2): add inline edit styles for cell (#780)

* fix(table): Missing border in firefox (#787)

* fix(overflow-menu): added different styles for focus and hover (#788)

* fix(overflow-menu): added different styles for focus and hover

* fix(overflow-menu): fixed danger hover/focus

* fix(data-table-v2): remove left positioning from sort icon (#789)

* fix(tile): check if is--expanded is set when tile component is loaded (#791)

* fix(danger-button): Add correct hover color for icon (#794)

* fix(table): removes selected class from row on cancel click (#793)

* chore(git): update gitignore for *.log files (#798)

* fix(button): bring back primary danger button

src/components/button/button.config.js

@@ -72,6 +72,7 @@ module.exports = {
       notes: 'Danger buttons should be used for a negative action (such as Delete) on the page.',
       context: {
         variant: 'danger',
+        danger: true,
       },
     },
     {
@@ -84,6 +85,29 @@ module.exports = {
       `,
       context: {
         variant: 'danger',
+        danger: true,
+        small: true,
+      },
+    },
+    {
+      name: 'danger--primary',
+      label: 'Primary Danger Buttons',
+      context: {
+        variant: 'danger--primary',
+        danger: true,
+      },
+    },
+    {
+      name: 'danger--primary--small',
+      label: 'Primary Danger Buttons (Small)',
+      notes: `
+        Small buttons may be used when there is not enough space for a
+        regular sized button. This issue is most found in tables. Small button should have three words
+        or less.
+      `,
+      context: {
+        variant: 'danger--primary',
+        danger: true,
         small: true,
       },
     },

src/components/button/button.hbs

@@ -1,6 +1,6 @@
-<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#is variant "danger"}}aria-label="danger"{{/is}} type="button">Button</button>
-<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#is variant "danger"}}aria-label="danger"{{/is}} type="button" disabled>Button</button>
-<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#is variant "danger"}}aria-label="danger"{{/is}} type="button">
+<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger"{{/if}} type="button">Button</button>
+<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger"{{/if}} type="button" disabled>Button</button>
+<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger"{{/if}} type="button">
   With icon
   <svg class="bx--btn__icon" 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-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>

src/components/dropdown/dropdown.config.js

@@ -31,5 +31,12 @@ module.exports = {
         light: true,
       },
     },
+    {
+      name: 'inline',
+      label: 'Inline',
+      context: {
+        inline: true,
+      },
+    },
   ],
 };

src/components/dropdown/dropdown.hbs

@@ -1,8 +1,19 @@
-<ul data-dropdown data-value class="bx--dropdown{{#if up}} bx--dropdown--up{{/if}}{{#if light}} bx--dropdown--light{{/if}}" tabindex="0">
-  <li class="bx--dropdown-text">Dropdown label</li>
-  <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-    <path d="M10 0L5 5 0 0z"></path>
-  </svg>
+<ul data-dropdown{{#if inline}} data-dropdown-type="inline"{{/if}} data-value class="bx--dropdown{{#if up}} bx--dropdown--up{{/if}}{{#if light}} bx--dropdown--light{{/if}}{{#if inline}} bx--dropdown--inline{{/if}}" tabindex="0">
+  <li class="bx--dropdown-text">
+    {{#unless inline}}
+      Dropdown label
+    {{else}}
+      <span class="bx--dropdown-text__inner">Inline Dropdown label</span>
+      <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    {{/unless}}
+  </li>
+  {{#unless inline}}
+    <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <path d="M10 0L5 5 0 0z"></path>
+    </svg>
+  {{/unless}}
   <li>
     <ul class="bx--dropdown-list">
       <li data-option data-value="all" class="bx--dropdown-item">

src/components/overflow-menu/_overflow-menu.scss

@@ -105,6 +105,7 @@
       outline: 1px solid transparent;
       text-decoration: underline;
       background-color: $hover-row;
+      text-decoration: underline;
     }
 
     .#{$prefix}--overflow-menu-options__option--danger & {
@@ -122,6 +123,8 @@
   .#{$prefix}--overflow-menu-options__option:hover .#{$prefix}--overflow-menu-options__btn {
     text-decoration: none;
     background-color: $hover-row;
+    color: $inverse-01;
+    text-decoration: none;
   }
 
   .#{$prefix}--overflow-menu-options__option--danger {

src/components/text-area/_text-area.scss

@@ -96,4 +96,14 @@
       color: transparent;
     }
   }
+
+  // Skeleton State
+  #{$prefix}--text-area.#{$prefix}--skeleton {
+    @include skeleton;
+    height: rem(100px);
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
 }

src/components/text-input/_text-input.scss

@@ -103,4 +103,14 @@
       color: transparent;
     }
   }
+
+  // Skeleton State
+  .#{$prefix}--text-input.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
 }