From 20a59a53b4a579295d98f43265ad4918e36aa74a Mon Sep 17 00:00:00 2001
From: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Date: Wed, 17 Nov 2021 10:30:20 -0800
Subject: [PATCH] Dropdown: Removing unintended extra height (#20636)

#### Pull request checklist

- [x] Addresses an existing issue: Fixes #19857
- [x] Include a change request file using `$ yarn change`

#### Description of changes

The down caret icon in `Dropdown` was specified with the height of the component but absolutely positioned as `top: 1` which actually made it 1 pixel taller than the `Dropdown` itself. This created a scrollbar in high zoom settings. This PR fixes this by specifying `paddingTop: 1` and `top: 0` so that the caret is still in the same position but the its height is not taller than that of the component itself.
---
 ...i-react-ddb34d7a-c047-4443-a0cd-2eda22ec6308.json |  7 +++++++
 .../ChoiceGroup.Custom.Example.tsx.shot              |  3 ++-
 .../DetailsList.CustomGroupHeaders.Example.tsx.shot  |  3 ++-
 .../__snapshots__/Dropdown.Basic.Example.tsx.shot    |  9 ++++++---
 .../Dropdown.Controlled.Example.tsx.shot             |  3 ++-
 .../Dropdown.ControlledMulti.Example.tsx.shot        |  3 ++-
 .../__snapshots__/Dropdown.Custom.Example.tsx.shot   |  6 ++++--
 .../__snapshots__/Dropdown.Error.Example.tsx.shot    |  3 ++-
 .../__snapshots__/Dropdown.Required.Example.tsx.shot |  6 ++++--
 .../__snapshots__/Dropdown.Wrapping.Example.tsx.shot |  3 ++-
 .../__snapshots__/Facepile.Basic.Example.tsx.shot    |  3 ++-
 .../__snapshots__/Facepile.Overflow.Example.tsx.shot |  3 ++-
 .../ResizeGroup.OverflowSet.Example.tsx.shot         |  3 ++-
 .../react/src/components/Dropdown/Dropdown.styles.ts |  7 ++++---
 .../Dropdown/__snapshots__/Dropdown.test.tsx.snap    | 12 ++++++++----
 15 files changed, 51 insertions(+), 23 deletions(-)
 create mode 100644 change/@fluentui-react-ddb34d7a-c047-4443-a0cd-2eda22ec6308.json

diff --git a/change/@fluentui-react-ddb34d7a-c047-4443-a0cd-2eda22ec6308.json b/change/@fluentui-react-ddb34d7a-c047-4443-a0cd-2eda22ec6308.json
new file mode 100644
index 0000000000000..b4ba7ef4242ba
--- /dev/null
+++ b/change/@fluentui-react-ddb34d7a-c047-4443-a0cd-2eda22ec6308.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Dropdown: Removing unintended extra height.",
+  "packageName": "@fluentui/react",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot
index 0d14f7e355ac7..6da0d0679c3df 100644
--- a/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot
@@ -326,9 +326,10 @@ exports[`Component Examples renders ChoiceGroup.Custom.Example.tsx correctly 1`]
                       {
                         height: 32px;
                         line-height: 30px;
+                        padding-top: 1px;
                         position: absolute;
                         right: 8px;
-                        top: 1px;
+                        top: 0px;
                       }
                 >
                   <i
diff --git a/packages/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot
index 1ff1fbe70a650..df02e116360c4 100644
--- a/packages/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot
@@ -178,9 +178,10 @@ Array [
               cursor: pointer;
               height: 32px;
               line-height: 30px;
+              padding-top: 1px;
               position: absolute;
               right: 8px;
-              top: 1px;
+              top: 0px;
             }
       >
         <i
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Basic.Example.tsx.shot
index 4027b9e6f8742..c86a280db3835 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Basic.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Basic.Example.tsx.shot
@@ -199,9 +199,10 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
               cursor: pointer;
               height: 32px;
               line-height: 30px;
+              padding-top: 1px;
               position: absolute;
               right: 8px;
-              top: 1px;
+              top: 0px;
             }
       >
         <i
