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] 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"