[ACS-7375] - Share link dialog issues

lib/content-services/src/lib/content-node-share/content-node-share.dialog.html

@@ -1,6 +1,6 @@
 <div class="adf-share-link__dialog-content">
     <div class="adf-share-link__dialog-container">
-        <div class="adf-share-link--row">
+        <div class="adf-share-link--header adf-share-link--row">
             <div
                 data-automation-id="adf-share-dialog-title"
                 class="adf-share-link__title adf-share-link__label adf-share-link__heading"
@@ -10,10 +10,10 @@
             </div>
             <mat-icon mat-dialog-close class="adf-share-link__close adf-share-link__icon">close</mat-icon>
         </div>
-        <mat-dialog-content>
+        <mat-dialog-content class="adf-share-link--dialog-content">
             <hr class="adf-share-link__separation-line" />
             <form [formGroup]="form" class="adf-share-link__form">
-                <div class="adf-share-link--row">
+                <div class="adf-share-link--row adf-share-link--row-sharable">
                     <mat-icon class="adf-share-link__icon">timer</mat-icon>
                     <div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.LINK-EXPIRY-DATE' | translate }}
                     </div>
@@ -31,7 +31,7 @@
                     [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
                     data-automation-id="adf-slide-toggle-checked"
                     class="adf-share-link__date-time-container">
-                    <mat-form-field class="adf-full-width" data-automation-id="adf-content-share-expiration-field" floatLabel="always">
+                    <mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field">
                         <mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
                         <mat-datepicker-toggle
                             [disabled]="time.disabled"
@@ -47,7 +47,6 @@
                             class="adf-share-link__input"
                             #datePickerInput
                             matInput
-                            placeholder="{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}"
                             [attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate"
                             [min]="minDate"
                             formControlName="time"
@@ -60,10 +59,11 @@
                     </mat-form-field>
                 </div>
                 <p class="adf-share-link__info adf-share-link__para">{{ 'SHARE.SHARE-LINK' | translate }}</p>
-                <div class="adf-share-link--row">
+                <div class="adf-share-link--row adf-share-link--sharable-container">
                     <mat-slide-toggle
                         color="primary"
                         data-automation-id="adf-share-toggle"
+                        class="adf-share-link--row__slide-toggle"
                         aria-label="{{ 'SHARE.TITLE' | translate }}"
                         [checked]="isFileShared"
                         [disabled]="!canUpdate || isDisabled"
@@ -73,8 +73,9 @@
                     </div>
                 </div>
                 <mat-form-field
+                    subscriptSizing="dynamic"
                     floatLabel="always"
-                    class="adf-full-width"
+                    class="adf-full-width adf-share-link__form--field"
                     data-automation-id="adf-content-share-public-link-field"
                     [ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
                     <input

lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss

@@ -1,5 +1,11 @@
+@import 'styles/mat-selectors';
+
 .adf-share-link-dialog {
     .adf-share-link {
+        #{$mat-form-field-flex} {
+            height: 48px;
+        }
+
         &__dialog-content {
             display: flex;
             flex-direction: column;
@@ -8,7 +14,6 @@
         &__dialog-container {
             background-color: var(--theme-card-background-color);
             border-radius: 16px;
-            padding: 16px 24px;
         }
 
         &__label,
@@ -29,6 +34,15 @@
 
         &__form {
             padding-top: 8px;
+
+            #{$mat-form-field-infix}:has(.adf-share-link__input) {
+                border-top: 0.9375em solid transparent;
+                height: 16px;
+            }
+
+            &--field {
+                padding-bottom: 16px;
+            }
         }
 
         &__public-content {
@@ -48,6 +62,23 @@
             flex-wrap: wrap;
             align-items: center;
             margin: 8px 0;
+
+            &-sharable {
+                margin-bottom: 0;
+            }
+        }
+
+        &--sharable-container {
+            margin-bottom: 0;
+        }
+
+        &--header {
+            padding: 16px 24px 0 24px;
+        }
+
+        &--dialog-content {
+            padding-top: 0;
+            padding-bottom: 0;
         }
 
         &__input {
@@ -66,6 +97,7 @@
 
         &__icon {
             color: var(--adf-theme-foreground-icon-color-054);
+            padding-bottom: 0;
         }
 
         &__para {
@@ -79,11 +111,12 @@
         }
 
         &__calender-icon {
-            font-size: 18px;
+            top: 12px;
+            position: relative;
         }
 
         &__date-time-container {
-            padding-bottom: 8px;
+            padding-bottom: 20px;
         }
 
         &__border-color {
@@ -101,12 +134,13 @@
     }
 
     .adf-sharable-link {
+        margin-top: 2px;
         margin-left: 8px;
     }
 
     .adf-share-link__actions {
         justify-content: flex-end;
-        padding: 0;
+        padding: 8px 24px 32px 0;
         margin: 8px 0 0;
 
         & > button {

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

@@ -6,7 +6,7 @@ adf-search-chip-autocomplete-input {
         width: 100%;
     }
 
-    #{$mat-form-field-infix} {
+    #{$mat-form--text-field-infix} {
         border: none;
     }
 

lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss

@@ -21,14 +21,14 @@ adf-search-properties {
 
     .adf-search-properties-file-size-operator,
     .adf-search-properties-file-size-unit {
-        #{$mat-form-field-infix} {
+        #{$mat-form--text-field-infix} {
             border: 1px solid var(--adf-theme-mat-grey-color-a400);
             border-radius: 5px;
             padding: 9px;
         }
 
         &#{$mat-focused} {
-            #{$mat-form-field-infix} {
+            #{$mat-form--text-field-infix} {
                 outline: 2px auto -webkit-focus-ring-color;
             }
         }

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

@@ -47,7 +47,7 @@
                 }
             }
 
-            #{$mat-form-field-infix} {
+            #{$mat-form--text-field-infix} {
                 border-top-width: 0;
                 padding: 0;
             }

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

@@ -8,7 +8,7 @@ $adf-inplace-input-padding: 7px;
         display: none;
     }
 
-    #{$mat-form-field-infix} {
+    #{$mat-form--text-field-infix} {
         display: flex;
         border-top: 0;
     }

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

@@ -17,7 +17,7 @@
             top: 0;
 
         }
-        #{$mat-form-field-infix} {
+        #{$mat-form--text-field-infix} {
             width: 100%;
         }
     }

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

@@ -45,7 +45,7 @@ $mat-form-field-underline: '.mdc-line-ripple';
 $mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';
 $mat-form-field-prefix: '.mat-mdc-form-field-text-prefix';
 $mat-form-field-suffix: '.mat-mdc-form-field-text-suffix';
-$mat-form-field-infix: '.mat-mdc-form-text-infix';
+$mat-form--text-field-infix: '.mat-mdc-form-text-infix';
 $mat-form-field-label: '.mat-mdc-floating-label';
 $mat-form-field-invalid: '.mat-form-field-invalid';
 $mat-form-field-appearance-outline: '.mat-form-field-appearance-outline';
@@ -93,3 +93,4 @@ $mat-toolbar: '.mat-toolbar';
 $mat-slide-toggle: '.mat-mdc-slide-toggle';
 $mat-checkbox-background: '.mdc-checkbox__background';
 $mat-dialog-content: '.mdc-dialog__content';
+$mat-form-field-infix: '.mat-mdc-form-field-infix';

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss

@@ -18,7 +18,7 @@
             top: 0;
         }
 
-        #{$mat-form-field-infix} {
+        #{$mat-form--text-field-infix} {
             width: 100%;
         }
     }