fix(SplitButton): Remove borders from hover and pressed state in primary split buttons (#25059)

sopranopillow · web-flow · commit 1c8b241a322c · 2022-10-04T19:28:40.000-06:00
* fix: Remove border in hover/pressed state of split button.

* change file

* updating snapshots

* typo

* updating to only apply styles to primary splitbutton

* adding requested changes
diff --git a/change/@fluentui-react-6cc403c7-709a-479e-b924-84c434c822f3.json b/change/@fluentui-react-6cc403c7-709a-479e-b924-84c434c822f3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Remove border in hover/pressed state of primary SplitButton.",
+  "packageName": "@fluentui/react",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts b/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts
@@ -49,6 +49,12 @@ export const getStyles = memoizeFunction(
                   borderRightWidth: '0',
                   ...getHighContrastNoAdjustStyle(),
                 },
+                ':hover': {
+                  border: 'none',
+                },
+                ':active': {
+                  border: 'none',
+                },
               },
             },
             '.ms-Button--primary + .ms-Button': {
