minor fixes

e2e/core/pages/metadata-view.page.ts

@@ -327,10 +327,6 @@ export class MetadataViewPage {
         await BrowserActions.click(this.saveGeneralMetadataButton);
     }
 
-    async clickResetGeneralMetadata(): Promise<void> {
-        await BrowserActions.click(this.resetGeneralMetadataButton);
-    }
-
     async generalSaveIconDisplayed(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsNotVisible(this.saveGeneralMetadataButton);
     }

lib/content-services/src/lib/category/categories-management/categories-management.component.html

@@ -1,7 +1,8 @@
 <div class="adf-categories-management">
     <div *ngIf="((!categoryNameControlVisible && categories.length)) || categoryNameControlVisible"
          class="adf-category-name-field">
-        <input #categoryNameInput
+        <mat-form-field  appearance="fill">
+            <input #categoryNameInput
                matInput 
                autocomplete="off"
                [formControl]="categoryNameControl"
@@ -9,7 +10,8 @@
                aria-labelledby="adf-category-name-input-label"
                placeholder="{{'CATEGORIES_MANAGEMENT.INPUT_PLACEHOLDER' | translate }}"
                adf-auto-focus />
-        <mat-error [hidden]="!categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
+            <mat-error [hidden]="!categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
+        </mat-form-field>
     </div>
     <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
         <span

lib/content-services/src/lib/category/categories-management/categories-management.component.scss

@@ -5,7 +5,7 @@
         display: flex;
         justify-content: space-between;
         width: 100%;
-        background: var(--adf-metadata-tags-background-color);
+        background: var(--adf-metadata-buttons-background-color);
         height: 32px;
         border-radius: 12px;
         align-items: center;
@@ -18,6 +18,18 @@
         .adf-btn-padded {
             margin-right: -14px;
         }
+
+        .mat-form-field-underline {
+            display: none;
+        }
+
+        .mat-form-field-wrapper {
+            width: 100%;
+        }
+        
+        .mat-form-field-appearance-fill .mat-form-field-flex {
+            background: none;
+        }
     }
 
     .adf-assigned-categories {

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -42,7 +42,7 @@
             align-items: center;
             border-radius: 16px;
             width: fit-content;
-            background: var(--adf-metadata-tags-background-color);
+            background: var(--adf-metadata-buttons-background-color);
             margin-top: 12px;
             padding: 6px 12px;
             justify-content: center;

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html

@@ -1,6 +1,6 @@
 <div class="adf-tags-creation">
     <div class="adf-tag-name-field" *ngIf="(!tagNameControlVisible && tags.length) || tagNameControlVisible">
-        <div class="adf-tag-search-field">
+        <mat-form-field class="adf-tag-search-field" appearance="fill">
             <input #tagNameInput
                     matInput 
                     autocomplete="off"
@@ -10,8 +10,8 @@
                     adf-auto-focus
                     placeholder="{{'TAG.TAGS_CREATOR.INPUT_PLACEHOLDER' | translate}}" 
             />
-    <mat-error [hidden]="!tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
+            <mat-error [hidden]="!tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
-        </div>
+        </mat-form-field >
     </div>
     <p
        class="adf-no-tags-message"
@@ -30,7 +30,8 @@
                 data-automation-id="remove-tag-button"
                 mat-icon-button
                 (click)="removeTag(tag)"
-                [attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate" [disabled]="disabledTagsRemoving"
+                [attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate"
+                [disabled]="disabledTagsRemoving"
                 class="adf-remove-tag">
                 <mat-icon>close</mat-icon>
             </button>

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss

@@ -2,7 +2,7 @@ adf-tags-creator {
     display: block;
 
     .adf-label-with-icon-button {
-        background: var(--adf-metadata-tags-background-color);
+        background: var(--adf-metadata-buttons-background-color);
         width: fit-content;
         height: 32px;
         display: inline-flex;
@@ -39,16 +39,31 @@ adf-tags-creator {
             padding-right: 3px;
             font-size: 14px;
         }
+    
+        .mat-form-field-appearance-fill .mat-form-field-flex {
+            background: none;
+        }
+        
+        .mat-form-field-appearance-fill .mat-form-field-infix {
+            padding: 0;
+        }
     }
 
     .adf-tag-search-field {
-        width: 752px;
+        background: var(--adf-metadata-buttons-background-color);
-        background: var(--adf-metadata-tags-background-color);
         height: 32px;
         border-radius: 12px;
         align-items: center;
         display: flex;
         padding: 0 12px;
+        
+        .mat-form-field-underline {
+            display: none;
+        }
+
+        .mat-form-field-wrapper {
+            width: 100%;
+        }
     }
 
     .adf-create-tag-label {

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts

@@ -21,7 +21,7 @@ import { NotificationService } from '@alfresco/adf-core';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatError, MatFormFieldModule } from '@angular/material/form-field';
+import { MatError, MatFormField, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -257,7 +257,7 @@ describe('TagsCreatorComponent', () => {
             const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector));
             expect(tagNameField).toBeTruthy();
             expect(tagNameField.nativeElement.hasAttribute('hidden')).toBeFalsy();
-            expect(tagNameField).toBeTruthy();
+            expect(tagNameField.query(By.directive(MatFormField))).toBeTruthy();
         });
 
         it('should input be autofocused', fakeAsync(() => {
@@ -267,6 +267,18 @@ describe('TagsCreatorComponent', () => {
             expect(getNameInput()).toBe(document.activeElement as HTMLInputElement);
         }));
 
+        it('should input be autofocused after showing input second time', fakeAsync(() => {
+            component.tagNameControlVisible = true;
+            fixture.detectChanges();
+            tick(100);
+
+            component.tagNameControlVisible = true;
+            fixture.detectChanges();
+            tick(100);
+
+            expect(getNameInput()).toBe(document.activeElement as HTMLInputElement);
+        }));
+
         describe('Errors', () => {
             function getFirstError(): string {
                 const error = fixture.debugElement.query(By.directive(MatError));
@@ -313,6 +325,13 @@ describe('TagsCreatorComponent', () => {
                 expect(getFirstError()).toBe('TAG.TAGS_CREATOR.ERRORS.ALREADY_ADDED_TAG');
             }));
 
+            it('should not show error for required if tags are changed', fakeAsync(() => {
+                typeTag('');
+                component.tags = ['new tag 1', 'new tag 2'];
+                fixture.detectChanges();
+                expect(getFirstError()).toBeUndefined();
+            }));
+
             it('should show error when duplicated already existing tag', fakeAsync(() => {
                 const tag = 'Some tag';
 

lib/core/src/lib/styles/_components-variables.scss

@@ -46,7 +46,7 @@
         --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
         --adf-user-info-container-margin-right: $adf-ref-margin-right,
         --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color,
-        --adf-metadata-tags-background-color: $adf-metadata-tags-background-color
+        --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color
     );
 
     // propagates SCSS variables into the CSS variables scope

lib/core/src/lib/styles/_reference-variables.scss

@@ -28,4 +28,4 @@ $adf-ref-width: 40px;
 $adf-ref-line-height: 40px;
 $adf-ref-margin-right: 8px;
 $adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
-$adf-metadata-tags-background-color: rgba(33, 33, 33, 0.05);
+$adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);