refactor(tile): define header on tile level (#1567)

Author: mtsvyatkova

src/components/common/context.ts

@@ -14,21 +14,12 @@ export type TileManagerContext = {
   overlay: Ref<HTMLElement>;
 };
 
-export type TileContext = {
-  /** The igc-tile component instance. */
-  instance: IgcTileComponent;
-  /** The fullscreen controller of the igc-tile instance. */
-  fullscreenController: ReturnType<typeof addFullscreenController>;
-};
-
 const carouselContext = createContext<IgcCarouselComponent>(
   Symbol('carousel-context')
 );
 
-const tileContext = createContext<TileContext>(Symbol('tile-context'));
-
 const tileManagerContext = createContext<TileManagerContext>(
   Symbol('tile-manager-context')
 );
 
-export { carouselContext, tileContext, tileManagerContext };
+export { carouselContext, tileManagerContext };

src/components/tile-manager/themes/tile.base.scss

@@ -73,3 +73,27 @@
     transform: scale(0);
     z-index: 10;
 }
+
+// REVIEW copied from tile-header.base.scss
+
+[part='header'] {
+    display: flex;
+    align-items: center;
+    gap: sizable(rem(12px), rem(16px), rem(16px));
+    padding-block: sizable(rem(8px), rem(13px), rem(13px));
+    padding-inline: sizable(rem(12px), rem(16px), rem(20px));
+}
+
+::slotted([slot='title']) {
+    @include type-style('h6');
+    @include ellipsis();
+
+    margin-bottom: 0;
+    min-width: 2ch;
+}
+
+[part='actions'] {
+    display: flex;
+    gap: rem(8px);
+    margin-inline-start: auto;
+}

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

@@ -12,7 +12,6 @@ import {
   simulatePointerDown,
   simulatePointerMove,
 } from '../common/utils.spec.js';
-import IgcTileHeaderComponent from './tile-header.js';
 import IgcTileManagerComponent from './tile-manager.js';
 import type IgcTileComponent from './tile.js';
 
@@ -57,9 +56,7 @@ describe.skip('Tile drag and drop', () => {
     const result = Array.from(range(5)).map(
       (i) => html`
         <igc-tile id="tile${i}">
-          <igc-tile-header slot="header">
-            <h3 slot="title">Tile ${i + 1}</h3>
-          </igc-tile-header>
+          <h3 slot="title">Tile ${i + 1}</h3>
 
           <div>
             <p>Content in tile ${i + 1}</p>
@@ -283,7 +280,8 @@ describe.skip('Tile drag and drop', () => {
     });
 
     const dragAndDrop = async (draggedTile: Element, dropTarget: Element) => {
-      const header = draggedTile.querySelector(IgcTileHeaderComponent.tagName)!;
+      const header =
+        draggedTile.shadowRoot?.querySelector('div[part="header"]')!;
       const dropTargetRect = dropTarget.getBoundingClientRect();
 
       simulatePointerDown(header);
@@ -377,10 +375,10 @@ describe.skip('Tile drag and drop', () => {
         return Promise.resolve();
       });
 
-      const header = draggedTile.querySelector(IgcTileHeaderComponent.tagName);
+      const header =
+        draggedTile.shadowRoot?.querySelector('div[part="header"]');
       const actionButtons =
-        header?.shadowRoot?.querySelectorAll(IgcIconButtonComponent.tagName) ||
-        [];
+        header?.querySelectorAll(IgcIconButtonComponent.tagName) || [];
       const btnFullscreen = actionButtons[1];
       simulateClick(btnFullscreen);
       await elementUpdated(tileManager);