Merge pull request #15037 from IgniteUI/igniteui-angular-15004-18-2-x

fix(dropdown): fix typography for boostrap and fluent themes

Author: ChronosSF

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -404,16 +404,16 @@
     }
 }
 
-/// Adds typography styles for the igx-list component.
-/// Uses the 'caption' and 'subtitle-2'
+/// Adds typography styles for the igx-drop-down component.
+/// Uses the 'overline', 'body-2', 'subtitle-1'
 /// categories from the typographic scale.
 /// @group typography
-/// @param {Map} $categories [(header: 'overline', item: 'body-2', select-item: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(header: 'overline', item: 'body-2', select-item: 'body-2')] - The categories from the typographic scale used for type styles.
 @mixin drop-down-typography(
     $categories: (
         header: 'overline',
         item: 'body-2',
-        select-item: 'subtitle-1'
+        select-item: 'body-2'
     )
 ) {
     $header: map.get($categories, 'header');
@@ -432,4 +432,10 @@
             margin: 0;
         }
     }
+
+    %igx-drop-down__item--selected {
+        @include type-style($select-item) {
+            margin: 0;
+        }
+    }
 }

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -64,9 +64,9 @@
     ));
     @include dock-manager-typography();
     @include drop-down-typography($categories: (
-        header: 'body-1',
-        item: 'body-1',
-        select-item: 'body-1'
+        header: 'overline',
+        item: 'body-2',
+        select-item: 'body-2'
     ));
     @include expansion-panel-typography($categories: (
         title: 'h5',

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

@@ -63,7 +63,11 @@
     @include date-range-typography();
     @include dialog-typography();
     @include dock-manager-typography();
-    @include drop-down-typography();
+    @include drop-down-typography($categories: (
+        header: 'subtitle-2',
+        item: 'body-2',
+        select-item: 'body-2'
+    ));
     @include expansion-panel-typography($categories: (
         title: 'subtitle-1',
         description: 'body-2',