[ACS-7999] Fix inputs for edit and create folder (#9713)

* ACS-7999 Fix inputs for edit and create folder * ACS-7999 Fix jumping dialog when focus field
Alfresco · Jul 9, 2024 · d797cf3 · d797cf3
1 parent 5b3bc58
commit d797cf3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.html b/lib/content-services/src/lib/dialogs/folder.dialog.html
@@ -4,7 +4,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
 
 <mat-dialog-content class="adf-folder-dialog-content">
     <form [formGroup]="form" (submit)="submit()">
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-name-input"
@@ -26,7 +26,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
             </mat-hint>
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-title-input"
@@ -36,7 +36,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
             />
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}</mat-label>
             <textarea
                 id="adf-folder-description-input"

diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.scss b/lib/content-services/src/lib/dialogs/folder.dialog.scss
@@ -1,7 +1,30 @@
+@import 'styles/mat-selectors';
+
 .adf-folder-dialog {
     .adf-folder-dialog-content {
         padding: 0;
         overflow: unset;
+
+        #{$mat-form-field-infix} {
+            padding-bottom: 3.5px;
+        }
+
+        #{$mat-form-field-hide-placeholder} {
+            #{$mat-floating-label} {
+                padding-top: 11px;
+            }
+        }
+
+        #{$mat-form-field-hint-wrapper} {
+            padding-left: 0;
+            margin-left: -2px;
+            color: var(--adf-theme-foreground-secondary-text-color);
+            font-size: 10.5px;
+        }
+    }
+
+    .adf-folder-dialog-title {
+        display: inline-flex;
     }
 }
 

diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -96,6 +96,8 @@ $mat-slide-toggle: '.mat-mdc-slide-toggle';
 $mat-list-item-unscoped-content: '.mat-mdc-list-item-unscoped-content';
 $mat-text-field--no-label: '.mdc-text-field--no-label';
 $mat-form-field-infix: '.mat-mdc-form-field-infix';
+$mat-form-field-hide-placeholder: '.mat-form-field-hide-placeholder';
+$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
 $mat-checkbox-background: '.mdc-checkbox__background';
 $mat-dialog-content: '.mdc-dialog__content';
 $mat-floating-label: '.mdc-floating-label';