From f1175f325bc487430bc49a5c7ad74021f4f52179 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 23 Oct 2023 08:55:18 +0200
Subject: [PATCH] :recycle: [#571] Use class/CSS approach for required field
 asterisk

---
 src/components/forms/Label.js              |  2 +-
 src/formio/templates/checkbox.ejs          |  2 +-
 src/formio/templates/field.ejs             |  4 ++--
 src/formio/templates/label.ejs             |  2 +-
 src/scss/components/_formio-component.scss | 14 ++++++--------
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/forms/Label.js b/src/components/forms/Label.js
index 960180535..d274d0414 100644
--- a/src/components/forms/Label.js
+++ b/src/components/forms/Label.js
@@ -13,7 +13,7 @@ export const LabelContent = ({id, disabled = false, isRequired = false, type, ch
       htmlFor={id}
       disabled={disabled}
       className={classNames({
-        'utrecht-form-label--openforms-required': isRequired,
+        'utrecht-form-label--openforms-required': isRequired && requiredFieldsWithAsterisk,
         [`utrecht-form-label--${type}`]: type,
       })}
     >
diff --git a/src/formio/templates/checkbox.ejs b/src/formio/templates/checkbox.ejs
index 22121b09b..e4629e4fb 100644
--- a/src/formio/templates/checkbox.ejs
+++ b/src/formio/templates/checkbox.ejs
@@ -12,7 +12,7 @@
 <p class="utrecht-form-field__label utrecht-form-field__label--checkbox">
   <label
     for="{{ctx.instance.id}}-{{ctx.component.key}}"
-    class="utrecht-form-label utrecht-form-label--checkbox {% if (ctx.disabled) { %}utrecht-form-label--disabled{% } %} {{ctx.input.labelClass}} {% if (ctx.component.validate.required) { %}utrecht-form-label--openforms-required{% } %}"
+    class="utrecht-form-label utrecht-form-label--checkbox {% if (ctx.disabled) { %}utrecht-form-label--disabled{% } %} {{ctx.input.labelClass}} {% if (ctx.component.validate.required && ctx.requiredFieldsWithAsterisk) { %}utrecht-form-label--openforms-required{% } %}"
   >
     {{ctx.input.label}}{% if (!ctx.component.validate.required && !ctx.requiredFieldsWithAsterisk) { %}&nbsp;{{ ctx.t('(optional)') }} {% } %}
     {% if (ctx.component.tooltip) { %}
diff --git a/src/formio/templates/field.ejs b/src/formio/templates/field.ejs
index e2d21aa4c..1abbc5ec7 100644
--- a/src/formio/templates/field.ejs
+++ b/src/formio/templates/field.ejs
@@ -8,7 +8,7 @@
     >
 
       <legend class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--html-legend utrecht-form-field__label">
-        <span class="utrecht-form-label{% if (ctx.component.validate.required){%} utrecht-form-label--openforms-required{%}%}">
+        <span class="utrecht-form-label{% if (ctx.component.validate.required && ctx.requiredFieldsWithAsterisk){%} utrecht-form-label--openforms-required{%}%}">
           {{ ctx.t(ctx.component.label, { _userInput: true }) }}
           {% if (!ctx.component.validate.required && !ctx.requiredFieldsWithAsterisk) { %}
             {{ ctx.t('(optional)') }}
@@ -51,7 +51,7 @@
       {{ ctx.labelMarkup }}
     {% } %}
 
-    {% if (ctx.label.hidden && ctx.label.className && ctx.component.validate.required) { %}
+    {% if (ctx.label.hidden && ctx.label.className && ctx.component.validate.required && ctx.requiredFieldsWithAsterisk) { %}
       <label class="utrecht-form-label utrecht-form-label--openforms-required {{ctx.label.className}}"></label>
     {% } %}
 
diff --git a/src/formio/templates/label.ejs b/src/formio/templates/label.ejs
index 08c151f32..b96dc4184 100644
--- a/src/formio/templates/label.ejs
+++ b/src/formio/templates/label.ejs
@@ -1,6 +1,6 @@
 <p class="utrecht-paragraph utrecht-form-field__label">
   <label
-    class="utrecht-form-label {{ctx.label.className}} {% if (ctx.component.validate.required) { %}utrecht-form-label--openforms-required{% } %}"
+    class="utrecht-form-label {{ctx.label.className}} {% if (ctx.component.validate.required && ctx.requiredFieldsWithAsterisk) { %}utrecht-form-label--openforms-required{% } %}"
     for="{{ctx.instance.id}}-{{ctx.component.key}}"
   >
     {{ ctx.t(ctx.component.label, { _userInput: true }) }}
diff --git a/src/scss/components/_formio-component.scss b/src/scss/components/_formio-component.scss
index 0eb7c16ff..3a0732bfb 100644
--- a/src/scss/components/_formio-component.scss
+++ b/src/scss/components/_formio-component.scss
@@ -25,6 +25,12 @@
   }
 }
 
+// we handle the required fields through `.utrecht-form-label--openforms-required`, so
+// disable default formio styles
+.field-required:after {
+  all: revert;
+}
+
 .#{prefix(form-control)} {
   .#{prefix(body)} {
     display: block;
@@ -35,14 +41,6 @@
     }
   }
 
-  &--no-asterisks {
-    .required-field:after,
-    .utrecht-form-label.utrecht-form-label--openforms-required:after {
-      // Override the asterisk
-      content: '' !important;
-    }
-  }
-
   .group {
     display: flex;
     align-items: center;