@@ -394,9 +395,10 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
             {
               height: 32px;
               line-height: 30px;
+              padding-top: 1px;
               position: absolute;
               right: 8px;
-              top: 1px;
+              top: 0px;
             }
       >
         <i
@@ -602,9 +604,10 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
               cursor: pointer;
               height: 32px;
               line-height: 30px;
+              padding-top: 1px;
               position: absolute;
               right: 8px;
-              top: 1px;
+              top: 0px;
             }
       >
         <i
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Controlled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Controlled.Example.tsx.shot
index c2a9482eb0f82..24708013803ba 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Controlled.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Controlled.Example.tsx.shot
@@ -179,9 +179,10 @@ exports[`Component Examples renders Dropdown.Controlled.Example.tsx correctly 1`
             cursor: pointer;
             height: 32px;
             line-height: 30px;
+            padding-top: 1px;
             position: absolute;
             right: 8px;
-            top: 1px;
+            top: 0px;
           }
     >
       <i
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot
index 46d9b50e09281..6d5149335c247 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot
@@ -179,9 +179,10 @@ exports[`Component Examples renders Dropdown.ControlledMulti.Example.tsx correct
             cursor: pointer;
             height: 32px;
             line-height: 30px;
+            padding-top: 1px;
             position: absolute;
             right: 8px;
-            top: 1px;
+            top: 0px;
           }
     >
       <i
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Custom.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Custom.Example.tsx.shot
index 42c3b31f4f1a2..871f88b6e145c 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Custom.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Custom.Example.tsx.shot
@@ -227,9 +227,10 @@ exports[`Component Examples renders Dropdown.Custom.Example.tsx correctly 1`] =
               cursor: pointer;
               height: 32px;
               line-height: 30px;
+              padding-top: 1px;
               position: absolute;
               right: 8px;
-              top: 1px;
+              top: 0px;
             }
       >
         <i
@@ -579,9 +580,10 @@ exports[`Component Examples renders Dropdown.Custom.Example.tsx correctly 1`] =
               cursor: pointer;
               height: 32px;
               line-height: 30px;
+              padding-top: 1px;
               position: absolute;
               right: 8px;
-              top: 1px;
+              top: 0px;
             }
       >
         <i
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Error.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Error.Example.tsx.shot
index e34f7083740bc..a58bd24171f08 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Error.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Error.Example.tsx.shot
@@ -375,9 +375,10 @@ exports[`Component Examples renders Dropdown.Error.Example.tsx correctly 1`] = `
               cursor: pointer;
               height: 32px;
               line-height: 30px;
+              padding-top: 1px;
               position: absolute;
               right: 8px;
-              top: 1px;
+              top: 0px;
             }
       >
         <i
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Required.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Required.Example.tsx.shot
index a941859d59366..4d679cdf74c48 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Required.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Required.Example.tsx.shot
@@ -229,9 +229,10 @@ exports[`Component Examples renders Dropdown.Required.Example.tsx correctly 1`]
                 cursor: pointer;
                 height: 32px;
                 line-height: 30px;
+                padding-top: 1px;
                 position: absolute;
                 right: 8px;
-                top: 1px;
+                top: 0px;
               }
         >
           <i
@@ -551,9 +552,10 @@ exports[`Component Examples renders Dropdown.Required.Example.tsx correctly 1`]
               cursor: pointer;
               height: 32px;
               line-height: 30px;
+              padding-top: 1px;
               position: absolute;
               right: 8px;
-              top: 1px;
+              top: 0px;
             }
       >
         <i
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Wrapping.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Wrapping.Example.tsx.shot
index d00c1c98a021d..f4fed55faf8e7 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Wrapping.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Wrapping.Example.tsx.shot
@@ -199,9 +199,10 @@ exports[`Component Examples renders Dropdown.Wrapping.Example.tsx correctly 1`]
               cursor: pointer;
               height: 32px;
               line-height: 30px;
