Skip to content

Commit 534f899

Browse files
didimmovasimeonoff
didimmova
and
simeonoff
authored
feat(grid): update grid border-related styles (#17333)
* feat(grid): update grid border-related styles * fix(grid): fix scrollbar start background * tests(grid): fix grid test after border changes * chore(changelog): update changelog * fix(query-builder): fix query builder derived themes input * feat(grid): use action-border-color property * fix(grid): fix pinned border in grid * feat(grid): fix chips in header and mrl borders * deps: update theming to latest version --------- Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
1 parent 77362d9 commit 534f899

14 files changed

Lines changed: 202 additions & 71 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,69 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 22.0.0
6+
7+
### New Features
8+
9+
- **Theming**
10+
- Added derived themes for the Grid and related internal components. When a parent component theme is included, its internal controls now derive their tokens from the parent theme colors, keeping nested buttons, icons, inputs, dropdowns, checkboxes, scrollbars, chips, and other helper components visually aligned.
11+
12+
- The derived themes are introduces for the following components:
13+
- Grid
14+
- Excel Filtering
15+
- Grid Toolbar
16+
- Paginator
17+
- Column Actions
18+
- Query Builder and Advanced Filtering Dialog
19+
20+
- The derived themes are applied through the existing component theme mixins, so no additional mixin call is required. To style the whole `IgxGrid`, provide the `$background`, `$foreground`, and `$accent-color` properties to `grid-theme()` and include the generated theme with `tokens()`. The `$foreground` property is optional; when omitted, it is derived automatically as a contrast color for the background. Internal components inherit derived tokens from the parent component theme.
21+
22+
You can also style each compound component inside the grid with its own theme by providing the same color properties. The generated tokens are scoped to that component and affect the nested controls inside it.
23+
24+
```scss
25+
$grid-theme: grid-theme(
26+
$schema: $schema,
27+
$background: #ffffff,
28+
$foreground: #1f2937,
29+
$accent-color: #0061a8
30+
);
31+
32+
$excel-filtering-theme: excel-filtering-theme(
33+
$schema: $schema,
34+
$background: #ff2323,
35+
$accent-color: #21fc9a
36+
);
37+
38+
$query-builder-theme: query-builder-theme(
39+
$schema: $schema,
40+
$background: #f235ff,
41+
$accent-color: #89a800
42+
);
43+
44+
$grid-toolbar-theme: grid-toolbar-theme( ... );
45+
46+
$paginator-theme: paginator-theme( ... );
47+
48+
$column-actions-theme: column-actions-theme( ... );
49+
50+
igx-grid {
51+
@include tokens($grid-theme);
52+
}
53+
54+
igx-grid-excel-style-filtering,
55+
.igx-excel-filter__secondary {
56+
@include tokens($excel-filtering-theme);
57+
}
58+
59+
igx-advanced-filtering-dialog {
60+
@include tokens($query-builder-theme);
61+
}
62+
63+
...
64+
```
65+
66+
- Added a dedicated `excel-filtering-theme()` for styling the `Excel Style Filtering`. Use it instead of the excel-filtering color properties from `grid-theme()`.
67+
568
## 21.2.0
669

770
### New Features

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"express": "^5.2.1",
8383
"fflate": "^0.8.1",
8484
"igniteui-i18n-core": "^1.0.2",
85-
"igniteui-theming": "^27.2.0",
85+
"igniteui-theming": "^27.3.0",
8686
"igniteui-trial-watermark": "^3.1.0",
8787
"jspdf": "^4.2.1",
8888
"lodash-es": "^4.17.21",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
outline-style: none;
4545

4646
@if $variant == 'indigo' {
47-
border-top: rem(1px) solid var-get($theme, 'border-color');
47+
border-top: var-get($theme, 'border-width') var-get($theme, 'border-style') var-get($theme, 'border-color');
4848
}
4949
}
5050

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@
8080
@extend %grid-scroll-start !optional;
8181
}
8282

83+
@include e(scroll-end) {
84+
@extend %grid-scroll-end !optional;
85+
}
86+
8387
@include e(scroll-main) {
8488
@extend %grid-scroll-main !optional;
8589
}

‎projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,23 @@
9696
)
9797
);
9898

