Skip to content

Commit

Permalink
[ACS-8502] missing alignment for menu and search button (#10051)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dominikiwanekhyland
dominikiwanekhyland committed Aug 8, 2024
1 parent d38e782 commit 9a7ffe5
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 91 deletions.
4 changes: 2 additions & 2 deletions lib/content-services/src/lib/search/components/search-control.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%)');
});
});
});
Expand Down
7 changes: 6 additions & 1 deletion lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
43 changes: 21 additions & 22 deletions lib/core/src/lib/search-text/search-text-input.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,31 @@
@import 'styles/mat-selectors';

.adf-search-container:has(.adf-input-form-field-divider) {
overflow: hidden;
}
.adf-search-container {
&:has(.adf-input-form-field-divider) {
overflow: hidden;
}

.adf-search-button {
left: -13px;
}
#{$mat-form-field-subscript-wrapper} {
display: none;
}

[dir='rtl'] .adf-search-button {
right: -13px;
}
.adf-search-container-transition {
display: flex;
align-items: center;
}

[dir='ltr'] .adf-search-button {
left: -13px;
}
.adf {
&-search-fixed-text {
line-height: normal;
}

.adf {
&-search-fixed-text {
line-height: normal;
&-clear-search-button {
font-size: var(--theme-button-font-size);
cursor: pointer;
}
}

&-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);
}
106 changes: 44 additions & 62 deletions lib/core/src/lib/search-text/search-text-input.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();

Expand All @@ -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);
Expand All @@ -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();

Expand All @@ -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();
Expand All @@ -179,66 +168,59 @@ describe('SearchTextInputComponent', () => {
fixture.detectChanges();
});

it('should have margin-left set when active and direction is ltr', fakeAsync(() => {
userPreferencesService.setWithoutStore('textOrientation', 'ltr');
/**
* 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);

expect(component.subscriptAnimationState.params).toEqual({ 'margin-left': 13 });
}

/**
* 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 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-left set when active and direction is ltr', fakeAsync(() => {
testMarginValue(true);
}));

it('should have margin-right set when active and direction is rtl', fakeAsync(() => {
userPreferencesService.setWithoutStore('textOrientation', 'rtl');
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-right': 13 });
discardPeriodicTasks();
testMarginValue(false);
}));

it('should have negative transform translateX set when inactive and direction is rtl', fakeAsync(() => {
userPreferencesService.setWithoutStore('textOrientation', 'rtl');
/**
* Runs a test for ltr/rtl transform values
*
* @param isLtr sets ltr or rtl value to test
*/
function testTransformValue(isLtr: boolean): void {
userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl');
component.subscriptAnimationState.value = 'active';
clickSearchButton();
const expectedValue = isLtr ? 'translateX(85%)' : 'translateX(-85%)';
expect(component.subscriptAnimationState.params).toEqual({ transform: expectedValue });
discardPeriodicTasks();
}

fixture.detectChanges();
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));

searchButton.triggerEventHandler('click', null);
tick(100);
fixture.detectChanges();
tick(100);
it('should have positive transform translateX set when inactive and direction is ltr', fakeAsync(() => {
testTransformValue(true);
}));

expect(component.subscriptAnimationState.params).toEqual({ transform: 'translateX(-95%)' });
discardPeriodicTasks();
it('should have negative transform translateX set when inactive and direction is rtl', fakeAsync(() => {
testTransformValue(false);
}));

it('should set browser autocomplete to on when configured', async () => {
Expand Down
8 changes: 4 additions & 4 deletions lib/core/src/lib/search-text/search-text-input.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%)' } }
}
};

Expand Down Expand Up @@ -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%)' } };
}
}

Expand Down

0 comments on commit 9a7ffe5

Please sign in to comment.