Skip to content

Commit 7d92bf6

Browse files
SisIvanovaSisIvanova
committed
refactor(grid-theme): split theme according to the grid refactoring
Closes #9556
1 parent 540e930 commit 7d92bf6

32 files changed

+250
-155
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

+5-75
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import './excel-filtering-component';
22
@import './advanced-filtering-component';
3+
@import './group-by-area-component';
4+
@import './header-row-component';
35

46
////
57
/// @group components
@@ -9,6 +11,7 @@
911
/// @requires {mixin} bem-mod
1012
/// @requires {mixin} _excel-filtering-partial
1113
/// @requires {mixin} _advanced-filtering-partial
14+
/// @requires {mixin} _group-by-area
1215
////
1316
@include b(igx-grid) {
1417
$this: bem--selector-to-string(&);
@@ -20,48 +23,6 @@
2023
@extend %grid-caption !optional;
2124
}
2225

23-
@include e(thead) {
24-
@extend %grid-thead-container !optional;
25-
}
26-
27-
@include e(thead-wrapper) {
28-
@extend %grid-thead !optional;
29-
30-
igx-display-container {
31-
@extend %grid-display-container-thead !optional;
32-
}
33-
34-
&:focus {
35-
@extend %disable-focus-styles !optional;
36-
}
37-
}
38-
39-
@include e(thead-title) {
40-
@extend %grid-cell-display !optional;
41-
@extend %grid-cell-header !optional;
42-
@extend %grid-thead-title !optional;
43-
}
44-
45-
@include e(thead-group) {
46-
@extend %grid-thead-group !optional;
47-
}
48-
49-
@include e(thead-subgroup) {
50-
@extend %grid-thead-subgroup !optional;
51-
}
52-
53-
@include e(thead-title, $m: pinned-last) {
54-
@extend %grid-thead-title--pinned !optional;
55-
}
56-
57-
@include e(thead-item) {
58-
@extend %grid-thead-item !optional;
59-
}
60-
61-
@include e(thead-thumb) {
62-
@extend %grid-thead-thumb !optional;
63-
}
64-
6526
@include e(tbody) {
6627
@extend %grid-tbody-container !optional;
6728
}
@@ -207,7 +168,6 @@
207168
@extend %igx-grid__tr--deleted !optional;
208169
}
209170

210-
211171
@include e(tr, $m: highlighted) {
212172
@extend %igx-grid__tr--highlighted !optional;
213173
}
@@ -480,14 +440,6 @@
480440
@extend %igx-grid__row-indentation !optional;
481441
}
482442

483-
@include e(grouparea) {
484-
@extend %igx-grid__grouparea !optional;
485-
}
486-
487-
@include e(grouparea-connector) {
488-
@extend %igx-grid__grouparea-connector !optional;
489-
}
490-
491443
@include e(grouping-indicator) {
492444
@extend %igx-grid__grouping-indicator !optional;
493445
}
@@ -703,14 +655,6 @@
703655
@extend %grid-cell-display--cosy !optional;
704656
}
705657

706-
@include e(thead-wrapper) {
707-
@extend %grid-thead--cosy !optional;
708-
}
709-
710-
@include e(thead-title) {
711-
@extend %grid-thead-title--cosy !optional;
712-
}
713-
714658
@include e(th-title) {
715659
@extend %grid-cell-header-title--cosy !optional;
716660
}
@@ -727,10 +671,6 @@
727671
@extend %igx-grid__row-indentation--cosy !optional;
728672
}
729673

730-
@include e(grouparea) {
731-
@extend %igx-grid__grouparea--cosy !optional;
732-
}
733-
734674
@include e(header-indentation) {
735675
@extend %igx-grid__header-indentation--cosy !optional;
736676
}
@@ -816,14 +756,6 @@
816756
@extend %grid-cell-display--compact !optional;
817757
}
818758

819-
@include e(thead-wrapper) {
820-
@extend %grid-thead--compact !optional;
821-
}
822-
823-
@include e(thead-title) {
824-
@extend %grid-thead-title--compact !optional;
825-
}
826-
827759
@include e(th-title) {
828760
@extend %grid-cell-header-title--compact !optional;
829761
}
@@ -840,10 +772,6 @@
840772
@extend %igx-grid__row-indentation--compact !optional;
841773
}
842774

843-
@include e(grouparea) {
844-
@extend %igx-grid__grouparea--compact !optional;
845-
}
846-
847775
@include e(header-indentation) {
848776
@extend %igx-grid__header-indentation--compact !optional;
849777
}
@@ -904,6 +832,8 @@
904832

905833
@include _excel-filtering-partial();
906834
@include _advanced-filtering-partial();
835+
@include _group-by-area();
836+
@include _header-row();
907837
}
908838

