feat(trees): Added metatext state and supporting CSS classes to trees component

Author: Ayesha Mazumdar

ui/components/trees/base/_index.scss

@@ -72,13 +72,11 @@
 /**
  * @selector .slds-tree
  * @restrict .slds-tree_container ul, table
- * @required
  */
 .slds-tree {
   /**
    * @selector .slds-tree__item
    * @restrict .slds-tree div, .slds-tree th
-   * @required
    */
   &__item {
     display: flex;
@@ -90,7 +88,6 @@
      *
      * @selector .slds-is-disabled
      * @restrict .slds-tree__item button
-     * @required
      * @modifier
      */
     .slds-is-disabled {
@@ -119,7 +116,6 @@
      * @selector .slds-is-hovered
      * @restrict .slds-tree__item
      * @notes Class should be applied via Javascript
-     * @required
      * @modifier
      */
     &.slds-is-hovered,
@@ -129,6 +125,25 @@
     }
   }
 
+  /**
+   * The meta text or secondary text of a tree item
+   *
+   * @selector .slds-tree__item-meta_text
+   * @restrict .slds-tree__item span
+   */
+  .slds-tree__item-meta_text,
+  .slds-tree__item-meta--text {
+    display: block;
+    margin-top: ($spacing-xx-small * -1); // Offset $line-height-text from result-text
+    color: $color-text-label;
+  }
+
+  /**
+   * Styles the focus and selected state for any tree item that has role="treeitem"
+   *
+   * @selector [role="treeitem"]
+   * @restrict .slds-tree li
+   */
   [role="treeitem"] {
 
     &:focus {
@@ -161,7 +176,6 @@
    * @selector .slds-is-selected
    * @restrict .slds-tree__item
    * @notes Class should be applied via Javascript
-   * @required
    * @modifier
    */
   @include deprecate('5.0.0', '.slds-is-selected is deprecated in .slds-tree, rely on aria-selected attrbiute') {
@@ -177,7 +191,6 @@
    *
    * @selector .slds-is-focused
    * @restrict .slds-tree__item
-   * @required
    * @modifier
    */
   @include deprecate('5.0.0', '.slds-is-focused is deprecated in .slds-tree, rely on the :focus psuedo class on the role="treeitem" element') {

ui/components/trees/base/example.jsx

@@ -23,6 +23,14 @@ let TreeItem = props => (
     <span className="slds-truncate" title="Tree Item">
       Tree Item
     </span>
+    {props.hasMetatext && (
+      <span
+        className="slds-tree__item-meta slds-tree__item-meta_text"
+        title="Tree Item Metatext"
+      >
+        Tree Item Metatext
+      </span>
+    )}
     {props.children}
   </div>
 );
@@ -149,7 +157,7 @@ let Default = props => (
         aria-level="1"
         tabIndex={!props.isSelected ? '0' : null}
       >
-        <TreeItem>{props.itemContent}</TreeItem>
+        <TreeItem hasMetatext={props.hasMetatext}>{props.itemContent}</TreeItem>
       </li>
       <li
         role="treeitem"
@@ -211,5 +219,10 @@ export let states = [
     id: 'deep-nesting',
     label: 'Deeply nested branches',
     element: <Default isExpanded additionalItems={<AdditionalItems />} />
+  },
+  {
+    id: 'metatext',
+    label: 'Metatext',
+    element: <Default hasMetatext />
   }
 ];