refactor: use Icon component in Checkbox

Author: pomfrida

packages/eds-core-react/src/components/next/Checkbox/Checkbox.tsx

@@ -6,6 +6,7 @@ import {
   checkbox_indeterminate,
 } from '@equinor/eds-icons'
 import { TypographyNext } from '../../Typography'
+import { Icon } from '../Icon'
 import type { CheckboxProps } from './Checkbox.types'
 
 const classNames = (...classes: (string | boolean | undefined)[]) =>
@@ -39,8 +40,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
     const labelClasses = classNames('eds-checkbox__label')
 
-    const iconClasses = classNames('eds-checkbox__icon')
-
     const sharedWrapperProps: Record<string, unknown> = {
       style,
       'data-disabled': disabled ? 'true' : undefined,
@@ -64,53 +63,18 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           data-indeterminate={indeterminate}
           {...rest}
         />
-        {indeterminate ? (
-          <svg
-            className={iconClasses}
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-          >
-            <path
-              className="eds-checkbox__icon-path eds-checkbox__icon-path--indeterminate"
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d={
-                Array.isArray(checkbox_indeterminate.svgPathData)
-                  ? checkbox_indeterminate.svgPathData.join(' ')
-                  : checkbox_indeterminate.svgPathData
-              }
-            />
-          </svg>
-        ) : (
-          <svg
-            className={iconClasses}
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-          >
-            <path
-              className="eds-checkbox__icon-path eds-checkbox__icon-path--checked"
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d={
-                Array.isArray(checkbox.svgPathData)
-                  ? checkbox.svgPathData.join(' ')
-                  : checkbox.svgPathData
-              }
-            />
-            <path
-              className="eds-checkbox__icon-path eds-checkbox__icon-path--unchecked"
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d={
-                Array.isArray(checkbox_outline.svgPathData)
-                  ? checkbox_outline.svgPathData.join(' ')
-                  : checkbox_outline.svgPathData
-              }
-            />
-          </svg>
-        )}
+        <Icon
+          data={checkbox}
+          className="eds-checkbox__icon eds-checkbox__icon--checked"
+        />
+        <Icon
+          data={checkbox_outline}
+          className="eds-checkbox__icon eds-checkbox__icon--unchecked"
+        />
+        <Icon
+          data={checkbox_indeterminate}
+          className="eds-checkbox__icon eds-checkbox__icon--indeterminate"
+        />
       </span>
     )
 

packages/eds-core-react/src/components/next/Checkbox/checkbox.css

@@ -118,52 +118,34 @@
   fill: var(--eds-color-border-neutral-medium);
 }
 
-/* Icon paths visibility */
-.eds-checkbox__icon-path--checked {
+/* Icon visibility logic is controlled by CSS - default state: show unchecked, hide others */
+.eds-checkbox__icon--checked,
+.eds-checkbox__icon--indeterminate {
   display: none;
 }
 
-.eds-checkbox__input:checked
-  ~ .eds-checkbox__icon
-  .eds-checkbox__icon-path--checked {
+.eds-checkbox__icon--unchecked {
   display: inline;
 }
 
-.eds-checkbox__input:checked
-  ~ .eds-checkbox__icon
-  .eds-checkbox__icon-path--unchecked {
-  display: none;
-}
-
-.eds-checkbox__input:not(:checked)
-  ~ .eds-checkbox__icon
-  .eds-checkbox__icon-path--checked {
-  display: none;
-}
-
-.eds-checkbox__input:not(:checked)
-  ~ .eds-checkbox__icon
-  .eds-checkbox__icon-path--unchecked {
+/* Checked state: show checked icon, hide others */
+.eds-checkbox__input:checked ~ .eds-checkbox__icon--checked {
   display: inline;
 }
 
-/* Indeterminate state */
-.eds-checkbox__icon-path--indeterminate {
+.eds-checkbox__input:checked ~ .eds-checkbox__icon--unchecked {
   display: none;
 }
 
+/* Indeterminate state: show indeterminate icon, hide others */
 .eds-checkbox__input[data-indeterminate='true']
-  ~ .eds-checkbox__icon
-  .eds-checkbox__icon-path--indeterminate {
+  ~ .eds-checkbox__icon--indeterminate {
   display: inline;
 }
 
+.eds-checkbox__input[data-indeterminate='true'] ~ .eds-checkbox__icon--checked,
 .eds-checkbox__input[data-indeterminate='true']
-  ~ .eds-checkbox__icon
-  .eds-checkbox__icon-path--checked,
-.eds-checkbox__input[data-indeterminate='true']
-  ~ .eds-checkbox__icon
-  .eds-checkbox__icon-path--unchecked {
+  ~ .eds-checkbox__icon--unchecked {
   display: none;
 }