Merge pull request #1379 from garygong/tree-fixes

Tree bug fixes introduced by keyboard navigation

Author: interactivellama

components/component-docs.json

@@ -6741,29 +6741,8 @@
             },
             "iconCategory": {
                 "type": {
-                    "name": "enum",
-                    "value": [
-                        {
-                            "value": "'action'",
-                            "computed": false
-                        },
-                        {
-                            "value": "'custom'",
-                            "computed": false
-                        },
-                        {
-                            "value": "'doctype'",
-                            "computed": false
-                        },
-                        {
-                            "value": "'standard'",
-                            "computed": false
-                        },
-                        {
-                            "value": "'utility'",
-                            "computed": false
-                        }
-                    ]
+                    "name": "custom",
+                    "raw": "requiredIf(\n    PropTypes.oneOf(['action', 'custom', 'doctype', 'standard', 'utility']),\n    (props) => !!props.iconName\n)"
                 },
                 "required": false,
                 "description": "Name of the icon category. Visit <a href=\"http://www.lightningdesignsystem.com/resources/icons\">Lightning Design System Icons</a> to reference icon categories."
@@ -7438,6 +7417,23 @@
                     "computed": false
                 }
             },
+            "assistiveText": {
+                "type": {
+                    "name": "shape",
+                    "value": {
+                        "dialogLabel": {
+                            "name": "string",
+                            "required": false
+                        }
+                    }
+                },
+                "required": false,
+                "description": "Assistive text for the modal.",
+                "defaultValue": {
+                    "value": "{}",
+                    "computed": false
+                }
+            },
             "children": {
                 "type": {
                     "name": "node"
@@ -11103,7 +11099,51 @@
     },
     "tree": {
         "description": "A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed. This is a controlled component, since visual state is present in the `nodes` data.",
-        "methods": [],
+        "methods": [
+            {
+                "name": "handleSelect",
+                "docblock": null,
+                "modifiers": [],
+                "params": [
+                    {
+                        "name": "event",
+                        "type": null
+                    },
+                    {
+                        "name": "data",
+                        "type": null
+                    },
+                    {
+                        "name": "clearSelectedNodes",
+                        "type": null
+                    }
+                ],
+                "returns": null
+            },
+            {
+                "name": "handleNodeBlur",
+                "docblock": null,
+                "modifiers": [],
+                "params": [],
+                "returns": null
+            },
+            {
+                "name": "handleExpand",
+                "docblock": null,
+                "modifiers": [],
+                "params": [
+                    {
+                        "name": "event",
+                        "type": null
+                    },
+                    {
+                        "name": "data",
+                        "type": null
+                    }
+                ],
+                "returns": null
+            }
+        ],
         "props": {
             "assistiveText": {
                 "type": {
@@ -11178,21 +11218,21 @@
                     "name": "array"
                 },
                 "required": false,
-                "description": "Array of items starting at the top of the tree. The required shape is: `{expanded: string, id: string, label: string, selected: string, type: string, nodes: array}`, but only `id` and `label` are required. Use `type: 'branch'` for folder and categories."
+                "description": "Array of items starting at the top of the tree. The shape each node in the array is:\n```\n{\n  expanded: string,\n  id: string,\n  label: string or node,\n  selected: string,\n  type: string,\n  nodes: array\n}\n```\n`assistiveText: string` is optional and helpful if the label is not a string. Only `id` and `label` are required. Use `type: 'branch'` for folder and categories."
             },
             "onClick": {
                 "type": {
                     "name": "func"
                 },
                 "required": true,
-                "description": "Function that will run whenever an item or branch is clicked."
+                "description": "Function that will run whenever an item or branch is selected due to click or keyboard navigation."
             },
             "onExpandClick": {
                 "type": {
                     "name": "func"
                 },
                 "required": true,
-                "description": "This function triggers when the expand or collapse icon is clicked."
+                "description": "This function triggers when the expand or collapse icon is clicked or due to keyboard navigation."
             },
             "onScroll": {
                 "type": {

components/tree/__docs__/storybook-stories.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { storiesOf, action } from '@storybook/react';
+import cloneDeep from 'lodash.clonedeep';
 import IconSettings from '../../icon-settings';
 
 import { TREE } from '../../../utilities/constants';
@@ -38,7 +39,7 @@ const DemoTree = createReactClass({
 			? sampleNodes[this.props.exampleNodesIndex]
 			: sampleNodes.sampleNodesDefault;
 		return {
-			nodes: initalNodes,
+			nodes: cloneDeep(initalNodes),
 			selectedNode: undefined,
 			searchTerm: this.props.searchable ? 'fruit' : undefined,
 		};
@@ -74,15 +75,15 @@ const DemoTree = createReactClass({
 
 				return { selectedNode: data.node };
 			});
-			itemClicked('Node Clicked')(event, data);
+			itemClicked('Node Selected')(event, data);
 		} else if (
 			!this.props.noBranchSelection ||
 			(this.props.noBranchSelection && data.node.type !== 'branch')
 		) {
 			data.node.selected = data.select;
 			// trigger render
 			this.setState((prevState) => ({ ...prevState }));
-			itemClicked('Node Clicked')(event, data);
+			itemClicked('Node Selected')(event, data);
 		}
 	},
 

components/tree/__examples__/default.jsx

@@ -19,7 +19,8 @@ const sampleNodes = {
 			expanded: true,
 			nodes: [
 				{
-					label: 'Ground Fruits',
+					assistiveText: 'Ground Fruits',
+					label: <span>Ground Fruits</span>,
 					type: 'branch',
 					id: 4,
 					nodes: [

components/tree/__tests__/tree.browser-test.jsx

@@ -8,6 +8,7 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 
 import isFunction from 'lodash.isfunction';
+import cloneDeep from 'lodash.clonedeep';
 
 import chai, { expect } from 'chai';
 import chaiEnzyme from 'chai-enzyme';
@@ -60,7 +61,7 @@ const DemoTree = createReactClass({
 			? sampleNodes[this.props.exampleNodesIndex]
 			: sampleNodes.sampleNodesDefault;
 		return {
-			nodes: initalNodes,
+			nodes: cloneDeep(initalNodes),
 			searchTerm: this.props.searchable ? 'fruit' : undefined,
 		};
 	},
@@ -312,9 +313,10 @@ describe('Tree: ', () => {
 
 		it('has initial selection', function () {
 			let selectedNode = this.wrapper
-				.find('#example-tree-1')
+				.find('#example-tree-2')
 				.find('.slds-is-selected');
-			expect(selectedNode).to.have.length(1);
+			// Fruits, Watermelon, Tree Fruits
+			expect(selectedNode).to.have.length(3);
 			selectedNode = this.wrapper
 				.find('#example-tree-5')
 				.find('.slds-is-selected');