99+
igx-grid-group-by-area,
100+
igx-grid-header-row {
101+
@include tokens(
102+
chip-theme(
103+
$schema: $schema,
104+
$background: color-mix(in srgb, var(--ig-grid-header-text-color) 12%, var(--ig-grid-header-background)),
105+
$hover-background: color-mix(in srgb, var(--ig-grid-header-text-color) 18%, var(--ig-grid-header-background)),
106+
$text-color: var(--ig-grid-header-text-color),
107+
$ghost-background: color-mix(in srgb, var(--ig-grid-header-text-color) 12%, var(--ig-grid-header-background)),
108+
$ghost-text-color: var(--ig-grid-header-text-color),
109+
$disabled-background: color-mix(in srgb, var(--ig-grid-header-text-color) 12%, var(--ig-grid-header-background)),
110+
$disabled-text-color: color-mix(in srgb, var(--ig-grid-header-text-color) 50%, var(--ig-grid-header-background)),
111+
$disabled-border-color: color-mix(in srgb, var(--ig-grid-header-text-color) 24%, var(--ig-grid-header-background)),
112+
)
113+
);
114+
}
115+
99116
@include tokens(
100117
contained-button-theme(
101118
$schema: $schema,
@@ -302,7 +319,7 @@
302319
@include tokens(
303320
scrollbar-theme(
304321
$schema: $schema,
305-
$sb-track-bg-color: var(--_grid-background, $scrollbar-bg-color),
322+
$sb-track-bg-color: var(--_grid-background, var(--content-background), $scrollbar-bg-color),
306323
$sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
307324
$sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
308325
),

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

Lines changed: 58 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,11 @@
5454
$grid-cell-pinned-style: rem(1px) solid;
5555
$grid-cell-pinned-border-color: color($color: 'gray', $variant: 300);
5656

57-
$grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
57+
$grid-header-border-color: if($variant == 'indigo', var-get($theme, 'header-border-color'), hsla(from var-get($theme, 'header-border-color') h s l / 0.38));
58+
$grid-action-border-color: if($variant == 'indigo', var-get($theme, 'action-border-color'), hsla(from var-get($theme, 'action-border-color') h s l / 0.38));
59+
$grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') $grid-header-border-color;
60+
$grid-row-border: var-get($theme, 'row-border-width') var-get($theme, 'row-border-style') var-get($theme, 'row-border-color');
61+
$grid-scrollbar-borders: rem(1px) solid var(--ig-grid-summary-border-color, var(--row-border-color));
5862

5963
$cell-pin: (
6064
style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),
@@ -606,13 +610,32 @@
606610
%grid-row {
607611
border-bottom: none;
608612
}
613+
614+
%grid-mrl-block {
615+
%grid-cell-display {
616+
border-inline-end: $grid-header-border;
617+
border-bottom: $grid-header-border;
618+
}
619+
}
609620
}
610621

611622
%grid-thead-container {
612623
grid-row: 3;
613624
display: flex;
614625
overflow: hidden;
615626

627+
.igx-grid__tr-action:last-of-type {
628+
border-inline-end: $grid-header-border;
629+
}
630+
631+
.igx-grid-th--pinned-first {
632+
border-inline-start: var(--pinned-border-width) var(--pinned-border-style) var(--header-border-color) !important;
633+
}
634+
635+
.igx-grid-th--pinned-last {
636+
border-inline-end: var(--pinned-border-width) var(--pinned-border-style) var(--header-border-color) !important;
637+
}
638+
616639
%igx-grid__header-indentation {
617640
igx-icon {
618641
--component-size: #{if($variant == 'indigo', 2, 3)};
@@ -640,7 +663,7 @@
640663
%igx-grid__header-indentation,
641664
%igx-grid__row-indentation,
642665
%grid__cbx-selection {
643-
border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
666+
border-bottom: $grid-header-border;
644667
}
645668
}
646669

@@ -717,7 +740,6 @@
717740

718741
%grid-tfoot {
719742
grid-row: 5;
720-
border-top: $grid-header-border;
721743
z-index: 10001;
722744
}
723745

@@ -754,8 +776,8 @@
754776
}
755777

756778
%grid-cell-display {
757-
border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
758-
border-bottom: rem(1px) solid var-get($theme, 'header-border-color');
779+
border-inline-end: $grid-row-border;
780+
border-bottom: $grid-row-border;
759781
}
760782
}
761783

@@ -765,8 +787,8 @@
765787

766788
@if $variant == 'indigo' {
767789
%grid-cell-display {
768-
border-inline-end: rem(1px) solid var-get($theme, 'row-border-color');
769-
border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
790+
border-inline-end: $grid-row-border;
791+
border-bottom: $grid-row-border;
770792
}
771793
}
772794
}
@@ -775,7 +797,7 @@
775797
%igx-grid__hierarchical-expander,
776798
%igx-grid__row-indentation,
777799
%igx-grid__drag-indicator {
778-
border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
800+
border-bottom: $grid-row-border;
779801
}
780802
}
781803

@@ -823,46 +845,50 @@
823845
display: flex;
824846
flex-flow: row nowrap;
825847
width: 100%;
826-
background: var-get($theme, 'header-background');
848+
background: var-get($theme, 'content-background');
827849
z-index: 10001;
828850
}
829851

