fix(selection): Thread mulit-selection should appear with focused style in split mode

Fixes T1983

Summary: Give classes handler nomenclature

Test Plan: Run tests

Reviewers: evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D1653

internal_packages/thread-list/stylesheets/thread-list.less

@@ -1,6 +1,34 @@
 @import "ui-variables";
 @import "ui-mixins";
 
+// MIXINS
+
+.inverseContent() {
+  // Note: these styles are also applied below 
+  // subpixel antialiasing looks awful against dark background colors
+  -webkit-font-smoothing: antialiased;
+
+  .participants {
+    color: @text-color-inverse;
+    .unread-true {
+      font-weight: @font-weight-normal;
+    }
+  }
+  .subject {
+    color: @text-color-inverse;
+    font-weight: @font-weight-normal;
+  }
+  .snippet, .timestamp {
+    color: @text-color-inverse-subtle;
+  }
+
+  .thread-icon, .draft-icon {
+    -webkit-filter: brightness(600%) grayscale(100%);
+  }
+}
+
+// STYLES
+
 *:focus, input:focus {
   outline:none;
 }
@@ -105,26 +133,7 @@
   }
 
   .focused {
-    // subpixel antialiasing looks awful against dark background colors
-    -webkit-font-smoothing: antialiased;
-
-    .participants {
-      color: @text-color-inverse;
-      .unread-true {
-        font-weight: @font-weight-normal;
-      }
-    }
-    .subject {
-      color: @text-color-inverse;
-      font-weight: @font-weight-normal;
-    }
-    .snippet, .timestamp {
-      color: @text-color-inverse-subtle;
-    }
-
-    .thread-icon, .draft-icon {
-      -webkit-filter: brightness(600%) grayscale(100%);
-    }
+    .inverseContent;
   }
 
   .thread-icon {
@@ -252,3 +261,13 @@
     margin-left:30px;
   }
 }
+
+.thread-list.handler-split {
+  .list-item {
+    &.selected {
+      background: @list-focused-bg;
+      color: @list-focused-color;
+      .inverseContent;
+    }
+  }
+}

src/components/multiselect-list-interaction-handler.coffee

@@ -7,6 +7,9 @@ module.exports =
 class MultiselectListInteractionHandler
   constructor: (@dataView, @collection) ->
 
+  cssClass: ->
+    'handler-list'
+
   shouldShowFocus: ->
     false
 

src/components/multiselect-list.cjsx

@@ -97,6 +97,7 @@ class MultiselectList extends React.Component
     #
     className = @props.className
     className += " ready" if @state.ready
+    className += " " + @state.handler.cssClass()
 
     @itemPropsProvider ?= (item) =>
       props = @props.itemPropsProvider(item)

src/components/multiselect-split-interaction-handler.coffee

@@ -7,6 +7,9 @@ module.exports =
 class MultiselectSplitInteractionHandler
   constructor: (@dataView, @collection) ->
 
+  cssClass: ->
+    'handler-split'
+
   shouldShowFocus: ->
     true