From cedfbde73c1533de91807bf66384af51883afcd3 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 2 Feb 2026 16:57:47 +0200 Subject: [PATCH] style(grid): Update theming and component size handling across light grid styles --- demo/demo.ts | 43 +++++++++----- demo/index.html | 78 +++++++++++++------------ src/styles/_common.scss | 7 +-- src/styles/body-cell/body-cell.scss | 23 +++++++- src/styles/filter-row/filter-row.scss | 34 +++++++++-- src/styles/header-cell/header-cell.scss | 1 + src/styles/themes/grid.base.scss | 60 ++++++++++--------- 7 files changed, 156 insertions(+), 90 deletions(-) diff --git a/demo/demo.ts b/demo/demo.ts index b9b1b7f..4d9c64d 100644 --- a/demo/demo.ts +++ b/demo/demo.ts @@ -2,6 +2,8 @@ import { configureTheme, defineComponents, IgcButtonComponent, + IgcButtonGroupComponent, + IgcToggleButtonComponent, IgcAvatarComponent, IgcCheckboxComponent, IgcRatingComponent, @@ -19,6 +21,8 @@ defineComponents( IgcSelectComponent, IgcSwitchComponent, IgcButtonComponent, + IgcButtonGroupComponent, + IgcToggleButtonComponent, ); type User = { @@ -83,7 +87,7 @@ function getAvatar() { async function setTheme(theme?: string) { theme = theme ?? getElement(IgcSelectComponent.tagName).value; - const variant = getElement(IgcSwitchComponent.tagName).checked + const variant = getElement('#theme-variant').checked ? 'dark' : 'light'; @@ -110,6 +114,7 @@ const themeChoose = html` ${themes.map((theme) => html`${theme}`)} setTheme()} >Dark variant[] = [ cellTemplate: (params) => html``, }, @@ -158,7 +163,6 @@ const columns: ColumnConfiguration[] = [ html`${choices.map( (choice) => html`${choice}`, )} { column.filterable = !column.filterable; }; +const setSize = (size: number) => { + document.getElementById('demo')!.style.setProperty('--ig-size', String(size)); +}; + render( html` - Toggle column - Toggle filtering - ${themeChoose} +
+ Toggle column + Toggle filtering + + setSize(1)}>Small + setSize(2)}>Medium + setSize(3)}>Large + + ${themeChoose} +
${columns.map( (col) => diff --git a/demo/index.html b/demo/index.html index e0004c3..49a606b 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,55 +1,61 @@ - - Demo igc-grid - - - - - -
- - + + + +
+ + diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 74deb03..695f348 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -2,7 +2,7 @@ @forward 'igniteui-theming'; $ig-cells-padding: sizable(rem(8px), rem(16px), rem(24px)); -$ig-cells-min-height: sizable(rem(24px), rem(34px), rem(50px)); +$ig-cells-min-height: sizable(rem(32px), rem(40px), rem(50px)); @mixin ig-scrollbar($track-size, $track-bg, $thumb-bg) { // Firefox only @@ -22,11 +22,6 @@ $ig-cells-min-height: sizable(rem(24px), rem(34px), rem(50px)); } :host { - @include sizable(); - - --component-size: 3; - - position: relative; box-sizing: border-box; diff --git a/src/styles/body-cell/body-cell.scss b/src/styles/body-cell/body-cell.scss index 93f3c07..cf9d3c9 100644 --- a/src/styles/body-cell/body-cell.scss +++ b/src/styles/body-cell/body-cell.scss @@ -18,6 +18,26 @@ $inset-shadow-width: #{rem(1px)}; &:last-of-type { border-right: 0; } + + igc-rating, + igc-select { + --ig-size: 1; + } + + igc-avatar { + --size: #{sizable(rem(28px), rem(36px), rem(46px))}; + } + + igc-select, + igc-combo, + igc-input { + padding-block: rem(6px); + } + + // input overrides + igc-input::part(container) { + --background: transparent; + } } :host([active]) { @@ -31,7 +51,7 @@ $inset-shadow-width: #{rem(1px)}; border-inline-end: none; } -[part~="text"] { +[part~='text'] { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -57,7 +77,6 @@ igc-select { &::part(container), &::part(input) { box-shadow: none; - height: 100%; background: inherit; border: 0; color: inherit; diff --git a/src/styles/filter-row/filter-row.scss b/src/styles/filter-row/filter-row.scss index d959b74..a5aaef9 100644 --- a/src/styles/filter-row/filter-row.scss +++ b/src/styles/filter-row/filter-row.scss @@ -7,8 +7,6 @@ $filtering-row-text-color: var-get($theme, 'filtering-row-text-color'); $border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); :host { - --ig-size: 1; - display: grid; grid-row: filter-row; min-height: $ig-cells-min-height; @@ -16,7 +14,36 @@ $border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-s color: var-get($theme, 'header-text-color'); border-block-end: $border; z-index: var(--z-index-base); - padding-inline-end: var(--scrollbar-offset); + padding-inline-end: var(--scrollbar-offset); + position: relative ; + + &:has([part~='active-state']) { + &::after { + display: block; + position: absolute; + content: ""; + background: inherit; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-start: rem(-1px); + bottom: 0; + box-shadow: 0 rem(1px) 0 var-get($theme, 'filtering-row-background'), 0 rem(4px) rem(10px) rgba(0, 0, 0, .12); + z-index: -1; + pointer-events: none; + user-select: none; + } + } + + igc-chip { + --component-size: var(--ig-size); + + // TODO FIX ON COMPONENT LEVEL + display: inline-flex; + } + + igc-input { + --ig-size: 1; + } } [part='filter-row-preview'] { @@ -38,7 +65,6 @@ $border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-s align-items: center; gap: rem(8px); position: relative; - inset-block-start: rem(-1px); } [part='filter-row-preview']:last-of-type { diff --git a/src/styles/header-cell/header-cell.scss b/src/styles/header-cell/header-cell.scss index 667713e..08a39e7 100644 --- a/src/styles/header-cell/header-cell.scss +++ b/src/styles/header-cell/header-cell.scss @@ -79,6 +79,7 @@ $theme: $material; } [part~='filtered'] { + color: var-get($theme, 'filtering-header-text-color'); background: var-get($theme, 'filtering-header-background'); } diff --git a/src/styles/themes/grid.base.scss b/src/styles/themes/grid.base.scss index 095b016..0faf3a0 100644 --- a/src/styles/themes/grid.base.scss +++ b/src/styles/themes/grid.base.scss @@ -1,38 +1,42 @@ -@use "../common" as *; +@use '../common' as *; :host { - --scrollbar-offset: 0; - --z-index-base: 1; - - display: grid; - height: 100%; - position: relative; - font-family: var(--ig-font-family), serif; - overflow: auto hidden; - grid-template-rows: [header-row] max-content [filter-row] max-content [virtualized-container] auto; + @include sizable(); + + --component-size: var(--ig-size, var(--ig-size-large)); + + --scrollbar-offset: 0; + --z-index-base: 1; + + display: grid; + height: 100%; + position: relative; + font-family: var(--ig-font-family), serif; + overflow: auto hidden; + grid-template-rows: [header-row] max-content [filter-row] max-content [virtualized-container] auto; } igc-virtualizer { - grid-row: virtualized-container; - display: flex; - flex-flow: column; - flex: 1; - overflow: hidden auto !important; - - &:focus { - outline: none; - } + grid-row: virtualized-container; + display: flex; + flex-flow: column; + flex: 1; + overflow: hidden auto !important; + + &:focus { + outline: none; + } } -[part~="resize-indicator"] { - position: absolute; - height: 100%; - width: rem(2px); - inset-inline-start: 0; - top: 0; - z-index: calc(var(--z-index-base) + 1); +[part~='resize-indicator'] { + position: absolute; + height: 100%; + width: rem(2px); + inset-inline-start: 0; + top: 0; + z-index: calc(var(--z-index-base) + 1); } -[part="column-sink"] { - display: none; +[part='column-sink'] { + display: none; }