Checkbox label not found issue fixed

[KirthikaKumar-K]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

feat(renderer): checkbox label issue fixed

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Render data.label in CheckboxBlock component

• Wrap checkbox and label in Box flex container

• Import Box from @semoss/ui for layout

• Add Label InputSettings in block config

---

Changes walkthrough 📝

	Relevant files
Enhancement	CheckboxBlock.tsx Display checkbox label alongside input                                      libs/renderer/src/components/block-defaults/checkbox-block/CheckboxBlock.tsx Imported Box from @semoss/ui Wrapped checkbox and label in flex container Rendered data.label beside the checkbox Simplified inline style spread +10/-8
Configuration changes	config.tsx Add label setting to checkbox config                                          libs/renderer/src/components/block-defaults/checkbox-block/config.tsx Added Label setting under General section Introduced InputSettings for label property Updated children array to include label config +6/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Accessibility Checkbox label is rendered in a generic Box without a element or appropriate aria attributes, which may prevent screen readers from associating the text with the checkbox. return ( <StyledContainer {...attrs}> <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}> <StyledCheckbox style={{ ...data.style }} disabled={data.disabled} checked={data.value} onChange={(e) => { const value = e.target.checked; setData("value", value); debouncedCallback(); }} /> <Box>{data.label}</Box> </Box> </StyledContainer> ); Import Consistency The Box component is imported from "@semoss/ui" but used with MUI's sx prop; verify that this Box supports the same styling API and theme integration as MUI Box. import { Box } from "@semoss/ui";

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Declare label in data interface The component reads data.label but the CheckboxBlockDef interface doesn’t declare it, leading to type and runtime errors. Add an optional label field to the data object so TypeScript and consumers know it exists. libs/renderer/src/components/block-defaults/checkbox-block/CheckboxBlock.tsx [10-13] export interface CheckboxBlockDef extends BlockDef<"checkbox"> { widget: "checkbox"; data: { value: boolean; disabled: boolean; style?: CSSProperties; + label?: string; }; } Suggestion importance[1-10]: 8 __ Why: The code references data.label without it being declared in CheckboxBlockDef, causing TypeScript and runtime errors.	Medium
	Provide label fallback If data.label is undefined the UI may show “undefined”. Provide a fallback to avoid that, for example with nullish coalescing. libs/renderer/src/components/block-defaults/checkbox-block/CheckboxBlock.tsx [66] -<Box>{data.label}</Box> +<Box>{data.label ?? ""}</Box> Suggestion importance[1-10]: 6 __ Why: Adding a nullish coalescing fallback prevents displaying “undefined” when data.label is absent, improving user experience.	Low
General	Use native label wrapper Wrapping the checkbox and label in a native element ensures the label is correctly associated and accessible. Replace the wrapper with a and use a for the text. libs/renderer/src/components/block-defaults/checkbox-block/CheckboxBlock.tsx [55-67] -<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}> +<label style={{ display: "flex", alignItems: "center", gap: "8px" }}> <StyledCheckbox style={{ ...data.style }} disabled={data.disabled} checked={data.value} onChange={(e) => { const value = e.target.checked; setData("value", value); debouncedCallback(); }} /> - <Box>{data.label}</Box> -</Box> + <span>{data.label}</span> +</label> Suggestion importance[1-10]: 5 __ Why: Replacing the Box with a <label> enhances accessibility by properly associating the checkbox and its text, though it's a stylistic improvement.	Low
	Use sx instead of style Using MUI’s sx prop instead of the inline style prop allows theme-aware styling and better integration with styled-components. Replace style with sx. libs/renderer/src/components/block-defaults/checkbox-block/CheckboxBlock.tsx [56-61] <StyledCheckbox - style={{ ...data.style }} + sx={{ ...data.style }} disabled={data.disabled} checked={data.value} onChange={(e) => { /* ... */ }} /> Suggestion importance[1-10]: 4 __ Why: Switching to the sx prop provides theme-aware styling but is a minor integration improvement rather than a functional necessity.	Low

[github-actions]

@CodiumAI-Agent /update_changelog