feat(tile-manager): resize indicator styling

Author: SisIvanova

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

@@ -9,6 +9,7 @@ import { partNameMap } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import { addResizeController } from './resize-controller.js';
 import { styles } from './themes/resize-container.base.css.js';
+import { styles as shared } from './themes/shared/resize-container.common.css.js';
 import type {
   ResizeCallbackParams,
   ResizeGhostFactory,
@@ -35,7 +36,7 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
   Constructor<LitElement>
 >(LitElement) {
   public static readonly tagName = 'igc-resize';
-  public static styles = [styles];
+  public static styles = [styles, shared];
 
   /* blazorSuppress */
   public static register(): void {
@@ -188,9 +189,9 @@ 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>
+      <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>
     `;
   }
 

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

@@ -1,34 +1,12 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
 
-:host {
-    --resize-visibility: visible;
-
-    display: contents;
-}
-
-[part~='resize-base'] {
-    position: relative;
-    height: 100%;
-}
-
-@media(hover: hover) and (pointer: fine) {
-    [part~='active'] {
-        outline: 2px solid #0047AB
-    }
-}
-
-[part~='active'] {
-    outline: 2px solid #0047AB
-}
+%indicator {
+    --_size: #{rem(11px)};
 
-[part='trigger-side'] {
     display: inline-flex;
     visibility: var(--resize-visibility);
-    cursor: e-resize;
     position: absolute;
-    top: calc(50% - rem(12px));
-    right: rem(-12px);
     z-index: 1;
 
     igc-icon {
@@ -38,44 +16,52 @@
         --ig-icon-size: #{$icon-size};
         --igx-icon-size: #{$icon-size};
     }
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: var(--_size);
+        height: var(--_size);
+        border-radius: 50%;
+        z-index: 1;
+    }
 }
 
-[part='trigger'] {
-    display: inline-flex;
-    visibility: var(--resize-visibility);
-    cursor: se-resize;
-    position: absolute;
-    bottom: rem(-12px);
-    right: rem(-12px);
-    z-index: 1;
+:host {
+    display: contents;
+}
 
-    igc-icon {
-        $icon-size: rem(9px);
+[part~='resize-base'] {
+    position: relative;
+    height: 100%;
+}
 
-        --size: #{$icon-size} !important;
-        --ig-icon-size: #{$icon-size};
-        --igx-icon-size: #{$icon-size};
-    }
+[part='trigger-side'],
+[part='trigger'],
+[part='trigger-bottom'] {
+    @extend %indicator;
 }
 
+[part='trigger-side'] {
+    top: calc(50% - var(--_size));
+    right: calc(var(--_size) / 2);
+    cursor: e-resize;
+}
 
+[part='trigger'] {
+    bottom: calc(var(--_size) / 2);
+    right: calc(var(--_size) / 2);
+    cursor: se-resize;
+}
 
 [part='trigger-bottom'] {
-    display: inline-flex;
-    visibility: var(--resize-visibility);
+    left: calc(50% - var(--_size));
+    bottom: calc(var(--_size) / 2);
     cursor: s-resize;
-    position: absolute;
-    left: calc(50% - rem(12px));
-    bottom: rem(-12px);
-    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 {

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

@@ -0,0 +1,25 @@
+@use 'styles/utilities' as *;
+@use '../../../tile-manager/themes/light/themes' as *;
+
+$theme: $material;
+
+[part~='active'] {
+    &::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: var-get($theme, 'border-radius');
+        border: rem(1px) solid var-get($theme, 'hover-border-color');
+    }
+}
+
+[part='trigger-side'],
+[part='trigger'],
+[part='trigger-bottom'] {
+    &::after {
+        background: var-get($theme, 'resize-indicator');
+    }
+}

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

@@ -11,7 +11,9 @@ $theme: $material;
     background: var-get($theme, 'tile-background');
     border-radius: var-get($theme, 'border-radius');
     box-shadow: var-get($theme, 'resting-elevation');
+}
 
+[part~='base']:not([part~='resizable']) {
     &:hover {
         &::after {
             content: '';

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

@@ -2,18 +2,15 @@
 @use 'styles/utilities' as *;
 
 :host {
+    --pad-block: #{sizable(rem(8px), rem(13px), rem(13px))};
+    --pad-inline: #{sizable(rem(12px), rem(16px), rem(20px))};
+
     display: block;
     position: relative;
     grid-column: var(--ig-col-start, auto) / span var(--ig-col-span, 1);
     grid-row: var(--ig-row-start, auto) / span var(--ig-row-span, 1);
 }
 
-:host(:hover) {
-    igc-resize {
-        --resize-visibility: visible;
-    }
-}
-
 :host([part='resizing']),
 :host([part='dragging']) {
     background: var(--placeholder-background);
@@ -82,9 +79,9 @@
 }
 
 :host(:not([disable-fullscreen][disable-maximize])) {
-    [part='header'] {
-        padding-block: sizable(rem(8px), rem(13px), rem(13px));
-        padding-inline: sizable(rem(12px), rem(16px), rem(20px));
+    [part='actions'] {
+        padding-block: var(--pad-block);
+        padding-inline: var(--pad-inline);
     }
 }
 
@@ -104,9 +101,17 @@
 
     margin-bottom: 0;
     min-width: 2ch;
+    padding-block: var(--pad-block);
+    padding-inline: var(--pad-inline);
 }
 
 [part='actions'] {
     display: flex;
     gap: rem(8px);
 }
+
+// should be fixed
+::slotted([slot='actions']) {
+    padding-block: var(--pad-block);
+    padding-inline: var(--pad-inline);
+}