830852
%grid-thead-thumb {
831853
background: var-get($theme, 'header-background');
832-
border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');
854+
border-inline-start: $grid-header-border;
833855
}
834856

835857
%grid-tfoot-thumb {
836858
position: absolute;
837859
top: 0;
838860
inset-inline-end: 0;
839-
background: var-get($theme, 'header-background');
840-
border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');
861+
background: var(--_grid-background, var-get($theme, 'content-background'));
862+
border-inline-start: $grid-scrollbar-borders;
841863
}
842864

843865
%grid-tbody-scrollbar {
844866
background: var-get($theme, 'content-background');
845-
border-inline-start: rem(1px) solid var-get($theme, 'row-border-color');
867+
border-inline-start: $grid-scrollbar-borders;
846868
position: relative;
847869
}
848870

849871
%grid-tbody-scrollbar-start {
850-
background: var-get($theme, 'header-background');
872+
background: var-get($theme, 'content-background');
851873
}
852874

853875
%grid-tbody-scrollbar-main {
854876
position: relative;
855877
}
856878

857879
%grid-tbody-scrollbar-end {
858-
background: var-get($theme, 'header-background');
880+
background: var-get($theme, 'content-background');
859881
}
860882

861-
%grid-scroll-start {
862-
background: var-get($theme, 'header-background');
883+
%grid-scroll-start,
884+
%grid-scroll-end {
885+
background: var-get($theme, 'content-background');
886+
border-block-start: $grid-scrollbar-borders;
863887
}
864888

865889
%grid-scroll-main {
890+
border-block-start: $grid-scrollbar-borders;
891+
866892
igx-display-container {
867893
height: 0;
868894
}
@@ -875,7 +901,7 @@
875901
%grid-row {
876902
display: flex;
877903
background: var-get($theme, 'content-background');
878-
border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
904+
border-bottom: $grid-row-border;
879905
outline-style: none;
880906
position: relative;
881907
background-clip: content-box !important;
@@ -1825,13 +1851,11 @@
18251851
%grid-summaries--body {
18261852
--summaries-patch-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-100)) 12%, var(--_grid-background, var(--ig-gray-100)));
18271853

1828-
border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
1854+
border-bottom: var(--ig-grid-summary-border-width, rem(1px))
1855+
dashed
1856+
var(--ig-grid-summary-border-color, var(--row-border-color));
18291857
background-color: var-get($theme, 'summaries-patch-background');
18301858

1831-
&:last-of-type {
1832-
border-bottom: none;
1833-
}
1834-
18351859
.igx-grid-summary {
18361860
--background-color: inherit;
18371861
--result-color: #{adaptive-contrast(var(--background-color))};
@@ -1841,11 +1865,15 @@
18411865
%grid-summaries-patch {
18421866
position: relative;
18431867
background: inherit;
1844-
border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
1868+
border-inline-end: var(--ig-grid-summary-border-width, rem(1px))
1869+
var(--ig-grid-summary-border-style, solid)
1870+
var(--ig-grid-summary-border-color, var(--row-border-color));
18451871
z-index: 1;
18461872

18471873
@if $variant == 'indigo' {
1848-
border-top: rem(1px) solid var-get($theme, 'header-border-color');
1874+
border-top: var(--ig-grid-summary-border-width, rem(1px))
1875+
var(--ig-grid-summary-border-style, solid)
1876+
var(--ig-grid-summary-border-color, var(--row-border-color));
18491877
}
18501878
}
18511879

@@ -1980,7 +2008,7 @@
19802008
background: var-get($theme, 'group-row-background');
19812009
display: flex;
19822010
outline-style: none;
1983-
border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
2011+
border-block: $grid-row-border;
19842012
min-height: var(--header-size);
19852013

19862014
%igx-grid__drag-indicator {
@@ -2119,7 +2147,7 @@
21192147
map.get($grid-grouping-indicator-padding, 'cosy'),
21202148
map.get($grid-grouping-indicator-padding, 'comfortable')
21212149
);
2122-
border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
2150+
border-inline-end: $grid-row-border;
21232151
background: inherit;
21242152
z-index: 1;
21252153
background-clip: border-box;
@@ -2585,7 +2613,7 @@
25852613
%igx-grid__tr-container {
25862614
overflow: auto;
25872615
width: 100%;
2588-
border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
2616+
border-bottom: $grid-row-border;
25892617
}
25902618

25912619
%igx-grid__tr-container--active {
@@ -2714,7 +2742,8 @@
27142742

27152743
%igx-grid__tr-action {
27162744
&:last-of-type {
2717-
border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
2745+
border-inline-end: var-get($theme, 'row-border-width') var-get($theme, 'row-border-style') $grid-action-border-color;
2746+
27182747
@if $variant != 'indigo' {
27192748
min-height: sizable(
27202749
rem(32px),

0 commit comments

Comments
 (0)