From 6686b9428034d1b6f11061ba2bcddfe8dabed879 Mon Sep 17 00:00:00 2001
From: Bhavin K <58818598+techbhavin@users.noreply.github.com>
Date: Thu, 30 Jun 2022 11:12:45 +0530
Subject: [PATCH] fix: checkbox-group widget breaking UI issue (#14820)

- Hides Style alignment when Inline option is false which fixes UI overlapping issues
- Resizing the widget other options which are outside don't come within the widget boundaries - Fixed
- Behaviour of widget when placed at top of the canvas - Fixed
---
 .../CheckboxGroupWidget/component/index.tsx   |  9 +++++++
 .../CheckboxGroupWidget/widget/index.tsx      | 26 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx
index 2830f891b3..a3657b984e 100644
--- a/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx
+++ b/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx
@@ -69,6 +69,15 @@ export interface CheckboxGroupContainerProps {
 
 export const CheckboxGroupContainer = styled.div<CheckboxGroupContainerProps>`
   ${labelLayoutStyles}
+   justify-content: ${({ compactMode, labelPosition }) => {
+     if (
+       labelPosition &&
+       labelPosition !== LabelPosition.Left &&
+       !compactMode
+     ) {
+       return "flex-start";
+     }
+   }};
   & .${LABEL_CONTAINER_CLASS} {
     ${({ labelPosition }) =>
       labelPosition === LabelPosition.Left && "min-height: 30px"};
diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx
index 4451cb6b8c..ae5024495d 100644
--- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx
+++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx
@@ -165,9 +165,29 @@ class CheckboxGroupWidget extends BaseWidget<
             isJSConvertible: true,
             isBindProperty: true,
             isTriggerProperty: false,
+            updateHook: (
+              props: CheckboxGroupWidgetProps,
+              propertyPath: string,
+              propertyValue: string,
+            ) => {
+              const propertiesToUpdate = [{ propertyPath, propertyValue }];
+              const isOffInline =
+                typeof propertyValue === "string"
+                  ? !(propertyValue === "true")
+                  : !propertyValue;
+
+              if (isOffInline) {
+                propertiesToUpdate.push({
+                  propertyPath: "optionAlignment",
+                  propertyValue: CheckboxGroupAlignmentTypes.NONE,
+                });
+              }
+              return propertiesToUpdate;
+            },
             validation: {
               type: ValidationTypes.BOOLEAN,
             },
+            dependencies: ["isInline"],
           },
           {
             propertyName: "isSelectAll",
@@ -315,6 +335,12 @@ class CheckboxGroupWidget extends BaseWidget<
                 ],
               },
             },
+            hidden: (props: CheckboxGroupWidgetProps) => {
+              return typeof props.isInline === "string"
+                ? !(props.isInline === "true")
+                : !props.isInline;
+            },
+            dependencies: ["isInline"],
           },
           {
             propertyName: "labelTextColor",