From 01529c4db5e82c1891b5efb25bfdc7f4fcebcaa5 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan@appsmith.com>
Date: Thu, 30 May 2024 13:51:39 +0530
Subject: [PATCH] chore: Checkbox widget does not show an asterisk to indicate
 it's a required (#33814)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #33444

/ok-to-test tags="@tag.Anvil"<!-- This is an auto-generated comment:
Cypress test results -->
> [!WARNING]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9297202278>
> Commit: 895c87c82e1b55e4d604870c89512200c408ef41
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9297202278&attempt=1"
target="_blank">Click here!</a>
> It seems like **no tests ran** 😔. We are not able to recognize it,
please check workflow <a
href="https://github.com/appsmithorg/appsmith/actions/runs/9297202278"
target="_blank">here.</a>

<!-- end of auto-generated comment: Cypress test results  -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
---
 .../chromatic/Checkbox.chromatic.stories.tsx       |  5 ++++-
 .../src/components/Checkbox/src/Checkbox.tsx       | 14 +++++++++++++-
 .../src/components/Checkbox/src/styles.module.css  | 13 +++++++++----
 .../Checkbox/stories/Checkbox.stories.tsx          |  8 ++++++++
 .../widgets/src/styles/src/field.module.css        |  2 +-
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/app/client/packages/design-system/widgets/src/components/Checkbox/chromatic/Checkbox.chromatic.stories.tsx b/app/client/packages/design-system/widgets/src/components/Checkbox/chromatic/Checkbox.chromatic.stories.tsx
index f2a9def2a6..66f7a53573 100644
--- a/app/client/packages/design-system/widgets/src/components/Checkbox/chromatic/Checkbox.chromatic.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Checkbox/chromatic/Checkbox.chromatic.stories.tsx
@@ -28,9 +28,12 @@ export const LightMode: Story = {
           </DataAttrWrapper>
         </>
       ))}
-      <Checkbox defaultSelected isReadOnly isRequired>
+      <Checkbox defaultSelected isReadOnly>
         Readonly
       </Checkbox>
+      <Checkbox defaultSelected isRequired>
+        Is Required
+      </Checkbox>
     </StoryGrid>
   ),
 };
diff --git a/app/client/packages/design-system/widgets/src/components/Checkbox/src/Checkbox.tsx b/app/client/packages/design-system/widgets/src/components/Checkbox/src/Checkbox.tsx
index 0cd0ebb4a2..df5cea5d67 100644
--- a/app/client/packages/design-system/widgets/src/components/Checkbox/src/Checkbox.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Checkbox/src/Checkbox.tsx
@@ -25,7 +25,19 @@ const _Checkbox = (props: CheckboxProps, ref: HeadlessCheckboxRef) => {
         inlineLabelStyles["inline-label"],
       )}
     >
-      {Boolean(children) && <Text>{children}</Text>}
+      {Boolean(children) && (
+        <>
+          <Text>{children}</Text>
+          {Boolean(props.isRequired) && (
+            <Text
+              color="negative"
+              data-inline-label-necessity-indicator-icon=""
+            >
+              *
+            </Text>
+          )}
+        </>
+      )}
     </HeadlessCheckbox>
   );
 };
diff --git a/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css
index 06da0adfa5..7cb25ebd87 100644
--- a/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css
@@ -30,6 +30,11 @@
     --checkbox-border-color: var(--color-bd-neutral-hover);
   }
 
+  & [data-inline-label-necessity-indicator-icon] {
+    color: var(--color-fg-negative);
+    margin-inline-start: var(--inner-spacing-1);
+  }
+
   /**
   * ----------------------------------------------------------------------------
   * LABEL POSITION
@@ -86,10 +91,10 @@
   }
 
   /**
- * ----------------------------------------------------------------------------
- * ERROR ( INVALID )
- *-----------------------------------------------------------------------------
- */
+  * ----------------------------------------------------------------------------
+  * ERROR ( INVALID )
+  *-----------------------------------------------------------------------------
+  */
   &[data-invalid] [data-icon] {
     --checkbox-border-color: var(--color-bd-negative);
   }
diff --git a/app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.tsx b/app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.tsx
index 576cbadf75..18a8a856e1 100644
--- a/app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.tsx
@@ -64,3 +64,11 @@ export const CustomIcon: Story = {
     </Flex>
   ),
 };
+
+export const IsRequired: Story = {
+  render: () => (
+    <Flex direction="column" gap="1rem" wrap="wrap">
+      <Checkbox isRequired>Required</Checkbox>
+    </Flex>
+  ),
+};
diff --git a/app/client/packages/design-system/widgets/src/styles/src/field.module.css b/app/client/packages/design-system/widgets/src/styles/src/field.module.css
index d1cbd6944a..59cca9f620 100644
--- a/app/client/packages/design-system/widgets/src/styles/src/field.module.css
+++ b/app/client/packages/design-system/widgets/src/styles/src/field.module.css
@@ -41,7 +41,7 @@
   */
   & [data-field-necessity-indicator-icon] {
     color: var(--color-fg-negative);
-    margin-left: var(--inner-spacing-1);
+    margin-inline-start: var(--inner-spacing-1);
   }
 
   /**