Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix autocomplete styles #63

Merged
merged 2 commits into from
Aug 2, 2019
Merged

Fix autocomplete styles #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04529f7
Fix autocomplete styles
Aug 2, 2019
ddfd74a
Update autocomplete tests
Aug 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 74 additions & 6 deletions apps/sam-design-system-site/src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,89 @@
$theme-image-path: '~@gsa-sam/sam-styles/src/img';
$theme-font-path: '~@gsa-sam/sam-styles/src/fonts';
$theme-image-path: '~@gsa-sam/sam-styles/src/img';
$theme-font-path: '~@gsa-sam/sam-styles/src/fonts';

@import "~@gsa-sam/sam-styles/src/stylesheets/sam";
@import '~@gsa-sam/sam-styles/src/stylesheets/sam';
@import '~@angular/cdk/overlay-prebuilt.css';

// Demo pages only
// DO NOT REUSE
.header-styles .icon-layers-counter{
.header-styles .icon-layers-counter {
height: 1em;
min-width: 1em;
right: 4px;
}

.header-styles .icon-square{
.header-styles .icon-square {
color: #70e17b;
}

.sam-example-pagination {
line-height: 45px;
}
}

// sds-autocomplete
.sds-autocomplete {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
font-size: 15px;
position: absolute;
background-color: white;
width: 100%;
max-height: 320px;
overflow-y: scroll;
overflow-x: hidden;
max-width: units($theme-input-max-width);
z-index: 2;

/* width */
&::-webkit-scrollbar {
height: 10px;
width: 10px;
}

/* Track */
&::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Handle */
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 0px;
}

/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
}

.sds-autocomplete .sds-autocomplete__item {
border-top: 1px solid #ccc;
padding: 5px 10px;
cursor: pointer;
}

.sds-autocomplete .sds-autocomplete__item.sds-autocomplete__item--selected {
background-color: #0071bc;
color: white;
}

// sds-autcomplete-selected
.sds-autocomplete-selected .sds-autocomplete-selected__item {
border-radius: 2px;
background: #dce4ef;
display: inline-block;
border: 1px solid #ccc;
font-size: 14px;
padding: 3px 8px;
margin-top: 4px;
width: calc(100% - 16px);
max-width: 30rem;
position: relative;
}

.sds-autocomplete-selected .sds-autocomplete-selected__item--disabled {
background: #d6d7d9;
cursor: not-allowed;
border: 1px solid #aeb0b5;
color: #5b5b5b;
}
12 changes: 6 additions & 6 deletions libs/packages/components/src/lib/autocomplete-search/autocomplete-search.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div sds-click-outside (clickOutside)="checkForFocus($event)" sds-tab-outside (tabOutside)="checkForFocus($event)">
<div class="input-container">
<input [disabled]="disabled" (ngModelChange)="textChange($event)" class="sam input" #input [attr.id]="configuration.id" autocomplete="off" type="text" (focus)="inputFocusHandler()"
<div class="position-relative maxw-mobile-lg">
<input [disabled]="disabled" (ngModelChange)="textChange($event)" class="usa-input" #input [attr.id]="configuration.id" autocomplete="off" type="text" (focus)="inputFocusHandler()"
(keydown)="onKeydown($event)" [(ngModel)]="inputValue" autocomplete="off" role="combobox" aria-autocomplete="list"
aria-expanded="false" aria-haspopup="true" [attr.aria-owns]="configuration.id+ '-listbox'" [attr.placeholder]="configuration.autocompletePlaceHolderText">
<ng-container *ngIf="!input.disabled">
Expand All @@ -12,17 +12,17 @@
</ng-container>
</div>
<div>
<ul #resultsList *ngIf="showResults" [attr.id]="configuration.id+ '-listbox'" role="listbox" class="usa-unstyled-list autocomplete-result"
<ul #resultsList *ngIf="showResults" [attr.id]="configuration.id+ '-listbox'" role="listbox" class="usa-list usa-list--unstyled sds-autocomplete"
[attr.aria-label]="configuration.labelText" (scroll)="onScroll()">
<ng-container *ngIf="(results && results.length > 0)">
<li role="option" *ngFor="let result of results; let i = index" (mouseenter)="listItemHover(i)" [class]="result['highlighted']? 'selected-item':''"
<li role="option" *ngFor="let result of results; let i = index" (mouseenter)="listItemHover(i)" [class]="result['highlighted'] ? 'sds-autocomplete__item sds-autocomplete__item--selected' : 'sds-autocomplete__item' "
(click)="selectItem(result)">
<ng-container *ngIf="itemTemplate" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{$implicit:result}">

</ng-container>

<ng-container *ngIf="!itemTemplate">
<span class="header">{{ result[configuration.primaryTextField] }}</span>
<span class="display-block text-semibold">{{ result[configuration.primaryTextField] }}</span>
<ng-container *ngIf="configuration.secondaryTextField && result[configuration.secondaryTextField] ">
<span class="description">{{ result[configuration.secondaryTextField] }}</span>
</ng-container>
Expand All @@ -34,4 +34,4 @@
</ng-container>
</ul>
<ul #srOnly class="usa-sr-only" aria-live="assertive" aria-relevant="additions"></ul>
</div>
</div>
70 changes: 4 additions & 66 deletions libs/packages/components/src/lib/autocomplete-search/autocomplete-search.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,5 @@
.autocomplete-result{
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);
font-size: 15px;
position: absolute;
background-color: white;
width: 100%;
max-height: 320px;
overflow-y: scroll;
overflow-x: hidden;
max-width: 46rem;
z-index: 2;

