Only change the default icon, not the user-provided indicator

microsoft · Jan 7, 2023 · 4c5bf07 · 4c5bf07
1 parent 2a76f10
commit 4c5bf07
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
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
@@ -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
@@ -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 });