From 3b6e7e87a2216c1306e7672f738c70893c2296cc Mon Sep 17 00:00:00 2001
From: jacekpluta <73617938+jacekpluta@users.noreply.github.com>
Date: Wed, 17 Apr 2024 19:45:12 +0200
Subject: [PATCH] [ACS-7331] - View details sidebar (#9455)

---
 .../categories-management.component.scss      |  6 +-
 .../content-metadata.component.scss           | 25 +++++++-
 .../card-view-dateitem.component.scss         | 11 +++-
 .../card-view-selectitem.component.scss       | 22 ++++++-
 .../card-view-textitem.component.html         | 10 ++--
 .../card-view-textitem.component.scss         | 13 +++--
 .../card-view/card-view.component.scss        | 18 ++++--
 .../src/lib/comments/comments.component.html  |  4 +-
 .../src/lib/comments/comments.component.scss  | 38 ++++++++-----
 .../info-drawer-layout.component.scss         |  6 ++
 .../info-drawer/info-drawer.component.scss    | 57 ++++++++++---------
 lib/core/src/lib/styles/_mat-selectors.scss   |  5 +-
 12 files changed, 147 insertions(+), 68 deletions(-)

diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
index 32288cdf3a..8d44a50b99 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
@@ -1,6 +1,4 @@
 .adf-categories-management {
-    padding-top: 12px;
-
     .adf-category-name-field {
         justify-content: space-between;
         width: 100%;
@@ -11,7 +9,9 @@
         align-items: center;
 
         input {
-            padding: 7px 8px;
+            background-color: transparent;
+            padding: 7px 8px 8px 8px;
+            width: 100%;
         }
     }
 
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
index 9c26d77dca..f71648c933 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 $panel-properties-height: 56px !default;
 
 .adf {
@@ -10,7 +12,12 @@ $panel-properties-height: 56px !default;
 
             .adf-property-list .adf-property .adf-property-field {
                 .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
-                    margin-top: 20px;
+                    margin-top: 10px;
+                    height: 32px;
+
+                    &:is(textarea) {
+                        padding-top: 6px;
+                    }
                 }
 
                 label {
@@ -30,6 +37,19 @@ $panel-properties-height: 56px !default;
             }
         }
 
+        #{$mat-expansion-panel-body} {
+            padding-top: 16px;
+
+            input {
+                border-color: transparent;
+                width: 100%;
+
+                &:focus-visible {
+                    outline: none;
+                }
+            }
+        }
+
         .adf-edit-icon-buttons {
             color: var(--adf-theme-foreground-text-color-054);
         }
@@ -41,7 +61,6 @@ $panel-properties-height: 56px !default;
             border-radius: 16px;
             width: fit-content;
             background: var(--adf-metadata-buttons-background-color);
-            margin-top: 12px;
             padding: 6px 12px;
             justify-content: center;
             margin-left: 8px;
@@ -51,7 +70,7 @@ $panel-properties-height: 56px !default;
         .adf-metadata-no-item-added {
             word-break: break-all;
             font-size: 15px;
-            padding: 16px 0 0 12px;
+            padding: 0 0 0 12px;
         }
 
         &-tags {
diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
index de7b0680c0..94b09fc6ce 100644
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -2,18 +2,23 @@
 
 .adf-card-view-dateitem {
     .adf-property-value {
-        padding: 6px 0;
+        padding-top: 6px;
+        padding-bottom: 6px;
         line-height: 20px;
-        border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         color: var(--adf-metadata-property-panel-title-color);
+        border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
+        margin-top: 10px;
 
         &.adf-property-value-editable {
+            display: flex;
+            align-items: center;
             border-radius: 6px;
             border-bottom: inherit;
+            margin-bottom: 18px;
         }
 
         &.adf-property-readonly-value {
-            padding-left: 12px;
+            padding: 0 0 0 12px;
         }
     }
 
diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
index 37e524040e..0c53a6f047 100644
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
@@ -14,10 +14,20 @@
         z-index: 1;
     }
 
-    .adf-property-value-editable {
+    .adf-property-value-editable.adf-property-value-editable {
+        padding-left: 0;
+
+        #{$mat-text-field--no-label} #{$mat-form-field-infix} {
+            padding: 0;
+        }
+
+        #{$mat-form-field-wrapper} {
+            background-color: initial;
+        }
+
         /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
         mat-select {
-            padding: 6px 0 6px 12px;
+            padding: 6px 0 8px 12px;
             margin-top: 0;
             border-radius: 6px;
 
@@ -27,12 +37,20 @@
         }
     }
 
+    #{$mat-form-field-subscript-wrapper} {
+        display: none;
+    }
+
     .adf-property-read-only {
         padding: 6px 0;
         border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         color: var(--adf-metadata-property-panel-title-color);
     }
 
