fix issues related to aligment on icon due to removal of React.fragment

fix issues related to aligment on icon due to removal of React.fragment

Co-Authored-By: Nanddeep Nachan <[email protected]>

Author: siddharth-vaghasia

src/controls/treeView/TreeItem.tsx

@@ -158,30 +158,30 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
     else {
       return (
         // Default rendering of tree item
-        <span>
+        <div
+        className={styles.labels}
+        onClick={(e) => {
+          
+          if (this.props.selectionMode != TreeViewSelectionMode.None && item.selectable != false) {
+          e.stopPropagation();
+          if (!item.disabled) {
+            this._itemSelected(e, !this.state.selected);
+          }
+        }}}>
           {
            this.props.showCheckboxes && item.selectable == false && !item.children &&
             <span className={styles.blankspace}>&nbsp;</span>
           }
           {
             // Rendering when item has iconProps
             item.iconProps &&
-         <span>
+             <span>
               <Icon className={styles.icon} iconName={item.iconProps.iconName} style={item.iconProps.style} />
               &nbsp;
               </span>
           }
-          <div
-            className={styles.labels}
-            onClick={(e) => {
-              debugger;
-              if (this.props.selectionMode != TreeViewSelectionMode.None && item.selectable != false) {
-              e.stopPropagation();
-              if (!item.disabled) {
-                this._itemSelected(e, !this.state.selected);
-              }
-            }}}>
-            <span>{item.label}</span>
+         
+            {item.label}
             {
               // Render sublabel
               item.subLabel &&
@@ -190,7 +190,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
               </div>
             }
           </div>
-      </span>
+      
       );
     }
   }

src/controls/treeView/TreeView.module.scss

@@ -61,8 +61,8 @@
 
     .labels {
       line-height: 18px;
-      display: flex;
-      flex-direction: column;
+      //display: flex;
+      //flex-direction: column;
       .itemLabel {
         padding: 0;
       }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -941,7 +941,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               <TreeView items={this.treeitems} 
               defaultExpanded={false} 
               selectionMode={TreeViewSelectionMode.Multiple} 
-              showCheckboxes={false}
+              showCheckboxes={true}
               treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
               defaultSelectedKeys={['R2', '6']}
               onExpandCollapse={this.onExpandCollapseTree}