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.
microsoft · Nov 17, 2021 · 20a59a5 · 20a59a5
1 parent c99f863
commit 20a59a5
Show file tree

Hide file tree

Showing 15 changed files with 51 additions and 23 deletions.
diff --git a/change/@fluentui-react-ddb34d7a-c047-4443-a0cd-2eda22ec6308.json 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": "[email protected]",
+  "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
@@ -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/...es/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot b/...es/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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