From 1c06965d0b31e55dd61f5dc05c807570b23bff22 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Mon, 11 Nov 2024 15:47:51 +0200
Subject: [PATCH] fix(dropdown): fix typography for boostrap and fluent themes,
 - fix unused typography for selected item for all themes

---
 .../components/drop-down/_drop-down-theme.scss     | 14 ++++++++++----
 .../src/lib/core/styles/typography/_bootstrap.scss |  6 +++---
 .../src/lib/core/styles/typography/_fluent.scss    |  6 +++++-
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
index 50adc6cc1bb..c521f43c832 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
+++ b/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;
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
index 42bb49be5c8..c6fbe3e5569 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
+++ b/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',
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
index 87ae1006812..3620f6e4841 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
+++ b/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',