♻️ [#571] Use class/CSS approach for required field asterisk

open-formulieren · Oct 23, 2023 · f1175f3 · f1175f3
1 parent 333d0af
commit f1175f3
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;