From aa38138fdc6f296bcea2b5ef44831ebdabb9766d Mon Sep 17 00:00:00 2001
From: Brian Han <hellobrian@users.noreply.github.com>
Date: Wed, 14 Jun 2017 10:48:07 -0500
Subject: [PATCH] fix(structured-list): add modifier class for variant (#179)

* fix(structured-list): add selection class

* fix(structured-list): add styles using new class

* fix(structured-list): mark deprecated styles

* docs(structured-list): add modifier --selection
---
 src/components/structured-list/README.md             |  5 +++--
 src/components/structured-list/_structured-list.scss | 12 ++++++++++++
 .../structured-list/structured-list--selection.html  |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/structured-list/README.md b/src/components/structured-list/README.md
index 67ea609f17e2..2ad22eb6cd9d 100644
--- a/src/components/structured-list/README.md
+++ b/src/components/structured-list/README.md
@@ -29,6 +29,7 @@ Use these modifiers with `.bx--structured-list` class.
 | .bx--structured-list--border         | Applies border around structured-list and white background-color                             |
 | .bx--structured-list--condensed      | Applies condensed styles for all body rows                                                   |
 | .bx--structured-list-content--nowrap | Applies `white-space: nowrap;` on content. Prevents titles from wrapping in small viewports. |
+| .bx--structured-list--selection      | Applies styles used for selection variant of structured-list.                                |
 
 
 Use these modifiers with `.bx--structured-list-td` class. 
@@ -67,8 +68,8 @@ Use CSS to add visual styles to text.
 
 **HTML**
 ```html
-<div class="bx--structured-list-td">
-  <p class="bx--structured-list-content bold">Apache Spark</p>
+<div class="bx--structured-list-td bold">
+  Apache Spark
 </div>
 ```
 
diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss
index f94ac2290e0e..6aa46f1d7627 100644
--- a/src/components/structured-list/_structured-list.scss
+++ b/src/components/structured-list/_structured-list.scss
@@ -7,6 +7,12 @@
 @import '../../globals/scss/import-once';
 
 @include exports('structured-list') {
+  .bx--structured-list--selection .bx--structured-list-td,
+  .bx--structured-list--selection .bx--structured-list-th {
+    @include padding--data-structured-list;
+  }
+
+  // Deprecated
   [data-structured-list] .bx--structured-list-td,
   [data-structured-list] .bx--structured-list-th {
     @include padding--data-structured-list;
@@ -44,6 +50,12 @@
     border-bottom: 1px solid $ui-04;
     transition: $transition--base $bx--standard-easing;
 
+    .bx--structured-list--selection &:hover:not(.bx--structured-list-row--header-row) {
+      background-color: rgba($brand-02, .1);
+      cursor: pointer;
+    }
+
+    // Deprecated
     [data-structured-list] &:hover:not(.bx--structured-list-row--header-row) {
       background-color: rgba($brand-02, .1);
       cursor: pointer;
diff --git a/src/components/structured-list/structured-list--selection.html b/src/components/structured-list/structured-list--selection.html
index 94a2e5fce155..8fee1b851018 100644
--- a/src/components/structured-list/structured-list--selection.html
+++ b/src/components/structured-list/structured-list--selection.html
@@ -1,4 +1,4 @@
-<section class="bx--structured-list bx--structured-list--border" data-structured-list>
+<section class="bx--structured-list bx--structured-list--border bx--structured-list--selection" data-structured-list>
   <div class="bx--structured-list-thead">
     <div class="bx--structured-list-row bx--structured-list-row--header-row">
       <div class="bx--structured-list-th"></div>