Merge pull request #14406 from IgniteUI/simeonoff/navbar-sizes-17.2.x

fix(navbar): update component sizes in the context of the navbar

Author: kdinev

package-lock.json

@@ -70,7 +70,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^6.3.1",
+    "igniteui-theming": "^6.3.2",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^6.3.1",
+        "igniteui-theming": "^6.3.2",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -110,21 +110,38 @@
         overflow: hidden;
         border-bottom: rem(1px) solid var-get($theme, 'border-color');
 
-        igx-avatar,
-        igx-input-group,
-        [igxIconButton],
-        igc-avatar,
-        igc-input,
-        igc-icon-button {
+        igx-avatar {
             --ig-size: 1;
         }
 
-        [igxButton],
-        igc-button {
-            --ig-size: 2;
+        @if $variant == 'material' {
+            igx-input-group {
+                --ig-size: 1;
+            }
+        }
+
+        @if $variant == 'bootstrap' {
+            igc-input,
+            igc-icon-button {
+                --ig-size: 1;
+            }
+
+            [igxButton],
+            igc-button,
+            [igxIconButton],
+            igx-input-group {
+                --ig-size: 2;
+            }
+        }
+
+        @if $variant == 'fluent' {
+            igx-input-group {
+                --ig-size: 2;
+            }
         }
 
         @if $variant == 'indigo-design' {
+            igx-avatar,
             igc-icon-button,
             [igxIconButton] {
                 --ig-size: 2;

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -2419,7 +2419,7 @@ describe('IgxGrid Component Tests #grid', () => {
                 - grid.footer.nativeElement.offsetHeight
                 - (grid.isHorizontalScrollHidden ? 0 : grid.scrollSize);
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight);
-            expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(30);
+            expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(36);
         });
 
         it('IgxTabs: should initialize a grid with correct height when height = 100%', async () => {
@@ -2437,7 +2437,7 @@ describe('IgxGrid Component Tests #grid', () => {
             const paging = fix.debugElement.query(By.css('igx-page-nav'));
             expect(headers.length).toBe(4);
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(204);
-            expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(30);
+            expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(36);
         });
 
         it('IgxTabs: should initialize a grid with correct height height = 100% when parent has height', async () => {

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -111,6 +111,9 @@ <h4 class="sample-title">buttons (flat, outlined, contained)</h4>
         <h4 class="sample-title">Avatar and Progressbar</h4>
         <div class="navbar-sample">
             <igx-navbar actionButtonIcon="menu">
+                <igx-input-group type="box">
+                    <input name="inputSearchTest" #input igxInput placeholder="Search"/>
+                </igx-input-group>
                 <igx-avatar initials="MP"></igx-avatar>
                 <igx-circular-bar indeterminate></igx-circular-bar>
             </igx-navbar>