Legacy: For consitency, switch to tui style for label and description in legacy fields

Author: nicolas-jaussaud

assets/build/beaver-builder/index.min.css

@@ -11,7 +11,7 @@ const Description = ({
   const content = props.content ?? children
   return(
     <Wrapper>
-      <div className="tf-description" { ...descriptionProps }>
+      <div className="tf-description tui-field__helper" { ...descriptionProps }>
         { content }
       </div>
     </Wrapper>

assets/build/default/index.min.css

@@ -11,8 +11,12 @@ const Label = ({
   const content = props.content ?? children
   return(
     <Wrapper>
-      <label className='tf-label' { ...labelProps } htmlFor={ parent?.name ?? '' }>
-        { content }
+      <label
+        className='tf-label tui-field__label'
+        { ...labelProps }
+        htmlFor={ parent?.name ?? '' }
+      >
+        {content}
       </label>
     </Wrapper>
   )

assets/build/elementor/index.min.css

@@ -1,7 +1,10 @@
 .tf-label {
-  @include label;
+  display: flex;
+  margin-bottom: $label-spacer;
 }
 
 .tf-description {
-  @include description;
+  display: flex;
+  margin-top: $description-margin-top;
+  margin-bottom: $description-margin-bottom;
 }

assets/build/example.min.js

@@ -96,7 +96,7 @@ const RowTitle = props => (
 
 const RowLabel = props => (
   <div className={ 'tf-tab-row-title ' + (props.className ?? '') }>
-    <span className='tf-label'>
+    <span className='tf-label tui-field__label'>
       { props.children }
     </span>
   </div>