AAE-34902 Updating styles for input controls to maintain the ui consistency with studio hxp (#10900)

* AAE-34902 updating styles for input controls to maintain the ui consistency with studio-hxp

* AAE-34902 changing class prefix-names from hxp to adf

* AAE-34902 float level conditional on placeholder

* AAE-34902 fixing the placeholder in text-widgets

* AAE-34902 fixing the left and right side margins on workspace forms

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -8,7 +8,6 @@
     .adf-property-label {
         color: var(--adf-metadata-property-panel-text-color);
         display: flex;
-        padding: 3px 0;
         line-height: 20px;
 
         &.adf-property-value-editable {

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -219,15 +219,6 @@
         text-align: center;
     }
 
-    &-label {
-        width: 32px;
-        height: 16px;
-        font-size: var(--theme-caption-font-size);
-        line-height: var(--theme-headline-line-height);
-        text-align: left;
-        white-space: nowrap;
-    }
-
     &-form-mat-card-actions {
         padding-bottom: 25px;
         padding-right: 25px;

lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.html

@@ -1,6 +1,6 @@
 <div class="adf-inplace-input-container"
      [ngClass]="{'adf-inplace-input-container-error': control.invalid && control.touched}">
-    <mat-form-field class="adf-inplace-input-mat-form-field">
+    <mat-form-field class="adf-inplace-input-mat-form-field adf-form-field-input" [appearance]="'fill'">
         <input matInput
                [formControl]="control"
                class="adf-inplace-input"

lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss

@@ -24,7 +24,7 @@ $adf-inplace-input-padding: 7px;
     }
 
     .adf-inplace-input-mat-form-field {
-        width: 100%;
+        width: 98%;
     }
 
     .adf-inplace-input {

lib/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -10,7 +10,7 @@
         >
     </div>
     <div>
-        <mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : 'auto'">
+        <mat-form-field class="adf-amount-widget__input adf-form-field-input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : 'auto'">
             <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
                 >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></mat-label
             >

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -8,9 +8,9 @@
         </label>
     </div>
     <div>
-        <mat-form-field class="adf-date-time-widget"
+        <mat-form-field class="adf-date-time-widget adf-form-field-input"
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
-                        [hideRequiredMarker]="true">
+                        [hideRequiredMarker]="true" [floatLabel]="field.placeholder ? 'always' : 'auto'">
             <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </mat-label>

lib/core/src/lib/form/components/widgets/date/date.widget.html

@@ -1,5 +1,5 @@
 <div class="{{ field.className }}" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
-    <mat-form-field [floatLabel]="'always'" class="adf-date-widget">
+    <mat-form-field [floatLabel]="'always'" class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'">
         <mat-label class="adf-label"
                    [id]="field.id + '-label'"
                    [attr.for]="field.id">

lib/core/src/lib/form/components/widgets/decimal/decimal.component.html

@@ -9,7 +9,7 @@
     </div>
 
     <div>
-        <mat-form-field [hideRequiredMarker]="true">
+        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'">
             <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </mat-label>

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html

@@ -1,7 +1,7 @@
 <div class="adf-multiline-text-widget {{ field.className }}"
      [class.adf-invalid]="!field.isValid && isTouched()"
      [class.adf-readonly]="field.readOnly">
-    <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true">
+    <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'">
         <mat-label class="adf-label" [attr.for]="field.id">
             {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </mat-label>

lib/core/src/lib/form/components/widgets/number/number.widget.html

@@ -9,7 +9,7 @@
         </label>
     </div>
     <div>
-        <mat-form-field [hideRequiredMarker]="true">
+        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'">
             <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </mat-label>

lib/core/src/lib/form/components/widgets/text/text.widget.html

@@ -8,7 +8,7 @@
         </label>
     </div>
     <div>
-        <mat-form-field [hideRequiredMarker]="true">
+        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : 'auto'">
             <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </mat-label>