From d231f5e90177bfa8608f098b1014a7142e4f16a1 Mon Sep 17 00:00:00 2001
From: Mari Johannessen <mari.l.johannessen@gmail.com>
Date: Fri, 4 May 2018 11:33:29 -0500
Subject: [PATCH 01/12] 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
---
 src/components/dropdown/dropdown--inline.html | 27 -------------------
 src/components/dropdown/dropdown.config.js    |  7 +++++
 src/components/dropdown/dropdown.hbs          | 21 +++++++++++----
 3 files changed, 23 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/dropdown/dropdown--inline.html

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">

From d3f6bcb6b265cf37fcbec3f9d8653da9a397e572 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Mon, 7 May 2018 11:20:22 -0500
Subject: [PATCH 02/12] 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
---
 src/components/text-area/_text-area.scss   | 10 ++++++++++
 src/components/text-input/_text-input.scss | 10 ++++++++++
 2 files changed, 20 insertions(+)

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 8d3f9deb3977..cf90c9a62629 100644
--- a/src/components/text-input/_text-input.scss
+++ b/src/components/text-input/_text-input.scss
@@ -97,4 +97,14 @@
       color: transparent;
     }
   }
+
+  // Skeleton State
+  .#{$prefix}--text-input.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
 }

From 5a6d8d74b132faae22b2098d164f37f168f150c2 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Fri, 18 May 2018 10:33:18 -0500
Subject: [PATCH 03/12] fix(tile): add check to make sure element exists (#786)

---
 src/components/tile/tile.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/tile/tile.js b/src/components/tile/tile.js
index 07470b2a5a27..b999babd28cf 100644
--- a/src/components/tile/tile.js
+++ b/src/components/tile/tile.js
@@ -53,10 +53,12 @@ class Tile extends mixin(createComponent, initComponentBySearch) {
     });
     this.element.addEventListener('keydown', evt => {
       const input = this.element.querySelector(this.options.selectorTileInput);
-      if (evt.which === 13 || evt.which === 32) {
-        if (!isExpandable) {
-          this.element.classList.toggle(tileClass);
-          input.checked = !input.checked;
+      if (input) {
+        if (evt.which === 13 || evt.which === 32) {
+          if (!isExpandable) {
+            this.element.classList.toggle(tileClass);
+            input.checked = !input.checked;
+          }
         }
       }
     });

From 5dcd8589abc2cecc0692a1ab46cb50ff9a01fa0b Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Fri, 18 May 2018 11:29:57 -0500
Subject: [PATCH 04/12] feat(data-table-v2): add inline edit styles for cell
 (#780)

---
 .../_data-table-v2-inline-edit-cell.scss      | 355 ++++++++++++++++++
 .../data-table-v2--inline-edit.html           |  89 +++++
 2 files changed, 444 insertions(+)
 create mode 100644 src/components/data-table-v2/_data-table-v2-inline-edit-cell.scss
 create mode 100644 src/components/data-table-v2/data-table-v2--inline-edit.html

diff --git a/src/components/data-table-v2/_data-table-v2-inline-edit-cell.scss b/src/components/data-table-v2/_data-table-v2-inline-edit-cell.scss
new file mode 100644
index 000000000000..fc467717827c
--- /dev/null
+++ b/src/components/data-table-v2/_data-table-v2-inline-edit-cell.scss
@@ -0,0 +1,355 @@
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/import-once';
+@import '../../globals/scss/layer';
+@import '../../globals/scss/layout';
+
+@mixin assistive-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  visibility: visible;
+  white-space: nowrap;
+}
+
+@include exports('data-table-v2-inline-edit-cell') {
+  // Spacing for cells that are the first in their row
+  $spacing--columns--first: 1.5rem;
+  // Spacing before columns in cell
+  $spacing--columns--before: 0.75rem;
+  // Spacing for activity areas in a cell, namely status and actions
+  $spacing--cell--activity: 3.5rem;
+  // Offset used on input nodes to offer space to activity indicators such that
+  // the input doesn't overlap with the status
+  $spacing--cell--status: 2rem;
+
+  //----------------------------------------------------------------------------
+  // Table
+  //----------------------------------------------------------------------------
+
+  // Reset hover styles while editing
+  .#{$prefix}--data-table--editing tr:hover td {
+    background-color: inherit;
+    border-top: 1px solid $ui-04;
+    border-bottom: 1px solid $ui-04;
+  }
+
+  .#{$prefix}--data-table--editing tr:hover td:first-of-type {
+    border-left: 1px solid $ui-04;
+  }
+
+  .#{$prefix}--data-table--editing tr:hover td:last-of-type {
+    border-right: 1px solid $ui-04;
+  }
+
+  //----------------------------------------------------------------------------
+  // Cell Edit
+  //----------------------------------------------------------------------------
+
+  // Buffer is created on the right-hand side so that status indicators have the
+  // appropriate space to display.
+  .#{$prefix}--data-table-cell--editable {
+    position: relative;
+    padding-right: $spacing--cell--activity;
+  }
+
+  td.#{$prefix}--data-table-cell--editable:last-of-type {
+    // Reset the styles inherited from data-table-v2 for padding-right styles
+    // but adding our manual offset plus the spacing used before columns to get
+    // a similar look for when an editable cell is in the middle of a table.
+    padding-right: #{$spacing--cell--activity + $spacing--columns--before};
+  }
+
+  // Minor offset for the last cell in a row so that the action bar does not
+  // touch the edge of the cell
+  td.#{$prefix}--data-table-cell--editable:last-of-type > .#{$prefix}--data-table-cell__activity {
+    margin-right: $spacing--columns--before;
+  }
+
+  //----------------------------------------------------------------------------
+  // Cell Edit - Content
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table-cell__content {
+    position: relative;
+    z-index: 1000;
+    // Set line-height to match that within inputs
+    line-height: normal;
+  }
+
+  //----------------------------------------------------------------------------
+  // Cell Edit - Activity
+  //----------------------------------------------------------------------------
+
+  // Styles used for getting 100% width and height on an descendant of a table
+  // cell. Display is used for alignment of most items to the end of the cell
+  .#{$prefix}--data-table-cell__activity {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 1rem;
+    bottom: 0;
+    left: 0;
+  }
+
+  //----------------------------------------------------------------------------
+  // Cell Edit - Trigger
+  //----------------------------------------------------------------------------
+
+  .#{$prefix}--data-table-cell__edit {
+    @include button-reset(false);
+    opacity: 0;
+  }
+
+  .#{$prefix}--data-table-cell__edit:focus,
+  .#{$prefix}--data-table-cell--editable:hover .#{$prefix}--data-table-cell__edit {
+    opacity: 1;
+  }
+
+  .#{$prefix}--data-table-cell__icon--edit {
+    fill: $ui-05;
+  }
+
+  .#{$prefix}--data-table-cell__edit:active > .#{$prefix}--data-table-cell__icon--edit {
+    fill: $brand-01;
+  }
+
+  .#{$prefix}--data-table-cell__edit:focus {
+    outline: 1px solid $brand-01;
+    outline-offset: 2px;
+  }
+
+  //----------------------------------------------------------------------------
+  // Cell Edit - Fields // Inputs
+  //----------------------------------------------------------------------------
+
+  .#{$prefix}--data-table__edit-field {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+  }
+
+  .#{$prefix}--data-table__edit-field > label.#{$prefix}--label {
+    @include assistive-text();
+  }
+
+  // Spacing resets on inputs
+
+  // All inputs should span as much height and width as possible, but should
+  // still buffer the right hand side with some padding to allow space for
+  // status indicators to render without clipping the input content
+  .#{$prefix}--data-table__edit-field > input {
+    min-height: 100%;
+    min-width: 100%;
+    padding: 0 $spacing--cell--status 0 0;
+  }
+
+  // Set the default padding on the left-hand side of the input to match what is
+  // given by the default table class. Visually this makes it look like the
+  // content is aligned with the other cells in the table.
+  td.#{$prefix}--data-table-cell--editable input {
+    padding-left: $spacing--columns--before;
+  }
+
+  // Substitute the left-hand padding for the padding specified on the first td
+  // of each row
+  td.#{$prefix}--data-table-cell--editable:first-of-type input {
+    padding-left: $spacing--columns--first;
+  }
+
+  //----------------------------------------------------------------------------
+  // Cell Edit - Actions
+  //----------------------------------------------------------------------------
+
+  // Spacing that should exist around, and in-between, elements in the action
+  // bar
+  $spacing--cell-actions: 0.5rem;
+  $size--edit-actions--height: 3rem;
+
+  .#{$prefix}--data-table__edit-actions {
+    @include layer('overlay');
+
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    top: $size--edit-actions--height;
+    right: 0;
+    bottom: 0;
+    height: $size--edit-actions--height;
+    background-color: $inverse-01;
+    padding: $spacing--cell-actions;
+    z-index: z('overlay');
+  }
+
+  // Undo default margin-left from btn classes
+  .#{$prefix}--data-table__edit-actions .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary {
+    margin-left: $spacing--cell-actions;
+  }
+
+  //----------------------------------------------------------------------------
+  // Cell Edit - Status
+  //----------------------------------------------------------------------------
+
+  // Containing node
+  .#{$prefix}--data-table__edit-status {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    // Value should be 0.5rem, but doing so will cause the loading box to clip
+    // the bounding box of the last cells in a row. This will cause the
+    // overflow-x scrollbar to behave erratically as it constantly shifts to
+    // adjust to the new width of the table
+    right: 1rem;
+    bottom: 0;
+    left: 0;
+  }
+
+  // Status - Saving -----------------------------------------------------------
+
+  .#{$prefix}--data-table-cell--saving {
+    cursor: not-allowed;
+  }
+
+  // Cell should go to 25% opacity when saving
+  .#{$prefix}--data-table-cell--saving input {
+    background-color: inherit;
+    opacity: 0.25;
+  }
+
+  // Manually center the loading indicator given the offset of its bounding box
+  .#{$prefix}--data-table-cell--saving .#{$prefix}--loading {
+    position: relative;
+    left: rem(7px);
+  }
+
+  // Status - Success ----------------------------------------------------------
+  .#{$prefix}--data-table__icon--success {
+    fill: $support-02;
+  }
+
+  // Status - Error ------------------------------------------------------------
+
+  .#{$prefix}--data-table__status--error {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    fill: $support-01;
+    width: 100%;
+    height: 100%;
+  }
+
+  .#{$prefix}--data-table__edit-field--error {
+    border-bottom: 2px solid $support-01;
+  }
+
+  .#{$prefix}--data-table__status--error {
+    position: relative;
+  }
+
+  .#{$prefix}--data-table__error-text {
+    @include layer('overlay');
+
+    position: absolute;
+    top: rem(-1px);
+    right: -1rem;
+    color: $support-01;
+    // TODO: sync with caption sizes
+    font-size: rem(12px);
+    background-color: $inverse-01;
+    padding: 1rem;
+    transform: translateY(-100%);
+    border: 1px solid $ui-03;
+    z-index: 1000;
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
+    opacity: 0;
+  }
+
+  .#{$prefix}--data-table__error-text::after {
+    content: '';
+    position: absolute;
+    // Manually offset and center triangle
+    right: 1rem;
+    // TODO: shift down half of height
+    bottom: -7px;
+    width: rem(10px);
+    height: rem(10px);
+    background-color: $inverse-01;
+    border: 1px solid $ui-03;
+    border-top: 1px solid transparent;
+    border-left: 1px solid transparent;
+    transform: rotate(45deg);
+    z-index: 10;
+    opacity: 0;
+  }
+
+  .#{$prefix}--data-table__icon--error {
+    z-index: 1000;
+  }
+
+  .#{$prefix}--data-table__status--error {
+    // Specify outline on child SVG node instead
+    outline: none;
+  }
+
+  .#{$prefix}--data-table__status--error:focus .#{$prefix}--data-table__error-text {
+    box-shadow: 0 0 0 1px $brand-01;
+  }
+
+  .#{$prefix}--data-table__status--error:focus .#{$prefix}--data-table__error-text::after {
+    border-right-color: $brand-01;
+    border-bottom-color: $brand-01;
+  }
+
+  // Visually show the error message
+
+  // Display the text area itself on hover
+  .#{$prefix}--data-table__icon--error:hover
+    ~ .#{$prefix}--data-table__error-text,
+
+    // Display text area triangle on hover
+  .#{$prefix}--data-table__icon--error:hover
+    ~ .#{$prefix}--data-table__error-text::after,
+
+    // Display text area on focus
+  .#{$prefix}--data-table__status--error:focus
+    > .#{$prefix}--data-table__error-text,
+
+    // Display text area triangle on focus
+  .#{$prefix}--data-table__status--error:focus
+    > .#{$prefix}--data-table__error-text::after,
+
+  // Display when user is typing in edit field
+  .#{$prefix}--data-table__edit-field--editing.#{$prefix}--data-table__edit-field--error +
+  .#{$prefix}--data-table__edit-status .#{$prefix}--data-table__error-text,
+
+  .#{$prefix}--data-table__edit-field--editing.#{$prefix}--data-table__edit-field--error +
+  .#{$prefix}--data-table__edit-status
+  .#{$prefix}--data-table__error-text::after {
+    opacity: 1;
+  }
+
+  //----------------------------------------------------------------------------
+  // Browser Quirks
+  //----------------------------------------------------------------------------
+
+  // IE11 - cells are not going full height. Set min-height to compensate
+  .#{$prefix}--data-table__edit-field,
+  .#{$prefix}--data-table-cell__activity,
+  .#{$prefix}--data-table__edit-status {
+    min-height: 3rem;
+  }
+}
diff --git a/src/components/data-table-v2/data-table-v2--inline-edit.html b/src/components/data-table-v2/data-table-v2--inline-edit.html
new file mode 100644
index 000000000000..cd2a71fee43a
--- /dev/null
+++ b/src/components/data-table-v2/data-table-v2--inline-edit.html
@@ -0,0 +1,89 @@
+<table class="bx--data-table-v2 bx--data-table-v2--zebra bx--data-table--editing">
+    <thead>
+        <tr>
+            <th scope="col">
+                <button class="bx--table-sort-v2"><span class="bx--table-header-label">Name</span>
+                    <svg class="bx--table-sort-v2__icon" fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
+                        <title>Sort rows by this header in descending order</title>
+                        <path d="M10 0L5 5 0 0z"></path>
+                    </svg>
+                </button>
+            </th>
+            <th scope="col">
+                <button class="bx--table-sort-v2"><span class="bx--table-header-label">Protocol</span>
+                    <svg class="bx--table-sort-v2__icon" fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
+                        <title>Sort rows by this header in descending order</title>
+                        <path d="M10 0L5 5 0 0z"></path>
+                    </svg>
+                </button>
+            </th>
+            <th scope="col">
+                <button class="bx--table-sort-v2"><span class="bx--table-header-label">Port</span>
+                    <svg class="bx--table-sort-v2__icon" fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
+                        <title>Sort rows by this header in descending order</title>
+                        <path d="M10 0L5 5 0 0z"></path>
+                    </svg>
+                </button>
+            </th>
+            <th scope="col">
+                <button class="bx--table-sort-v2"><span class="bx--table-header-label">Rule</span>
+                    <svg class="bx--table-sort-v2__icon" fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
+                        <title>Sort rows by this header in descending order</title>
+                        <path d="M10 0L5 5 0 0z"></path>
+                    </svg>
+                </button>
+            </th>
+            <th scope="col">
+                <button class="bx--table-sort-v2"><span class="bx--table-header-label">Attached Groups</span>
+                    <svg class="bx--table-sort-v2__icon" fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
+                        <title>Sort rows by this header in descending order</title>
+                        <path d="M10 0L5 5 0 0z"></path>
+                    </svg>
+                </button>
+            </th>
+            <th scope="col">
+                <button class="bx--table-sort-v2"><span class="bx--table-header-label">Status</span>
+                    <svg class="bx--table-sort-v2__icon" fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
+                        <title>Sort rows by this header in descending order</title>
+                        <path d="M10 0L5 5 0 0z"></path>
+                    </svg>
+                </button>
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td class="bx--data-table-cell--editable bx--data-table-cell--editing">
+                <div class="bx--data-table__edit-field">
+                    <label class="bx--label" for="edit-cell:a:name">Edit Name: Load Balancer 3</label>
+                    <input type="text" class="bx--text-input" id="edit-cell:a:name" value="Load Balancer 3">
+                </div>
+                <div class="bx--data-table__edit-actions">
+                    <button class="bx--btn bx--btn--secondary bx--btn--sm">Cancel</button>
+                    <button class="bx--btn bx--btn--primary bx--btn--sm">Save</button>
+                </div>
+            </td>
+            <td class="">HTTP</td>
+            <td class="">3000</td>
+            <td class="">Round robin</td>
+            <td class="">Kevins VM Groups</td>
+            <td class="">Disabled</td>
+        </tr>
+        <tr>
+            <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Load Balancer 1</span></td>
+            <td class="">HTTP</td>
+            <td class="">443</td>
+            <td class="">Round robin</td>
+            <td class="">Maureens VM Groups</td>
+            <td class="">Starting</td>
+        </tr>
+        <tr>
+            <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Load Balancer 2</span></td>
+            <td class="">HTTP</td>
+            <td class="">80</td>
+            <td class="">DNS delegation</td>
+            <td class="">Andrews VM Groups</td>
+            <td class="">Active</td>
+        </tr>
+    </tbody>
+</table>

