From 27502d5d67eb5bc9f9d651a40c6967add7fc3b17 Mon Sep 17 00:00:00 2001
From: Soumyajit Chakraborty <51930458+Isoumyajit@users.noreply.github.com>
Date: Tue, 17 Jun 2025 15:40:20 +0530
Subject: [PATCH] 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
---
 .../components/card-view/card-view.component.scss        | 1 -
 .../src/lib/form/components/form-renderer.component.scss | 9 ---------
 .../inplace-form-input/inplace-form-input.component.html | 2 +-
 .../inplace-form-input/inplace-form-input.component.scss | 2 +-
 .../form/components/widgets/amount/amount.widget.html    | 2 +-
 .../components/widgets/date-time/date-time.widget.html   | 4 ++--
 .../lib/form/components/widgets/date/date.widget.html    | 2 +-
 .../components/widgets/decimal/decimal.component.html    | 2 +-
 .../widgets/multiline-text/multiline-text.widget.html    | 2 +-
 .../form/components/widgets/number/number.widget.html    | 2 +-
 .../lib/form/components/widgets/text/text.widget.html    | 2 +-
 .../src/lib/form/components/form-cloud.component.scss    | 7 +++++++
 12 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
index 757a2da819..35eeac6b6b 100644
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
+++ b/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 {
diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss
index 88b18fc8f2..17feca2660 100644
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/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;
diff --git a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.html b/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.html
index 3db9455a3f..f7bb994880 100644
--- a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.html
+++ b/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"
diff --git a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss b/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
index be40e0a14d..8635a9170b 100644
--- a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
+++ b/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 {
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
index 5fa889815c..2bac168891 100644
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
+++ b/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
             >
diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
index edb1b8c906..4a65cf937a 100644
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+++ b/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>
diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.html b/lib/core/src/lib/form/components/widgets/date/date.widget.html
index 05c4365481..730ef544be 100644
--- a/lib/core/src/lib/form/components/widgets/date/date.widget.html
+++ b/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">
diff --git a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
index 895fa38998..236c437b1d 100644
--- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
+++ b/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>
diff --git a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
index be5812aa07..1e746575b6 100644
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
+++ b/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>
diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.html b/lib/core/src/lib/form/components/widgets/number/number.widget.html
index d55ada8fd3..1fe70f25fa 100644
--- a/lib/core/src/lib/form/components/widgets/number/number.widget.html
+++ b/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>
diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.html b/lib/core/src/lib/form/components/widgets/text/text.widget.html
index a8f27b1b55..ca458ac886 100644
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.html
+++ b/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>
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
index 60355fc9de..e2c3e7f522 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
@@ -94,6 +94,13 @@
                 }
             }
         }
+
+        &-container {
+            .adf-form-container-card-content {
+                padding-left: 1%;
+                padding-right: 1%;
+            }
+        }
     }
 
     &-sidebars {