fix(tip): fix rendering tied to named-slot content (#10470)

**Related Issue:** #6059 ## Summary - remove use of `getSlotted` utility - replace with `slotchange` event and `@State` variables to update the display of elements. - existing tests should suffice
Esri · Oct 1, 2024 · d95825c · d95825c
1 parent 06105ac
commit d95825c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 38 deletions.
diff --git a/packages/calcite-components/src/components/tip/resources.ts b/packages/calcite-components/src/components/tip/resources.ts
@@ -6,6 +6,7 @@ export const CSS = {
   imageFrame: "image-frame",
   content: "content",
   info: "info",
+  infoNoThumbnail: "info--no-thumbnail",
 };
 
 export const ICONS = {

diff --git a/packages/calcite-components/src/components/tip/tip.scss b/packages/calcite-components/src/components/tip/tip.scss
@@ -49,9 +49,10 @@
 .info {
   @apply py-0 px-4;
   inline-size: 70%;
-  &:only-child {
-    @apply w-full px-0;
-  }
+}
+
+.info--no-thumbnail {
+  @apply w-full px-0;
 }
 
 ::slotted(p) {

diff --git a/packages/calcite-components/src/components/tip/tip.tsx b/packages/calcite-components/src/components/tip/tip.tsx
@@ -10,12 +10,6 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import {
-  ConditionalSlotComponent,
-  connectConditionalSlotComponent,
-  disconnectConditionalSlotComponent,
-} from "../../utils/conditionalSlot";
-import { getSlotted } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
   connectMessages,
@@ -26,6 +20,7 @@ import {
 } from "../../utils/t9n";
 import { constrainHeadingLevel, Heading, HeadingLevel } from "../functional/Heading";
 import { logger } from "../../utils/logger";
+import { slotChangeHasAssignedElement } from "../../utils/dom";
 import { TipMessages } from "./assets/tip/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -46,7 +41,7 @@ logger.deprecated("component", {
   shadow: true,
   assetsDirs: ["assets"],
 })
-export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {
+export class Tip implements LocalizedComponent, T9nComponent {
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -108,6 +103,8 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
 
   @State() defaultMessages: TipMessages;
 
+  @State() hasThumbnail = false;
+
   @State() effectiveLocale = "";
 
   @Watch("effectiveLocale")
@@ -122,7 +119,6 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -132,7 +128,6 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
   }
 
   disconnectedCallback(): void {
-    disconnectConditionalSlotComponent(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -160,6 +155,10 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
     this.calciteTipDismiss.emit();
   };
 
+  private handleThumbnailSlotChange = (event: Event): void => {
+    this.hasThumbnail = slotChangeHasAssignedElement(event);
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -195,18 +194,16 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
   }
 
   renderImageFrame(): VNode {
-    const { el } = this;
-
-    return getSlotted(el, SLOTS.thumbnail) ? (
-      <div class={CSS.imageFrame} key="thumbnail">
-        <slot name={SLOTS.thumbnail} />
+    return (
+      <div class={CSS.imageFrame} hidden={!this.hasThumbnail} key="thumbnail">
+        <slot name={SLOTS.thumbnail} onSlotchange={this.handleThumbnailSlotChange} />
       </div>
-    ) : null;
+    );
   }
 
   renderInfoNode(): VNode {
     return (
-      <div class={CSS.info}>
+      <div class={{ [CSS.info]: true, [CSS.infoNoThumbnail]: !this.hasThumbnail }}>
         <slot />
       </div>
     );

diff --git a/packages/calcite-components/src/demos/tip-manager.html b/packages/calcite-components/src/demos/tip-manager.html
@@ -50,7 +50,7 @@
             <img
               slot="thumbnail"
               width="1000"
-              height="600"
+              height="200"
               src="./_assets/images/placeholder.svg"
               alt="This is an image of nature."
             />
@@ -89,7 +89,7 @@
             <img
               slot="thumbnail"
               width="1000"
-              height="600"
+              height="200"
               src="./_assets/images/placeholder.svg"
               alt="This is an image of nature."
             />
@@ -125,7 +125,7 @@
                 <img
                   slot="thumbnail"
                   width="1000"
-                  height="600"
+                  height="200"
                   src="./_assets/images/placeholder.svg"
                   alt="This is an image of nature."
                 />
@@ -145,7 +145,7 @@
                 <img
                   slot="thumbnail"
                   width="1000"
-                  height="600"
+                  height="200"
                   src="./_assets/images/placeholder.svg"
                   alt="This is an image of nature."
                 />
@@ -160,7 +160,7 @@
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
+                height="200"
                 src="./_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />

diff --git a/packages/calcite-components/src/demos/tip/basic.html b/packages/calcite-components/src/demos/tip/basic.html
@@ -20,8 +20,8 @@ <h2>With thumbnail</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>
@@ -51,8 +51,8 @@ <h2>Without heading</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>This tip is how a tip should appear without a dismissible button as well as without a heading.</p>
@@ -67,8 +67,8 @@ <h2>Without heading, close-disabled</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>This tip is how a tip should appear without a dismissible button as well as without a heading.</p>
@@ -103,8 +103,8 @@ <h2>Tip Group with thumbnails</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>
@@ -118,8 +118,8 @@ <h2>Tip Group with thumbnails</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>
@@ -137,8 +137,8 @@ <h2>Tip Group with thumbnails, close-disabled</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>
@@ -152,8 +152,8 @@ <h2>Tip Group with thumbnails, close-disabled</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>