[CCUBE-2264][GZ] remove checkbox toggle error state styling

e2e/tests/components/fields/image-upload/image-upload.e2e.spec.ts

@@ -155,6 +155,7 @@ test.describe("ImageUpload", () => {
 
 			await test.step("Confirm review prompt and open modal", async () => {
 				await story.locators.reviewOkButton.click();
+				await story.waitForImageEditorCanvas();
 				await story.snapshot("review-modal", {
 					fullscreen: true,
 				});

package.json

@@ -61,7 +61,7 @@
 	},
 	"peerDependencies": {
 		"@floating-ui/react": ">=0.26.23 <1.0.0",
-		"@lifesg/react-design-system": "^4.0.0-alpha.6",
+		"@lifesg/react-design-system": "^4.0.0-alpha.9",
 		"@lifesg/react-icons": "^1.9.0",
 		"react": "^17.0.2 || ^18.0.0 || ^19.0.0",
 		"react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
@@ -72,7 +72,7 @@
 		"@babel/preset-react": "^7.18.6",
 		"@babel/preset-typescript": "^7.18.6",
 		"@floating-ui/react": "^0.26.23",
-		"@lifesg/react-design-system": "^4.0.0-alpha.6",
+		"@lifesg/react-design-system": "^4.0.0-alpha.9",
 		"@lifesg/react-icons": "^1.9.0",
 		"@lifesg/web-form-builder": "^1.0.0-alpha.4",
 		"@linaria/babel-preset": "^5.0.4",

src/components/fields/checkbox-group/checkbox-group.styles.ts

@@ -1,4 +1,4 @@
-import { Colour, Spacing } from "@lifesg/react-design-system/theme";
+import { Spacing } from "@lifesg/react-design-system/theme";
 import { css } from "@linaria/core";
 
 export const label = css`
@@ -29,18 +29,6 @@ export const toggleWrapper = css`
 	gap: ${Spacing["spacing-16"]};
 `;
 
-export const toggleWrapperHasError = css`
-	/* No item selected — all items get error border */
-	&:not(:has(input:checked)) > * {
-		border-color: ${Colour["border-error"]};
-	}
-
-	/* An item is selected — unselected items revert to normal border */
-	&:has(input:checked) > *:not(:has(input:checked)) {
-		border-color: ${Colour.border};
-	}
-`;
-
 export const toggleWrapperVertical = css`
 	flex-direction: column;
 `;
@@ -51,19 +39,3 @@ export const toggle = css`
 		padding: 0;
 	}
 `;
-
-export const toggleHasError = css`
-	&:has(input:checked) {
-		background: ${Colour["bg-error"]};
-		border-color: ${Colour["border-error"]};
-
-		label,
-		span {
-			color: ${Colour["text-error"]};
-		}
-
-		svg {
-			color: ${Colour["icon-error"]};
-		}
-	}
-`;

src/components/fields/checkbox-group/checkbox-group.tsx

@@ -150,7 +150,6 @@ export const CheckboxGroup = (props: IGenericFieldProps<TCheckboxGroupSchema>) =
 					className={clsx(
 						styles.toggleWrapper,
 						customOptions.layoutType === "vertical" && styles.toggleWrapperVertical,
-						error?.message && styles.toggleWrapperHasError,
 						className ? `${className}-checkbox-container` : undefined
 					)}
 				>
@@ -163,7 +162,7 @@ export const CheckboxGroup = (props: IGenericFieldProps<TCheckboxGroupSchema>) =
 								type="checkbox"
 								data-testid={TestHelper.generateId(id, "toggle")}
 								id={checkboxId}
-								className={clsx(styles.toggle, className, error?.message && styles.toggleHasError)}
+								className={clsx(styles.toggle, className)}
 								disabled={disabled ?? option.disabled}
 								focusableWhenDisabled={disabled}
 								name={checkboxId}

src/components/fields/image-upload/image-review/image-review.styles.ts

@@ -121,11 +121,10 @@ export const drawDeleteButtonWrapper = css`
 export const drawDeleteButton = css`
 	padding: 0;
 	width: 5.4375rem;
-	height: 2.5rem;
 	gap: ${Spacing["spacing-4"]};
 	background-color: ${Colour.bg};
 	box-shadow: ${Shadow["sm-strong"]};
-	border-radius: 1.25rem;
+	border-radius: ${Radius.full};
 
 	&:first-child {
 		margin-bottom: ${Spacing["spacing-16"]};

src/components/fields/image-upload/image-review/image-review.tsx

@@ -430,6 +430,7 @@ export const ImageReview = (props: IProps) => {
 								className={clsx(styles.drawIcon, drawDeleteDisabled && styles.drawIconDisabled)}
 							/>
 						}
+						sizeType="small"
 					>
 						<Typography.BodySM
 							className={clsx(
@@ -452,6 +453,7 @@ export const ImageReview = (props: IProps) => {
 								className={clsx(styles.deleteIcon, drawDeleteDisabled && styles.deleteIconDisabled)}
 							/>
 						}
+						sizeType="small"
 					>
 						<Typography.BodySM
 							className={clsx(

src/components/fields/location-field/location-modal/location-picker/legend/legend.styles.ts

@@ -48,6 +48,7 @@ export const legendIcon = css`
 export const closeButton = css`
 	padding: 0;
 	background-color: transparent;
+	min-height: unset;
 
 	height: ${Spacing["spacing-20"]};
 	width: ${Spacing["spacing-20"]};