From d4add8c53e767de72a2a5e62d78bea7275a46541 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Thu, 29 Sep 2022 08:56:47 -0700 Subject: [PATCH 1/2] fix: Dropdown arrow icon layout when no placeholder or value is present --- .../src/components/Dropdown/useDropdownStyles.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts index 8da3124af80c87..2cd78635fc9241 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts +++ b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts @@ -85,7 +85,7 @@ const useStyles = makeStyles({ cursor: 'pointer', display: 'grid', fontFamily: tokens.fontFamilyBase, - gridTemplateColumns: '1fr auto', + gridTemplateColumns: '[content] 1fr [icon] auto [end]', justifyContent: 'space-between', textAlign: 'left', width: '100%', @@ -167,6 +167,8 @@ const useIconStyles = makeStyles({ color: tokens.colorNeutralStrokeAccessible, display: 'block', fontSize: tokens.fontSizeBase500, + gridColumnStart: 'icon', + gridColumnEnd: 'end', // the SVG must have display: block for accurate positioning // otherwise an extra inline space is inserted after the svg element From c872f1f9e71dcc94eb66a9c49de23bbb102f2e9a Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Thu, 29 Sep 2022 08:58:06 -0700 Subject: [PATCH 2/2] change file --- ...eact-combobox-d1ed182f-ed98-446f-8cb6-4c9de248b0ff.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-combobox-d1ed182f-ed98-446f-8cb6-4c9de248b0ff.json diff --git a/change/@fluentui-react-combobox-d1ed182f-ed98-446f-8cb6-4c9de248b0ff.json b/change/@fluentui-react-combobox-d1ed182f-ed98-446f-8cb6-4c9de248b0ff.json new file mode 100644 index 00000000000000..fa6a058aceb96d --- /dev/null +++ b/change/@fluentui-react-combobox-d1ed182f-ed98-446f-8cb6-4c9de248b0ff.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: Dropdown arrow icon layout when no placeholder or value is present", + "packageName": "@fluentui/react-combobox", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +}