Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a new sample demonstrating grid theming with runtime theme switching capabilities. The sample showcases how to use lazy-loaded CSS themes for Ignite UI Web Components Grid, allowing users to switch between 8 different themes (Bootstrap, Material, Fluent, and Indigo in both light and dark variants) at runtime.
Changes:
- New grid theming sample with runtime theme switching functionality
- Webpack configuration customized to support lazy CSS loading for themes
- TypeScript declaration file for lazy style loader types
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Standard webpack config with custom CSS exclusion rule for lazy theme loading |
| tslint.json | Standard TSLint configuration matching other samples |
| tsconfig.json | TypeScript configuration with strictPropertyInitialization disabled |
| src/lazy-styles.d.ts | Type declarations for lazy-loaded CSS modules |
| src/index.ts | Main sample implementation with theme switching logic |
| src/index.css | Custom styles for theme selector and dark mode support |
| src/NwindData.json | Sample data for grid (standard Northwind dataset) |
| sandbox.config.json | CodeSandbox configuration |
| package.json | Dependencies including webcomponents polyfills |
| index.html | HTML template with theme selector and grid markup |
| ReadMe.md | Documentation with setup instructions |
| .prettierrc | Code formatting configuration |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| this._bind(); | ||
|
|
||
| themes[this.currentTheme].css.use(); | ||
|
|
There was a problem hiding this comment.
The initial theme should be applied based on the initial value of the select element. However, if the initial theme is a dark theme, the container won't have the 'container--dark' class applied on page load. Only theme switches triggered by the change event will apply the dark class. Consider checking if the initial theme is dark and applying the class accordingly in the constructor.
| if (themes[this.currentTheme].dark) { | |
| container.classList.add('container--dark'); | |
| } else { | |
| container.classList.remove('container--dark'); | |
| } |
|
|
||
| ## Branches | ||
|
|
||
| > **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. |
There was a problem hiding this comment.
The ReadMe.md references 'igniteui-angular-examples' repository in the branches section, but this appears to be a Web Components repository. The links should reference 'igniteui-wc-examples' instead.
No description provided.