feat(resize): add slots for resize adorners

Author: mtsvyatkova

src/components/resize-container/resize-container.ts

@@ -32,6 +32,10 @@ export interface IgcResizeContainerComponentEventMap {
  * @element igc-resize
  *
  * @slot - renders the element(s) that should be resized
+ * @slot side-adorner - renders the side resize handle.
+ * @slot corner-adorner - renders the corner resize handle.
+ * @slot bottom-adorner - renders the bottom resize handle.
+ *
  */
 @themes(all)
 export default class IgcResizeContainerComponent extends EventEmitterMixin<
@@ -196,9 +200,21 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
     }
 
     return html`
-      <div ${ref(this._adorners.side)} part="trigger-side"></div>
-      <div ${ref(this._adorners.corner)} part="trigger"></div>
-      <div ${ref(this._adorners.bottom)} part="trigger-bottom"></div>
+      <slot
+        ${ref(this._adorners.side)}
+        part="trigger-side"
+        name="side-adorner"
+      ></slot>
+      <slot
+        ${ref(this._adorners.corner)}
+        part="trigger"
+        name="corner-adorner"
+      ></slot>
+      <slot
+        ${ref(this._adorners.bottom)}
+        part="trigger-bottom"
+        name="bottom-adorner"
+      ></slot>
     `;
   }
 

src/components/tile-manager/tile-manager.spec.ts

@@ -418,6 +418,55 @@ describe('Tile Manager component', () => {
     });
   });
 
+  describe('Resize adorners slot assignment', () => {
+    beforeEach(async () => {
+      tileManager = await fixture<IgcTileManagerComponent>(html`
+        <igc-tile-manager resize-mode="always">
+          <igc-tile>
+            <div slot="side-adorner">Side Adorner</div>
+            <div slot="corner-adorner">Corner Adorner</div>
+            <div slot="bottom-adorner">Bottom Adorner</div>
+          </igc-tile>
+          <igc-tile id="tile2"></igc-tile>
+        </igc-tile-manager>
+      `);
+    });
+
+    it('should correctly project adorners into the igc-resize component and not render in igc-tile', async () => {
+      const tile1 = tileManager.tiles[0];
+      const resize = tile1.shadowRoot?.querySelector(
+        'igc-resize'
+      ) as HTMLElement;
+
+      const sideAdorner = resize.querySelector('[slot="side-adorner"]');
+      const cornerAdorner = resize.querySelector('[slot="corner-adorner"]');
+      const bottomAdorner = resize.querySelector('[slot="bottom-adorner"]');
+
+      // Assert the adorners are projected inside igc-resize
+      expect(sideAdorner?.textContent).to.equal('Side Adorner');
+      expect(cornerAdorner?.textContent).to.equal('Corner Adorner');
+      expect(bottomAdorner?.textContent).to.equal('Bottom Adorner');
+
+      // Assert that the adorners are not rendered in the igc-tile itself
+      expect(tile1.querySelector('[slot="side-adorner"]')).to.be.null;
+      expect(tile1.querySelector('[slot="corner-adorner"]')).to.be.null;
+      expect(tile1.querySelector('[slot="bottom-adorner"]')).to.be.null;
+    });
+
+    it('should hide igc-resize component and not render adorners in igc-tile when resize mode is "none"', async () => {
+      const tile = tileManager.tiles[0];
+
+      tileManager.resizeMode = 'none';
+      await elementUpdated(tileManager);
+
+      const resize = tile.shadowRoot?.querySelector('igc-resize');
+      const adorners = tile.shadowRoot?.querySelectorAll('[slot$="-adorner"]');
+
+      expect(resize).to.be.null;
+      expect(adorners).lengthOf(0);
+    });
+  });
+
   describe('Tile state change behavior', () => {
     let tile: any;
 

src/components/tile-manager/tile.ts

@@ -70,6 +70,9 @@ export interface IgcTileComponentEventMap {
  * @slot fullscreen-action - Renders the fullscreen action element.
  * @slot actions - Renders items after the default actions.
  * @slot Default slot for the tile's content.
+ * @slot side-adorner - Renders the side resize handle.
+ * @slot corner-adorner - Renders the corner resize handle.
+ * @slot bottom-adorner - Renders the bottom resize handle.
  *
  * @csspart base - The wrapper for the entire tile.
  * @csspart header - The container for the header, including title and actions.
@@ -118,6 +121,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
   private _position = -1;
   private _resizeState = createTileResizeState();
   private _dragStack = createTileDragStack();
+  private _mutationObserver: MutationObserver | null = null;
 
   // Tile manager context properties and helpers
 
@@ -348,6 +352,42 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
     this.style.viewTransitionName =
       this.style.viewTransitionName || `tile-transition-${this.tileId}`;
+
+    this._observeResizeElement();
+  }
+
+  /** @internal */
+  public override disconnectedCallback() {
+    super.disconnectedCallback();
+    this._mutationObserver?.disconnect();
+  }
+
+  private _observeResizeElement() {
+    if (!this.shadowRoot) return;
+
+    this._mutationObserver = new MutationObserver(() => {
+      const resize = this.shadowRoot?.querySelector('igc-resize');
+      if (resize) {
+        this._assignAdornersToResize();
+      }
+    });
+
+    this._mutationObserver.observe(this.shadowRoot, {
+      childList: true, // Detects when `igc-resize` is added or removed
+      subtree: true,
+    });
+  }
+
+  private _assignAdornersToResize() {
+    const resize = this.shadowRoot?.querySelector('igc-resize');
+    if (!resize) return;
+
+    ['side-adorner', 'corner-adorner', 'bottom-adorner'].forEach((slotName) => {
+      const assigned = this.querySelector(`[slot="${slotName}"]`);
+      if (assigned) {
+        resize.appendChild(assigned); // Move the adorner inside `igc-resize`
+      }
+    });
   }
 
   private _setDragState(state = true) {
@@ -594,6 +634,18 @@ export default class IgcTileComponent extends EventEmitterMixin<
         @igcResizeCancel=${this._handleResizeCancel}
       >
         ${this._renderContent()}
+        <slot
+          name="side-adorner"
+          @slotchange=${this._assignAdornersToResize}
+        ></slot>
+        <slot
+          name="corner-adorner"
+          @slotchange=${this._assignAdornersToResize}
+        ></slot>
+        <slot
+          name="bottom-adorner"
+          @slotchange=${this._assignAdornersToResize}
+        ></slot>
       </igc-resize>
     `;
   }

stories/tile-manager.stories.ts

@@ -858,6 +858,10 @@ export const CustomActions: Story = {
     >
       <igc-tile disable-fullscreen disable-maximize>
         <h3 slot="title">Custom Actions</h3>
+        <!-- <div slot="side-adorner">🟨</div> -->
+        <div slot="corner-adorner">🟩</div>
+        <div slot="bottom-adorner">🟦</div>
+
         <igc-icon-button
           slot="actions"
           variant="flat"