From 7772ac1dde278c84e2a733169e5fa08e8a8ea2af Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Fri, 18 May 2018 11:36:29 -0500
Subject: [PATCH 05/12] fix(table): Missing border in firefox (#787)

---
 src/components/data-table-v2/_data-table-v2-expandable.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/data-table-v2/_data-table-v2-expandable.scss b/src/components/data-table-v2/_data-table-v2-expandable.scss
index 9690f3b1d225..c4c4f987328e 100644
--- a/src/components/data-table-v2/_data-table-v2-expandable.scss
+++ b/src/components/data-table-v2/_data-table-v2-expandable.scss
@@ -7,10 +7,6 @@
       display: none;
     }
 
-    td {
-      background-color: $ui-01;
-    }
-
     > td:first-of-type {
       position: relative;
 

From 4a532f09896502258d641a9e9188b8a7779f0dd2 Mon Sep 17 00:00:00 2001
From: Mari Johannessen <mari.l.johannessen@gmail.com>
Date: Fri, 18 May 2018 13:31:26 -0500
Subject: [PATCH 06/12] 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
---
 src/components/overflow-menu/_overflow-menu.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss
index cda162c3b7b8..296e6a5ff5b4 100644
--- a/src/components/overflow-menu/_overflow-menu.scss
+++ b/src/components/overflow-menu/_overflow-menu.scss
@@ -104,11 +104,13 @@
     &:focus {
       outline: 1px solid transparent;
       background-color: $hover-row;
+      text-decoration: underline;
     }
 
     .#{$prefix}--overflow-menu-options__option--danger & {
       &:focus {
-        background-color: $support-01;
+        outline: 1px solid transparent;
+        text-decoration: underline;
       }
     }
   }
