From 51b1f3a48d7930acd3630e1d0fc4a97f932e8162 Mon Sep 17 00:00:00 2001
From: Douglas Bouttell <douglas.bouttell@camunda.com>
Date: Wed, 10 Apr 2024 14:36:59 +0100
Subject: [PATCH 1/4] fix(styles): Don't clip radio buttons

---
 packages/form-js-viewer/assets/form-js-base.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css
index 106de6b78..bf496d7a5 100644
--- a/packages/form-js-viewer/assets/form-js-base.css
+++ b/packages/form-js-viewer/assets/form-js-base.css
@@ -287,7 +287,6 @@
   display: flex;
   align-items: center;
   white-space: nowrap;
-  overflow: hidden;
   color: var(--color-text-light);
 }
 

From 6325f6476f9d8b869be0822fa53b18cfcd3904d8 Mon Sep 17 00:00:00 2001
From: Skaiir <serval.core@gmail.com>
Date: Thu, 12 Sep 2024 12:34:02 +0200
Subject: [PATCH 2/4] fix: move radio and checkbox buttons out of the label dom

Closes #3688
---
 .../form-js-viewer/assets/form-js-base.css     |  5 +++++
 .../render/components/form-fields/Checkbox.js  |  5 +++--
 .../render/components/form-fields/Checklist.js | 18 ++++++++++--------
 .../src/render/components/form-fields/Radio.js | 15 ++++++++-------
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css
index bf496d7a5..8f8528c86 100644
--- a/packages/form-js-viewer/assets/form-js-base.css
+++ b/packages/form-js-viewer/assets/form-js-base.css
@@ -283,10 +283,15 @@
   opacity: 1;
 }
 
