[Elements] Igx exported components have wrong theme in Web Components

[mddragnev]

Description

There are a few components whose DOM layout changes depending on the applied theme (for example, igx-input-group). When an exported Igc component—such as the grid with advanced filtering or the query builder—is used in a Web Components sample with the Bootstrap theme applied, those input groups continue to render using the default (Material) theme. This results in a visually incorrect appearance.

This is a query builder with bootstrap theme imported. However the igx-input-group used in there is still material.

Note that this is also reproducible in the grid with advanced-filtering. You can see it here:
Open the advanced filtering, add a condition and observe the input-group:

Steps to reproduce

1. Run the attached sample
2. npm install and npm run start

Result

If you import the theme in the index.ts file like this:

import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";

You can observe that the query builder works but the igx-input-group underneath is still having the material layout.

The only working workaround is to either set the theme in the head of the root html file
like

<link rel="stylesheet" href="https://unpkg.com/igniteui-webcomponents-grids@6.2.2/grids/themes/light/bootstrap.css" />

or

<style>
   body {
          --ig-theme: bootstrap;
    } 
</style>

Expected result

Even though there is a workaround, I dont think that we should guide the users to use it like this. It should work out of the box.

Attachments

advanced-filtering-options.zip

[mddragnev]

@ChronosSF @damyanpetev @rkaraivanov @simeonoff @dkamburov Just FYI

[damyanpetev]

I'm partial to presetting the --ig-theme as a solution, especially if it works if defined in one of the apps stylesheets. Seems to require minimal intervention and changes on out end and is unlikely to cause trouble in the future even if we change our internal handling.