Skip to content

Commit e8ca4aa

Browse files
desig9steindesig9stein
authored
style(grid): Update theming and component size handling across grid styles (#45)
1 parent b416cb4 commit e8ca4aa

28 files changed

Lines changed: 472 additions & 167 deletions

‎demo/demo.ts‎

Lines changed: 51 additions & 24 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 = {
@@ -81,11 +85,16 @@ function getAvatar() {
8185
return `https://static.infragistics.com/xplatform/images/people/${type}/${idx}.jpg`;
8286
}
8387

84-
async function setTheme(theme?: string) {
85-
theme = theme ?? getElement<IgcSelectComponent>(IgcSelectComponent.tagName).value;
86-
const variant = getElement<IgcSwitchComponent>(IgcSwitchComponent.tagName).checked
87-
? 'dark'
88-
: 'light';
88+
let currentTheme = sessionStorage.getItem('theme') ?? 'bootstrap';
89+
let currentVariant = sessionStorage.getItem('theme-variant') === 'dark' ? 'dark' : 'light';
90+
const storedSize = Number(sessionStorage.getItem('size') ?? 3);
91+
92+
async function setTheme(theme: string, variant: string) {
93+
currentTheme = theme;
94+
currentVariant = variant;
95+
96+
sessionStorage.setItem('theme', theme);
97+
sessionStorage.setItem('theme-variant', variant);
8998

9099
await import(
91100
/* @vite-ignore */
@@ -96,22 +105,30 @@ async function setTheme(theme?: string) {
96105
.slice(0, -1)
97106
.forEach((s) => s.remove());
98107

99-
configureTheme(theme as any);
108+
configureTheme(theme as any, variant as any);
100109
}
101110

102111
const themeChoose = html`
103112
<div class="sample-drop-down">
104113
<igc-select
105-
value="bootstrap"
114+
style="--ig-size: 1;"
115+
value=${currentTheme}
106116
outlined
107117
title="Choose theme"
108-
@igcChange=${({ detail }: CustomEvent) => setTheme(detail.value)}
118+
@igcChange=${({ detail }: CustomEvent) => setTheme(detail.value, currentVariant)}
109119
>
110120
${themes.map((theme) => html`<igc-select-item .value=${theme}>${theme}</igc-select-item>`)}
111121
</igc-select>
122+
<igc-button-group selection="single-required" style="--ig-size: 1;">
123+
<igc-toggle-button value="small" ?selected=${storedSize === 1} @click=${() => setSize(1)}>Small</igc-toggle-button>
124+
<igc-toggle-button value="medium" ?selected=${storedSize === 2} @click=${() => setSize(2)}>Medium</igc-toggle-button>
125+
<igc-toggle-button value="large" ?selected=${storedSize === 3} @click=${() => setSize(3)}>Large</igc-toggle-button>
126+
</igc-button-group>
112127
<igc-switch
128+
id="theme-variant"
113129
label-position="after"
114-
@igcChange=${() => setTheme()}
130+
?checked=${currentVariant === 'dark'}
131+
@igcChange=${(e: CustomEvent) => setTheme(currentTheme, (e.target as IgcSwitchComponent).checked ? 'dark' : 'light')}
115132
>Dark variant</igc-switch
116133
>
117134
</div>
@@ -128,7 +145,7 @@ const columns: ColumnConfiguration<User>[] = [
128145
},
129146
{
130147
field: 'name',
131-
cellTemplate: (params) => html`<igc-input .value=${params.value}></igc-input>`,
148+
cellTemplate: (params) => html`<igc-input style="padding-block: .4rem" .value=${params.value}></igc-input>`,
132149
filterable: true,
133150
sortable: true,
134151
},
@@ -148,17 +165,17 @@ const columns: ColumnConfiguration<User>[] = [
148165
cellTemplate: (params) =>
149166
html`<igc-rating
150167
readonly
151-
style="--ig-size: 1"
168+
152169
.value=${params.value}
153170
></igc-rating>`,
154171
},
155172
{
156173
field: 'priority',
157174
cellTemplate: (params) =>
158175
html`<igc-select
176+
style="padding-block: .4rem"
159177
outlined
160178
.value=${params.value}
161-
style="--ig-size: 1"
162179
>${choices.map(
163180
(choice) => html`<igc-select-item .value=${choice}>${choice}</igc-select-item>`,
164181
)}</igc-select
@@ -195,6 +212,7 @@ const columns: ColumnConfiguration<User>[] = [
195212
html`<igc-checkbox
196213
label-position="before"
197214
?checked=${params.value}
215+
style="margin: 0 auto;"
198216
></igc-checkbox>`,
199217
},
200218
];
@@ -224,19 +242,27 @@ const toggleFiltering = () => {
224242
column.filterable = !column.filterable;
225243
};
226244

245+
const setSize = (size: number) => {
246+
sessionStorage.setItem('size', String(size));
247+
document.getElementById('demo')!.style.setProperty('--ig-size', String(size));
248+
};
249+
227250
render(
228251
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}
252+
<div class="actions-panel">
253+
<igc-switch
254+
label-position="after"
255+
@igcChange=${toggleColumn}
256+
>Toggle column</igc-switch
257+
>
258+
<igc-switch
259+
label-position="after"
260+
@igcChange=${toggleFiltering}
261+
>Toggle filtering</igc-switch
262+
>
263+
264+
${themeChoose}
265+
</div>
240266
<igc-grid-lite .data=${data}>
241267
${columns.map(
242268
(col) =>
@@ -261,4 +287,5 @@ render(
261287
`,
262288
document.getElementById('demo')!,
263289
);
264-
await setTheme('bootstrap');
290+
setSize(storedSize);
291+
await setTheme(currentTheme, currentVariant);

‎demo/index.html‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,60 @@
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+
gap: 1rem;
41+
min-height: 50px;
42+
margin-inline-start: auto;
3843
}
3944

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

‎src/components/filter-row.ts‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { consume } from '@lit/context';
22
import {
3+
θaddThemingController as addThemingController,
34
IgcDropdownComponent,
45
type IgcDropdownItemComponent,
56
type IgcIconComponent,
67
IgcInputComponent,
78
} from 'igniteui-webcomponents';
8-
import { html, LitElement, nothing } from 'lit';
9+
import { html, LitElement, nothing, type PropertyValues } from 'lit';
910
import { property, query } from 'lit/decorators.js';
1011
import { ifDefined } from 'lit/directives/if-defined.js';
12+
import { AdoptedStylesController } from '../controllers/root-styles.js';
1113
import type { StateController } from '../controllers/state.js';
1214
import { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';
1315
import { GRID_STATE_CONTEXT } from '../internal/context.js';
@@ -19,6 +21,7 @@ import { watch } from '../internal/watch.js';
1921
import type { FilterExpressionTree } from '../operations/filter/tree.js';
2022
import type { FilterExpression, FilterOperation, OperandKeys } from '../operations/filter/types.js';
2123
import { styles } from '../styles/filter-row/filter-row.css.js';
24+
import { all } from '../styles/themes/filtering-row-themes.js';
2225

2326
type ExpressionChipProps<T> = {
2427
expression: FilterExpression<T>;
@@ -48,6 +51,8 @@ export default class IgcFilterRow<T extends object> extends LitElement {
4851
registerComponent(IgcFilterRow);
4952
}
5053

54+
private readonly _adoptedStylesController = new AdoptedStylesController(this);
55+
5156
@consume({ context: GRID_STATE_CONTEXT, subscribe: true })
5257
@property({ attribute: false })
5358
public state!: StateController<T>;
@@ -82,6 +87,34 @@ export default class IgcFilterRow<T extends object> extends LitElement {
8287
@property({ attribute: false })
8388
public expression!: FilterExpression<T>;
8489

90+
@property({ attribute: false })
91+
public adoptRootStyles = false;
92+
93+
constructor() {
94+
super();
95+
96+
addThemingController(this, all, {
97+
themeChange: this._handleThemeChange,
98+
});
99+
}
100+
101+
private _handleThemeChange() {
102+
AdoptedStylesController.invalidateCache(this.ownerDocument);
103+
this._adoptedStylesController.shouldAdoptStyles(
104+
this.adoptRootStyles && this.column.headerTemplate != null
105+
);
106+
}
107+
108+
protected override update(props: PropertyValues<this>): void {
109+
if (props.has('adoptRootStyles')) {
110+
this._adoptedStylesController.shouldAdoptStyles(
111+
this.adoptRootStyles && this.column.headerTemplate != null
112+
);
113+
}
114+
115+
super.update(props);
116+
}
117+
85118
#setDefaultExpression() {
86119
this.expression = this.filterController.getDefaultExpression(this.column);
87120
}

‎src/components/grid.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { asArray, getFilterOperandsFor, isNumber, isString } from '../internal/u
3030
import { watch } from '../internal/watch.js';
3131
import type { FilterExpression } from '../operations/filter/types.js';
3232
import type { SortingExpression } from '../operations/sort/types.js';
33-
import { styles } from '../styles/themes/grid.base.css.js';
33+
import { styles as base } from '../styles/themes/grid.base.css.js';
3434
import { all } from '../styles/themes/grid-themes.js';
3535
import { styles as shared } from '../styles/themes/shared/grid.common.css.js';
3636
import IgcGridLiteCell from './cell.js';
@@ -149,7 +149,7 @@ export class IgcGridLite<T extends object = any> extends EventEmitterBase<IgcGri
149149
return GRID_TAG;
150150
}
151151

152-
public static override styles = [styles, shared];
152+
public static override styles = [base, shared];
153153

154154
public static register(): void {
155155
registerComponent(

‎src/styles/_common.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
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));
65

76
@mixin ig-scrollbar($track-size, $track-bg, $thumb-bg) {
87
// Firefox only
@@ -22,11 +21,6 @@ $ig-cells-min-height: sizable(rem(24px), rem(34px), rem(50px));
2221
}
2322

2423
:host {
25-
@include sizable();
26-
27-
--component-size: 3;
28-
29-
3024
position: relative;
3125
box-sizing: border-box;
3226

0 commit comments

Comments
 (0)