fix: remove margin from icon when ToolbarButton is vertical (microsof…

…t#28658) * fix: remove margin from icon when ToolbarButton is vertical * chore: add changes
levithomason · Jul 27, 2023 · c6d2ace · c6d2ace
1 parent 6320eca
commit c6d2ace
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json b/change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove margin from Icon in ToolbarButton when vertical prop is passed",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...ct-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts b/...ct-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { useButtonStyles_unstable } from '@fluentui/react-button';
 import { ToolbarButtonState } from './ToolbarButton.types';
 
@@ -8,6 +8,7 @@ const useBaseStyles = makeStyles({
   },
   verticalIcon: {
     fontSize: '24px',
+    ...shorthands.margin('0'),
   },
 });