fix(checkbox): checked icon not being displayed in safari

adevinta · May 24, 2023 · 0ea59cf · 0ea59cf
1 parent a0685e1
commit 0ea59cf
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json
@@ -17,7 +17,8 @@
     "@spark-ui/icons": "^1.11.0",
     "@spark-ui/internal-utils": "^1.6.0",
     "@spark-ui/use-merge-refs": "^0.3.3",
-    "@spark-ui/label": "^1.1.1"
+    "@spark-ui/label": "^1.1.1",
+    "@spark-ui/icon": "^1.7.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",

diff --git a/packages/components/checkbox/src/CheckboxIndicator.tsx b/packages/components/checkbox/src/CheckboxIndicator.tsx
@@ -10,7 +10,7 @@ export const CheckboxIndicator = forwardRef<HTMLSpanElement, CheckboxIndicatorPr
   (props, ref) => (
     <CheckboxIndicatorPrimitive
       ref={ref}
-      className="text-surface flex items-center justify-center"
+      className="text-surface flex h-full w-full items-center justify-center"
       {...props}
     />
   )

diff --git a/packages/components/checkbox/src/CheckboxInput.styles.ts b/packages/components/checkbox/src/CheckboxInput.styles.ts
@@ -3,10 +3,10 @@ import { cva, VariantProps } from 'class-variance-authority'
 
 export const checkboxInputStyles = cva(
   [
-    'h-sz-20 w-sz-20 border-md peer my-[var(--sz-1)] shrink-0 items-center justify-center self-baseline rounded-sm bg-transparent',
+    'h-sz-16 w-sz-16 border-md box-content items-center justify-center rounded-sm bg-transparent outline-none',
     'spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0',
-    'focus-visible:ring-outline-high focus-visible:outline-none focus-visible:ring-2',
-    'hover:border-primary-container hover:outline-none hover:ring-2',
+    'focus-visible:ring-outline-high focus-visible:ring-2',
+    'hover:border-primary-container hover:ring-2',
     'u-shadow-border-transition',
   ],
   {

diff --git a/packages/components/checkbox/src/CheckboxInput.tsx b/packages/components/checkbox/src/CheckboxInput.tsx
@@ -1,4 +1,5 @@
 import { Checkbox as CheckboxPrimitive } from '@radix-ui/react-checkbox'
+import { Icon } from '@spark-ui/icon'
 import { Check } from '@spark-ui/icons/dist/icons/Check'
 import { Minus } from '@spark-ui/icons/dist/icons/Minus'
 import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
@@ -62,7 +63,7 @@ export const CheckboxInput = forwardRef<HTMLButtonElement, CheckboxInputProps>(
         {...others}
       >
         <CheckboxIndicator>
-          {checked === 'indeterminate' ? indeterminateIcon : icon}
+          <Icon size="sm">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>
         </CheckboxIndicator>
       </CheckboxPrimitive>
     )