feat(docs-infra): disable "status" selector in API list when displayi…

…ng only packages (angular#25718) Closes angular#25708 PR Close angular#25718
FrederikSchlemmer · Jan 3, 2019 · e6bd52a · e6bd52a
1 parent 78358e4
commit e6bd52a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 2 deletions.
diff --git a/aio/src/app/custom-elements/api/api-list.component.html b/aio/src/app/custom-elements/api/api-list.component.html
@@ -10,6 +10,7 @@
   <aio-select (change)="setStatus($event.option)"
               [options]="statuses"
               [selected]="status"
+              [disabled]="type.value === 'package'"
               label="Status:">
   </aio-select>
 

diff --git a/aio/src/app/shared/select/select.component.html b/aio/src/app/shared/select/select.component.html
@@ -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">

diff --git a/aio/src/app/shared/select/select.component.spec.ts b/aio/src/app/shared/select/select.component.spec.ts
@@ -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 {

diff --git a/aio/src/app/shared/select/select.component.ts b/aio/src/app/shared/select/select.component.ts
@@ -25,6 +25,9 @@ export class SelectComponent implements OnInit {
   @Input()
   label: string;
 
+  @Input()
+  disabled: boolean;
+
   showOptions = false;
 
   constructor(private hostElement: ElementRef) {}

diff --git a/aio/src/styles/2-modules/_select-menu.scss b/aio/src/styles/2-modules/_select-menu.scss
@@ -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 {