+              padding-top: 1px;
               position: absolute;
               right: 8px;
-              top: 1px;
+              top: 0px;
             }
       >
         <i
diff --git a/packages/react-examples/src/react/__snapshots__/Facepile.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Facepile.Basic.Example.tsx.shot
index 388b5b21eba7e..7d58bdc50ab39 100644
--- a/packages/react-examples/src/react/__snapshots__/Facepile.Basic.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Facepile.Basic.Example.tsx.shot
@@ -1088,9 +1088,10 @@ exports[`Component Examples renders Facepile.Basic.Example.tsx correctly 1`] = `
                 cursor: pointer;
                 height: 32px;
                 line-height: 30px;
+                padding-top: 1px;
                 position: absolute;
                 right: 8px;
-                top: 1px;
+                top: 0px;
               }
         >
           <i
diff --git a/packages/react-examples/src/react/__snapshots__/Facepile.Overflow.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Facepile.Overflow.Example.tsx.shot
index c6a4595069a4b..39e6e024481d9 100644
--- a/packages/react-examples/src/react/__snapshots__/Facepile.Overflow.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Facepile.Overflow.Example.tsx.shot
@@ -1191,9 +1191,10 @@ exports[`Component Examples renders Facepile.Overflow.Example.tsx correctly 1`]
                 cursor: pointer;
                 height: 32px;
                 line-height: 30px;
+                padding-top: 1px;
                 position: absolute;
                 right: 8px;
-                top: 1px;
+                top: 0px;
               }
         >
           <i
diff --git a/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot
index 05130a736831f..ccfd25e450249 100644
--- a/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot
@@ -4154,9 +4154,10 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl
                   cursor: pointer;
                   height: 32px;
                   line-height: 30px;
+                  padding-top: 1px;
                   position: absolute;
                   right: 8px;
-                  top: 1px;
+                  top: 0px;
                 }
           >
             <i
diff --git a/packages/react/src/components/Dropdown/Dropdown.styles.ts b/packages/react/src/components/Dropdown/Dropdown.styles.ts
index 648cdbcf21305..d0769ac51764e 100644
--- a/packages/react/src/components/Dropdown/Dropdown.styles.ts
+++ b/packages/react/src/components/Dropdown/Dropdown.styles.ts
@@ -325,11 +325,12 @@ export const getStyles: IStyleFunction<IDropdownStyleProps, IDropdownStyles> = p
     caretDownWrapper: [
       globalClassnames.caretDownWrapper,
       {
-        position: 'absolute',
-        top: 1,
-        right: 8,
         height: DROPDOWN_HEIGHT,
         lineHeight: DROPDOWN_HEIGHT - 2, // height minus the border
+        paddingTop: 1,
+        position: 'absolute',
+        right: 8,
+        top: 0,
       },
       !disabled && {
         cursor: 'pointer',
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 17c504b851a9a..fe0aa4f410433 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -145,9 +145,10 @@ exports[`Dropdown multi-select Renders correctly 1`] = `
             cursor: pointer;
             height: 32px;
             line-height: 30px;
+            padding-top: 1px;
             position: absolute;
             right: 8px;
-            top: 1px;
+            top: 0px;
           }
     >
       <i
@@ -318,9 +319,10 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
             cursor: pointer;
             height: 32px;
             line-height: 30px;
+            padding-top: 1px;
             position: absolute;
             right: 8px;
-            top: 1px;
+            top: 0px;
           }
     >
       <i
@@ -1160,9 +1162,10 @@ exports[`Dropdown single-select Renders correctly 1`] = `
             cursor: pointer;
             height: 32px;
             line-height: 30px;
+            padding-top: 1px;
             position: absolute;
             right: 8px;
-            top: 1px;
+            top: 0px;
           }
     >
       <i
@@ -1333,9 +1336,10 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
             cursor: pointer;
             height: 32px;
             line-height: 30px;
+            padding-top: 1px;
             position: absolute;
             right: 8px;
-            top: 1px;
+            top: 0px;
           }
     >
       <i