909839
@include b(igx-drop-area) {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -2135,7 +2135,7 @@
21352135
padding-#{$right}: map-get($grid-grouping-indicator-padding, 'compact')
21362136
}
21372137

2138-
%igx-grid__grouparea {
2138+
%igx-grid-grouparea {
21392139
grid-row: 2;
21402140
display: flex;
21412141
align-items: center;
@@ -2155,7 +2155,7 @@
21552155
}
21562156
}
21572157

2158-
%igx-grid__grouparea-connector {
2158+
%igx-grid-grouparea__connector {
21592159
display: inline-flex;
21602160
justify-content: center;
21612161
align-items: center;
@@ -2172,12 +2172,12 @@
21722172
}
21732173
}
21742174

2175-
%igx-grid__grouparea--cosy {
2175+
%igx-grid-grouparea--cosy {
21762176
min-height: map-get($grouparea-min-height, 'cosy');
21772177
padding: map-get($grouparea-padding, 'cosy');
21782178
}
21792179

2180-
%igx-grid__grouparea--compact {
2180+
%igx-grid-grouparea--compact {
21812181
min-height: map-get($grouparea-min-height, 'compact');
21822182
padding: map-get($grouparea-padding, 'compact');
21832183
}

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_group-by-area-component.scss

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
////
2+
/// @access private
3+
/// @group components
4+
/// @requires {mixin} bem-block
5+
/// @requires {mixin} bem-elem
6+
/// @requires {mixin} bem-mod
7+
////
8+
9+
@mixin _group-by-area {
10+
@include b(igx-grid-grouparea) {
11+
@extend %igx-grid-grouparea !optional;
12+
13+
@include e(connector) {
14+
@extend %igx-grid-grouparea__connector !optional;
15+
}
16+
17+
@include m(compact) {
18+
@extend %igx-grid-grouparea--compact !optional;
19+
}
20+
21+
@include m(cosy) {
22+
@extend %igx-grid-grouparea--cosy !optional;
23+
}
24+
}
25+
}

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
////
2+
/// @access private
3+
/// @group components
4+
/// @requires {mixin} bem-block
5+
/// @requires {mixin} bem-elem
6+
/// @requires {mixin} bem-mod
7+
////
8+
9+
@mixin _header-row {
10+
@include b(igx-grid-thead) {
11+
@extend %grid-thead-container !optional;
12+
13+
@include e(wrapper) {
14+
@extend %grid-thead !optional;
15+
16+
igx-display-container {
17+
@extend %grid-display-container-thead !optional;
18+
}
19+
20+
&:focus {
21+
@extend %disable-focus-styles !optional;
22+
}
23+
}
24+
25+
@include e(title) {
26+
@extend %grid-cell-display !optional;
27+
@extend %grid-cell-header !optional;
28+
@extend %grid-thead-title !optional;
29+
}
30+
31+
@include e(title, $m: pinned-last) {
32+
@extend %grid-thead-title--pinned !optional;
33+
}
34+
35+
@include e(group) {
36+
@extend %grid-thead-group !optional;
37+
}
38+
39+
@include e(subgroup) {
40+
@extend %grid-thead-subgroup !optional;
41+
}
42+
43+
@include e(item) {
44+
@extend %grid-thead-item !optional;
45+
}
46+
47+
@include e(thumb) {
48+
@extend %grid-thead-thumb !optional;
49+
}
50+
51+
@include m(compact) {
52+
@include e(wrapper) {
53+
@extend %grid-thead--compact !optional;
54+
}
55+
56+
@include e(title) {
57+
@extend %grid-thead-title--compact !optional;
58+
}
59+
}
60+
61+
@include m(cosy) {
62+
@include e(wrapper) {
63+
@extend %grid-thead--cosy !optional;
64+
}
65+
66+
@include e(title) {
67+
@extend %grid-thead-title--cosy !optional;
68+
}
69+
}
70+
}
71+
}

‎projects/igniteui-angular/src/lib/core/styles/print/_grid-print.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $print-background: #eee;
1010
igx-input-group,
1111
igx-checkbox,
1212
igx-radio,
13-
.igx-grid__grouparea,
13+
.igx-grid-grouparea,
1414
.igx-tooltip--desktop,
1515
.igx-nav-drawer__aside,
1616
.igx-overlay,
@@ -37,7 +37,7 @@ $print-background: #eee;
3737
display: none !important;
3838
}
3939

40-
.igx-grid__grouparea,
40+
.igx-grid-grouparea,
4141
igx-paginator,
4242
.igx-grid-toolbar__actions,
4343
.igx-drop-area__icon,
@@ -66,13 +66,13 @@ $print-background: #eee;
6666
}
6767