+    .mdc-line-ripple {
+        display: none;
+    }
+
     .adf-property-readonly-value {
         color: var(--adf-metadata-property-panel-label-color);
     }
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
index 38334f0974..574a5a6943 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -1,6 +1,6 @@
 <div [ngSwitch]="templateType">
     <div *ngSwitchDefault>
-        <mat-form-field class="adf-property-field adf-card-textitem-field"
+        <mat-form-field subscriptSizing="dynamic" class="adf-property-field adf-card-textitem-field"
             [ngClass]="{'adf-property-read-only': !isEditable }"
             [floatLabel]="'always'">
             <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
@@ -33,9 +33,9 @@
                 *ngIf="property.multiline"
                 title="{{property.label | translate }}"
                 [cdkTextareaAutosize]="true"
-                [cdkAutosizeMaxRows]="1"
-                [cdkAutosizeMaxRows]="5"
                 class="adf-property-value"
+                cdkAutosizeMinRows="1"
+                cdkAutosizeMaxRows="5"
                 [ngClass]="{
                     'adf-property-value-editable': editable,
                     'adf-property-readonly-value': isReadonlyProperty
@@ -66,7 +66,7 @@
             </mat-chip-row>
         </mat-chip-grid>
 
-        <mat-form-field [hidden]="!isEditable"
+        <mat-form-field subscriptSizing="dynamic" [hidden]="!isEditable"
             class="adf-property-field adf-textitem-chip-list-input"
             [ngClass]="{ 'adf-property-read-only': !isEditable }">
             <input matInput
@@ -91,7 +91,7 @@
         [ngClass]="{ 'adf-property-read-only': !isEditable }"
         [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
         (click)="clicked()">
-        <mat-form-field class="adf-property-field adf-card-textitem-field">
+        <mat-form-field subscriptSizing="dynamic" class="adf-property-field adf-card-textitem-field">
             <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
                 {{ property.label | translate }}
             </mat-label>
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
index e61f87223d..de645e8546 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -1,10 +1,6 @@
 @import 'styles/mat-selectors';
 
 .adf-card-view-textitem {
-    .adf-property-field {
-        padding-top: 15px;
-    }
-
     .adf-textitem-error {
         font-size: var(--theme-caption-font-size);
         padding-top: 6px;
@@ -59,7 +55,7 @@
         color: var(--adf-theme-foreground-text-color-054);
     }
 
-    .adf-property-read-only {
+    .adf-property-read-only:not(:has(.adf-property-readonly-value)) {
         border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
     }
 
@@ -70,4 +66,11 @@
     .adf-property-value-editable {
         color: var(--adf-metadata-property-panel-title-color);
     }
+
+    #{$mat-form-field-underline} {
+        &::before,
+        &::after {
+            display: none;
+        }
+    }
 }
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 790648b969..f5c463f67b 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
@@ -22,10 +22,16 @@
     }
 
     .adf-property-container {
-        margin-bottom: 10px;
+        margin-bottom: 12px;
     }
 
     .adf-property {
+        .adf-card-view-textitem {
+            .adf-property-field {
+                padding-top: 0;
+            }
+        }
+
         .adf-property-field {
             width: 100%;
 
@@ -49,7 +55,6 @@
 
             #{$mat-form--text-field-infix} {
                 border-top-width: 0;
-                padding: 0;
             }
 
             #{$mat-form-field-flex} {
@@ -57,7 +62,10 @@
             }
 
             #{$mat-form-field-wrapper} {
+                background-color: inherit;
                 padding-bottom: 0;
+                padding-left: 0;
+                padding-right: 0;
             }
 
             #{$mat-form-field-label} {
