feat(docs-infra): disable "status" selector in API list when displaying only packages (#25718)

Closes #25708

PR Close #25718
This commit is contained in:
Pete Bacon Darwin 2018-08-29 11:36:24 +01:00 committed by Misko Hevery
parent 4a04ab8823
commit 234661b3d6
5 changed files with 35 additions and 2 deletions

View File

@ -10,6 +10,7 @@
<aio-select (change)="setStatus($event.option)"
[options]="statuses"
[selected]="status"
[disabled]="type.value === 'package'"
label="Status:">
</aio-select>

View File

@ -1,5 +1,5 @@
<div class="form-select-menu">
<button class="form-select-button" (click)="toggleOptions()">
<button class="form-select-button" (click)="toggleOptions()" [disabled]="disabled">
<strong>{{label}}</strong><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span>{{selected?.title}}
</button>
<ul class="form-select-dropdown" *ngIf="showOptions">

View File

@ -67,6 +67,28 @@ describe('SelectComponent', () => {
fixture.detectChanges();
expect(getOptionContainer()).toEqual(null);
});
it('should be disabled if the component is disabled', () => {
host.options = options;
fixture.detectChanges();
expect(getButton().disabled).toBe(false);
expect(getButton().getAttribute('disabled')).toBe(null);
host.disabled = true;
fixture.detectChanges();
expect(getButton().disabled).toBe(true);
expect(getButton().getAttribute('disabled')).toBeDefined();
});
it('should not toggle the visibility of the options list if disabled', () => {
host.options = options;
host.disabled = true;
fixture.detectChanges();
getButton().click();
fixture.detectChanges();
expect(getOptionContainer()).toEqual(null);
});
});
describe('options list', () => {
@ -138,7 +160,8 @@ describe('SelectComponent', () => {
[options]="options"
[selected]="selected"
[label]="label"
[showSymbol]="showSymbol">
[showSymbol]="showSymbol"
[disabled]="disabled">
</aio-select>`
})
class HostComponent {
@ -147,6 +170,7 @@ class HostComponent {
selected: Option;
label: string;
showSymbol: boolean;
disabled: boolean;
}
function getButton(): HTMLButtonElement {

View File

@ -25,6 +25,9 @@ export class SelectComponent implements OnInit {
@Input()
label: string;
@Input()
disabled: boolean;
showOptions = false;
constructor(private hostElement: ElementRef) {}

View File

@ -30,6 +30,11 @@
border: 1px solid $blue-400;
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
}
&[disabled] {
color: lightgrey;
cursor: not-allowed;
}
}
.form-select-dropdown {