From 699f2325bd3dc55cd9a8abf0ccaccf69606104ed Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 1 Oct 2024 10:45:26 -0700
Subject: [PATCH 1/3] fix(tip): fix rendering tied to named-slot content #6059

---
 .../src/components/tip/tip.tsx                | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/calcite-components/src/components/tip/tip.tsx b/packages/calcite-components/src/components/tip/tip.tsx
index 7a9398cf589..4fe5aceae86 100644
--- 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,13 +194,11 @@ 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 {

From 764d72cf0324aaa5ec93f8e50c2ee835b705dacd Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 1 Oct 2024 13:44:15 -0700
Subject: [PATCH 2/3] cleanup, fix screenshots

---
 packages/calcite-components/.stylelintrc.cjs  |  8 +-----
 .../src/components/tip/resources.ts           |  1 +
 .../src/components/tip/tip.scss               |  7 +++--
 .../src/components/tip/tip.tsx                |  2 +-
 .../src/demos/tip-manager.html                | 10 +++----
 .../src/demos/tip/basic.html                  | 28 +++++++++----------
 6 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
index 2e02214db54..0998dad6911 100644
--- a/packages/calcite-components/.stylelintrc.cjs
+++ b/packages/calcite-components/.stylelintrc.cjs
@@ -1,13 +1,7 @@
 // @ts-check
 
 // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [
-  "get-trailing-text-input-padding",
-  "medium-modular-scale",
-  "modular-scale",
-  "scale-duration",
-  "small-modular-scale"
-];
+const customFunctions = [];
 // ⚠️ END OF AUTO-GENERATED CODE
 
 const scssPatternRules = [
diff --git a/packages/calcite-components/src/components/tip/resources.ts b/packages/calcite-components/src/components/tip/resources.ts
index 5ea0631d833..52dabe7faf2 100644
--- 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
index e8f7d7f344f..dd8786aeebb 100644
--- 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
index 4fe5aceae86..ce7b6e5c55d 100644
--- a/packages/calcite-components/src/components/tip/tip.tsx
+++ b/packages/calcite-components/src/components/tip/tip.tsx
@@ -203,7 +203,7 @@ export class Tip implements LocalizedComponent, T9nComponent {
 
   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
index dd06942a4d2..3bde9623392 100644
--- 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
index 8b574caf8ba..b839c283b36 100644
--- 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>

From 214c13d730450f4c4e97e9b2021a71ef53072449 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 1 Oct 2024 13:45:07 -0700
Subject: [PATCH 3/3] Update .stylelintrc.cjs

---
 packages/calcite-components/.stylelintrc.cjs | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
index 0998dad6911..2e02214db54 100644
--- a/packages/calcite-components/.stylelintrc.cjs
+++ b/packages/calcite-components/.stylelintrc.cjs
@@ -1,7 +1,13 @@
 // @ts-check
 
 // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [];
+const customFunctions = [
+  "get-trailing-text-input-padding",
+  "medium-modular-scale",
+  "modular-scale",
+  "scale-duration",
+  "small-modular-scale"
+];
 // ⚠️ END OF AUTO-GENERATED CODE
 
 const scssPatternRules = [