refactor(panel, shell, tree-item): Add keys to conditionally rendered…

… slots. (#3962) * refactor(panel, shell, tree-item): Add keys to conditionally rendered slots. * add const for key. * fix code * review cleanup
Esri · Jan 24, 2022 · e59ccc7 · e59ccc7
1 parent a2738e4
commit e59ccc7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
@@ -399,24 +399,27 @@ export class CalcitePanel implements ConditionalSlotComponent {
     const { el } = this;
     const hasFab = getSlotted(el, SLOTS.fab);
 
+    const defaultSlotNode: VNode = <slot key="default-slot" />;
+    const contentWrapperKey = "content-wrapper";
+
     return hasFab ? (
       <div
         class={{ [CSS.contentWrapper]: true, [CSS.contentHeight]: true }}
+        key={contentWrapperKey}
         onScroll={this.panelScrollHandler}
         tabIndex={0}
       >
-        <section class={CSS.contentContainer}>
-          <slot />
-        </section>
+        <section class={CSS.contentContainer}>{defaultSlotNode}</section>
         {this.renderFab()}
       </div>
     ) : (
       <section
         class={{ [CSS.contentWrapper]: true, [CSS.contentContainer]: true }}
+        key={contentWrapperKey}
         onScroll={this.panelScrollHandler}
         tabIndex={0}
       >
-        <slot />
+        {defaultSlotNode}
       </section>
     );
   }

diff --git a/src/components/calcite-shell/calcite-shell.tsx b/src/components/calcite-shell/calcite-shell.tsx
@@ -67,22 +67,27 @@ export class CalciteShell implements ConditionalSlotComponent {
   }
 
   renderContent(): VNode[] {
+    const defaultSlotNode: VNode = <slot key="default-slot" />;
+    const centerRowSlotNode: VNode = <slot key="center-row-slot" name={SLOTS.centerRow} />;
+    const contentContainerKey = "content-container";
+
     const content = !!this.contentBehind
       ? [
           <div
             class={{
               [CSS.content]: true,
-              [CSS.contentBehind]: !!this.contentBehind
+              [CSS.contentBehind]: true
             }}
+            key={contentContainerKey}
           >
-            <slot />
+            {defaultSlotNode}
           </div>,
-          <slot name={SLOTS.centerRow} />
+          centerRowSlotNode
         ]
       : [
-          <div class={CSS.content}>
-            <slot />
-            <slot name={SLOTS.centerRow} />
+          <div class={CSS.content} key={contentContainerKey}>
+            {defaultSlotNode}
+            {centerRowSlotNode}
           </div>
         ];
 

diff --git a/src/components/calcite-tree-item/calcite-tree-item.tsx b/src/components/calcite-tree-item/calcite-tree-item.tsx
@@ -158,9 +158,10 @@ export class CalciteTreeItem implements ConditionalSlotComponent {
         scale="s"
       />
     ) : null;
+    const defaultSlotNode: VNode = <slot key="default-slot" />;
     const checkbox =
       this.selectionMode === TreeSelectionMode.Ancestors ? (
-        <label class={CSS.checkboxLabel}>
+        <label class={CSS.checkboxLabel} key="checkbox-label">
           <calcite-checkbox
             checked={this.selected}
             class={CSS.checkbox}
@@ -169,7 +170,7 @@ export class CalciteTreeItem implements ConditionalSlotComponent {
             scale={this.scale}
             tabIndex={-1}
           />
-          <slot />
+          {defaultSlotNode}
         </label>
       ) : null;
     const selectedIcon = showBulletPoint
@@ -210,7 +211,7 @@ export class CalciteTreeItem implements ConditionalSlotComponent {
         >
           {chevron}
           {bulletOrCheckIcon}
-          {checkbox ? checkbox : <slot />}
+          {checkbox ? checkbox : defaultSlotNode}
         </div>
         <div
           class={{