refactor(tile-manager): header / resize-indicator / stories

Author: SisIvanova

src/components/tile-manager/themes/header.ts

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+
+import type { Themes } from '../../../theming/types.js';
+// Shared Styles
+import { styles as bootstrap } from './shared/header/tile-header.bootstrap.css.js';
+import { styles as fluent } from './shared/header/tile-header.fluent.css.js';
+
+const light = {
+  bootstrap: css`
+    ${bootstrap}
+  `,
+  fluent: css`
+    ${fluent}
+  `,
+};
+
+const dark = {
+  bootstrap: css`
+    ${bootstrap}
+  `,
+  fluent: css`
+    ${fluent}
+  `,
+};
+
+export const all: Themes = { light, dark };

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

@@ -2,6 +2,8 @@
 @use 'styles/utilities' as *;
 
 :host {
+    --resize-display: none;
+
     display: contents;
 }
 
@@ -11,7 +13,8 @@
 }
 
 [part='trigger'] {
-    display: inline-flex;
+    display: var(--resize-display);
+    cursor: nwse-resize;
     position: absolute;
     bottom: rem(2px);
     right: rem(2px);

src/components/tile-manager/themes/shared/header/tile-header.bootstrap.scss

@@ -0,0 +1,11 @@
+@use 'styles/utilities' as *;
+
+[part='header'] {
+    padding-block: sizable(rem(8px), rem(9px), rem(9px));
+}
+
+::slotted([slot='title']) {
+    @include type-style('h5');
+
+    margin: 0;
+}

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

@@ -11,4 +11,8 @@ $theme: $material;
 
 [part='title'] {
     color: var-get($theme, 'title-color');
+}
+
+igc-divider {
+    --color: var-get($theme, 'divider-color');
 }

src/components/tile-manager/themes/shared/header/tile-header.fluent.scss

@@ -0,0 +1,5 @@
+@use 'styles/utilities' as *;
+
+[part='header'] {
+    padding-block: sizable(rem(8px), rem(12px), rem(12px));
+}

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

@@ -27,6 +27,7 @@ $theme: $material;
 }
 
 [part~='dragging'] {
+    --resize-display: none;
     opacity: .6;
     box-shadow: var-get($theme, 'drag-elevation');
 }

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

@@ -4,16 +4,11 @@
 [part='header'] {
     display: flex;
     align-items: center;
-    box-sizing: border-box;
+    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));
 }
 
-[part='title'] {
-    display: block;
-    flex: 1 1 100%;
-}
-
 ::slotted([slot='title']) {
     @include type-style('h6');
 
@@ -23,4 +18,5 @@
 [part='actions'] {
     display: flex;
     gap: rem(8px);
+    margin-inline-start: auto;
 }

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

@@ -15,4 +15,5 @@
     grid-auto-rows: minmax(var(--ig-min-row-height), auto);
     grid-gap: rem(10px);
     grid-auto-flow: dense;
+    overflow-x: scroll;
 }

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

@@ -8,14 +8,20 @@
     grid-row: var(--ig-row-start, auto) / span var(--ig-row-span, 1);
 }
 
+:host(:hover) {
+    igc-resize {
+        --resize-display: inline-flex;
+    }
+}
+
 [part~='base'] {
     width: 100%;
     height: 100%;
+    overflow: hidden;
 }
 
 [part='content-container'] {
     display: block;
-    overflow: auto;
     border-radius: inherit;
 
     ::slotted(*) {
@@ -44,14 +50,3 @@
 //     opacity: 0.5;
 //     pointer-events: none;
 // }
-
-// .resize-handle {
-//     position: absolute;
-//     width: 15px;
-//     height: 15px;
-//     right: 0;
-//     bottom: 0;
-//     cursor: se-resize;
-//     background: rgba(0 0 0);
-//     z-index: 999;
-// }

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

@@ -1,8 +1,11 @@
 import { consume } from '@lit/context';
 import { LitElement, html } from 'lit';
+import { themes } from '../../theming/theming-decorator.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
 import { tileContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
+import IgcDividerComponent from '../divider/divider.js';
+import { all } from './themes/header.js';
 import { styles as shared } from './themes/shared/header/tile-header.common.css.js';
 import { styles } from './themes/tile-header.base.css.js';
 import type IgcTileComponent from './tile.js';
@@ -17,13 +20,18 @@ import type IgcTileComponent from './tile.js';
  * @csspart title - The tile title container
  * @csspart actions - The tile actions container
  */
+@themes(all)
 export default class IgcTileHeaderComponent extends LitElement {
   public static readonly tagName = 'igc-tile-header';
   public static override styles = [styles, shared];
 
   /* blazorSuppress */
   public static register() {
-    registerComponent(IgcTileHeaderComponent, IgcIconButtonComponent);
+    registerComponent(
+      IgcTileHeaderComponent,
+      IgcIconButtonComponent,
+      IgcDividerComponent
+    );
   }
 
   @consume({ context: tileContext, subscribe: true })
@@ -76,6 +84,7 @@ export default class IgcTileHeaderComponent extends LitElement {
           <slot name="actions"></slot>
         </section>
       </div>
+      <igc-divider></igc-divider>
     `;
   }
 }