From 5c818b22204c54e2e27e97b4a58805b727a8d787 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 15 Aug 2024 11:15:52 +0300 Subject: [PATCH 01/13] feat(icons): add indigo icons and references --- .../src/lib/icon/icon.references.ts | 56 +++++++- .../src/lib/icon/icon.service.ts | 5 + .../src/lib/icon/icons.indigo.ts | 126 ++++++++++++++++++ .../src/lib/icon/public_api.ts | 1 + 4 files changed, 186 insertions(+), 2 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/icon/icons.indigo.ts diff --git a/projects/igniteui-angular/src/lib/icon/icon.references.ts b/projects/igniteui-angular/src/lib/icon/icon.references.ts index b4d082253b8..4716c22732d 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.references.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.references.ts @@ -65,6 +65,10 @@ const loadIconRefs = () => [ name: 'arrow_upward', family: 'material', }, + indigo: { + name: 'chevron_left', + family: 'internal_indigo', + }, }), addIcon('arrow_next', { default: { @@ -75,17 +79,29 @@ const loadIconRefs = () => [ name: 'arrow_downward', family: 'material', }, + indigo: { + name: 'chevron_right', + family: 'internal_indigo', + }, }), addIcon('expand', { default: { name: 'expand_more', family: 'material', + }, + indigo: { + name: 'chevron_down', + family: 'internal_indigo', } }), addIcon('collapse', { default: { name: 'expand_less', family: 'material', + }, + indigo: { + name: 'chevron_up', + family: 'internal_indigo', } }), addIcon('carousel_prev', { @@ -95,7 +111,7 @@ const loadIconRefs = () => [ }, indigo: { name: 'chevron_left', - family: 'material', + family: 'internal_indigo', }, }), addIcon('carousel_next', { @@ -105,7 +121,7 @@ const loadIconRefs = () => [ }, indigo: { name: 'chevron_right', - family: 'material', + family: 'internal_indigo', }, }), addIcon('arrow_back', { @@ -137,6 +153,10 @@ const loadIconRefs = () => [ name: 'clear', family: 'material', }, + indigo: { + name: 'clear', + family: 'internal_indigo', + }, }), addIcon('input_expand', { default: { @@ -147,6 +167,10 @@ const loadIconRefs = () => [ name: 'expand_more', family: 'material', }, + indigo: { + name: 'chevron_down', + family: 'internal_indigo', + }, }), addIcon('input_collapse', { default: { @@ -157,6 +181,10 @@ const loadIconRefs = () => [ name: 'expand_less', family: 'material', }, + indigo: { + name: 'chevron_up', + family: 'internal_indigo', + }, }), addIcon('arrow_drop_down', { default: { @@ -283,12 +311,20 @@ const loadIconRefs = () => [ name: 'chevron_right', family: 'material', }, + indigo: { + name: 'chevron_right', + family: 'internal_indigo', + }, }), addIcon('tree_collapse', { default: { name: 'expand_more', family: 'material', }, + indigo: { + name: 'chevron_down', + family: 'internal_indigo', + }, }), addIcon('chevron_right', { default: { @@ -325,12 +361,20 @@ const loadIconRefs = () => [ name: 'unfold_more', family: 'material', }, + indigo: { + name: 'unfold_more', + family: 'internal_indigo', + }, }), addIcon('unfold_less', { default: { name: 'unfold_less', family: 'material', }, + indigo: { + name: 'unfold_less', + family: 'internal_indigo', + }, }), addIcon('drag_indicator', { default: { @@ -349,12 +393,20 @@ const loadIconRefs = () => [ name: 'arrow_upward', family: 'material', }, + indigo: { + name: 'arrow_upward', + family: 'internal_indigo', + }, }), addIcon('sort_desc', { default: { name: 'arrow_downward', family: 'material', }, + indigo: { + name: 'arrow_downward', + family: 'internal_indigo', + }, }), addIcon('search', { default: { diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.ts b/projects/igniteui-angular/src/lib/icon/icon.service.ts index 929fc16ee69..22b63bb17b0 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.ts @@ -8,6 +8,7 @@ import { iconReferences } from './icon.references' import { IconFamily, IconMeta, FamilyMeta } from "./types"; import type { IconType, IconReference } from './types'; import { IgxTheme } from "../services/theme/theme.service"; +import { IndigoIcons } from "./icons.indigo"; /** * Event emitted when a SVG icon is loaded through @@ -71,6 +72,10 @@ export class IgxIconService { if (this._platformUtil?.isBrowser) { this._domParser = new DOMParser(); + + for (const [name, svg] of IndigoIcons) { + this.addSvgIconFromText(name, svg.value, `internal_${svg.fontSet}`, true); + } } } diff --git a/projects/igniteui-angular/src/lib/icon/icons.indigo.ts b/projects/igniteui-angular/src/lib/icon/icons.indigo.ts new file mode 100644 index 00000000000..c8c20f4172d --- /dev/null +++ b/projects/igniteui-angular/src/lib/icon/icons.indigo.ts @@ -0,0 +1,126 @@ +import { IMXIcon } from "@igniteui/material-icons-extended" + +const clear: IMXIcon = { + name: 'clear', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const unfold_more: IMXIcon = { + name: 'unfold_more', + value: ` + + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const unfold_less: IMXIcon = { + name: 'unfold_less', + value: ` + + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const arrow_forward: IMXIcon = { + name: 'arrow_forward', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const arrow_back: IMXIcon = { + name: 'arrow_back', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const arrow_downward: IMXIcon = { + name: 'arrow_downward', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const arrow_upward: IMXIcon = { + name: 'arrow_upward', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const chevron_down: IMXIcon = { + name: 'chevron_down', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const chevron_up: IMXIcon = { + name: 'chevron_up', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const chevron_right: IMXIcon = { + name: 'chevron_right', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const chevron_left: IMXIcon = { + name: 'chevron_left', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +const check: IMXIcon = { + name: 'check', + value: ` + +`, + categories: ['editor'], + fontSet: 'indigo' +} + +export const IndigoIcons: Map = new Map(Object.entries({ + clear, + unfold_more, + unfold_less, + arrow_forward, + arrow_back, + arrow_downward, + arrow_upward, + chevron_down, + chevron_up, + chevron_right, + chevron_left, + check, +})); diff --git a/projects/igniteui-angular/src/lib/icon/public_api.ts b/projects/igniteui-angular/src/lib/icon/public_api.ts index d50f5de809f..fbef5762c0c 100644 --- a/projects/igniteui-angular/src/lib/icon/public_api.ts +++ b/projects/igniteui-angular/src/lib/icon/public_api.ts @@ -1,4 +1,5 @@ export * from './icon.component'; export * from './icon.service'; +export * from './icons.indigo'; export { IconMeta, FamilyMeta, IconFamily } from './types'; export type { IconReference } from './types'; From 4ee91d0a391e2879fe1808a4ab4d85a8d9931303 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 15 Aug 2024 11:18:07 +0300 Subject: [PATCH 02/13] refactor(checkbox, grid): update icons in indigo themes --- .../src/lib/checkbox/checkbox.component.html | 13 ++++++--- .../src/lib/checkbox/checkbox.component.ts | 10 +++++++ .../components/checkbox/_checkbox-theme.scss | 27 +++++++++++++++++++ .../styles/components/grid/_grid-theme.scss | 8 +++--- 4 files changed, 51 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.html b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.html index 54e631f4d0a..9bab0879680 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.html +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.html @@ -25,9 +25,16 @@ class="igx-checkbox__composite-wrapper" > - - - + @if (theme === 'indigo') { + + + + + } @else { + + + + }
diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts index 5a384ba2631..299a765a7f2 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts @@ -20,6 +20,7 @@ import { IBaseEventArgs, mkenum } from '../core/utils'; import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider'; import { noop, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { IgxTheme, ThemeService } from '../services/theme/theme.service'; export const LabelPosition = /*@__PURE__*/mkenum({ BEFORE: 'before', @@ -428,11 +429,20 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont */ private _required = false; + /** + * @hidden + * @internal + */ + protected theme: IgxTheme = 'material'; + constructor( protected cdr: ChangeDetectorRef, protected renderer: Renderer2, + protected themeService: ThemeService, @Optional() @Self() public ngControl: NgControl, ) { + this.theme = this.themeService?.globalTheme; + if (this.ngControl !== null) { this.ngControl.valueAccessor = this; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 563e56273a4..1c83ffb4f94 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -303,6 +303,20 @@ @if $variant == 'material' { inset-inline-start: -.5px; } + + @if $variant == 'indigo' { + stroke: unset; + stroke-linecap: unset; + stroke-width: unset; + stroke-dasharray: unset; + stroke-dashoffset: unset; + fill: var-get($theme, 'tick-color'); + transition: none !important; + + rect { + fill: none; + } + } } %igx-checkbox--indeterminate { @@ -363,6 +377,19 @@ } } } + + @if $variant == 'indigo' { + %cbx-composite-mark { + fill: none; + stroke-dashoffset: unset !important; + transform: none !important; + + rect { + fill: var-get($theme, 'tick-color'); + opacity: 1; + } + } + } } %igx-checkbox--indeterminate--invalid { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index b4e588c9116..6d63cc5fc27 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -691,7 +691,7 @@ compact: rem(12px) ); - $hierarchical-action-icon: rem(24px); + $hierarchical-action-icon: if($variant == 'indigo-design', rem(16px), rem(24px)); $hierarchical-indent: ( comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}), @@ -1626,7 +1626,7 @@ } igx-icon { - --component-size: 3; + --component-size: #{if($variant == 'indigo', 2, 3)};; } } @@ -2961,11 +2961,11 @@ } igx-icon { - --component-size: 3; + --component-size: #{if($variant == 'indigo', 2, 3)};; color: var-get($theme, 'expand-icon-color'); max-width: $hierarchical-action-icon; - min-width: $hierarchical-action-icon; + min-width: min-content; } [dir='rtl'] & { From 1eec16603a87ef27b53faa43dd11c2e6d9101df6 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 16 Aug 2024 14:17:03 +0300 Subject: [PATCH 03/13] refactor(icons): add missing icons and fix sizes --- .../grid/_excel-filtering-theme.scss | 14 +++++++---- .../styles/components/tabs/_tabs-theme.scss | 6 +++++ .../excel-style-search.component.html | 17 ++++++------- .../src/lib/icon/icon.references.ts | 24 +++++++++++++++++++ src/styles/_variables.scss | 8 +++---- 5 files changed, 52 insertions(+), 17 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index eb82f18f598..a971c6aef45 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -227,10 +227,12 @@ } igx-icon { + --component-size: #{if($variant == 'indigo', 2, var(--grid-size))}; + display: initial; - width: var(--igx-icon-size, #{rem(18px)}); - height: var(--igx-icon-size, #{rem(18px)}); - font-size: var(--igx-icon-size, #{rem(18px)}); + width: var(--size) !important; + height: var(--size) !important; + font-size: var(--size) !important; } } @@ -297,8 +299,10 @@ color: var-get($theme, 'excel-filtering-actions-hover-foreground'); } - igx-icon { - --component-size: 3; + @if $variant == 'indigo' { + igx-icon { + --component-size: 2; + } } [dir='rtl'] & { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index 198a37f79b6..05376ef04e3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -314,6 +314,12 @@ @include ripple($button-ripple-theme); @include css-vars($button-ripple-theme); + @if $variant == 'indigo' { + igx-icon { + --component-size: 2; + } + } + [dir='rtl'] & { transform: scaleX(-1); } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html index dd6e17110f0..946bf531a1b 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html @@ -9,14 +9,15 @@ (keydown)="onInputKeyDown($event)" [placeholder]="esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder" autocomplete="off"/> - - + + + + [ name: 'arrow_back', family: 'material', }, + indigo: { + name: 'arrow_back', + family: 'internal_indigo', + }, }), addIcon('arrow_forward', { default: { name: 'arrow_forward', family: 'material', }, + indigo: { + name: 'arrow_forward', + family: 'internal_indigo', + }, }), addIcon('selected', { default: { @@ -263,12 +271,20 @@ const loadIconRefs = () => [ name: 'check', family: 'material', }, + indigo: { + name: 'check', + family: 'internal_indigo', + }, }), addIcon('cancel', { default: { name: 'close', family: 'material', }, + indigo: { + name: 'clear', + family: 'internal_indigo', + }, }), addIcon('edit', { default: { @@ -331,12 +347,20 @@ const loadIconRefs = () => [ name: 'chevron_right', family: 'material', }, + indigo: { + name: 'chevron_right', + family: 'internal_indigo', + }, }), addIcon('chevron_left', { default: { name: 'chevron_left', family: 'material', }, + indigo: { + name: 'chevron_left', + family: 'internal_indigo', + }, }), addIcon('expand_more', { default: { diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 632665ad146..cf782515de3 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-material-palette; -$schema: $light-material-schema; -$typeface: $material-typeface; -$type-scale: $material-type-scale; +$palette: $light-indigo-palette; +$schema: $light-indigo-schema; +$typeface: $indigo-typeface; +$type-scale: $indigo-type-scale; $variant: map.get($schema, '_meta', 'variant'); $background-color: var(--ig-gray-900-contrast); From af8e1c655ef5355b002fd561053398fcec06c803 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 16 Aug 2024 14:30:30 +0300 Subject: [PATCH 04/13] refactor(demos): revert back to material theme as default --- src/styles/_variables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index cf782515de3..632665ad146 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-indigo-palette; -$schema: $light-indigo-schema; -$typeface: $indigo-typeface; -$type-scale: $indigo-type-scale; +$palette: $light-material-palette; +$schema: $light-material-schema; +$typeface: $material-typeface; +$type-scale: $material-type-scale; $variant: map.get($schema, '_meta', 'variant'); $background-color: var(--ig-gray-900-contrast); From 190f2f81f57765d1cc80598f3cca50167425ed7c Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 16 Aug 2024 14:45:04 +0300 Subject: [PATCH 05/13] refactor(grid-theme): replace indigo-theme with indigo --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 6d63cc5fc27..b8c73f153dd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -691,7 +691,7 @@ compact: rem(12px) ); - $hierarchical-action-icon: if($variant == 'indigo-design', rem(16px), rem(24px)); + $hierarchical-action-icon: if($variant == 'indigo', rem(16px), rem(24px)); $hierarchical-indent: ( comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}), From 5944c0622c68b0b35fbce2afda809c4a66f74a38 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 16 Aug 2024 14:51:35 +0300 Subject: [PATCH 06/13] spec(filtering-ui): fix failing test --- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index beae9e6f637..06c9fee5ad1 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -4293,15 +4293,15 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { fix.detectChanges(); // Verify scrollbar's scrollTop. - expect(scrollbar.scrollTop >= 670 && scrollbar.scrollTop <= 700).toBe(true, + expect(scrollbar.scrollTop >= 660 && scrollbar.scrollTop <= 700).toBe(true, 'search scrollbar has incorrect scrollTop: ' + scrollbar.scrollTop); // Verify display container height. const displayContainer = searchComponent.querySelector('igx-display-container'); const displayContainerRect = displayContainer.getBoundingClientRect(); - expect(displayContainerRect.height).toBe(216, 'incorrect search display container height'); + expect(displayContainerRect.height).toBe(240, 'incorrect search display container height'); // Verify rendered list items count. const listItems = displayContainer.querySelectorAll('igx-list-item'); - expect(listItems.length).toBe(9, 'incorrect rendered list items count'); + expect(listItems.length).toBe(10, 'incorrect rendered list items count'); })); it('should correctly display all items in search list after filtering it', (async () => { From ad9e0bf043002d4999a7f123e5ccb2918c911c53 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 12 Sep 2024 13:32:44 +0300 Subject: [PATCH 07/13] refactor(themes): change icon sizes for indigo --- .../_expansion-panel-theme.scss | 2 +- .../styles/components/grid/_grid-theme.scss | 71 ++++++++++--------- .../styles/components/tree/_tree-theme.scss | 12 ++-- ...pivot-row-dimension-content.component.html | 1 - .../src/lib/icon/icon.references.ts | 16 +++++ src/app/tabs/tabs.sample.html | 2 +- 6 files changed, 61 insertions(+), 43 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss index 76159c5c35b..643bd75d336 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss @@ -221,7 +221,7 @@ @if $variant == 'indigo' { igx-icon { - --component-size: 1; + --component-size: 2; } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index b8c73f153dd..278ee7bb9bb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -723,7 +723,13 @@ compact: rem(12px) ); - $indicator-icon-width: rem(24px); + $indicator-icon-width: map.get(( + 'material': rem(24px), + 'fluent': rem(24px), + 'bootstrap': rem(24px), + 'indigo': rem(16px), + ), $variant); + $drag-icon-size: rem(24px); $grouping-padding-right: rem(12px); @@ -1126,10 +1132,7 @@ %igx-grid__header-indentation { igx-icon { - --component-size: var(--ig-size, var(--ig-size-large)); - font-size: rem(24px); - width: rem(24px); - height: rem(24px); + --component-size: #{if($variant == 'indigo', 2, 3)}; } } @@ -1391,8 +1394,6 @@ ); padding-block: 0; flex: 1 0 auto; - // Fix for IE 11 - min-width: calc(#{$drag-icon-size} + #{$cell-padding-comfortable}); background: inherit; z-index: 4; cursor: move; @@ -1400,9 +1401,7 @@ background-clip: border-box; igx-icon { - width: var(--igx-icon-size, #{$drag-icon-size}); - height: var(--igx-icon-size, #{$drag-icon-size}); - font-size: var(--igx-icon-size, #{$drag-icon-size}); + --component-size: #{if($variant == 'indigo', 2, 3)}; } } @@ -1521,6 +1520,10 @@ %igx-grid__tr--header { display: flex; align-items: center; + + igx-icon { + --component-size: #{if($variant == 'indigo', 2, 3)}; + } } %igx-grid__tr--add-animate { @@ -1924,9 +1927,13 @@ display: flex; igx-icon { - width: var(--igx-icon-size, #{rem(15px)}); - height: var(--igx-icon-size, #{rem(15px)}); - font-size: var(--igx-icon-size, #{rem(15px)}); + @if $variant == 'indigo' { + --component-size: 1; + } else { + width: var(--igx-icon-size, #{rem(15px)}); + height: var(--igx-icon-size, #{rem(15px)}); + font-size: var(--igx-icon-size, #{rem(15px)}); + } } &::after { @@ -2357,13 +2364,11 @@ } %igx-group-label__icon { - user-select: none; + &.igx-icon { + --component-size: #{if($variant == 'indigo', 2, 1)}; - igx-icon { color: var-get($theme, 'group-label-icon'); - width: var(--igx-icon-size, #{rem(16px)}); - height: var(--igx-icon-size, #{rem(16px)}); - font-size: var(--igx-icon-size, #{rem(16px)}); + user-select: none; } } @@ -2574,10 +2579,9 @@ min-height: var(--header-size); igx-icon { + --component-size: #{if($variant == 'indigo', 2, 3)}; + color: var-get($theme, 'expand-icon-color'); - width: var(--igx-icon-size, #{$indicator-icon-width}); - height: var(--igx-icon-size, #{$indicator-icon-width}); - font-size: var(--igx-icon-size, #{$indicator-icon-width}); } &:hover, @@ -2606,7 +2610,7 @@ z-index: 4; igx-icon { - --component-size: var(--grid-size); + --component-size: #{if($variant == 'indigo', 2, 3)}; } } @@ -2614,12 +2618,8 @@ position: absolute; cursor: pointer; user-select: none; - inset-block-start: calc(50% - 12px); - inset-inline-start: sizable( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - ); + inset-block-start: calc(50% - #{$indicator-icon-width} / 2); + inset-inline-start: var(--indicator-inline-inset); &:hover { color: var-get($theme, 'expand-icon-hover-color'); @@ -2627,9 +2627,9 @@ &%igx-grid__group-expand-btn--push { inset-block-start: sizable( - math.div(map.get($grid-header-height, 'compact') - rem(24px), 2), - math.div(map.get($grid-header-height, 'cosy') - rem(24px), 2), - math.div(map.get($grid-header-height, 'comfortable') - rem(24px), 2) + math.div(map.get($grid-header-height, 'compact') - $indicator-icon-width, 2), + math.div(map.get($grid-header-height, 'cosy') - $indicator-icon-width, 2), + math.div(map.get($grid-header-height, 'comfortable') - $indicator-icon-width, 2) ); } } @@ -2646,6 +2646,11 @@ $level--compact: map-get($row-indentation-level, 'compact'); %igx-grid__row-indentation--level-#{$i} { + --indicator-inline-inset: #{sizable( + map.get($grid-grouping-indicator-padding, 'compact'), + map.get($grid-grouping-indicator-padding, 'cosy'), + map.get($grid-grouping-indicator-padding, 'comfortable') + )}; padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable); } @@ -2741,9 +2746,7 @@ visibility: visible; igx-icon { - width: var(--igx-icon-size, #{rem(18px)}); - height: var(--igx-icon-size, #{rem(18px)}); - font-size: var(--igx-icon-size, #{rem(18px)}); + --component-size: #{if($variant == 'indigo', 2, 3)}; } %igx-badge-display { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss index 5fdc78879d2..9f3acba9217 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss @@ -129,7 +129,7 @@ $icon-size-default: rem(24px); $icon-space-default: rem(8px); - $icon-size-indigo: rem(14px); + $icon-size-indigo: rem(16px); $icon-space-indigo: rem(4px); $node-indent: map.get(( @@ -239,11 +239,10 @@ } } - // We need this here, since we count on it to calculate the width of the tree drop indicator igx-icon { - width: var(--igx-icon-size, #{$icon-size}); - height: var(--igx-icon-size, #{$icon-size}); - font-size: var(--igx-icon-size, #{$icon-size}); + @if $variant == 'indigo' { + --component-size: 2; + } } [dir='rtl'] & { @@ -365,8 +364,9 @@ --spacer: #{sizable(#{map.get($node-indent, 'compact')}, #{map.get($node-indent, 'cosy')}, #{map.get($node-indent, 'comfortable')})}; @if $variant == 'indigo' { - --spacer: #{sizable(24px)}; + --spacer: #{$icon-size}; } + width: var(--spacer); display: inline-block; } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html index 1d6f9fbbb88..381eec6315f 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html @@ -21,7 +21,6 @@ [name]="getExpandState() ? 'tree_collapse' : 'tree_expand'" [attr.draggable]="false" (click)="toggleRowDimension($event)" - style="--component-size: 3" > {{column.header}} diff --git a/projects/igniteui-angular/src/lib/icon/icon.references.ts b/projects/igniteui-angular/src/lib/icon/icon.references.ts index 243508de26b..28101c3c35e 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.references.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.references.ts @@ -149,6 +149,10 @@ const loadIconRefs = () => [ name: 'done', family: 'material', }, + indigo: { + name: 'check', + family: 'internal_indigo', + }, }), addIcon('remove', { default: { @@ -229,12 +233,20 @@ const loadIconRefs = () => [ name: 'navigate_before', family: 'material', }, + indigo: { + name: 'chevron_left', + family: 'internal_indigo', + }, }), addIcon('next', { default: { name: 'navigate_next', family: 'material', }, + indigo: { + name: 'chevron_right', + family: 'internal_indigo', + }, }), addIcon('first_page', { default: { @@ -259,6 +271,10 @@ const loadIconRefs = () => [ name: 'close', family: 'material', }, + indigo: { + name: 'clear', + family: 'internal_indigo', + }, }), addIcon('error', { default: { diff --git a/src/app/tabs/tabs.sample.html b/src/app/tabs/tabs.sample.html index 3c65bdb7217..beda9b47734 100644 --- a/src/app/tabs/tabs.sample.html +++ b/src/app/tabs/tabs.sample.html @@ -252,7 +252,7 @@

Add/Remove Tabs with prefix and suffix

igxSuffix (click)="closeTab(i)" > - close + From c072bfbf43e71d8ccbf694ecb21bc79dedfe7c6a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 12 Sep 2024 14:36:47 +0300 Subject: [PATCH 08/13] lint(grid-theme): fix errors --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 278ee7bb9bb..5da876625fb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1929,7 +1929,7 @@ igx-icon { @if $variant == 'indigo' { --component-size: 1; - } else { + } @else { width: var(--igx-icon-size, #{rem(15px)}); height: var(--igx-icon-size, #{rem(15px)}); font-size: var(--igx-icon-size, #{rem(15px)}); From b1df6bc00e3a2fe725bdc13e72670065ff634663 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 12 Sep 2024 14:37:32 +0300 Subject: [PATCH 09/13] spec(pivot-grid): fix failing tests --- .../src/lib/grids/pivot-grid/pivot-grid.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index d9af1ea9f80..deaecb9a73c 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -1934,8 +1934,8 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(200); pivotGrid.autoSizeRowDimension(rowDimension); fixture.detectChanges(); - expect(rowDimension.width).toBe('158px'); - expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(158); + expect(rowDimension.width).toBe('162px'); + expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(162); }); it('should auto-size row dimension when width is set to auto.', fakeAsync(() => { @@ -1978,9 +1978,9 @@ describe('IgxPivotGrid #pivotGrid', () => { fixture.detectChanges(); tick(200); rowDimension = pivotGrid.pivotConfiguration.rows[0]; - expect(rowDimension.autoWidth).toBe(158); + expect(rowDimension.autoWidth).toBe(162); expect(rowDimension.width).toBe('auto'); - expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(158); + expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(162); })); it('should auto-generate pivot config when autoGenerateConfig is set to true.', () => { From 54be430f8134a854ef8db96373008a4b36e13158 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 12 Sep 2024 17:08:23 +0300 Subject: [PATCH 10/13] refactor(grid-theme): update filtering cell icon size --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 5da876625fb..4ebc2bb6abe 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -2746,7 +2746,7 @@ visibility: visible; igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; + --component-size: #{if($variant == 'indigo', 2, 1)}; } %igx-badge-display { From c03e025cadf6db47fe66e32bd307f435b94cce3e Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 13 Sep 2024 14:35:40 +0300 Subject: [PATCH 11/13] refactor(grid-theme): correctly size bool icons in indigo theme --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 4ebc2bb6abe..fb6c2e72a07 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1457,9 +1457,7 @@ %igx-grid__td--bool { igx-icon { - width: var(--igx-icon-size, #{rem(18px)}); - height: var(--igx-icon-size, #{rem(18px)}); - font-size: var(--igx-icon-size, #{rem(18px)}); + --component-size: #{if($variant == 'indigo', 2, 1)}; } %igx-icon--error { From 427b8b40835acfeb4b3f9869fe732c88b4cc0acc Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 18 Sep 2024 15:39:05 +0300 Subject: [PATCH 12/13] refactor(icons): add first and last page icons for indigo --- .../components/grid/_excel-filtering-theme.scss | 10 +++++++--- .../core/styles/components/grid/_grid-theme.scss | 6 +++++- .../src/lib/icon/icon.references.ts | 8 ++++++++ .../src/lib/icon/icons.indigo.ts | 16 ++++++++++++++++ src/styles/_variables.scss | 8 ++++---- 5 files changed, 40 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index a971c6aef45..b19d5ff9311 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -80,9 +80,13 @@ cursor: pointer; igx-icon { - width: var(--igx-icon-size, #{rem(15px)}); - height: var(--igx-icon-size, #{rem(15px)}); - font-size: var(--igx-icon-size, #{rem(15px)}); + @if $variant == 'indigo' { + --component-size: 2; + } @else { + width: var(--igx-icon-size, #{rem(15px)}); + height: var(--igx-icon-size, #{rem(15px)}); + font-size: var(--igx-icon-size, #{rem(15px)}); + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index fb6c2e72a07..12d64905d6d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1688,6 +1688,10 @@ %grid-cell--fixed-width { flex-grow: 0; outline-style: none; + + igx-icon { + --component-size: #{if($variant == 'indigo', 2, 3)}; + } } %grid-cell--active { @@ -1926,7 +1930,7 @@ igx-icon { @if $variant == 'indigo' { - --component-size: 1; + --component-size: 2; } @else { width: var(--igx-icon-size, #{rem(15px)}); height: var(--igx-icon-size, #{rem(15px)}); diff --git a/projects/igniteui-angular/src/lib/icon/icon.references.ts b/projects/igniteui-angular/src/lib/icon/icon.references.ts index 28101c3c35e..fd17cad8202 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.references.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.references.ts @@ -253,12 +253,20 @@ const loadIconRefs = () => [ name: 'first_page', family: 'material', }, + indigo: { + name: 'first_page', + family: 'internal_indigo', + }, }), addIcon('last_page', { default: { name: 'last_page', family: 'material', }, + indigo: { + name: 'last_page', + family: 'internal_indigo', + }, }), addIcon('add', { default: { diff --git a/projects/igniteui-angular/src/lib/icon/icons.indigo.ts b/projects/igniteui-angular/src/lib/icon/icons.indigo.ts index c8c20f4172d..224441d8932 100644 --- a/projects/igniteui-angular/src/lib/icon/icons.indigo.ts +++ b/projects/igniteui-angular/src/lib/icon/icons.indigo.ts @@ -110,6 +110,20 @@ const check: IMXIcon = { fontSet: 'indigo' } +const first_page: IMXIcon = { + name: 'first_page', + value: ``, + categories: ['editor'], + fontSet: 'indigo' +} + +const last_page: IMXIcon = { + name: 'last_page', + value: ``, + categories: ['editor'], + fontSet: 'indigo' +} + export const IndigoIcons: Map = new Map(Object.entries({ clear, unfold_more, @@ -123,4 +137,6 @@ export const IndigoIcons: Map = new Map(Object.entries({ chevron_right, chevron_left, check, + first_page, + last_page })); diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 632665ad146..cf782515de3 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-material-palette; -$schema: $light-material-schema; -$typeface: $material-typeface; -$type-scale: $material-type-scale; +$palette: $light-indigo-palette; +$schema: $light-indigo-schema; +$typeface: $indigo-typeface; +$type-scale: $indigo-type-scale; $variant: map.get($schema, '_meta', 'variant'); $background-color: var(--ig-gray-900-contrast); From 5de0dc8d68fed24f3641bab00989480b115a6bcd Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 19 Sep 2024 08:51:06 +0300 Subject: [PATCH 13/13] fix(icons, themes): first and last page fill and sizes --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 4 ++++ projects/igniteui-angular/src/lib/icon/icons.indigo.ts | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 12d64905d6d..1f8ea0ba40c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1960,6 +1960,10 @@ cursor: pointer; igx-icon { + @if $variant == 'indigo' { + --component-size: 2; + } + color: var-get($theme, 'expand-icon-color'); } diff --git a/projects/igniteui-angular/src/lib/icon/icons.indigo.ts b/projects/igniteui-angular/src/lib/icon/icons.indigo.ts index 224441d8932..a9302dd4863 100644 --- a/projects/igniteui-angular/src/lib/icon/icons.indigo.ts +++ b/projects/igniteui-angular/src/lib/icon/icons.indigo.ts @@ -112,14 +112,14 @@ const check: IMXIcon = { const first_page: IMXIcon = { name: 'first_page', - value: ``, + value: ``, categories: ['editor'], fontSet: 'indigo' } const last_page: IMXIcon = { name: 'last_page', - value: ``, + value: ``, categories: ['editor'], fontSet: 'indigo' }