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 <[email protected]>
Co-authored-by: Martin Jagodic <[email protected]>

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>

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>
   );