From d1f117f17af5fc204fc2da8aa3863b02bf21c0f8 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Mon, 30 May 2022 15:51:18 +0100
Subject: [PATCH] Fixed typo in CheckboxField and wrapped description in
 <label> (#2924)

* Fixed typo in CheckboxField and wrapped description in <label>

* Make functionality identical to before

* Fixed use of infomationIconText

* Fix lint error (needs refactor, out of scope)
---
 .../components/dialog/EditLocationDialog.tsx  |  5 +-
 apps/web/components/ui/form/CheckboxField.tsx | 69 +++++++++++--------
 2 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index 63bfb909e5..ad90c68b16 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -73,6 +73,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     if (selection) {
       locationFormMethods.setValue("locationType", selection?.value);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selection]);
 
   const locationFormSchema = z.object({
@@ -136,7 +137,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                     onChange={(e) =>
                       locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
                     }
-                    infomationIconText={t("display_location_info_badge")}></CheckboxField>
+                    informationIconText={t("display_location_info_badge")}></CheckboxField>
                 )}
               />
             </div>
@@ -182,7 +183,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                       : undefined
                   }
                   onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked)}
-                  infomationIconText={t("display_location_info_badge")}></CheckboxField>
+                  informationIconText={t("display_location_info_badge")}></CheckboxField>
               )}
             />
           </div>
diff --git a/apps/web/components/ui/form/CheckboxField.tsx b/apps/web/components/ui/form/CheckboxField.tsx
index f55468429a..867c092bb3 100644
--- a/apps/web/components/ui/form/CheckboxField.tsx
+++ b/apps/web/components/ui/form/CheckboxField.tsx
@@ -1,51 +1,60 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 
+import classNames from "@calcom/lib/classNames";
+
 import InfoBadge from "@components/ui/InfoBadge";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
   description: string;
   descriptionAsLabel?: boolean;
-  infomationIconText?: string;
+  informationIconText?: string;
 };
 
 const CheckboxField = forwardRef<HTMLInputElement, Props>(
-  ({ label, description, infomationIconText, descriptionAsLabel, ...rest }, ref) => {
+  ({ label, description, informationIconText, ...rest }, ref) => {
+    const descriptionAsLabel = !label || rest.descriptionAsLabel;
     return (
       <div className="block items-center sm:flex">
-        {label && !descriptionAsLabel && (
+        {label && (
           <div className="min-w-48 mb-4 sm:mb-0">
-            <label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
-              {label}
-            </label>
-          </div>
-        )}
-        {label && descriptionAsLabel && (
-          <div className="min-w-48 mb-4 sm:mb-0">
-            <span className="flex text-sm font-medium text-neutral-700">{label}</span>
+            {React.createElement(
+              descriptionAsLabel ? "div" : "label",
+              {
+                className: "flex text-sm font-medium text-neutral-700",
+                ...(!descriptionAsLabel
+                  ? {
+                      htmlFor: rest.id,
+                    }
+                  : {}),
+              },
+              label
+            )}
           </div>
         )}
         <div className="w-full">
           <div className="relative flex items-start">
-            <div className="flex h-5 items-center">
-              <input
-                {...rest}
-                disabled={rest.disabled}
-                ref={ref}
-                type="checkbox"
-                className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
-              />
-            </div>
-            <div className="text-sm ltr:ml-3 rtl:mr-3">
-              {!label || descriptionAsLabel ? (
-                <label htmlFor={rest.id} className="text-neutral-700">
-                  {description}
-                </label>
-              ) : (
-                <p className="text-neutral-900">{description}</p>
-              )}
-            </div>
-            {infomationIconText && <InfoBadge content={infomationIconText}></InfoBadge>}
+            {React.createElement(
+              descriptionAsLabel ? "label" : "div",
+              {
+                className: classNames(
+                  "relative flex items-start",
+                  descriptionAsLabel ? "text-neutral-700" : "text-neutral-900"
+                ),
+              },
+              <>
+                <div className="flex h-5 items-center">
+                  <input
+                    {...rest}
+                    ref={ref}
+                    type="checkbox"
+                    className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
+                  />
+                </div>
+                <span className="text-sm ltr:ml-3 rtl:mr-3">{description}</span>
+              </>
+            )}
+            {informationIconText && <InfoBadge content={informationIconText}></InfoBadge>}
           </div>
         </div>
       </div>