From 8e2d9ac2e1f7cd5fda9928e4c9e384f3636bc75b Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Fri, 6 Jan 2023 16:49:04 -0800
Subject: [PATCH 1/3] perf: Don't render Checkbox icon when unchecked

---
 ...-cba19a44-ae9e-485b-9089-6c7d0d4d8ce6.json |  7 ++++
 .../__snapshots__/Checkbox.test.tsx.snap      | 40 ++-----------------
 .../src/components/Checkbox/useCheckbox.tsx   |  7 ++++
 .../components/Checkbox/useCheckboxStyles.ts  |  5 ---
 4 files changed, 17 insertions(+), 42 deletions(-)
 create mode 100644 change/@fluentui-react-checkbox-cba19a44-ae9e-485b-9089-6c7d0d4d8ce6.json

diff --git a/change/@fluentui-react-checkbox-cba19a44-ae9e-485b-9089-6c7d0d4d8ce6.json b/change/@fluentui-react-checkbox-cba19a44-ae9e-485b-9089-6c7d0d4d8ce6.json
new file mode 100644
index 00000000000000..491601fca7d3b6
--- /dev/null
+++ b/change/@fluentui-react-checkbox-cba19a44-ae9e-485b-9089-6c7d0d4d8ce6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: Don't render Checkbox icon when unchecked",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "behowell@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index e553f8f6b3b3ae..f6956b93257958 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -13,11 +13,7 @@ exports[`Checkbox renders a custom indicator 1`] = `
     <div
       aria-hidden="true"
       class="fui-Checkbox__indicator"
-    >
-      <span
-        id="indicator"
-      />
-    </div>
+    />
     <label
       class="fui-Label fui-Checkbox__label"
       for="checkbox-1"
@@ -41,22 +37,7 @@ exports[`Checkbox renders a default state 1`] = `
     <div
       aria-hidden="true"
       class="fui-Checkbox__indicator"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        fill="currentColor"
-        height="12"
-        viewBox="0 0 12 12"
-        width="12"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          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>
-    </div>
+    />
   </span>
 </div>
 `;
@@ -153,22 +134,7 @@ exports[`Checkbox renders with a label 1`] = `
     <div
       aria-hidden="true"
       class="fui-Checkbox__indicator"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        fill="currentColor"
-        height="12"
-        viewBox="0 0 12 12"
-        width="12"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          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>
-    </div>
+    />
     <label
       class="fui-Label fui-Checkbox__label"
       for="checkbox-1"
diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx
index 70fed20abde2cb..873e4eb58ea49e 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx
@@ -103,6 +103,13 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
     }),
   };
 
+  // Don't render the indicator's children (checkmark) when unchecked.
+  // Note that this is explicitly overriding any user-provided children, to maintain backwards compatibility
+  // with an earlier implementation that always hid the indicator icon via css when unchecked.
+  if (!checked && state.indicator) {
+    state.indicator.children = undefined;
+  }
+
   state.input.onChange = useEventCallback(ev => {
     const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
     onChange?.(ev, { checked: val });
diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index d0d22c2a609a3f..11e4e12821e97d 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -33,11 +33,6 @@ const useInputBaseClassName = makeResetStyles({
   // This is done so that clicking on that "empty space" still toggles the checkbox.
   width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,
 
-  // When unchecked, hide the the checkmark icon (child of the indicator slot)
-  [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {
-    opacity: 0,
-  },
-
   // Colors for the unchecked state
   ':enabled:not(:checked):not(:indeterminate)': {
     [`& ~ .${checkboxClassNames.label}`]: {

From 2a76f10957670aee92fe1fbab6a0a1c99402c360 Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Fri, 6 Jan 2023 16:52:49 -0800
Subject: [PATCH 2/3] Table test snapshots

---
 .../TableSelectionCell.test.tsx.snap            | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap b/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap
index de9c9e7fab454d..e96b26dd14d43a 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap
@@ -16,22 +16,7 @@ exports[`TableSelectionCell renders a default state 1`] = `
       <div
         aria-hidden="true"
         class="fui-Checkbox__indicator"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          fill="currentColor"
-          height="12"
-          viewBox="0 0 12 12"
-          width="12"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            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>
-      </div>
+      />
     </span>
   </td>
 </tr>

From 4c5bf0797a14834bf485c1e73b760a764085cbee Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Fri, 6 Jan 2023 16:55:34 -0800
Subject: [PATCH 3/3] Only change the default icon, not the user-provided
 indicator

---
 .../Checkbox/__snapshots__/Checkbox.test.tsx.snap        | 6 +++++-
 .../src/components/Checkbox/useCheckbox.tsx              | 9 +--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index f6956b93257958..922705a2db39fa 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -13,7 +13,11 @@ exports[`Checkbox renders a custom indicator 1`] = `
     <div
       aria-hidden="true"
       class="fui-Checkbox__indicator"
-    />
+    >
+      <span
+        id="indicator"
+      />
+    </div>
     <label
       class="fui-Label fui-Checkbox__label"
       for="checkbox-1"
diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx
index 873e4eb58ea49e..ab85920cae2a9a 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx
@@ -53,7 +53,7 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
     } else {
       checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;
     }
-  } else {
+  } else if (checked) {
     checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;
   }
 
@@ -103,13 +103,6 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
     }),
   };
 
-  // Don't render the indicator's children (checkmark) when unchecked.
-  // Note that this is explicitly overriding any user-provided children, to maintain backwards compatibility
-  // with an earlier implementation that always hid the indicator icon via css when unchecked.
-  if (!checked && state.indicator) {
-    state.indicator.children = undefined;
-  }
-
   state.input.onChange = useEventCallback(ev => {
     const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
     onChange?.(ev, { checked: val });