From c5c3df8e9c263d095488af8137e21f44db8fb3ca Mon Sep 17 00:00:00 2001
From: Leonardo Matos <leomp120894@gmail.com>
Date: Fri, 29 Mar 2024 08:31:48 -0300
Subject: [PATCH] Add <span> tag to (optional) suffix for customization (#7103)

* Add <span> tag to (optional) suffix for customization

With the <span> (or any) tag we can add CSS like:

```css
body {
  [class*=FieldLabel-fieldLabel] span {
    display: none;
  }
}
```

to hide or customize the _(optional)_ suffix.

It'll specially useful when majority of the fields are optional, we can also use CSS :has to select required fields and add a _*_ for example.

* Update EditorControl.js

* chore: format

* chore: preventing empty space on field label

* Update EditorControl.js

* test: remove extra space from expected result in e2e test

---------

Co-authored-by: Anze Demsar <anze.demsar@p-m.si>
Co-authored-by: Martin Jagodic <jagodicmartin1@gmail.com>
---
 cypress/e2e/markdown_widget_code_block_spec.js           | 2 +-
 .../components/Editor/EditorControlPane/EditorControl.js | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/markdown_widget_code_block_spec.js b/cypress/e2e/markdown_widget_code_block_spec.js
index cc9f0dc0..1b835f67 100644
--- a/cypress/e2e/markdown_widget_code_block_spec.js
+++ b/cypress/e2e/markdown_widget_code_block_spec.js
@@ -77,7 +77,7 @@ function codeBlock(content) {
     <div>
       <div></div>
       <div>
-        <div><label>Code Block </label>
+        <div><label>Code Block</label>
           <div><button><span><svg>
                   <path></path>
                 </svg></span></button>
diff --git a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
index 71600750..d1191513 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@@ -102,7 +102,14 @@ function LabelComponent({ field, isActive, hasErrors, uniqueFieldId, isFieldOpti
   const label = `${field.get('label', field.get('name'))}`;
   const labelComponent = (
     <FieldLabel isActive={isActive} hasErrors={hasErrors} htmlFor={uniqueFieldId}>
-      {label} {`${isFieldOptional ? ` (${t('editor.editorControl.field.optional')})` : ''}`}
+      {isFieldOptional ? (
+        <>
+          {label}
+          <span>{` (${t('editor.editorControl.field.optional')})`}</span>
+        </>
+      ) : (
+        label
+      )}
     </FieldLabel>
   );