Skip to content

Commit cedfbde

Browse files
desig9steindesig9stein
committed
style(grid): Update theming and component size handling across light grid styles
1 parent c31aa4c commit cedfbde

7 files changed

Lines changed: 156 additions & 90 deletions

File tree

‎demo/demo.ts‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import {
22
configureTheme,
33
defineComponents,
44
IgcButtonComponent,
5+
IgcButtonGroupComponent,
6+
IgcToggleButtonComponent,
57
IgcAvatarComponent,
68
IgcCheckboxComponent,
79
IgcRatingComponent,
@@ -19,6 +21,8 @@ defineComponents(
1921
IgcSelectComponent,
2022
IgcSwitchComponent,
2123
IgcButtonComponent,
24+
IgcButtonGroupComponent,
25+
IgcToggleButtonComponent,
2226
);
2327

2428
type User = {
@@ -83,7 +87,7 @@ function getAvatar() {
8387

8488
async function setTheme(theme?: string) {
8589
theme = theme ?? getElement<IgcSelectComponent>(IgcSelectComponent.tagName).value;
86-
const variant = getElement<IgcSwitchComponent>(IgcSwitchComponent.tagName).checked
90+
const variant = getElement<IgcSwitchComponent>('#theme-variant').checked
8791
? 'dark'
8892
: 'light';
8993

@@ -110,6 +114,7 @@ const themeChoose = html`
110114
${themes.map((theme) => html`<igc-select-item .value=${theme}>${theme}</igc-select-item>`)}
111115
</igc-select>
112116
<igc-switch
117+
id="theme-variant"
113118
label-position="after"
114119
@igcChange=${() => setTheme()}
115120
>Dark variant</igc-switch
@@ -148,7 +153,7 @@ const columns: ColumnConfiguration<User>[] = [
148153
cellTemplate: (params) =>
149154
html`<igc-rating
150155
readonly
151-
style="--ig-size: 1"
156+
152157
.value=${params.value}
153158
></igc-rating>`,
154159
},
@@ -158,7 +163,6 @@ const columns: ColumnConfiguration<User>[] = [
158163
html`<igc-select
159164
outlined
160165
.value=${params.value}
161-
style="--ig-size: 1"
162166
>${choices.map(
163167
(choice) => html`<igc-select-item .value=${choice}>${choice}</igc-select-item>`,
164168
)}</igc-select
@@ -224,19 +228,30 @@ const toggleFiltering = () => {
224228
column.filterable = !column.filterable;
225229
};
226230

231+
const setSize = (size: number) => {
232+
document.getElementById('demo')!.style.setProperty('--ig-size', String(size));
233+
};
234+
227235
render(
228236
html`
229-
<igc-button
230-
variant="outlined"
231-
@click=${toggleColumn}
232-
>Toggle column</igc-button
233-
>
234-
<igc-button
235-
variant="outlined"
236-
@click=${toggleFiltering}
237-
>Toggle filtering</igc-button
238-
>
239-
${themeChoose}
237+
<div class="actions-panel">
238+
<igc-switch
239+
label-position="after"
240+
@igcChange=${toggleColumn}
241+
>Toggle column</igc-switch
242+
>
243+
<igc-switch
244+
label-position="after"
245+
@igcChange=${toggleFiltering}
246+
>Toggle filtering</igc-switch
247+
>
248+
<igc-button-group>
249+
<igc-toggle-button @click=${() => setSize(1)}>Small</igc-toggle-button>
250+
<igc-toggle-button @click=${() => setSize(2)}>Medium</igc-toggle-button>
251+
<igc-toggle-button selected @click=${() => setSize(3)}>Large</igc-toggle-button>
252+
</igc-button-group>
253+
${themeChoose}
254+
</div>
240255
<igc-grid-lite .data=${data}>
241256
${columns.map(
242257
(col) =>

‎demo/index.html‎

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,61 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<title>Demo igc-grid</title>
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1"
8-
/>
9-
<meta charset="utf-8" />
10-
<style>
3+
<head>
4+
<title>Demo igc-grid</title>
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1"
8+
/>
9+
<meta charset="utf-8" />
10+
<style>
1111
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
12+
1213
html,
1314
body {
14-
height: 100%;
15+
height: 100%;
1516
}
1617

1718
body {
18-
--ig-size: 1;
19-
--sample-body-padding: 20px;
20-
background: var(--ig-surface-300);
21-
margin: 0;
22-
padding: var(--sample-body-padding);
23-
overflow: hidden;
19+
--sample-body-padding: 20px;
20+
background: var(--ig-surface-300);
21+
margin: 0;
22+
padding: var(--sample-body-padding);
23+
overflow: hidden;
2424
}
2525

2626
igc-grid-lite {
27-
flex: 1;
27+
flex: 1;
28+
}
29+
30+
.actions-panel {
31+
display: flex;
32+
align-items: center;
33+
gap: 1rem;
2834
}
2935

3036
.sample-drop-down {
31-
--ig-size: 1;
32-
display: flex;
33-
justify-content: center;
34-
align-items: center;
35-
padding: 0.5rem 0;
36-
gap: 1rem;
37-
min-height: 75px;
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
padding: 0.5rem 0;
41+
gap: 1rem;
42+
min-height: 55px;
43+
margin-inline-start: auto;
3844
}
3945

4046
#demo {
41-
display: flex;
42-
flex-direction: column;
43-
gap: 1rem;
44-
height: calc(100% - (var(--sample-body-padding) * 2));
47+
display: flex;
48+
flex-direction: column;
49+
gap: 1rem;
50+
height: calc(100% - (var(--sample-body-padding) * 2));
4551
}
46-
</style>
47-
</head>
48-
<body class="ig-typography">
49-
<div id="demo"></div>
50-
<script
51-
type="module"
52-
src="./demo.ts"
53-
></script>
54-
</body>
52+
</style>
53+
</head>
54+
<body class="ig-typography">
55+
<div id="demo" style="--ig-size: 3"></div>
56+
<script
57+
type="module"
58+
src="./demo.ts"
59+
></script>
60+
</body>
5561
</html>

‎src/styles/_common.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@forward 'igniteui-theming';
33

44
$ig-cells-padding: sizable(rem(8px), rem(16px), rem(24px));
5-
$ig-cells-min-height: sizable(rem(24px), rem(34px), rem(50px));
5+
$ig-cells-min-height: sizable(rem(32px), rem(40px), rem(50px));
66

77
@mixin ig-scrollbar($track-size, $track-bg, $thumb-bg) {
88
// Firefox only
@@ -22,11 +22,6 @@ $ig-cells-min-height: sizable(rem(24px), rem(34px), rem(50px));
2222
}
2323

2424
:host {
25-
@include sizable();
26-
27-
--component-size: 3;
28-
29-
3025
position: relative;
3126
box-sizing: border-box;
3227

‎src/styles/body-cell/body-cell.scss‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,26 @@ $inset-shadow-width: #{rem(1px)};
1818
&:last-of-type {
1919
border-right: 0;
2020
}
21+
22+
igc-rating,
23+
igc-select {
24+
--ig-size: 1;
25+
}
26+
27+
igc-avatar {
28+
--size: #{sizable(rem(28px), rem(36px), rem(46px))};
29+
}
30+
31+
igc-select,
32+
igc-combo,
33+
igc-input {
34+
padding-block: rem(6px);
35+
}
36+
37+
// input overrides
38+
igc-input::part(container) {
39+
--background: transparent;
40+
}
2141
}
2242

2343
:host([active]) {
@@ -31,7 +51,7 @@ $inset-shadow-width: #{rem(1px)};
3151
border-inline-end: none;
3252
}
3353

34-
[part~="text"] {
54+
[part~='text'] {
3555
text-overflow: ellipsis;
3656
overflow: hidden;
3757
white-space: nowrap;
@@ -57,7 +77,6 @@ igc-select {
5777
&::part(container),
5878
&::part(input) {
5979
box-shadow: none;
60-
height: 100%;
6180
background: inherit;
6281
border: 0;
6382
color: inherit;

‎src/styles/filter-row/filter-row.scss‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,43 @@ $filtering-row-text-color: var-get($theme, 'filtering-row-text-color');
77
$border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
88

99
:host {
10-
--ig-size: 1;
11-
1210
display: grid;
1311
grid-row: filter-row;
1412
min-height: $ig-cells-min-height;
1513
background: var-get($theme, 'header-background');
1614
color: var-get($theme, 'header-text-color');
1715
border-block-end: $border;
1816
z-index: var(--z-index-base);
19-
padding-inline-end: var(--scrollbar-offset);
17+
padding-inline-end: var(--scrollbar-offset);
18+
position: relative ;
19+
20+
&:has([part~='active-state']) {
21+
&::after {
22+
display: block;
23+
position: absolute;
24+
content: "";
25+
background: inherit;
26+
inset-inline-start: 0;
27+
inset-inline-end: 0;
28+
inset-block-start: rem(-1px);
29+
bottom: 0;
30+
box-shadow: 0 rem(1px) 0 var-get($theme, 'filtering-row-background'), 0 rem(4px) rem(10px) rgba(0, 0, 0, .12);
31+
z-index: -1;
32+
pointer-events: none;
33+
user-select: none;
34+
}
35+
}
36+
37+
igc-chip {
38+
--component-size: var(--ig-size);
39+
40+
// TODO FIX ON COMPONENT LEVEL
41+
display: inline-flex;
42+
}
43+
44+
igc-input {
45+
--ig-size: 1;
46+
}
2047
}
2148

2249
[part='filter-row-preview'] {
@@ -38,7 +65,6 @@ $border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-s
3865
align-items: center;
3966
gap: rem(8px);
4067
position: relative;
41-
inset-block-start: rem(-1px);
4268
}
4369

4470
[part='filter-row-preview']:last-of-type {

‎src/styles/header-cell/header-cell.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ $theme: $material;
7979
}
8080

8181
[part~='filtered'] {
82+
color: var-get($theme, 'filtering-header-text-color');
8283
background: var-get($theme, 'filtering-header-background');
8384
}
8485

‎src/styles/themes/grid.base.scss‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,42 @@
1-
@use "../common" as *;
1+
@use '../common' as *;
22

33
:host {
4-
--scrollbar-offset: 0;
5-
--z-index-base: 1;
6-
7-
display: grid;
8-
height: 100%;
9-
position: relative;
10-
font-family: var(--ig-font-family), serif;
11-
overflow: auto hidden;
12-
grid-template-rows: [header-row] max-content [filter-row] max-content [virtualized-container] auto;
4+
@include sizable();
5+
6+
--component-size: var(--ig-size, var(--ig-size-large));
7+
8+
--scrollbar-offset: 0;
9+
--z-index-base: 1;
10+
11+
display: grid;
12+
height: 100%;
13+
position: relative;
14+
font-family: var(--ig-font-family), serif;
15+
overflow: auto hidden;
16+
grid-template-rows: [header-row] max-content [filter-row] max-content [virtualized-container] auto;
1317
}
1418

1519
igc-virtualizer {
16-
grid-row: virtualized-container;
17-
display: flex;
18-
flex-flow: column;
19-
flex: 1;
20-
overflow: hidden auto !important;
21-
22-
&:focus {
23-
outline: none;
24-
}
20+
grid-row: virtualized-container;
21+
display: flex;
22+
flex-flow: column;
23+
flex: 1;
24+
overflow: hidden auto !important;
25+
26+
&:focus {
27+
outline: none;
28+
}
2529
}
2630

27-
[part~="resize-indicator"] {
28-
position: absolute;
29-
height: 100%;
30-
width: rem(2px);
31-
inset-inline-start: 0;
32-
top: 0;
33-
z-index: calc(var(--z-index-base) + 1);
31+
[part~='resize-indicator'] {
32+
position: absolute;
33+
height: 100%;
34+
width: rem(2px);
35+
inset-inline-start: 0;
36+
top: 0;
37+
z-index: calc(var(--z-index-base) + 1);
3438
}
3539

36-
[part="column-sink"] {
37-
display: none;
40+
[part='column-sink'] {
41+
display: none;
3842
}

0 commit comments

Comments
 (0)