@@ -75,16 +83,18 @@
     }
 
     .adf-property-value {
-        color: var(--adf-metadata-property-panel-text-color);
+        color: var(--adf-metadata-property-panel-title-color);
 
         &.adf-property-value-editable {
             color: var(--adf-metadata-property-panel-title-color);
             background-color: var(--adf-metadata-buttons-background-color);
             border-radius: 6px;
+            height: 32px;
+            padding-left: 10px;
 
             #{$mat-input-element} {
                 color: var(--adf-metadata-action-button-clear-color);
-                padding: 6px 0 6px 12px;
+                padding: 5px 0 6px 12px;
                 margin: 5px 0 0;
             }
         }
diff --git a/lib/core/src/lib/comments/comments.component.html b/lib/core/src/lib/comments/comments.component.html
index 45664daa7c..e058a3429d 100644
--- a/lib/core/src/lib/comments/comments.component.html
+++ b/lib/core/src/lib/comments/comments.component.html
@@ -3,12 +3,12 @@
         {{'COMMENTS.HEADER' | translate: { count: comments?.length } }}
     </div>
     <div *ngIf="!readOnly" class="adf-comments-input-container adf-comments-divider">
-            <mat-form-field>
+            <mat-form-field class="adf-comments-form-field" subscriptSizing="dynamic">
+                <mat-label>{{'COMMENTS.ADD' | translate}}</mat-label>
                 <textarea
                     matInput
                     id="comment-input"
                     [attr.aria-label]="'COMMENTS.ADD' | translate"
-                    placeholder="{{'COMMENTS.ADD' | translate}}"
                     [(ngModel)]="message"
                     (keydown.escape)="clearMessage($event)"
                 >
diff --git a/lib/core/src/lib/comments/comments.component.scss b/lib/core/src/lib/comments/comments.component.scss
index 630112ef7b..e67165ab68 100644
--- a/lib/core/src/lib/comments/comments.component.scss
+++ b/lib/core/src/lib/comments/comments.component.scss
@@ -5,6 +5,24 @@ adf-comments {
         height: 100%;
         width: 100%;
         overflow: auto;
+
+        .adf-comments-input-container {
+            width: 100%;
+            padding-bottom: 8px;
+
+            textarea {
+                resize: vertical;
+            }
+
+            #{$mat-form-field} {
+                padding-bottom: 12px;
+                width: 100%;
+            }
+
+            #{$mat-form-field-infix} {
+                padding-bottom: 0;
+            }
+        }
     }
 
     .adf-comments-divider {
@@ -15,24 +33,16 @@ adf-comments {
         padding: 10px 0;
         font-size: var(--theme-body-1-font-size);
         font-weight: 600;
-        margin: 0;
-    }
-
-    .adf-comments-input-container {
-        width: 100%;
-        padding: 8px 0;
-
-        textarea {
-            resize: vertical;
-        }
-
-        #{$mat-form-field} {
-            width: 100%;
-        }
     }
 
     .adf-comments-input-actions {
+        padding-top: 4px;
         display: flex;
         justify-content: flex-end;
     }
+
+    #{$mat-list-item-unscoped-content} {
+        display: flex;
+        padding: 0 16px;
+    }
 }
diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
index 3217e3d972..16bdd7b68a 100644
--- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
+++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
@@ -24,6 +24,12 @@ $adf-info-drawer-icon-size-half: 24px !default;
             opacity: 1;
         }
 
+        #{$mat-tab-label}#{$mat-tab-label-active} {
+            & #{$mat-tab-label-text} {
+                color: inherit;
+            }
+        }
+
         &-header {
             padding: 8px 0 0 24px;
             display: flex;
diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.scss b/lib/core/src/lib/info-drawer/info-drawer.component.scss
index 00c6df9450..8d83aae112 100644
--- a/lib/core/src/lib/info-drawer/info-drawer.component.scss
+++ b/lib/core/src/lib/info-drawer/info-drawer.component.scss
@@ -48,12 +48,7 @@
                         }
                     }
 
-                    #{$mat-tab-ink-bar} {
-                        height: 2px;
-                    }
-
                     #{$mat-tab-body} {
-                        padding: 10px;
                         overflow-y: hidden;
                     }
 