6868
.igx-grid__tfoot,
69-
.igx-grid__grouparea,
69+
.igx-grid-grouparea,
7070
.igx-grid__filtering-cell,
7171
.igx-grid__group-row,
72-
.igx-grid__thead-title,
72+
.igx-grid-thead__title,
7373
igx-grid-toolbar,
7474
igx-grid-row,
75-
.igx-grid__thead {
75+
.igx-grid-thead {
7676
border-color: $border-color !important;
7777
}
7878

@@ -82,7 +82,7 @@ $print-background: #eee;
8282
}
8383
}
8484

85-
.igx-grid__thead,
85+
.igx-grid-thead,
8686
igx-grid-toolbar,
8787
.igx-grid__group-row,
8888
.igx-grid__tfoot {
@@ -96,7 +96,7 @@ $print-background: #eee;
9696
overflow: visible !important;
9797
}
9898

99-
.igx-grid__thead-title {
99+
.igx-grid-thead__title {
100100
igx-icon {
101101
display: none;
102102
}

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5563,7 +5563,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
55635563
let data = [];
55645564
let result;
55655565

5566-
if (event.code === 'KeyC' && (event.ctrlKey || event.metaKey) && event.currentTarget.className === 'igx-grid__thead-wrapper') {
5566+
if (event.code === 'KeyC' && (event.ctrlKey || event.metaKey) && event.currentTarget.className === 'igx-grid-thead__wrapper') {
55675567
if (selectedData.length) {
55685568
if (columnData.length === 0) {
55695569
result = this.prepareCopyData(event, selectedData);

‎projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ import { OneGroupOneColGridComponent, OneGroupThreeColsGridComponent,
2323
DynamicColGroupsGridComponent } from '../../test-utils/grid-mch-sample.spec';
2424

2525
const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid__th-title';
26-
const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid__thead-title';
27-
const GRID_COL_GROUP_THEAD_GROUP_CLASS = 'igx-grid__thead-group';
26+
const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid-thead__title';
27+
const GRID_COL_GROUP_THEAD_GROUP_CLASS = 'igx-grid-thead__group';
2828

2929
/* eslint-disable max-len */
3030
describe('IgxGrid - multi-column headers #grid', () => {

‎projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { IgxColumnComponent } from '../tree-grid/public_api';
2222
describe('IgxGrid - Column Moving #grid', () => {
2323
const CELL_CSS_CLASS = '.igx-grid__td';
2424
const COLUMN_HEADER_CLASS = '.igx-grid__th';
25-
const COLUMN_GROUP_HEADER_CLASS = '.igx-grid__thead-title';
25+
const COLUMN_GROUP_HEADER_CLASS = '.igx-grid-thead__title';
2626

2727
let fixture; let grid: IgxGridComponent;
2828
configureTestSuite((() => {

‎projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { GridFunctions } from '../../test-utils/grid-functions.spec';
1515

1616
describe('IgxGrid - Deferred Column Resizing #grid', () => {
1717

18-
const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item';
18+
const COLUMN_HEADER_GROUP_CLASS = '.igx-grid-thead__item';
1919

2020
configureTestSuite((() => {
2121
TestBed.configureTestingModule({
@@ -244,7 +244,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
244244

245245
it('should recalculate grid heights after resizing so the horizontal scrollbar appears.', fakeAsync(() => {
246246
let expectedHeight = fixture.debugElement.query(By.css('igx-grid')).nativeElement.getBoundingClientRect().height -
247-
grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height -
247+
grid.nativeElement.querySelector('.igx-grid-thead').getBoundingClientRect().height -
248248
grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height -
249249
grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height;
250250

@@ -269,7 +269,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
269269
const hScrollVisible = hScroll.offsetWidth < hScroll.children[0].offsetWidth;
270270

271271
expectedHeight = fixture.debugElement.query(By.css('igx-grid')).nativeElement.getBoundingClientRect().height -
272-
grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height -
272+
grid.nativeElement.querySelector('.igx-grid-thead').getBoundingClientRect().height -
273273
grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height -
274274
grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height;
275275
expect(grid.calcHeight).toEqual(expectedHeight);

‎projects/igniteui-angular/src/lib/grids/grid/column.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/da
2626
describe('IgxGrid - Column properties #grid', () => {
2727

2828
const COLUMN_HEADER_CLASS = '.igx-grid__th';
29-
const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item';
29+
const COLUMN_HEADER_GROUP_CLASS = '.igx-grid-thead__item';
3030

3131
configureTestSuite((() => {
3232
TestBed.configureTestingModule({

0 commit comments

Comments
 (0)