refactor(tile): update styles for custom adorner indicators

Author: simeonoff

src/components/resize-container/themes/resize-container.base.scss

@@ -28,14 +28,6 @@
     // }
 }
 
-[part='adorner-indicator'] {
-    width: 11px;
-    height: 11px;
-    border-radius: 50%;
-    background-color: grey;
-    z-index: 11111;
-}
-
 :host {
     display: contents;
 }

src/components/resize-container/themes/shared/resize-container.common.scss

@@ -20,7 +20,9 @@ $theme: $material;
 [part='trigger-side'],
 [part='trigger'],
 [part='trigger-bottom'] {
-    &::after {
-        background: var-get($theme, 'resize-indicator');
-    }
+    width: var(--_size);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    z-index: 11111;
+    background-color: var-get($theme, 'resize-indicator');
 }

src/components/tile-manager/themes/shared/tile/tile.common.scss

@@ -37,8 +37,8 @@ $theme: $material;
     }
 }
 
-[part~='base'][part~='resizing']{
-    opacity: .3;
+[part~='base'][part~='resizing'] {
+    opacity: 0.3;
 }
 
 [part='content-container'] {
@@ -75,3 +75,19 @@ $theme: $material;
 igc-divider {
     --color: #{var-get($theme, 'divider-color')};
 }
+
+igc-resize {
+    --resize-indicator: #{var-get($theme, 'hover-border-color')};
+}
+
+igc-resize[part~='side-adorner']::part(trigger-side) {
+    background-color: transparent;
+}
+
+igc-resize[part~='corner-adorner']::part(trigger) {
+    background-color: transparent;
+}
+
+igc-resize[part~='bottom-adorner']::part(trigger-bottom) {
+    background-color: transparent;
+}

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

@@ -124,11 +124,3 @@
 //     padding-block: var(--pad-block);
 //     padding-inline: var(--pad-inline);
 // }
-
-[part='adorner-indicator'] {
-    width: 11px;
-    height: 11px;
-    border-radius: 50%;
-    background-color: grey;
-    z-index: 11111;
-}

src/components/tile-manager/tile.ts

@@ -43,6 +43,8 @@ type IgcTileChangeState = {
   state: boolean;
 };
 
+type AdornerType = 'side' | 'corner' | 'bottom';
+
 // REVIEW: Decide whether to re-emit the events from the manager of leave them up to bubble naturally
 export interface IgcTileComponentEventMap {
   igcTileFullscreen: CustomEvent<IgcTileChangeState>;
@@ -605,9 +607,27 @@ export default class IgcTileComponent extends EventEmitterMixin<
     `;
   }
 
-  private _renderAdornerSlot(name: 'side' | 'corner' | 'bottom') {
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    root.addEventListener('slotchange', () => this.requestUpdate());
+    return root;
+  }
+
+  private _customAdorners = new Map<string, boolean>(
+    Object.entries({
+      side: false,
+      corner: false,
+      bottom: false,
+    })
+  );
+
+  private _renderAdornerSlot(name: AdornerType) {
     return html`
-      <slot name="${name}-adorner" slot="${name}-adorner">
+      <slot
+        @slotchange=${() => this._customAdorners.set(name, true)}
+        name="${name}-adorner"
+        slot="${name}-adorner"
+      >
         <div part="adorner-indicator"></div>
       </slot>
     `;
@@ -616,7 +636,12 @@ export default class IgcTileComponent extends EventEmitterMixin<
   protected _renderResizeContainer() {
     return html`
       <igc-resize
-        part="resize"
+        part=${partNameMap({
+          resize: true,
+          'side-adorner': this._customAdorners.get('side')!,
+          'corner-adorner': this._customAdorners.get('corner')!,
+          'bottom-adorner': this._customAdorners.get('bottom')!,
+        })}
         mode="deferred"
         ?active=${this._resizeMode === 'always'}
         .ghostFactory=${createTileGhost}