fix(navbar): nested components sizes (#15685)

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss

@@ -177,10 +177,6 @@
             );
 
             igx-icon {
-                // TODO: Why do we have to comment these out?
-                // --component-size: var(--ig-size, var(--ig-size-large));
-                // --size: var(--igx-icon-size, #{$icon-in-button-size});
-
                 --ig-size: #{if($variant == 'indigo', 2, 1)};
 
                 display: flex;

projects/igniteui-angular/src/lib/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<nav class="igx-navbar" role="navigation" [attr.aria-labelledby]="titleId">
+<nav role="navigation" [attr.aria-labelledby]="titleId">
     <div class="igx-navbar__left">
         @if (isActionButtonVisible) {
             <igx-icon (click)="_triggerAction()">

projects/igniteui-angular/src/lib/navbar/navbar.component.ts

@@ -48,13 +48,6 @@ let NEXT_ID = 0;
 @Component({
     selector: 'igx-navbar',
     templateUrl: 'navbar.component.html',
-    styles: [`
-        :host {
-            display: block;
-            width: 100%;
-        }
-    `
-    ],
     styleUrl: 'navbar.component.css',
     encapsulation: ViewEncapsulation.None,
     imports: [IgxIconComponent]
@@ -71,6 +64,14 @@ export class IgxNavbarComponent {
     @Input()
     public id = `igx-navbar-${NEXT_ID++}`;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('class.igx-navbar')
+    public cssClass = 'igx-navbar';
+
+
     /**
      * Sets the icon of the `IgxNavbarComponent`.
      * ```html

projects/igniteui-angular/src/lib/navbar/themes/_base.scss

@@ -24,7 +24,7 @@ $_theme: $material;
 
         igx-icon,
         igc-icon {
-            --component-size: 3;
+            --component-size: var(--ig-size, var(--ig-size-large));
             cursor: pointer;
         }
 
@@ -55,29 +55,28 @@ $_theme: $material;
     }
 
     @include b(igx-navbar) {
-        display: flex;
-        align-items: center;
-        position: relative;
-        flex-flow: row nowrap;
-        gap: rem(16px);
+        display: block;
         width: 100%;
-        min-height: rem(56px);
-        max-height: rem(128px);
-        padding-inline: rem(16px);
         background: var-get($_theme, 'background');
         color: var-get($_theme, 'text-color');
         box-shadow: var-get($_theme, 'elevation');
-        z-index: 4;
-        overflow: hidden;
-        border-bottom: rem(1px) solid var-get($_theme, 'border-color');
 
-        igx-avatar {
-            --ig-size: 1;
+        nav {
+            display: flex;
+            align-items: center;
+            position: relative;
+            flex-flow: row nowrap;
+            gap: rem(16px);
+            min-height: rem(56px);
+            padding-inline: rem(16px);
+            max-height: rem(128px);
+            z-index: 4;
+            overflow: hidden;
+            border-bottom: rem(1px) solid var-get($_theme, 'border-color');
         }
 
-        [igxButton],
-        [igxIconButton] {
-            --ig-size: 2;
+        igx-avatar {
+            --ig-size: 1;
         }
 
         @include e(title) {

projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss

@@ -3,12 +3,21 @@
 @use 'styles/themes/standalone' as *;
 
 @include themed-block(igx-navbar, bootstrap) {
+    [igxButton],
+    [igxIconButton] {
+        --ig-size: 2;
+    }
+
     @include e(title) {
-        @include type-style(h5);
+        @include type-style(h5) {
+            margin: 0;
+        };
     }
 
     igx-navbar-title,
     [igxNavbarTitle] {
-        @include type-style(h5);
+        @include type-style(h5) {
+            margin: 0;
+        };
     }
 }

projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss

@@ -6,7 +6,7 @@
     %icon-size {
         igx-icon,
         igc-icon {
-            --component-size: 2;
+            --component-size: var(--ig-size, var(--ig-size-medium));
 
             margin-inline: rem(6px);
         }
@@ -16,6 +16,10 @@
         --ig-size: 2;
     }
 
+    [igxIconButton] {
+        --ig-size: 2;
+    }
+
     igx-navbar-title,
     [igxNavbarTitle] {
         @include type-style(h5);