feat(thread-list): Create custom icon components via role: ThreadListIcon

internal_packages/thread-list/lib/thread-list.cjsx

@@ -1,7 +1,11 @@
 _ = require 'underscore'
 React = require 'react'
 classNames = require 'classnames'
-{ListTabular, MultiselectList, RetinaImg, MailLabel} = require 'nylas-component-kit'
+{ListTabular,
+ MultiselectList,
+ RetinaImg,
+ MailLabel,
+ InjectedComponentSet} = require 'nylas-component-kit'
 {timestamp, subject} = require './formatting-utils'
 {Actions,
  Utils,
@@ -69,6 +73,11 @@ class ThreadList extends React.Component
         <span>
           <ThreadListIcon thread={thread} />
           <MailImportantIcon thread={thread} />
+          <InjectedComponentSet
+            inline={true}
+            containersRequired={false}
+            matching={role: "ThreadListIcon"}
+            exposedProps={thread: thread}/>
         </span>
 
     c2 = new ListTabular.Column

src/components/injected-component-set.cjsx

@@ -45,6 +45,8 @@ class InjectedComponentSet extends React.Component
       will always be displayed.
    - `exposedProps` (optional) An {Object} with props that will be passed to each
       item rendered into the set.
+   - `containersRequired` (optional). Pass false to optionally remove the containers
+      placed around injected components to isolate them from the rest of the app.
 
    -  Any other props you provide, such as `direction`, `data-column`, etc.
       will be applied to the {Flexbox} rendered by the InjectedComponentSet.
@@ -54,9 +56,11 @@ class InjectedComponentSet extends React.Component
     children: React.PropTypes.array
     className: React.PropTypes.string
     exposedProps: React.PropTypes.object
+    containersRequired: React.PropTypes.bool
 
   @defaultProps:
     direction: 'row'
+    containersRequired: true
 
   constructor: (@props) ->
     @state = @_getStateFromStores()
@@ -77,8 +81,8 @@ class InjectedComponentSet extends React.Component
     flexboxClassName = @props.className ? ""
     exposedProps = @props.exposedProps ? {}
 
-    elements = @state.components.map (component) ->
-      if component.containerRequired is false
+    elements = @state.components.map (component) =>
+      if @props.containersRequired is false or component.containerRequired is false
         <component key={component.displayName} {...exposedProps} />
       else
         <UnsafeComponent component={component} key={component.displayName} {...exposedProps} />