feat: add better data-testid handling to sfCheckbox (#3321)

Author: FRSgit

packages/sfui/frameworks/react/components/SfCheckbox/SfCheckbox.tsx

@@ -13,7 +13,7 @@ const defaultWrapperTag = 'label';
 
 const SfCheckbox = polymorphicForwardRef<'input', SfCheckboxProps>(
   (
-    { wrapperAs, invalid, className, indeterminate: indeterminateProp, wrapperClassName, ...attributes },
+    { wrapperAs, invalid, className, indeterminate: indeterminateProp, wrapperClassName, 'data-testid': dataTestId, ...attributes },
     ref,
   ): React.JSX.Element => {
     const inputRef = useRef<HTMLInputElement>(null);
@@ -47,7 +47,7 @@ const SfCheckbox = polymorphicForwardRef<'input', SfCheckboxProps>(
           },
           wrapperClassName,
         )}
-        data-testid="checkbox"
+        data-testid={dataTestId ?? "checkbox"}
       >
         <input
           className={twMerge('sr-only', className)}

packages/sfui/frameworks/react/components/SfCheckbox/types.ts

@@ -5,5 +5,6 @@ export interface SfCheckboxProps extends PropsWithStyle, InputHTMLAttributes<HTM
   invalid?: boolean;
   wrapperAs?: ElementType<any> | undefined;
   wrapperClassName?: string;
+  'data-testid'?: string;
   indeterminate?: boolean;
 }

packages/sfui/frameworks/vue/components/SfCheckbox/SfCheckbox.vue

@@ -23,6 +23,10 @@ const { indeterminate = false } = defineProps({
     default: 'label',
   },
   wrapperClass: ClassProp,
+  dataTestid: {
+    type: String,
+    default: 'checkbox',
+  },
 });
 
 defineOptions({
@@ -59,7 +63,7 @@ watch(
         wrapperClass,
       )
     "
-    data-testid="checkbox"
+    :data-testid="dataTestid ?? 'checkbox'"
   >
     <input
       :class="twMerge('sr-only', $attrs.class)"