perf: Don't render Checkbox icon when unchecked (#26248)

Don't render the checkmark at all when unchecked, and remove the universal selector rule in CSS.
microsoft · Jan 9, 2023 · 204f1c4 · 204f1c4
1 parent e361553
commit 204f1c4
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 54 deletions.
diff --git a/change/@fluentui-react-checkbox-cba19a44-ae9e-485b-9089-6c7d0d4d8ce6.json 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/...ct-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/...ct-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -41,22 +41,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 +138,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
@@ -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 />;
   }
 

diff --git 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}`]: {

diff --git a/...ct-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap b/...ct-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>