feat(tile-manager): resize icon and styles

Author: SisIvanova

src/components/icon/icon-references.ts

@@ -299,3 +299,9 @@ addIcon('collapse_content', {
     collection: 'internal',
   },
 });
+addIcon('resize', {
+  default: {
+    name: 'resize',
+    collection: 'internal',
+  },
+});

src/components/icon/internal-icons-lib.ts

@@ -74,6 +74,9 @@ export const internalIcons = new Map<string, SvgIcon>(
     fullscreen_exit: {
       svg: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z"/></svg>`,
     },
+    resize: {
+      svg: `<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.30362 0L0 8.30362L0.691969 8.99559L8.99559 0.691968L8.30362 0Z"/><path d="M8.30803 3.46558L3.46425 8.30936L4.15622 9.00132L9 4.15755L8.30803 3.46558Z"/></svg>`,
+    },
     indigo_clear: {
       svg: `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24">
 <path d="M14.8144 11.9896L18.4171 8.39087C18.7818 8.0135 18.9836 7.50809 18.9791 6.98347C18.9745 6.45885 18.764 5.95699 18.3927 5.58602C18.0215 5.21504 17.5192 5.00464 16.9942 5.00008C16.4692 4.99552 15.9635 5.19718 15.5858 5.56166L11.9896 9.15372L8.39335 5.56166C8.01571 5.19718 7.50992 4.99552 6.98492 5.00008C6.45992 5.00464 5.95769 5.21505 5.58645 5.58602C5.2152 5.95699 5.00464 6.45885 5.00008 6.98347C4.99551 7.50809 5.19733 8.0135 5.56207 8.39087L9.18561 12.0104L5.58291 15.6091C5.21817 15.9865 5.01635 16.4919 5.02091 17.0165C5.02548 17.5412 5.23604 18.043 5.60729 18.414C5.97853 18.785 6.48075 18.9954 7.00576 18.9999C7.53076 19.0045 8.03654 18.8028 8.41419 18.4383L12.0104 14.8463L15.6067 18.4383C15.9843 18.8028 16.4901 19.0045 17.0151 18.9999C17.5401 18.9954 18.0423 18.785 18.4136 18.414C18.7848 18.043 18.9954 17.5412 18.9999 17.0165C19.0045 16.4919 18.8027 15.9865 18.4379 15.6091L14.8144 11.9896Z"/>

src/components/tile-manager/resize-element.ts

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { type Ref, createRef, ref } from 'lit/directives/ref.js';
 import {
@@ -13,6 +13,8 @@ import {
   type ResizeMode,
   addResizeController,
 } from './resize-controller.js';
+import { styles } from './themes/resize.base.css.js';
+import { styles as shared } from './themes/shared/resize.common.css.js';
 
 export interface IgcResizeComponentEventMap {
   igcResizeStart: CustomEvent<ResizeCallbackParams>;
@@ -26,28 +28,7 @@ export default class IgcResizeComponent extends EventEmitterMixin<
   Constructor<LitElement>
 >(LitElement) {
   public static tagName = 'igc-resize';
-
-  public static styles = css`
-    :host {
-      display: contents;
-    }
-
-    [part='resize-base'] {
-      position: relative;
-      height: 100%;
-    }
-
-    [part='trigger'] {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      z-index: 1;
-    }
-
-    [part='trigger']:focus {
-      outline: none;
-    }
-  `;
+  public static styles = [styles, shared];
 
   /* blazorSuppress */
   public static register() {
@@ -144,7 +125,9 @@ export default class IgcResizeComponent extends EventEmitterMixin<
     return html`
       <div part="resize-base">
         <slot></slot>
-        <div ${ref(this._adorner)} part="trigger" tabindex="-1">↘️</div>
+        <div ${ref(this._adorner)} part="trigger" tabindex="-1">
+          <igc-icon name="resize" collection="default"></igc-icon>
+        </div>
       </div>
     `;
   }

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

@@ -0,0 +1,31 @@
+@use 'styles/common/component';
+@use 'styles/utilities' as *;
+
+:host {
+    display: contents;
+}
+
+[part='resize-base'] {
+    position: relative;
+    height: 100%;
+}
+
+[part='trigger'] {
+    display: inline-flex;
+    position: absolute;
+    bottom: rem(2px);
+    right: rem(2px);
+    z-index: 1;
+
+    igc-icon {
+        $icon-size: rem(9px);
+
+        --size: #{$icon-size} !important;
+        --ig-icon-size: #{$icon-size};
+        --igx-icon-size: #{$icon-size};
+    }
+}
+
+[part='trigger']:focus {
+    outline: none;
+}

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

@@ -0,0 +1,10 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $material;
+
+[part='trigger'] {
+    igc-icon {
+        color: var-get($theme, 'resize-indicator');
+    }
+}

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

@@ -10,11 +10,19 @@ $theme: $material;
 [part~='base'] {
     background: var-get($theme, 'tile-background');
     border-radius: var-get($theme, 'border-radius');
-    border: rem(1px) solid var-get($theme, 'border-color');
     box-shadow: var-get($theme, 'resting-elevation');
 
     &:hover {
-        border-color: var-get($theme, 'hover-border-color');
+        &::after {
+            content: '';
+            position: absolute;
+            pointer-events: none;
+            border-radius: inherit;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            border: rem(1px) solid var-get($theme, 'hover-border-color');
+        }
     }
 }
 
@@ -23,11 +31,13 @@ $theme: $material;
     box-shadow: var-get($theme, 'drag-elevation');
 }
 
-[part~='resizing'] {
+[part~='base'][part~='resizing']{
     opacity: .3;
 
     &:hover {
-        border: rem(1px) solid var-get($theme, 'border-color');
+        &::after {
+            display: none;
+        }
     }
 }
 

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

@@ -11,8 +11,8 @@
     padding: rem(20px);
     width: 100%;
     height: 100%;
-    grid-template-columns: repeat(var(--ig-column-count, auto-fit), minmax(var(--ig-min-col-width, 200px), 1fr));
-    grid-auto-rows: minmax(var(--ig-min-row-height, 200px), auto);
+    grid-template-columns: repeat(var(--ig-column-count, auto-fit), minmax(var(--ig-min-col-width), 1fr));
+    grid-auto-rows: minmax(var(--ig-min-row-height), auto);
     grid-gap: rem(10px);
     grid-auto-flow: dense;
 }

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

@@ -16,6 +16,7 @@
 [part='content-container'] {
     display: block;
     overflow: auto;
+    border-radius: inherit;
 
     ::slotted(*) {
         @include type-style('body-1');

src/components/tile-manager/tile.ts

@@ -372,17 +372,31 @@ export default class IgcTileComponent extends EventEmitterMixin<
       .getComputedStyle(this)
       .getPropertyValue('--ghost-border');
 
-    const ghost = this.cloneNode(true) as IgcTileComponent;
+    const ghostBorderRadius = window
+      .getComputedStyle(this)
+      .getPropertyValue('--border-radius');
+
+    const ghostMinWidth = window
+      .getComputedStyle(this)
+      .getPropertyValue('--ig-min-col-width');
+
+    const ghostMinHeight = window
+      .getComputedStyle(this)
+      .getPropertyValue('--ig-min-row-height');
+
+    const ghost = document.createElement('div');
     Object.assign(ghost.style, {
       position: 'absolute',
       top: 0,
       left: 0,
       zIndex: 1000,
       background: ghostBackground,
       border: `1px solid ${ghostBorder}`,
-      borderRadius: '4px',
+      borderRadius: ghostBorderRadius,
       width: '100%',
       height: '100%',
+      minWidth: ghostMinWidth,
+      minHeight: ghostMinHeight,
       gridRow: '',
       gridColumn: '',
     });
@@ -427,7 +441,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
       ? this.renderContent()
       : html`
           <igc-resize
-            part="base"
+            part="resize"
             .ghostFactory=${this.ghostFactory}
             mode="deferred"
             @igcResize=${this._handleResize}