/* width */
&::-webkit-scrollbar {
height: 10px;
width: 10px;
}

/* Track */
&::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Handle */
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 0px;
}

/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: #555;
}

.close {
position: absolute;
top: 7px;
right: 10px;
}

.autocomplete-result li{
border-top: 1px solid #ccc;
padding: 5px 10px;
cursor: pointer;
}

.autocomplete-result .header{
display: block;
font-weight: 600;
}

.selected-item{
background-color: #0071bc;
color: white;
}

.input-container{
position: relative;
max-width: 46rem;
}

.close{
position: absolute;
top: 7px;
right: 10px;
}

.sam.input{
margin-bottom: 5px;
padding-right: 30px;
}
32 changes: 16 additions & 16 deletions libs/packages/components/src/lib/autocomplete-search/autocomplete-search.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(1);
const emptyItem = fixture.debugElement.query(By.css('.emptyResults'));
expect(emptyItem).toBeTruthy();
Expand All @@ -79,7 +79,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(3);

}));
Expand All @@ -94,7 +94,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
expect(component.results[0]['highlighted']).toBeTruthy();
}));
Expand All @@ -111,7 +111,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list).toBe(null);
}));

Expand All @@ -122,7 +122,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
expect(component.results[0]['highlighted']).toBeTruthy();
}));
Expand All @@ -139,7 +139,7 @@ describe('SamAutocompleteComponent', () => {
component.onKeydown(downEvent);
tick();
fixture.detectChanges()
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
expect(component.results[1]['highlighted']).toBeTruthy();
const upEvent = {
Expand All @@ -156,7 +156,7 @@ describe('SamAutocompleteComponent', () => {
component.inputFocusHandler();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
expect(component.results[0]['highlighted']).toBeTruthy();
const upEvent = {
Expand All @@ -175,7 +175,7 @@ describe('SamAutocompleteComponent', () => {
tick();
fixture.detectChanges();

const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
expect(component.results[0]['highlighted']).toBeTruthy();
component.listItemHover(component.results.length - 1);
Expand All @@ -200,7 +200,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
expect(component.results[0]['highlighted']).toBeTruthy();
}));
Expand All @@ -209,7 +209,7 @@ describe('SamAutocompleteComponent', () => {
component.inputFocusHandler();
tick();
fixture.detectChanges();
const listBefore = fixture.debugElement.query(By.css('.autocomplete-result'));
const listBefore = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(listBefore.nativeElement.children.length).toBe(11);
const event = {
"key": "Escape",
Expand All @@ -219,7 +219,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const listAfter = fixture.debugElement.query(By.css('.autocomplete-result'));
const listAfter = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(listAfter).toBeFalsy();

}));
Expand All @@ -229,7 +229,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
expect(component.results[0]['highlighted']).toBeTruthy();
}));
Expand All @@ -239,7 +239,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
expect(component.results[0]['highlighted']).toBeTruthy();
const event = {
Expand All @@ -259,7 +259,7 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
component.listItemHover(10);
fixture.detectChanges();
Expand All @@ -273,13 +273,13 @@ describe('SamAutocompleteComponent', () => {
fixture.detectChanges();
tick();
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.autocomplete-result'));
const list = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(list.nativeElement.children.length).toBe(11);
component.clearInput();
fixture.detectChanges();
tick();
fixture.detectChanges();
const listAfter = fixture.debugElement.query(By.css('.autocomplete-result'));
const listAfter = fixture.debugElement.query(By.css('.sds-autocomplete'));
expect(listAfter).toBeFalsy();
}));

Expand Down
8 changes: 4 additions & 4 deletions libs/packages/components/src/lib/selected-result/selected-result.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<ul *ngIf="model" [attr.aria-label]="configuration.labelText +' results'" class="usa-unstyled-list resultsList"
<ul *ngIf="model" [attr.aria-label]="configuration.labelText +' results'" class="usa-list usa-list--unstyled sds-autocomplete-selected"
aria-relevant="additions" role="listbox" aria-live="polite">
<li role="option" *ngFor="let result of model.items; let i = index">
<div [attr.class]="disabled?'selected-item selected-item-disabled' :'selected-item'">
<div [attr.class]=" disabled ? 'sds-autocomplete-selected__item sds-autocomplete-selected__item--disabled' :'sds-autocomplete-selected__item'">
<ng-container *ngIf="itemTemplate" [ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{$implicit:result}">
</ng-container>
<ng-container *ngIf="!itemTemplate">
<span class="header">{{ result[configuration.primaryTextField] }}</span>
<span class="display-block text-semibold">{{ result[configuration.primaryTextField] }}</span>
<ng-container *ngIf="configuration.secondaryTextField && result[configuration.secondaryTextField] ">
<span class="secondary-value">{{ result[configuration.secondaryTextField] }}</span>
</ng-container>
Expand All @@ -16,4 +16,4 @@
</span>
</div>
</li>
</ul>
</ul>
Loading