Fix tooltip max-width constraint for custom content (#1936)

* Initial plan

* Fix tooltip max-width constraint for custom content

Co-authored-by: kdinev <[email protected]>

* Address code review feedback - improve defensive coding

Co-authored-by: kdinev <[email protected]>

* Fix timing issue with slot content detection

Move slot content check to updated() lifecycle to ensure slot element is available. The @query() decorated properties are only populated after firstUpdated() completes, so checking in firstUpdated() was too early. Now using updated() with a flag to check on first update and when message property changes.

Co-authored-by: kdinev <[email protected]>

* refactor: Use slot controller and part attribute for styling

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: kdinev <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: 3 people

src/components/tooltip/themes/tooltip.base.scss

@@ -8,21 +8,24 @@
     text-align: center;
 }
 
-[part="base"] {
+[part~="base"] {
     @include type-style('body-2');
 
     padding: pad-block(rem(4px)) pad-inline(rem(8px));
     font-size: rem(10px);
     font-weight: 600;
     line-height: rem(16px);
     text-align: start;
-    max-width: 200px;
     display: flex;
     align-items: flex-start;
     gap: rem(8px);
     position: relative;
 }
 
+[part~="simple-text"] {
+    max-width: 200px;
+}
+
 #arrow {
     position: absolute;
     width: 0;

src/components/tooltip/tooltip.spec.ts

@@ -276,6 +276,40 @@ describe('Tooltip', () => {
       expect(defaultSlot?.assignedElements()[0].matches('button')).to.be.true;
     });
 
+    it('should apply simple-text class when using message property only', async () => {
+      const template = html`
+        <div>
+          <button>Hover</button>
+          <igc-tooltip message="Simple text tooltip"></igc-tooltip>
+        </div>
+      `;
+      const container = await fixture(template);
+      tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
+      await elementUpdated(tooltip);
+
+      const baseElement = tooltip.renderRoot.querySelector('[part~="base"]');
+      expect(baseElement).not.to.be.null;
+      expect(baseElement?.part.contains('simple-text')).to.be.true;
+    });
+
+    it('should not apply simple-text class when using custom content', async () => {
+      const template = html`
+        <div>
+          <button>Hover</button>
+          <igc-tooltip>
+            <div>Custom content with complex structure</div>
+          </igc-tooltip>
+        </div>
+      `;
+      const container = await fixture(template);
+      tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
+      await elementUpdated(tooltip);
+
+      const baseElement = tooltip.renderRoot.querySelector('[part~="base"]');
+      expect(baseElement).not.to.be.null;
+      expect(baseElement?.part.contains('simple-text')).to.be.false;
+    });
+
     it('should render a default close button when in `sticky` mode', async () => {
       tooltip.sticky = true;
       await elementUpdated(tooltip);

src/components/tooltip/tooltip.ts

@@ -7,9 +7,11 @@ import { fadeOut } from '../../animations/presets/fade/index.js';
 import { scaleInCenter } from '../../animations/presets/scale/index.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addInternalsController } from '../common/controllers/internals.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { partMap } from '../common/part-map.js';
 import { asNumber, isLTR } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcPopoverComponent, {
@@ -43,6 +45,7 @@ type TooltipStateOptions = {
  * @slot close-button - Slot for custom sticky-mode close action (e.g., an icon/button).
  *
  * @csspart base - The wrapping container of the tooltip content.
+ * @csspart simple-text - The container where the message property of the tooltip is rendered.
  *
  * @fires igcOpening - Emitted before the tooltip begins to open. Can be canceled to prevent opening.
  * @fires igcOpened - Emitted after the tooltip has successfully opened and is visible.
@@ -82,6 +85,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
 
   private readonly _containerRef = createRef<HTMLElement>();
   private readonly _player = addAnimationController(this, this._containerRef);
+  private readonly _slots = addSlotController(this, { slots: setSlots() });
 
   private readonly _showAnimation = scaleInCenter({
     duration: 150,
@@ -430,6 +434,11 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
   }
 
   protected override render() {
+    const parts = {
+      base: true,
+      'simple-text': !this._slots.hasAssignedNodes('[default]', true),
+    };
+
     return html`
       <igc-popover
         .inert=${!this.open}
@@ -443,7 +452,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
         flip
         shift
       >
-        <div ${ref(this._containerRef)} part="base">
+        <div ${ref(this._containerRef)} part=${partMap(parts)}>
           <slot>${this.message}</slot>
           ${this.sticky
             ? html`