From 8c9f856631f64546f04c6e097002b33aabe76410 Mon Sep 17 00:00:00 2001
From: "s.teleshev" <s.teleshev@mu.se>
Date: Tue, 26 Dec 2023 17:19:09 +0100
Subject: [PATCH 1/2] CB-4330 checkbox has fake label

---
 .../src/FormControls/Checkboxes/Checkbox.tsx  |  2 ++
 .../Checkboxes/FieldCheckbox.m.css            |  8 +++++++
 .../FormControls/Checkboxes/FieldCheckbox.tsx | 21 ++++++++++++-------
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx
index aec3a63a35..58d70e61af 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx
@@ -39,12 +39,14 @@ export interface ICheckboxControlledProps extends CheckboxInputProps {
   state?: never;
   checked?: boolean;
   onChange?: CheckboxOnChangeEvent<string | undefined>;
+  hasFakeLabel?: boolean;
   autoHide?: never;
 }
 
 export interface ICheckboxObjectProps<TKey extends string> extends CheckboxInputProps {
   state: Partial<Record<TKey, boolean | null | string | string[]>>;
   checked?: never;
+  hasFakeLabel?: boolean;
   onChange?: CheckboxOnChangeEvent<TKey>;
   autoHide?: boolean;
   name: TKey;
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.m.css b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.m.css
index 2f466951d6..633b66e749 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.m.css
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.m.css
@@ -16,3 +16,11 @@
 .checkbox[disabled] + .fieldLabel {
   cursor: auto;
 }
+
+.fakeLabel {
+  visibility: hidden;
+  display: block;
+  padding-bottom: 10px;
+  composes: theme-typography--body1 from global;
+  font-weight: 500;
+}
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx
index 35e292b911..3dceaab424 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx
@@ -8,6 +8,7 @@
 import { observer } from 'mobx-react-lite';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../../Containers/filterLayoutFakeProps';
+import { Group } from '../../Containers/Group';
 import { s } from '../../s';
 import { useS } from '../../useS';
 import { Field } from '../Field';
@@ -19,6 +20,7 @@ import fieldCheckboxStyles from './FieldCheckbox.m.css';
 export const FieldCheckbox: CheckboxType = observer(function FieldCheckbox({
   children,
   className,
+  hasFakeLabel,
   ...rest
 }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps<any>)) {
   const layoutProps = getLayoutProps(rest);
@@ -30,13 +32,16 @@ export const FieldCheckbox: CheckboxType = observer(function FieldCheckbox({
   }
 
   return (
-    <Field {...layoutProps} className={s(styles, { field: true }, className)}>
-      <Checkbox {...(checkboxProps as CheckboxBaseProps & ICheckboxControlledProps)} className={s(styles, { checkbox: true })} />
-      {children && (
-        <FieldLabel htmlFor={checkboxProps.id || checkboxProps.name} title={checkboxProps.title} className={s(styles, { fieldLabel: true })}>
-          {children}
-        </FieldLabel>
-      )}
-    </Field>
+    <Group {...layoutProps} vertical boxNoOverflow>
+      {hasFakeLabel && children && <FieldLabel className={s(styles, { fakeLabel: true })}>{children}</FieldLabel>}
+      <Field className={s(styles, { field: true }, className)}>
+        <Checkbox {...(checkboxProps as CheckboxBaseProps & ICheckboxControlledProps)} className={s(styles, { checkbox: true })} />
+        {children && (
+          <FieldLabel htmlFor={checkboxProps.id || checkboxProps.name} title={checkboxProps.title} className={s(styles, { fieldLabel: true })}>
+            {children}
+          </FieldLabel>
+        )}
+      </Field>
+    </Group>
   );
 });

From e28a79857501288d9a15251ac09e3c9c77d912d6 Mon Sep 17 00:00:00 2001
From: "s.teleshev" <s.teleshev@mu.se>
Date: Tue, 26 Dec 2023 17:42:23 +0100
Subject: [PATCH 2/2] Revert "CB-4330 checkbox has fake label"

This reverts commit 8c9f856631f64546f04c6e097002b33aabe76410.
---
 .../src/FormControls/Checkboxes/Checkbox.tsx  |  2 --
 .../Checkboxes/FieldCheckbox.m.css            |  8 -------
 .../FormControls/Checkboxes/FieldCheckbox.tsx | 21 +++++++------------
 3 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx
index 58d70e61af..aec3a63a35 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx
@@ -39,14 +39,12 @@ export interface ICheckboxControlledProps extends CheckboxInputProps {
   state?: never;
   checked?: boolean;
   onChange?: CheckboxOnChangeEvent<string | undefined>;
-  hasFakeLabel?: boolean;
   autoHide?: never;
 }
 
 export interface ICheckboxObjectProps<TKey extends string> extends CheckboxInputProps {
   state: Partial<Record<TKey, boolean | null | string | string[]>>;
   checked?: never;
-  hasFakeLabel?: boolean;
   onChange?: CheckboxOnChangeEvent<TKey>;
   autoHide?: boolean;
   name: TKey;
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.m.css b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.m.css
index 633b66e749..2f466951d6 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.m.css
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.m.css
@@ -16,11 +16,3 @@
 .checkbox[disabled] + .fieldLabel {
   cursor: auto;
 }
-
-.fakeLabel {
-  visibility: hidden;
-  display: block;
-  padding-bottom: 10px;
-  composes: theme-typography--body1 from global;
-  font-weight: 500;
-}
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx
index 3dceaab424..35e292b911 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx
@@ -8,7 +8,6 @@
 import { observer } from 'mobx-react-lite';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../../Containers/filterLayoutFakeProps';
-import { Group } from '../../Containers/Group';
 import { s } from '../../s';
 import { useS } from '../../useS';
 import { Field } from '../Field';
@@ -20,7 +19,6 @@ import fieldCheckboxStyles from './FieldCheckbox.m.css';
 export const FieldCheckbox: CheckboxType = observer(function FieldCheckbox({
   children,
   className,
-  hasFakeLabel,
   ...rest
 }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps<any>)) {
   const layoutProps = getLayoutProps(rest);
@@ -32,16 +30,13 @@ export const FieldCheckbox: CheckboxType = observer(function FieldCheckbox({
   }
 
   return (
-    <Group {...layoutProps} vertical boxNoOverflow>
-      {hasFakeLabel && children && <FieldLabel className={s(styles, { fakeLabel: true })}>{children}</FieldLabel>}
-      <Field className={s(styles, { field: true }, className)}>
-        <Checkbox {...(checkboxProps as CheckboxBaseProps & ICheckboxControlledProps)} className={s(styles, { checkbox: true })} />
-        {children && (
-          <FieldLabel htmlFor={checkboxProps.id || checkboxProps.name} title={checkboxProps.title} className={s(styles, { fieldLabel: true })}>
-            {children}
-          </FieldLabel>
-        )}
-      </Field>
-    </Group>
+    <Field {...layoutProps} className={s(styles, { field: true }, className)}>
+      <Checkbox {...(checkboxProps as CheckboxBaseProps & ICheckboxControlledProps)} className={s(styles, { checkbox: true })} />
+      {children && (
+        <FieldLabel htmlFor={checkboxProps.id || checkboxProps.name} title={checkboxProps.title} className={s(styles, { fieldLabel: true })}>
+          {children}
+        </FieldLabel>
+      )}
+    </Field>
   );
 });