From 8b71974077163026b765092b2132ad00102ede7e Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 24 May 2018 21:11:40 +0900
Subject: [PATCH] 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        | 24 +++++++++++++++++
 src/components/button/button.hbs              |  6 ++---
 src/components/dropdown/dropdown--inline.html | 27 -------------------
 src/components/dropdown/dropdown.config.js    |  7 +++++
 src/components/dropdown/dropdown.hbs          | 21 +++++++++++----
 .../overflow-menu/_overflow-menu.scss         |  3 +++
 src/components/text-area/_text-area.scss      | 10 +++++++
 src/components/text-input/_text-input.scss    | 10 +++++++
 8 files changed, 73 insertions(+), 35 deletions(-)
 delete mode 100644 src/components/dropdown/dropdown--inline.html

diff --git a/src/components/button/button.config.js b/src/components/button/button.config.js
index 85e5ae277245..998653c74eec 100644
--- a/src/components/button/button.config.js
+++ b/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,
       },
     },
diff --git a/src/components/button/button.hbs b/src/components/button/button.hbs
index b26bc5aa728f..e2631a6adea8 100644
--- a/src/components/button/button.hbs
+++ b/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>
diff --git a/src/components/dropdown/dropdown--inline.html b/src/components/dropdown/dropdown--inline.html
deleted file mode 100644
index f8066f33fc9a..000000000000
--- a/src/components/dropdown/dropdown--inline.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<ul data-dropdown data-dropdown-type="inline" data-value class="bx--dropdown bx--dropdown--inline" tabindex="0">
-  <li class="bx--dropdown-text">
-    <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>
-  </li>
-  <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)" 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)" 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)" 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)" 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)" tabindex="-1">Option 5</a>
-      </li>
-    </ul>
-  </li>
-</ul>
diff --git a/src/components/dropdown/dropdown.config.js b/src/components/dropdown/dropdown.config.js
index 1c5e2e5fb753..d5c38e8d8f7b 100644
--- a/src/components/dropdown/dropdown.config.js
+++ b/src/components/dropdown/dropdown.config.js
@@ -31,5 +31,12 @@ module.exports = {
         light: true,
       },
     },
+    {
+      name: 'inline',
+      label: 'Inline',
+      context: {
+        inline: true,
+      },
+    },
   ],
 };
diff --git a/src/components/dropdown/dropdown.hbs b/src/components/dropdown/dropdown.hbs
index 866604497c4a..144d6ce3eba2 100644
--- a/src/components/dropdown/dropdown.hbs
+++ b/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">
diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss
index 01de8e8b56c2..2c84c52bc695 100644
--- a/src/components/overflow-menu/_overflow-menu.scss
+++ b/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 {
diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss
index 4683f0b66dcb..8c0abf44e462 100644
--- a/src/components/text-area/_text-area.scss
+++ b/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;
+    }
+  }
 }
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
index b2a762b3fe6a..2b1a713f9a8f 100644
--- a/src/components/text-input/_text-input.scss
+++ b/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;
+    }
+  }
 }