[ACS-8502] missing alignment for menu and search button (#10051)

lib/content-services/src/lib/search/components/search-control.component.spec.ts

@@ -415,13 +415,13 @@ describe('SearchControlComponent', () => {
             it('should have positive transform translation', () => {
                 userPreferencesService.setWithoutStore('textOrientation', 'ltr');
                 fixture.detectChanges();
-                expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(95%)');
+                expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(85%)');
             });
 
             it('should have negative transform translation ', () => {
                 userPreferencesService.setWithoutStore('textOrientation', 'rtl');
                 fixture.detectChanges();
-                expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-95%)');
+                expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-85%)');
             });
         });
     });

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -25,11 +25,16 @@
         flex: 0 0;
     }
 
-    /* stylelint-disable-next-line selector-class-pattern */
     #{$mat-drawer-content} {
         @include flex-column;
 
         position: unset;
         overflow: auto;
     }
+
+    .adf-layout-container-sidenav {
+        #{$mat-icon} {
+            vertical-align: sub;
+        }
+    }
 }

lib/core/src/lib/search-text/search-text-input.component.scss

@@ -1,32 +1,31 @@
 @import 'styles/mat-selectors';
 
-.adf-search-container:has(.adf-input-form-field-divider) {
+.adf-search-container {
-    overflow: hidden;
+    &:has(.adf-input-form-field-divider) {
-}
+        overflow: hidden;
-
-.adf-search-button {
-    left: -13px;
-}
-
-[dir='rtl'] .adf-search-button {
-    right: -13px;
-}
-
-[dir='ltr'] .adf-search-button {
-    left: -13px;
-}
-
-.adf {
-    &-search-fixed-text {
-        line-height: normal;
     }
 
-    &-clear-search-button {
+    #{$mat-form-field-subscript-wrapper} {
-        font-size: var(--theme-button-font-size);
+        display: none;
-        cursor: pointer;
+    }
+
+    .adf-search-container-transition {
+        display: flex;
+        align-items: center;
+    }
+
+    .adf {
+        &-search-fixed-text {
+            line-height: normal;
+        }
+
+        &-clear-search-button {
+            font-size: var(--theme-button-font-size);
+            cursor: pointer;
+        }
+    }
+
+    .adf-highlight {
+        color: var(--adf-theme-primary-900);
     }
 }
-
-.adf-highlight {
-    color: var(--adf-theme-primary-900);
-}

lib/core/src/lib/search-text/search-text-input.component.spec.ts

@@ -65,7 +65,7 @@ describe('SearchTextInputComponent', () => {
             component.expandable = false;
         });
 
-        it('search button should be hide', () => {
+        it('search button should be hidden', () => {
             fixture.detectChanges();
             const searchButton: any = element.querySelector('#adf-search-button');
             expect(searchButton).toBe(null);
@@ -79,12 +79,15 @@ describe('SearchTextInputComponent', () => {
     });
 
     describe('search button', () => {
-        it('should NOT display a autocomplete list control when configured not to', fakeAsync(() => {
+        let searchButton: DebugElement;
+        beforeEach(fakeAsync(() => {
             fixture.detectChanges();
-
             tick(100);
 
-            const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
+            searchButton = debugElement.query(By.css('#adf-search-button'));
+        }));
+
+        it('should NOT display a autocomplete list control when configured not to', fakeAsync(() => {
             component.subscriptAnimationState.value = 'active';
             fixture.detectChanges();
 
@@ -104,11 +107,6 @@ describe('SearchTextInputComponent', () => {
         }));
 
         it('click on the search button should open the input box when is close', fakeAsync(() => {
-            fixture.detectChanges();
-
-            tick(100);
-
-            const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
             searchButton.triggerEventHandler('click', null);
 
             tick(100);
@@ -121,11 +119,6 @@ describe('SearchTextInputComponent', () => {
         }));
 
         it('Search button should not change the input state too often', fakeAsync(() => {
-            fixture.detectChanges();
-
-            tick(100);
-
-            const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
             component.subscriptAnimationState.value = 'active';
             fixture.detectChanges();
 
@@ -150,10 +143,6 @@ describe('SearchTextInputComponent', () => {
         }));
 
         it('Search bar should close when user press ESC button', fakeAsync(() => {
-            fixture.detectChanges();
-
-            tick(100);
-
             const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
             component.subscriptAnimationState.value = 'active';
             fixture.detectChanges();
@@ -179,66 +168,59 @@ describe('SearchTextInputComponent', () => {
             fixture.detectChanges();
         });
 
+        /**
+         * function which finds Search Button and clicks it
+         */
+        function clickSearchButton(): void {
+            fixture.detectChanges();
+            const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
+            searchButton.triggerEventHandler('click', null);
+            tick(100);
+            fixture.detectChanges();
+            tick(100);
+        }
+
+        /**
+         * Runs a test for ltr/rtl margin values
+         *
+         * @param isLtr sets ltr or rtl value to test
+         */
+        function testMarginValue(isLtr: boolean): void {
+            userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl');
+            clickSearchButton();
+            const expectedResult = isLtr ? { 'margin-left': 13 } : { 'margin-right': 13 };
+            expect(component.subscriptAnimationState.params).toEqual(expectedResult);
+            discardPeriodicTasks();
+        }
+
         it('should have margin-left set when active and direction is ltr', fakeAsync(() => {
-            userPreferencesService.setWithoutStore('textOrientation', 'ltr');
+            testMarginValue(true);
-            fixture.detectChanges();
-
-            const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
-
-            searchButton.triggerEventHandler('click', null);
-            tick(100);
-            fixture.detectChanges();
-            tick(100);
-
-            expect(component.subscriptAnimationState.params).toEqual({ 'margin-left': 13 });
-            discardPeriodicTasks();
-        }));
-
-        it('should have positive transform translateX set when inactive and direction is ltr', fakeAsync(() => {
-            userPreferencesService.setWithoutStore('textOrientation', 'ltr');
-            component.subscriptAnimationState.value = 'active';
-
-            fixture.detectChanges();
-            const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
-
-            searchButton.triggerEventHandler('click', null);
-            tick(100);
-            fixture.detectChanges();
-            tick(100);
-
-            expect(component.subscriptAnimationState.params).toEqual({ transform: 'translateX(95%)' });
-            discardPeriodicTasks();
         }));
 
         it('should have margin-right set when active and direction is rtl', fakeAsync(() => {
-            userPreferencesService.setWithoutStore('textOrientation', 'rtl');
+            testMarginValue(false);
-            fixture.detectChanges();
+        }));
 
-            const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
+        /**
-
+         * Runs a test for ltr/rtl transform values
-            searchButton.triggerEventHandler('click', null);
+         *
-            tick(100);
+         * @param isLtr sets ltr or rtl value to test
-            fixture.detectChanges();
+         */
-            tick(100);
+        function testTransformValue(isLtr: boolean): void {
-
+            userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl');
-            expect(component.subscriptAnimationState.params).toEqual({ 'margin-right': 13 });
+            component.subscriptAnimationState.value = 'active';
+            clickSearchButton();
+            const expectedValue = isLtr ? 'translateX(85%)' : 'translateX(-85%)';
+            expect(component.subscriptAnimationState.params).toEqual({ transform: expectedValue });
             discardPeriodicTasks();
+        }
+
+        it('should have positive transform translateX set when inactive and direction is ltr', fakeAsync(() => {
+            testTransformValue(true);
         }));
 
         it('should have negative transform translateX set when inactive and direction is rtl', fakeAsync(() => {
-            userPreferencesService.setWithoutStore('textOrientation', 'rtl');
+            testTransformValue(false);
-            component.subscriptAnimationState.value = 'active';
-
-            fixture.detectChanges();
-            const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
-
-            searchButton.triggerEventHandler('click', null);
-            tick(100);
-            fixture.detectChanges();
-            tick(100);
-
-            expect(component.subscriptAnimationState.params).toEqual({ transform: 'translateX(-95%)' });
-            discardPeriodicTasks();
         }));
 
         it('should set browser autocomplete to on when configured', async () => {

lib/core/src/lib/search-text/search-text-input.component.ts

@@ -143,11 +143,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     animationStates: SearchAnimationDirection = {
         ltr: {
             active: { value: 'active', params: { 'margin-left': 13 } },
-            inactive: { value: 'inactive', params: { transform: 'translateX(95%)' } }
+            inactive: { value: 'inactive', params: { transform: 'translateX(85%)' } }
         },
         rtl: {
             active: { value: 'active', params: { 'margin-right': 13 } },
-            inactive: { value: 'inactive', params: { transform: 'translateX(-95%)' } }
+            inactive: { value: 'inactive', params: { transform: 'translateX(-85%)' } }
         }
     };
 
@@ -201,11 +201,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
         if (this.dir === 'ltr') {
             return this.subscriptAnimationState.value === 'inactive'
                 ? { value: 'active', params: { 'margin-left': 13 } }
-                : { value: 'inactive', params: { transform: 'translateX(95%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(85%)' } };
         } else {
             return this.subscriptAnimationState.value === 'inactive'
                 ? { value: 'active', params: { 'margin-right': 13 } }
-                : { value: 'inactive', params: { transform: 'translateX(-95%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(-85%)' } };
         }
     }