@@ -119,6 +121,8 @@
 
   .#{$prefix}--overflow-menu-options__option:hover .#{$prefix}--overflow-menu-options__btn {
     background-color: $hover-row;
+    color: $inverse-01;
+    text-decoration: none;
   }
 
   .#{$prefix}--overflow-menu-options__option--danger {

From bc79d173b789b67efacd25538c6055ea8e7cd5db Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Fri, 18 May 2018 15:38:46 -0500
Subject: [PATCH 07/12] fix(data-table-v2): remove left positioning from sort
 icon (#789)

---
 src/components/data-table-v2/_data-table-v2-sort.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/data-table-v2/_data-table-v2-sort.scss b/src/components/data-table-v2/_data-table-v2-sort.scss
index b56b4637ab47..188d26da8612 100644
--- a/src/components/data-table-v2/_data-table-v2-sort.scss
+++ b/src/components/data-table-v2/_data-table-v2-sort.scss
@@ -25,7 +25,6 @@
   .#{$prefix}--table-sort-v2 {
     @include button-reset(false);
     position: relative;
-    left: 2px;
     font: inherit;
     cursor: pointer;
     display: flex;

From ddc8fc00c1efd13a5280713a72a309512f30b8ea Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 21 May 2018 08:35:23 -0500
Subject: [PATCH 08/12] fix(tile): check if is--expanded is set when tile
 component is loaded (#791)

---
 src/components/tile/_tile.scss | 2 +-
 src/components/tile/tile.js    | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/tile/_tile.scss b/src/components/tile/_tile.scss
index 9e1dc21980ed..057bc8a2459e 100644
--- a/src/components/tile/_tile.scss
+++ b/src/components/tile/_tile.scss
@@ -133,7 +133,7 @@
     transition: $transition--base $carbon--standard-easing;
 
     .#{$prefix}--tile__chevron svg {
-      transform: rotate(-180deg) translateY(4px);
+      transform: rotate(-180deg);
     }
 
     .#{$prefix}--tile-content__below-the-fold {
diff --git a/src/components/tile/tile.js b/src/components/tile/tile.js
index b999babd28cf..28aebe3284a9 100644
--- a/src/components/tile/tile.js
+++ b/src/components/tile/tile.js
@@ -41,7 +41,12 @@ class Tile extends mixin(createComponent, initComponentBySearch) {
         this.atfHeight = aboveTheFold.getBoundingClientRect().height + tilePadding;
         this.element.style.maxHeight = `${this.atfHeight}px`;
       }
+
+      if (this.element.classList.contains(this.options.classExpandedTile)) {
+        this._setTileHeight();
+      }
     }