@@ -68,32 +63,42 @@
     }
 }
 
-.adf-info-drawer-tab {
-    color: var(--adf-info-drawer-tab-default-color);
-    background-color: var(--adf-info-drawer-tab-default-background);
-    border-bottom: var(--adf-info-drawer-tab-default-bottom-line);
-    opacity: 1;
+.adf-info-drawer-tabs {
+    #{$mat-tab-label-container} {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    }
 
-    &--active {
-        color: var(--adf-info-drawer-tab-active-unfocused-color);
-        background-color: var(--adf-info-drawer-tab-active-unfocused-background);
-        border-bottom: var(--adf-info-drawer-tab-active-unfocused-bottom-line);
+    .adf-info-drawer-tab {
+        color: var(--adf-info-drawer-tab-default-color);
+        background-color: var(--adf-info-drawer-tab-default-background);
+        border-bottom: var(--adf-info-drawer-tab-default-bottom-line);
+        opacity: 1;
 
-        &:focus {
-            color: var(--adf-info-drawer-tab-active-focused-color);
-            border-bottom: var(--adf-info-drawer-tab-active-focused-bottom-line);
+        &:has(span) {
+            height: 32px;
+        }
+
+        &--active {
+            color: var(--adf-info-drawer-tab-active-unfocused-color);
+            background-color:  var(--adf-info-drawer-tab-active-unfocused-background);
+            border-bottom: 1px solid var(--adf-info-drawer-tab-active-unfocused-bottom-line);
+
+            &:focus {
+                color: var(--adf-info-drawer-tab-active-focused-color);
+                border-bottom: var(--adf-info-drawer-tab-active-focused-bottom-line);
         }
     }
 
-    &:hover:not([class*='--disabled'], [class*='--active']) {
-        color: var(--adf-info-drawer-tab-hover-color);
-        background-color: var(--adf-info-drawer-tab-hover-background);
-        border-bottom: var(--adf-info-drawer-tab-hover-bottom-line);
-    }
+        &:hover:not([class*='--disabled'], [class*='--active']) {
+            color: var(--adf-info-drawer-tab-hover-color);
+            background-color: var(--adf-info-drawer-tab-hover-background);
+            border-bottom: var(--adf-info-drawer-tab-hover-bottom-line);
+        }
 
-    &--disabled {
-        color: var(--adf-info-drawer-tab-disabled-color);
-        background-color: var(--adf-info-drawer-tab-disabled-background);
-        border-bottom: var(--adf-info-drawer-tab-disabled-bottom-line);
+        &--disabled {
+            color: var(--adf-info-drawer-tab-disabled-color);
+            background-color: var(--adf-info-drawer-tab-disabled-background);
+            border-bottom: var(--adf-info-drawer-tab-disabled-bottom-line);
+        }
     }
 }
diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
index c43f4da5d9..ff7c719242 100644
--- a/lib/core/src/lib/styles/_mat-selectors.scss
+++ b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -8,6 +8,7 @@ $mat-tab-label: '.mat-mdc-tab';
 $mat-tab-label-active: '.mdc-tab--active';
 $mat-tab-label-content: '.mdc-tab__content';
 $mat-tab-label-container: '.mat-mdc-tab-label-container';
+$mat-expansion-panel-body: '.mat-expansion-panel-body';
 $mat-tab-label-text: '.mdc-tab__text-label';
 $mat-tab-list: '.mat-mdc-tab-list';
 $mat-tab-body: '.mat-mdc-tab-body';
@@ -91,11 +92,13 @@ $mat-calendar-table-header: '.mat-calendar-table-header';
 $mat-calendar-body-disabled: '.mat-calendar-body-disabled';
 $mat-toolbar: '.mat-toolbar';
 $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-checkbox-background: '.mdc-checkbox__background';
 $mat-dialog-content: '.mdc-dialog__content';
 $mat-floating-label: '.mdc-floating-label';
 $mat-floating-label-above: '.mdc-floating-label--float-above';
-$mat-form-field-infix: '.mat-mdc-form-field-infix';
 $mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
 $mat-dialog-title: '.mdc-dialog__title';
 $mat-expansion-panel-body: '.mat-expansion-panel-body';