From 092208a1c103084e861722025403b87f59902b48 Mon Sep 17 00:00:00 2001
From: Saicharan Chetpelly <saicharan.chetpelly@zemosolabs.com>
Date: Thu, 20 Jun 2024 11:50:37 +0530
Subject: [PATCH] fix: checkbox column misalignment on table widget (#34222)

Fixes #21790
_or_
Fixes [Issue URL](https://github.com/appsmithorg/appsmith/issues/21790)

Introduced a new prop called isFullWidth for the CheckboxComponent and
pass this prop to this styled component CheckboxContainer. The
isFullWidth is an optional boolean property whole default value would be
true.

Added screenshot for reference.

![image](https://github.com/appsmithorg/appsmith/assets/119920490/1e5f3a9c-d98a-4525-85bc-8f6f471435ed)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a full-width option for checkboxes to enable better styling
flexibility.

- **Tests**
- Added new test cases to verify checkbox styling properties in tables.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../TableV2/columnTypes/checkboxCell_spec.js  | 19 +++++++++++++++++++
 .../CheckboxWidget/component/index.tsx        |  8 +++++++-
 .../component/cellComponents/CheckboxCell.tsx |  1 +
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js
index bc1c5a0ba8..3c47fe842f 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js
@@ -63,6 +63,25 @@ describe(
       // Check horizontal alignment
       cy.get("[data-value='CENTER']").first().click();
 
+      function verifyJustifyContent(selector) {
+        return cy
+          .get(selector + " div")
+          .should("have.css", "justify-content", "center");
+      }
+
+      function verifyWidthAuto($el) {
+        // Ensure the width is 'auto' by checking it doesn't have an explicit value
+        expect($el[0].style.width).to.be.empty;
+      }
+      cy.getTableV2DataSelector("0", "4")
+        .then((selector) => {
+          verifyJustifyContent(selector);
+          return cy.get(`${selector} div`).children().first();
+        })
+        .then(($el) => {
+          verifyWidthAuto($el);
+        });
+
       cy.getTableV2DataSelector("0", "4").then((selector) => {
         cy.get(selector + " div").should(
           "have.css",
diff --git a/app/client/src/widgets/CheckboxWidget/component/index.tsx b/app/client/src/widgets/CheckboxWidget/component/index.tsx
index d84f2ea60b..9105c41a5b 100644
--- a/app/client/src/widgets/CheckboxWidget/component/index.tsx
+++ b/app/client/src/widgets/CheckboxWidget/component/index.tsx
@@ -13,6 +13,7 @@ interface StyledCheckboxContainerProps {
   noContainerPadding?: boolean;
   labelPosition?: LabelPosition;
   minHeight?: number;
+  $isFullWidth?: boolean;
 }
 
 const DEFAULT_BORDER_RADIUS = "0";
@@ -24,7 +25,7 @@ const CheckboxContainer = styled.div<StyledCheckboxContainerProps>`
     display: flex;
     height: 100%;
     justify-content: start;
-    width: 100%;
+    width: ${({ $isFullWidth }) => ($isFullWidth ? "100%" : "auto")};
 
     ${({ minHeight }) => `
     ${minHeight ? `min-height: ${minHeight}px;` : ""}`};
@@ -79,6 +80,9 @@ export const StyledCheckbox = styled(Checkbox)`
 `;
 
 class CheckboxComponent extends React.Component<CheckboxComponentProps> {
+  static readonly defaultProps = {
+    isFullWidth: true,
+  };
   render() {
     /**
      * When the label position is left align checkbox to the right
@@ -99,6 +103,7 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
 
     return (
       <CheckboxContainer
+        $isFullWidth={this.props.isFullWidth}
         isValid={isValid}
         minHeight={this.props.minHeight}
         noContainerPadding={this.props.noContainerPadding}
@@ -158,6 +163,7 @@ export interface CheckboxComponentProps extends ComponentProps {
   labelStyle?: string;
   isLabelInline?: boolean;
   minHeight?: number;
+  isFullWidth?: boolean;
 }
 
 export default CheckboxComponent;
diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/CheckboxCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/CheckboxCell.tsx
index b1200db931..3dbef7b427 100644
--- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/CheckboxCell.tsx
+++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/CheckboxCell.tsx
@@ -84,6 +84,7 @@ const CheckboxCellComponent = (props: CheckboxCellProps) => {
       borderRadius={borderRadius}
       isChecked={value}
       isDisabled={!!disabledCheckbox || !isCellEditable}
+      isFullWidth={false}
       isLoading={false}
       isRequired={false}
       label=""