Improvement/aae 30909 enhance user experience with tab navigation within the form (#10844)

* AAE-30909 tab-header fixed at the top

* AAE-30909 fixing widh and scrolling issues in workspace and studio-hxp

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

@@ -3,8 +3,10 @@
     <div *ngIf="formDefinition.hasTabs()">
         <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
             <mat-tab-group>
-                <mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
-                    <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
+                <mat-tab   *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
+                    <div class="adf-form-tab-content">
+                        <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
+                    </div>
                 </mat-tab>
             </mat-tab-group>
         </div>

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

@@ -13,6 +13,40 @@
     height: 100%;
 }
 
+.alfresco-tabs-widget {
+    width: 100%;
+    position: absolute;
+
+    .adf-form-tab-group {
+        width: 100%;
+        z-index: 9999;
+    }
+
+    #{ms.$mat-tab-body} {
+        margin-bottom: 8em;
+    }
+
+    #{ms.$mat-tab-header} {
+        z-index: 10;
+        margin: 0;
+        background-color: white;
+        position: sticky;
+        /* stylelint-disable-next-line value-no-vendor-prefix */
+        position: -webkit-sticky; /* macOS/iOS Safari */
+        /* stylelint-disable-next-line declaration-no-important */
+        margin-left: 0 !important;
+        top: 0;
+    }
+
+    #{ms.$mat-tab-body-wrapper} {
+        padding-top: 16px;
+    }
+}
+
+.mat-mdc-card-content:first-child {
+    padding-top: 0;
+}
+
 .adf-container-widget {
     .adf-grid-list {
         display: grid;
@@ -116,12 +150,18 @@
             overflow: hidden;
         }
 
+        & #{ms.$mat-tab-header} {
+            position: fixed;
+            z-index: 1000;
+        }
+
         & #{ms.$mat-card-header-text} {
             margin: 0;
         }
 
         & #{ms.$mat-tab-body-content} {
             overflow: hidden;
+            padding-top: 0;
         }
 
         & #{mat-tab-label-text} {

lib/core/src/lib/styles/_mat-selectors.scss

@@ -6,8 +6,11 @@ $mat-tab-label-active: '.mdc-tab--active';
 $mat-tab-label-container: '.mat-mdc-tab-label-container';
 $mat-tab-label-text: '.mdc-tab__text-label';
 $mat-tab-body: '.mat-mdc-tab-body';
+$mat-tab-header: '.mat-mdc-tab-header';
 $mat-tab-body-content: '.mat-mdc-tab-body-content';
 $mat-tab-ink-bar: '.mdc-tab-indicator';
+$mat-tab-body-wrapper: '.mat-mdc-tab-body-wrapper';
+$mat-tab-body-content: '.mat-mdc-card-content';
 $mat-chip: '.mat-mdc-chip';
 $mat-chip-list: '.mat-mdc-chip-list';
 $mat-checkbox: '.mat-mdc-checkbox';