+
     this.element.addEventListener('click', evt => {
       const input = eventMatches(evt, this.options.selectorTileInput);
       if (!input) {

From fff41fb15c69478506dd9d457a4da20dd23a971a Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Mon, 21 May 2018 10:11:52 -0500
Subject: [PATCH 09/12] fix(danger-button): Add correct hover color for icon
 (#794)

---
 src/components/button/_button.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index a96e310f78e2..6104519e896f 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -123,6 +123,11 @@
       color: $support-01;
       border: $button-border-width solid $support-01;
     }
+
+    &:hover > .#{$prefix}--btn__icon,
+    &:focus > .#{$prefix}--btn__icon {
+      fill: $inverse-01;
+    }
   }
 
   .#{$prefix}--btn--danger--primary {

From 6a485c36d518c6a53a5b537a94103891fd8b8942 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Mon, 21 May 2018 10:20:50 -0500
Subject: [PATCH 10/12] fix(table): removes selected class from row on cancel
 click (#793)

---
 src/components/data-table-v2/data-table-v2.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/data-table-v2/data-table-v2.js b/src/components/data-table-v2/data-table-v2.js
index f1f7e884b88d..8b416c416e33 100644
--- a/src/components/data-table-v2/data-table-v2.js
+++ b/src/components/data-table-v2/data-table-v2.js
@@ -122,6 +122,11 @@ class DataTableV2 extends mixin(createComponent, initComponentBySearch, eventedS
 
   _actionBarCancel = () => {
     const inputs = [...this.element.querySelectorAll(this.options.selectorCheckbox)];
+    const row = [...this.element.querySelectorAll(this.options.selectorTableSelected)];
+
+    row.forEach(item => {
+      item.classList.remove(this.options.classTableSelected);
+    });
 
     inputs.forEach(item => {
       item.checked = false;
@@ -267,6 +272,7 @@ class DataTableV2 extends mixin(createComponent, initComponentBySearch, eventedS
       selectorChildRow: '[data-child-row]',
       selectorTableBody: 'tbody',
       selectorTableSort: `.${prefix}--table-sort-v2`,
+      selectorTableSelected: `.${prefix}--data-table-v2--selected`,
       classExpandableRow: `${prefix}--expandable-row-v2`,
       classExpandableRowHidden: `${prefix}--expandable-row--hidden-v2`,
       classExpandableRowHover: `${prefix}--expandable-row--hover-v2`,

From 780d7d1a56cb06afa4a98210d098de1cc842e6aa Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Tue, 22 May 2018 11:07:22 -0500
Subject: [PATCH 11/12] chore(git): update gitignore for *.log files (#798)

---
 .gitignore | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index a606d49a4989..891c48069f21 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,8 +14,8 @@ dist
 # OSX
 .DS_Store
 
-# Debug
-npm-debug.log
+# Logs
+*.log
 
 # Editors
 project.sublime-project

From e95d726a14d680c65c26c2974684d6821af82e59 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 24 May 2018 11:14:44 +0900
Subject: [PATCH 12/12] fix(button): bring back primary danger button

---
 src/components/button/button.config.js | 24 ++++++++++++++++++++++++
 src/components/button/button.hbs       |  6 +++---
 2 files changed, 27 insertions(+), 3 deletions(-)

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>