+.fjs-container .fjs-inline-label {
+  display: flex;
+}
+
 .fjs-container .fjs-form-field-label {
   display: flex;
   align-items: center;
   white-space: nowrap;
+  overflow: hidden;
   color: var(--color-text-light);
 }
 
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Checkbox.js b/packages/form-js-viewer/src/render/components/form-fields/Checkbox.js
index c418852a5..43f872afb 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Checkbox.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Checkbox.js
@@ -26,7 +26,7 @@ export function Checkbox(props) {
 
   return (
     <div class={classNames(formFieldClasses(type, { errors, disabled, readonly }), { 'fjs-checked': value })}>
-      <Label htmlFor={domId} label={label} required={required}>
+      <div class="fjs-inline-label">
         <input
           checked={value}
           class="fjs-input"
@@ -41,7 +41,8 @@ export function Checkbox(props) {
           aria-invalid={errors.length > 0}
           aria-describedby={[descriptionId, errorMessageId].join(' ')}
         />
-      </Label>
+        <Label htmlFor={domId} label={label} required={required} />
+      </div>
       <Description id={descriptionId} description={description} />
       <Errors id={errorMessageId} errors={errors} />
     </div>
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
index e54f5825a..79b8b4eb7 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
@@ -73,13 +73,7 @@ export function Checklist(props) {
           const isChecked = hasEqualValue(o.value, values);
 
           return (
-            <Label
-              htmlFor={itemDomId}
-              label={o.label}
-              class={classNames({
-                'fjs-checked': isChecked,
-              })}
-              required={false}>
+            <div className="fjs-inline-label" key={index}>
               <input
                 checked={isChecked}
                 class="fjs-input"
@@ -94,7 +88,15 @@ export function Checklist(props) {
                 aria-invalid={errors.length > 0}
                 aria-describedby={[descriptionId, errorMessageId].join(' ')}
               />
-            </Label>
+              <Label
+                htmlFor={itemDomId}
+                label={o.label}
+                class={classNames({
+                  'fjs-checked': isChecked,
+                })}
+                required={false}
+              />
+            </div>
           );
         })}
       <Description id={descriptionId} description={description} />
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Radio.js b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
index c3a828f0c..82246ab3a 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Radio.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
@@ -69,12 +69,7 @@ export function Radio(props) {
           const isChecked = isEqual(option.value, value);
 
           return (
-            <Label
-              htmlFor={itemDomId}
-              key={index}
-              label={option.label}
-              class={classNames({ 'fjs-checked': isChecked })}
-              required={false}>
+            <div className="fjs-inline-label" key={index}>
               <input
                 checked={isChecked}
                 class="fjs-input"
@@ -89,7 +84,13 @@ export function Radio(props) {
                 required={required}
                 aria-invalid={errors.length > 0}
               />
-            </Label>
+              <Label
+                htmlFor={itemDomId}
+                label={option.label}
+                class={classNames({ 'fjs-checked': isChecked })}
+                required={false}
+              />
+            </div>
           );
         })}
       <Description id={descriptionId} description={description} />

From b7ae83f69f4c8bb336502c81663051ac9cb30b23 Mon Sep 17 00:00:00 2001
From: Skaiir <serval.core@gmail.com>
Date: Thu, 12 Sep 2024 13:29:00 +0200
Subject: [PATCH 3/4] chore: cleanup option named o and option keys

Related to #3688
---
 .../src/render/components/form-fields/Checklist.js | 10 +++++-----
 .../src/render/components/form-fields/Radio.js     |  2 +-
 .../src/render/components/form-fields/Taglist.js   |  4 ++--
 .../form-fields/parts/SearchableSelect.js          | 14 ++++++++------
 .../components/form-fields/parts/SimpleSelect.js   | 12 ++++++------
 5 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
index 79b8b4eb7..ca07b5933 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
@@ -68,12 +68,12 @@ export function Checklist(props) {
     <div class={classNames(formFieldClasses(type, { errors, disabled, readonly }))} ref={outerDivRef}>
       <Label label={label} required={required} />
       {loadState == LOAD_STATES.LOADED &&
-        options.map((o, index) => {
+        options.map((option, index) => {
           const itemDomId = `${domId}-${index}`;
-          const isChecked = hasEqualValue(o.value, values);
+          const isChecked = hasEqualValue(option.value, values);
 
           return (
-            <div className="fjs-inline-label" key={index}>
+            <div className="fjs-inline-label" key={option.value}>
               <input
                 checked={isChecked}
                 class="fjs-input"
@@ -81,7 +81,7 @@ export function Checklist(props) {
                 readOnly={readonly}
                 id={itemDomId}
                 type="checkbox"
-                onClick={() => toggleCheckbox(o.value)}
+                onClick={() => toggleCheckbox(option.value)}
                 onBlur={onCheckboxBlur}
                 onFocus={onCheckboxFocus}
                 required={required}
@@ -90,7 +90,7 @@ export function Checklist(props) {
               />
               <Label
                 htmlFor={itemDomId}
-                label={o.label}
+                label={option.label}
                 class={classNames({
                   'fjs-checked': isChecked,
                 })}
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Radio.js b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
index 82246ab3a..e3161151b 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Radio.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
@@ -69,7 +69,7 @@ export function Radio(props) {
           const isChecked = isEqual(option.value, value);
 
           return (
-            <div className="fjs-inline-label" key={index}>
+            <div className="fjs-inline-label" key={option.value}>
               <input
                 checked={isChecked}
                 class="fjs-input"
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Taglist.js b/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
index e35907d64..f88e85e74 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
@@ -225,8 +225,8 @@ export function Taglist(props) {
         {shouldDisplayDropdown && (
           <DropdownList
             values={filteredOptions}
-            getLabel={(o) => o.label}
-            onValueSelected={(o) => selectValue(o.value)}
+            getLabel={(option) => option.label}
+            onValueSelected={(option) => selectValue(option.value)}
             emptyListMessage={hasOptionsLeft ? 'No results' : 'All values selected'}
             listenerElement={inputRef.current}
           />
diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js b/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
index 660304897..450136c6e 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
@@ -48,10 +48,12 @@ export function SearchableSelect(props) {
       return options;
     }
 
-    return options.filter((o) => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()));
+    return options.filter(
+      (option) => option.label && option.value && option.label.toLowerCase().includes(filter.toLowerCase()),
+    );
   }, [filter, loadState, options, isFilterActive]);
 
-  const setValue = useCallback(
+  const pickOption = useCallback(
     (option) => {
       setFilter((option && option.label) || '');
       props.onChange({ value: (option && option.value) || null });
@@ -159,7 +161,7 @@ export function SearchableSelect(props) {
           <span
             class="fjs-select-cross"
             onMouseDown={(e) => {
-              setValue(null);
+              pickOption(null);
               e.preventDefault();
             }}>
             <XMarkIcon />{' '}
@@ -173,9 +175,9 @@ export function SearchableSelect(props) {
         {displayState.displayDropdown && (
           <DropdownList
             values={filteredOptions}
-            getLabel={(o) => o.label}
-            onValueSelected={(o) => {
-              setValue(o);
+            getLabel={(option) => option.label}
+            onValueSelected={(option) => {
+              pickOption(option);
               setIsDropdownExpanded(false);
             }}
             listenerElement={searchbarRef.current}
diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js b/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
index 53c7c5709..292edaced 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
@@ -31,7 +31,7 @@ export function SimpleSelect(props) {
 
   const valueLabel = useMemo(() => value && getLabelCorrelation(value), [value, getLabelCorrelation]);
 
-  const setValue = useCallback(
+  const pickOption = useCallback(
     (option) => {
       props.onChange({ value: (option && option.value) || null });
     },
@@ -68,7 +68,7 @@ export function SimpleSelect(props) {
   );
 
   const initialFocusIndex = useMemo(
-    () => (value && findIndex(options, (o) => o.value === value)) || 0,
+    () => (value && findIndex(options, (option) => option.value === value)) || 0,
     [options, value],
   );
 
@@ -112,7 +112,7 @@ export function SimpleSelect(props) {
           <span
             class="fjs-select-cross"
             onMouseDown={(e) => {
-              setValue(null);
+              pickOption(null);
               e.stopPropagation();
             }}>
             <XMarkIcon />
@@ -124,10 +124,10 @@ export function SimpleSelect(props) {
         {displayState.displayDropdown && (
           <DropdownList
             values={options}
-            getLabel={(o) => o.label}
+            getLabel={(option) => option.label}
             initialFocusIndex={initialFocusIndex}
-            onValueSelected={(o) => {
-              setValue(o);
+            onValueSelected={(option) => {
+              pickOption(option);
               setIsDropdownExpanded(false);
             }}
             listenerElement={selectRef.current}

From 84114557e2b3529b72105e9e60a5a009f9ce6978 Mon Sep 17 00:00:00 2001
From: Skaiir <serval.core@gmail.com>
Date: Thu, 12 Sep 2024 17:11:51 +0200
Subject: [PATCH 4/4] fix: adjust new label structure carbonization

Related to #3688
---
 .../form-js-carbon-styles/src/carbon-styles.js    |  9 ++++-----
 .../form-js-carbon-styles/src/carbon-styles.scss  | 11 +++++------
 packages/form-js-viewer/assets/form-js-base.css   |  1 +
 .../render/components/form-fields/Checklist.js    | 15 ++++++---------
 .../src/render/components/form-fields/Radio.js    |  6 +++++-
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/form-js-carbon-styles/src/carbon-styles.js b/packages/form-js-carbon-styles/src/carbon-styles.js
index ef4a67ac1..8c5fbeeb1 100644
--- a/packages/form-js-carbon-styles/src/carbon-styles.js
+++ b/packages/form-js-carbon-styles/src/carbon-styles.js
@@ -301,8 +301,7 @@ const READONLY_STYLES = css`
             }
           }
 
-          &.fjs-checked .fjs-input[type='checkbox'],
-          .fjs-form-field-label.fjs-checked .fjs-input[type='checkbox'] {
+          &.fjs-checked .fjs-input[type='checkbox'] {
             &:before {
               border: 1px solid var(--cds-icon-disabled);
               background: transparent;
@@ -418,8 +417,8 @@ const LABEL_DESCRIPTION_ERROR_STYLES = css`
       margin-bottom: var(--cds-spacing-03);
     }
 
-    .fjs-form-field.fjs-form-field-radio .fjs-form-field-label:not(:first-of-type),
-    .fjs-form-field.fjs-form-field-checklist .fjs-form-field-label:not(:first-of-type) {
+    .fjs-form-field.fjs-form-field-radio .fjs-inline-label,
+    .fjs-form-field.fjs-form-field-checklist .fjs-inline-label {
       margin: 0;
       margin-bottom: 0.1875rem;
     }
@@ -515,7 +514,7 @@ const CHECKBOX_STYLES = css`
     }
 
     .fjs-form-field.fjs-checked .fjs-input[type='checkbox'],
-    .fjs-form-field .fjs-form-field-label.fjs-checked .fjs-input[type='checkbox'] {
+    .fjs-form-field .fjs-inline-label.fjs-checked .fjs-input[type='checkbox'] {
       &:before {
         border: none;
         border-width: 1px;
diff --git a/packages/form-js-carbon-styles/src/carbon-styles.scss b/packages/form-js-carbon-styles/src/carbon-styles.scss
index 4568b1293..3e43f4f8b 100644
--- a/packages/form-js-carbon-styles/src/carbon-styles.scss
+++ b/packages/form-js-carbon-styles/src/carbon-styles.scss
@@ -408,8 +408,7 @@
         }
       }
 
-      &.fjs-checked .fjs-input[type='checkbox'],
-      .fjs-form-field-label.fjs-checked .fjs-input[type='checkbox'] {
+      &.fjs-checked .fjs-input[type='checkbox'] {
         &:before {
           border: 1px solid var(--cds-icon-disabled);
           background: transparent;
@@ -535,13 +534,13 @@
     margin-bottom: var(--cds-spacing-03);
   }
 
-  .fjs-form-field.fjs-form-field-radio .fjs-form-field-label:not(:first-of-type),
-  .fjs-form-field.fjs-form-field-checklist .fjs-form-field-label:not(:first-of-type) {
+  .fjs-form-field.fjs-form-field-radio .fjs-inline-label,
+  .fjs-form-field.fjs-form-field-checklist .fjs-inline-label {
     margin: 0;
     margin-bottom: 0.1875rem;
   }
 
-  .fjs-form-field.fjs-form-field-radio .fjs-form-field-label:not(:first-of-type) {
+  .fjs-form-field.fjs-form-field-radio .fjs-inline-label {
     min-height: #{rem(27)};
   }
 
@@ -632,7 +631,7 @@
   }
 
   .fjs-form-field.fjs-checked .fjs-input[type='checkbox'],
-  .fjs-form-field .fjs-form-field-label.fjs-checked .fjs-input[type='checkbox'] {
+  .fjs-form-field .fjs-inline-label.fjs-checked .fjs-input[type='checkbox'] {
     &:before {
       border: none;
       border-width: 1px;
diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css
index 8f8528c86..9ca6b91ae 100644
--- a/packages/form-js-viewer/assets/form-js-base.css
+++ b/packages/form-js-viewer/assets/form-js-base.css
@@ -284,6 +284,7 @@
 }
 
 .fjs-container .fjs-inline-label {
+  align-items: center;
   display: flex;
 }
 
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
index ca07b5933..8db1ae068 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
@@ -73,7 +73,11 @@ export function Checklist(props) {
           const isChecked = hasEqualValue(option.value, values);
 
           return (
-            <div className="fjs-inline-label" key={option.value}>
+            <div
+              className={classNames('fjs-inline-label', {
+                'fjs-checked': isChecked,
+              })}
+              key={option.value}>
               <input
                 checked={isChecked}
                 class="fjs-input"
@@ -88,14 +92,7 @@ export function Checklist(props) {
                 aria-invalid={errors.length > 0}
                 aria-describedby={[descriptionId, errorMessageId].join(' ')}
               />
-              <Label
-                htmlFor={itemDomId}
-                label={option.label}
-                class={classNames({
-                  'fjs-checked': isChecked,
-                })}
-                required={false}
-              />
+              <Label htmlFor={itemDomId} label={option.label} required={false} />
             </div>
           );
         })}
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Radio.js b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
index e3161151b..5d9552088 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Radio.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
@@ -69,7 +69,11 @@ export function Radio(props) {
           const isChecked = isEqual(option.value, value);
 
           return (
-            <div className="fjs-inline-label" key={option.value}>
+            <div
+              className={classNames('fjs-inline-label', {
+                'fjs-checked': isChecked,
+              })}
+              key={option.value}>
               <input
                 checked={isChecked}
                 class="fjs-input"