Skip to content
Permalink
Browse files

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

… component
  • Loading branch information...
Ayesha Mazumdar
Ayesha Mazumdar committed Sep 21, 2017
1 parent 3cbebbe commit 754c9fee6d7e1a17f6dcdd5e2fec23d3095d5520
Showing with 33 additions and 7 deletions.
  1. +19 −6 ui/components/trees/base/_index.scss
  2. +14 −1 ui/components/trees/base/example.jsx
@@ -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') {
@@ -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 />
}
];

0 comments on commit 754c9fe

Please sign in to comment.
You can’t perform that action at this time.