From 754c9fee6d7e1a17f6dcdd5e2fec23d3095d5520 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Wed, 20 Sep 2017 17:05:49 -0700 Subject: [PATCH 01/16] feat(trees): Added metatext state and supporting CSS classes to trees component --- ui/components/trees/base/_index.scss | 25 +++++++++++++++++++------ ui/components/trees/base/example.jsx | 15 ++++++++++++++- 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index c5550c72be..ecba4ab9bb 100644 --- a/ui/components/trees/base/_index.scss +++ b/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') { diff --git a/ui/components/trees/base/example.jsx b/ui/components/trees/base/example.jsx index 20a5fffe54..b7102c4e07 100644 --- a/ui/components/trees/base/example.jsx +++ b/ui/components/trees/base/example.jsx @@ -23,6 +23,14 @@ let TreeItem = props => ( Tree Item + {props.hasMetatext && ( + + Tree Item Metatext + + )} {props.children} ); @@ -149,7 +157,7 @@ let Default = props => ( aria-level="1" tabIndex={!props.isSelected ? '0' : null} > - {props.itemContent} + {props.itemContent}
  • } /> + }, + { + id: 'metatext', + label: 'Metatext', + element: } ]; From 0edd04550794ea69e102eec1cb88334f33422e67 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Wed, 20 Sep 2017 17:43:49 -0700 Subject: [PATCH 02/16] feat(trees): Fixed styling of metatext on tree item and updated CSS of button spacing --- ui/components/trees/base/_index.scss | 5 +++-- ui/components/trees/base/example.jsx | 23 +++++++++++++---------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index ecba4ab9bb..34221f95e2 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -134,7 +134,7 @@ .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 + margin-top: ($spacing-small * -1); // Offset $line-height-text from result-text color: $color-text-label; } @@ -238,7 +238,8 @@ // scss-lint:enable SelectorDepth .slds-button { - align-self: center; + align-self: flex-start; + margin-top: $spacing-x-small; } .slds-pill { diff --git a/ui/components/trees/base/example.jsx b/ui/components/trees/base/example.jsx index b7102c4e07..1ce9266ff1 100644 --- a/ui/components/trees/base/example.jsx +++ b/ui/components/trees/base/example.jsx @@ -20,17 +20,20 @@ let TreeItem = props => ( tabIndex="-1" title="Expand Tree Item" /> - - Tree Item - - {props.hasMetatext && ( - - Tree Item Metatext + { props.hasMetatext ? + + + Tree Item + + + Tree Item Metatext + + + : + + Tree Item - )} + } {props.children} ); From 5da83cb22aeab555ed0a733d8b18be523bd38ac2 Mon Sep 17 00:00:00 2001 From: Isha Kasliwal Date: Wed, 20 Sep 2017 17:51:23 -0700 Subject: [PATCH 03/16] feat(trees): Added documentation for how and why to use metatextgit statusgit status --- ui/components/trees/base/_index.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index 34221f95e2..e5715622bf 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -16,6 +16,8 @@ * * Trees can only contain a single focusable tree item and `tabindex="0"` must be placed on the `li[role="treeitem]` that takes current focus. Every other actionable and non-actionable element must be made unfocusable by adding `tabindex="-1"` or removing `tabindex`, respectively. * + * You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional `span` within the treeitem with the classes `slds-tree__item-meta slds-tree__item-meta_text`. The metatext `span` and label/title `span` should also be wrapped in a `span` in order to ensure proper spacing. + * * #### Accessibility * * **Interaction requirements** From 1750a261f1a4c310fd5c556e3610a99e8da3cc85 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Wed, 20 Sep 2017 18:01:46 -0700 Subject: [PATCH 04/16] feat(trees): Updated to always include wrapping span --- ui/components/trees/base/example.jsx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/ui/components/trees/base/example.jsx b/ui/components/trees/base/example.jsx index 1ce9266ff1..584af56c35 100644 --- a/ui/components/trees/base/example.jsx +++ b/ui/components/trees/base/example.jsx @@ -20,20 +20,19 @@ let TreeItem = props => ( tabIndex="-1" title="Expand Tree Item" /> - { props.hasMetatext ? - - - Tree Item - - - Tree Item Metatext - - - : + Tree Item - } + {props.hasMetatext && ( + + Tree Item Metatext + + )} + {props.children} ); From 8d2220b12ecc17aad6c031259f45d5b3de18e964 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Wed, 20 Sep 2017 18:07:44 -0700 Subject: [PATCH 05/16] feat(trees): Update documentation to account for new parent span --- ui/components/trees/base/_index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index e5715622bf..a4a30cc33b 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -16,7 +16,7 @@ * * Trees can only contain a single focusable tree item and `tabindex="0"` must be placed on the `li[role="treeitem]` that takes current focus. Every other actionable and non-actionable element must be made unfocusable by adding `tabindex="-1"` or removing `tabindex`, respectively. * - * You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional `span` within the treeitem with the classes `slds-tree__item-meta slds-tree__item-meta_text`. The metatext `span` and label/title `span` should also be wrapped in a `span` in order to ensure proper spacing. + * You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional `span` within the treeitem with the classes `slds-tree__item-meta slds-tree__item-meta_text`. We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. * * #### Accessibility * From c25dc36d719e5563db44b9bfed6ce6410ab6396b Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Wed, 20 Sep 2017 18:10:45 -0700 Subject: [PATCH 06/16] feat(trees): Remove unnecessary parentheses and fix formatting --- ui/components/trees/base/example.jsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/ui/components/trees/base/example.jsx b/ui/components/trees/base/example.jsx index 584af56c35..a105eb426b 100644 --- a/ui/components/trees/base/example.jsx +++ b/ui/components/trees/base/example.jsx @@ -24,14 +24,11 @@ let TreeItem = props => ( Tree Item - {props.hasMetatext && ( - + { props.hasMetatext && + Tree Item Metatext - )} + } {props.children} From ae06dc3f516face158b22095e64c5b77e4fc1447 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Thu, 21 Sep 2017 11:28:47 -0700 Subject: [PATCH 07/16] feat(trees): Update BEM selector and show metatext on expanded example --- ui/components/trees/base/_index.scss | 5 ++--- ui/components/trees/base/example.jsx | 10 +++++----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index a4a30cc33b..30a566475b 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -130,11 +130,10 @@ /** * The meta text or secondary text of a tree item * - * @selector .slds-tree__item-meta_text + * @selector .slds-tree__item-meta * @restrict .slds-tree__item span */ - .slds-tree__item-meta_text, - .slds-tree__item-meta--text { + .slds-tree__item-meta { display: block; margin-top: ($spacing-small * -1); // Offset $line-height-text from result-text color: $color-text-label; diff --git a/ui/components/trees/base/example.jsx b/ui/components/trees/base/example.jsx index a105eb426b..86ef1742b4 100644 --- a/ui/components/trees/base/example.jsx +++ b/ui/components/trees/base/example.jsx @@ -24,8 +24,8 @@ let TreeItem = props => ( Tree Item - { props.hasMetatext && - + { props.hasMetatext && + Tree Item Metatext } @@ -156,7 +156,7 @@ let Default = props => ( aria-level="1" tabIndex={!props.isSelected ? '0' : null} > - {props.itemContent} + {props.itemContent}
  • ( aria-selected={!!props.isSelected} tabIndex={props.isSelected ? '0' : null} > - +
    • {props.additionalItems} @@ -222,6 +222,6 @@ export let states = [ { id: 'metatext', label: 'Metatext', - element: + element: } ]; From 8c55db32f407e15ce13b039555b56877e1382d57 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Thu, 21 Sep 2017 11:32:39 -0700 Subject: [PATCH 08/16] feat(trees): Update docs to mention proper class name --- ui/components/trees/base/_index.scss | 2 +- ui/components/trees/base/example.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index 30a566475b..45cf7b55eb 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -16,7 +16,7 @@ * * Trees can only contain a single focusable tree item and `tabindex="0"` must be placed on the `li[role="treeitem]` that takes current focus. Every other actionable and non-actionable element must be made unfocusable by adding `tabindex="-1"` or removing `tabindex`, respectively. * - * You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional `span` within the treeitem with the classes `slds-tree__item-meta slds-tree__item-meta_text`. We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. + * You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional `span` within the treeitem with the class `slds-tree__item-meta`. We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. * * #### Accessibility * diff --git a/ui/components/trees/base/example.jsx b/ui/components/trees/base/example.jsx index 86ef1742b4..1c8cb062a7 100644 --- a/ui/components/trees/base/example.jsx +++ b/ui/components/trees/base/example.jsx @@ -172,7 +172,7 @@ let Default = props => ( aria-selected={!!props.isSelected} tabIndex={props.isSelected ? '0' : null} > - + {props.additionalItems} From 481f0e756615bd00f843b952d65d675dfddec410 Mon Sep 17 00:00:00 2001 From: Isha Kasliwal Date: Thu, 21 Sep 2017 12:10:21 -0700 Subject: [PATCH 09/16] feat(trees): Added implementation documentation for collapsed rows --- ui/components/trees/base/_index.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index 45cf7b55eb..c8bce65fdc 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -16,6 +16,8 @@ * * Trees can only contain a single focusable tree item and `tabindex="0"` must be placed on the `li[role="treeitem]` that takes current focus. Every other actionable and non-actionable element must be made unfocusable by adding `tabindex="-1"` or removing `tabindex`, respectively. * + * When implementing collapsed rows, we suggest showing the content DOM nodes within each collapsed row only once the row is expanded for performance reasons. You can additionally toggle the hidden row with `slds-show` and `slds-hide` if you intend to keep all of the content in the DOM. + * * You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional `span` within the treeitem with the class `slds-tree__item-meta`. We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. * * #### Accessibility From 2cb337926374f85ac2e773f4f0db0e48f9565f53 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Thu, 21 Sep 2017 12:49:41 -0700 Subject: [PATCH 10/16] feat(trees): Adjust button styling to stop interfering with grid variant --- ui/components/trees/base/_index.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index 45cf7b55eb..811b711c1a 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -239,6 +239,10 @@ // scss-lint:enable SelectorDepth .slds-button { + align-self: center; + } + + li &__item .slds-button { align-self: flex-start; margin-top: $spacing-x-small; } From be2aca6c80fcb951c05368d81b0db57dcf340611 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Thu, 21 Sep 2017 14:30:13 -0700 Subject: [PATCH 11/16] feat(trees): Style buttons separately for tree variants --- ui/components/trees/base/_index.scss | 4 ---- ui/components/trees/grid/_index.scss | 5 +++++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index 0eec7cd75c..c8bce65fdc 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -241,10 +241,6 @@ // scss-lint:enable SelectorDepth .slds-button { - align-self: center; - } - - li &__item .slds-button { align-self: flex-start; margin-top: $spacing-x-small; } diff --git a/ui/components/trees/grid/_index.scss b/ui/components/trees/grid/_index.scss index 3b4b4cecc0..df1bfb5ce1 100644 --- a/ui/components/trees/grid/_index.scss +++ b/ui/components/trees/grid/_index.scss @@ -58,6 +58,11 @@ } } } + + .slds-button { + align-self: center; + margin-top: 0; + } } /** From 720a2b5160123cdee8b261db28320014a616c76c Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Thu, 21 Sep 2017 15:30:55 -0700 Subject: [PATCH 12/16] feat(trees): Add example of metatext to tree branch --- ui/components/trees/base/example.jsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/ui/components/trees/base/example.jsx b/ui/components/trees/base/example.jsx index 1c8cb062a7..e45962c51a 100644 --- a/ui/components/trees/base/example.jsx +++ b/ui/components/trees/base/example.jsx @@ -45,8 +45,15 @@ let TreeBranch = props => ( tabIndex="-1" title="Expand Tree Branch" /> - - Tree Branch + + + Tree Branch + + { props.hasMetatext && + + Tree Branch Metatext + + } ); @@ -183,7 +190,7 @@ let Default = props => ( aria-expanded="false" aria-label="Tree Branch" > - +
    • From 5908f2b86447c7423601d5af1166d8ae64af7260 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Thu, 21 Sep 2017 17:59:40 -0700 Subject: [PATCH 13/16] feat(trees): Fixed accessibility label on the tree branch and added assistive text to tree item --- ui/components/trees/base/example.jsx | 35 +++++++++++++++++++--------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/ui/components/trees/base/example.jsx b/ui/components/trees/base/example.jsx index e45962c51a..63dd6257f9 100644 --- a/ui/components/trees/base/example.jsx +++ b/ui/components/trees/base/example.jsx @@ -20,15 +20,19 @@ let TreeItem = props => ( tabIndex="-1" title="Expand Tree Item" /> - - + + Tree Item - { props.hasMetatext && - + {props.hasMetatext && ( + + : Tree Item Metatext - } + )} {props.children} @@ -45,15 +49,18 @@ let TreeBranch = props => ( tabIndex="-1" title="Expand Tree Branch" /> - - + + Tree Branch - { props.hasMetatext && - + {props.hasMetatext && ( + Tree Branch Metatext - } + )} ); @@ -188,7 +195,13 @@ let Default = props => ( role="treeitem" aria-level="1" aria-expanded="false" - aria-label="Tree Branch" + aria-label={ + props.hasMetatext ? ( + 'Tree Branch: Tree Branch Metatext' + ) : ( + 'Tree Branch' + ) + } >
        From 0db0578bad21a7badb5d5d1062f2790e379ba56c Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Thu, 21 Sep 2017 18:04:20 -0700 Subject: [PATCH 14/16] feat(trees): Add new CSS class to properly truncate tree label --- ui/components/trees/base/_index.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index c8bce65fdc..f5b3eac2ea 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -129,6 +129,16 @@ } } + /** + * The label text of a tree item or tree branch + * + * @selector .slds-tree__item-label + * @restrict .slds-tree__item span + */ + .slds-tree__item-label { + display: block; + } + /** * The meta text or secondary text of a tree item * From 063407a9ce199c2b38da037b675f37a215d8cb81 Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Thu, 21 Sep 2017 18:12:34 -0700 Subject: [PATCH 15/16] feat(trees): Update documentation regarding aria label --- ui/components/trees/base/_index.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index f5b3eac2ea..5672e02a0d 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -18,7 +18,7 @@ * * When implementing collapsed rows, we suggest showing the content DOM nodes within each collapsed row only once the row is expanded for performance reasons. You can additionally toggle the hidden row with `slds-show` and `slds-hide` if you intend to keep all of the content in the DOM. * - * You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional `span` within the treeitem with the class `slds-tree__item-meta`. We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. + * You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional `span` within the treeitem with the class `slds-tree__item-meta`. We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. If adding metatext to a tree item with child nodes (i.e. a branch), be sure to update the `aria-label` to include the metatext. For example: `aria-label="Tree Branch Label: Tree Branch Metatext"` * * #### Accessibility * @@ -36,7 +36,7 @@ * - `role="treeitem"` is placed on the tree `li` elements * - `aria-level` is applied to `treeitem` elements to indicate their nesting depth * - `aria-expanded` is applied to `treeitem` elements that have child tree nodes. It is set to `true` or `false` - * - `aria-label` is applied to `treeitem` elements that have child tree nodes + * - `aria-label` is applied to `treeitem` elements that have child tree nodes. Be sure to add any metatext to the label, if applicable * - `aria-selected="true"` is applied to `treeitem` elements that are selected * - `tabindex="0"` is applied to the `treeitem` that is in focus * - `role="group"` is applied to child tree node containers, `ul` From ae005c50f3c80fda0b58c1bf6439892bf6b2489d Mon Sep 17 00:00:00 2001 From: Ayesha Mazumdar Date: Fri, 22 Sep 2017 15:16:37 -0700 Subject: [PATCH 16/16] feat(trees): Update text color token to weak instead of label --- ui/components/trees/base/_index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/trees/base/_index.scss b/ui/components/trees/base/_index.scss index 5672e02a0d..e4dcdbeafc 100644 --- a/ui/components/trees/base/_index.scss +++ b/ui/components/trees/base/_index.scss @@ -148,7 +148,7 @@ .slds-tree__item-meta { display: block; margin-top: ($spacing-small * -1); // Offset $line-height-text from result-text - color: $color-text-label; + color: $color-text-weak; } /**