From 3d1ad707731a8e3423a47ca5d7fcecfb08e445c5 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 2 Sep 2026 20:01:21 -0300
Subject: [PATCH 1/2] fix(BBBCheckbox): respect caller-provided id prop

BBBCheckbox always rendered with an internally generated id from
useId(), because {...props} was spread before the explicit id
attribute, so the generated value silently overwrote any id passed
by the caller. This made it impossible to target the rendered input
by a known id and broke the label/htmlFor association whenever a
custom id was expected.

Destructure id from props and fall back to useId() only when the
caller does not provide one, reusing the resolved value for both the
checkbox input and the label's htmlFor attribute.
---
 src/components/Checkbox/component.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Checkbox/component.tsx b/src/components/Checkbox/component.tsx
index 808740e..5356e8e 100644
--- a/src/components/Checkbox/component.tsx
+++ b/src/components/Checkbox/component.tsx
@@ -17,13 +17,15 @@ function Checkbox({
   layout = DEFAULT_LAYOUT,
   round = false,
   ariaLabel,
+  id,
   ...props
 }: CheckboxProps): JSX.Element {
-  const id = useId();
+  const generatedId = useId();
+  const checkboxId = id ?? generatedId;
   const checkbox = (
     <Styled.StyledCheckbox
       {...props}
-      id={id}
+      id={checkboxId}
       aria-label={ariaLabel}
       icon={round ? <RadioButtonUnchecked /> : undefined}
       checkedIcon={round ? <RadioButtonChecked /> : undefined}
@@ -36,9 +38,9 @@ function Checkbox({
 
   return (
     <Styled.Container>
-      {layout === LAYOUTS.LEFT && <Styled.Label htmlFor={id}>{label}</Styled.Label>}
+      {layout === LAYOUTS.LEFT && <Styled.Label htmlFor={checkboxId}>{label}</Styled.Label>}
       {checkbox}
-      {layout === LAYOUTS.RIGHT && <Styled.Label htmlFor={id}>{label}</Styled.Label>}
+      {layout === LAYOUTS.RIGHT && <Styled.Label htmlFor={checkboxId}>{label}</Styled.Label>}
     </Styled.Container>
   );
 }

From 78cf86be50fd031fbf3b2bbb03c835d3fcab0fe9 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 2 Sep 2026 22:11:12 -0300
Subject: [PATCH 2/2] feat(BBBCheckbox): add dataTest prop for the underlying
 input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BBBCheckbox has no way to tag its rendered <input> for test
selectors. Spreading an arbitrary data-test through {...props} does
not work: MUI's SwitchBase only forwards explicitly recognized props
(id, checked, name, inputProps) to the actual <input>, so anything
else spread through falls into the outer wrapper <span> instead —
the same class of issue fixed for id in the previous commit.

Add an explicit dataTest prop, matching the convention already used
by BBButton and BBBInput, and route it through MUI's inputProps so
it lands on the real <input>, merging with any inputProps the caller
already passes directly.
---
 src/components/Checkbox/README.md             | 1 +
 src/components/Checkbox/component.stories.tsx | 4 ++++
 src/components/Checkbox/component.tsx         | 4 ++++
 src/components/Checkbox/types.ts              | 3 +++
 4 files changed, 12 insertions(+)

diff --git a/src/components/Checkbox/README.md b/src/components/Checkbox/README.md
index 5f219a0..4464c4a 100644
--- a/src/components/Checkbox/README.md
+++ b/src/components/Checkbox/README.md
@@ -28,4 +28,5 @@ import { BBBCheckbox } from 'bbb-ui-components';
 | `layout`   | `keyof typeof LAYOUTS` | `'right'` | The position of the label relative to the checkbox.                         |
 | `round`      | `boolean`              | `false`   | If `true`, the checkbox will be rendered as a round radio-style button.     |
 | `ariaLabel`| `string`               |           | The accessible name for the checkbox.                                       |
+| `dataTest` | `string`               |           | The `data-test` attribute on the underlying `<input>` element.              |
 | `...props` | `any`                  |           | Any other props will be passed down to the underlying Material-UI Checkbox component. |
diff --git a/src/components/Checkbox/component.stories.tsx b/src/components/Checkbox/component.stories.tsx
index d5d14ac..c6f7d22 100644
--- a/src/components/Checkbox/component.stories.tsx
+++ b/src/components/Checkbox/component.stories.tsx
@@ -25,6 +25,10 @@ const meta = {
       control: 'text',
       description: 'Accessible name for the checkbox.',
     },
+    dataTest: {
+      control: 'text',
+      description: '`data-test` attribute on the underlying `<input>` element.',
+    },
   },
 } satisfies Meta<typeof BBBCheckbox>;
 
diff --git a/src/components/Checkbox/component.tsx b/src/components/Checkbox/component.tsx
index 5356e8e..4e52e96 100644
--- a/src/components/Checkbox/component.tsx
+++ b/src/components/Checkbox/component.tsx
@@ -18,10 +18,13 @@ function Checkbox({
   round = false,
   ariaLabel,
   id,
+  dataTest,
+  inputProps,
   ...props
 }: CheckboxProps): JSX.Element {
   const generatedId = useId();
   const checkboxId = id ?? generatedId;
+  const mergedInputProps = { 'data-test': dataTest, ...inputProps };
   const checkbox = (
     <Styled.StyledCheckbox
       {...props}
@@ -29,6 +32,7 @@ function Checkbox({
       aria-label={ariaLabel}
       icon={round ? <RadioButtonUnchecked /> : undefined}
       checkedIcon={round ? <RadioButtonChecked /> : undefined}
+      inputProps={mergedInputProps}
     />
   );
 
diff --git a/src/components/Checkbox/types.ts b/src/components/Checkbox/types.ts
index bd7298c..c61e065 100644
--- a/src/components/Checkbox/types.ts
+++ b/src/components/Checkbox/types.ts
@@ -15,4 +15,7 @@ export interface CheckboxProps extends MuiCheckboxProps {
 
   /** Accessible name for the checkbox. */
   ariaLabel?: string;
+
+  /** `data-test` attribute on the underlying `<input>` element. */
+  dataTest?: string;
 }