fix: update nested to be observable and set isNestedItem method to re…

…adonly (microsoft#3539) * fix: update nested to be observable and set isNestedItem method to readonly * remove !!
haithemT · Jul 22, 2020 · 9e67f52 · 9e67f52
1 parent 4fe0dd3
commit 9e67f52
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 13 deletions.
diff --git a/packages/web-components/fast-components-msft/src/tree-view/fixtures/tree-view.html b/packages/web-components/fast-components-msft/src/tree-view/fixtures/tree-view.html
@@ -3,7 +3,6 @@ <h4>With items (don't render collapsed nodes)</h4>
     <fast-tree-view render-collapsed-nodes="false">
         <fast-tree-item>
             Root item 1
-            <fast-divider></fast-divider>
             <fast-tree-item>
                 Flowers
                 <fast-tree-item disabled>Daisy</fast-tree-item>
@@ -35,6 +34,7 @@ <h4>Flat tree</h4>
         <fast-tree-item selected>Daisy</fast-tree-item>
         <fast-tree-item>Sunflower</fast-tree-item>
         <fast-tree-item>Rose</fast-tree-item>
+        <fast-divider></fast-divider>
         <fast-tree-item>Petunia</fast-tree-item>
         <fast-tree-item>Tulip</fast-tree-item>
     </fast-tree-view>

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -807,9 +807,10 @@ export class TreeItem extends FASTElement {
     // (undocumented)
     handleKeyDown: (e: KeyboardEvent) => void | boolean;
     // (undocumented)
-    isNestedItem(): null | boolean;
+    readonly isNestedItem: () => boolean;
     // (undocumented)
     items: HTMLElement[];
+    // @internal (undocumented)
     nested: boolean;
     // (undocumented)
     renderCollapsedChildren: boolean;

diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.ts
@@ -84,12 +84,9 @@ export class TreeItem extends FASTElement {
     }
 
     /**
-     * Tracks the nested state of the item
-     * @public
-     * @remarks
-     * HTML Attribute: nested
+     * @internal
      */
-    @attr({ mode: "boolean" })
+    @observable
     public nested: boolean;
 
     @observable
@@ -214,11 +211,9 @@ export class TreeItem extends FASTElement {
         return treeChildren ? treeChildren.length : 0;
     }
 
-    public isNestedItem(): null | boolean {
-        return (
-            this.parentElement && this.parentElement.getAttribute("role") === "treeitem"
-        );
-    }
+    public readonly isNestedItem = (): boolean => {
+        return isTreeItemElement(this.parentElement as Element);
+    };
 
     private handleArrowLeft(): void {
         if (this.expanded) {

diff --git a/packages/web-components/fast-foundation/src/tree-view/tree-view.ts b/packages/web-components/fast-foundation/src/tree-view/tree-view.ts
@@ -39,7 +39,7 @@ export class TreeView extends FASTElement {
             if (this.checkForNestedItems()) {
                 this.slottedTreeItems.forEach(node => {
                     if (isTreeItemElement(node)) {
-                        node.setAttribute("nested", "");
+                        (node as TreeItem).nested = true;
                     }
                 });
             }