fix: update react-combobox multiselect checkbox styles to match Checkbox (#26509)

Author: smhigley

change/@fluentui-react-combobox-d3f9321b-0669-426c-8389-04429b748f99.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: update multiselect checkbox styles to match checkbox",
+  "packageName": "@fluentui/react-combobox",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts

@@ -18,6 +18,7 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     minWidth: '160px',
     overflowY: 'auto',
+    ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
     ...shorthands.padding(tokens.spacingHorizontalXS),
     rowGap: tokens.spacingHorizontalXXS,
   },

packages/react-components/react-combobox/src/components/Option/__snapshots__/Option.test.tsx.snap

@@ -11,22 +11,7 @@ exports[`Option renders a default multi-select state 1`] = `
     <span
       aria-hidden="true"
       class="fui-Option__checkIcon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M3 6a3 3 0 013-3h8a3 3 0 013 3v8a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm3-1.5c-.83 0-1.5.67-1.5 1.5v8c0 .83.67 1.5 1.5 1.5h8c.83 0 1.5-.67 1.5-1.5V6c0-.83-.67-1.5-1.5-1.5H6z"
-          fill="currentColor"
-        />
-      </svg>
-    </span>
+    />
     Default Option
   </div>
 </div>
@@ -80,13 +65,13 @@ exports[`Option renders a selected multi-select state 1`] = `
         aria-hidden="true"
         class=""
         fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 3a3 3 0 00-3 3v8a3 3 0 003 3h8a3 3 0 003-3V6a3 3 0 00-3-3H6zm7.85 4.85l-5 5a.5.5 0 01-.7 0l-2-2a.5.5 0 01.7-.7l1.65 1.64 4.65-4.64a.5.5 0 01.7.7z"
+          d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 01-1.08.02L2.22 6.53a.75.75 0 011.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 011.06-.04z"
           fill="currentColor"
         />
       </svg>

packages/react-components/react-combobox/src/components/Option/useOption.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useContextSelector } from '@fluentui/react-context-selector';
-import { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';
+import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
 import { ListboxContext } from '../../contexts/ListboxContext';
 import type { OptionValue } from '../../utils/OptionCollection.types';
@@ -76,9 +76,9 @@ export const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElemen
   });
 
   // check icon
-  let CheckIcon = <CheckmarkFilled />;
+  let CheckIcon: React.ReactNode = <CheckmarkFilled />;
   if (multiselect) {
-    CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;
+    CheckIcon = selected ? <Checkmark12Filled /> : '';
   }
 
   const onClick = (event: React.MouseEvent<HTMLDivElement>) => {

packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts

@@ -86,18 +86,30 @@ const useStyles = makeStyles({
     },
   },
 
-  multiselectCheck: {
-    color: tokens.colorNeutralForeground3,
-    fontSize: tokens.fontSizeBase500,
+  selectedCheck: {
     visibility: 'visible',
   },
 
-  selectedCheck: {
+  multiselectCheck: {
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),
+    ...shorthands.borderRadius(tokens.borderRadiusSmall),
+    boxSizing: 'border-box',
+
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    fill: 'currentColor',
+    fontSize: '12px',
+    height: '16px',
+    width: '16px',
     visibility: 'visible',
   },
 
   selectedMultiselectCheck: {
-    color: tokens.colorBrandBackground,
+    backgroundColor: tokens.colorCompoundBrandBackground,
+    color: tokens.colorNeutralForegroundInverted,
+    ...shorthands.borderColor(tokens.colorCompoundBrandBackground),
   },
 
   checkDisabled: {