fix(instance-switcher): prevent style collisions

closes #2056
HealthCatalyst · Feb 23, 2023 · 69a5f73 · 69a5f73
1 parent 094552f
commit 69a5f73
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 68 deletions.
diff --git a/.../cashmere-examples/src/lib/measurable-overview/measurable-overview-example.component.html b/.../cashmere-examples/src/lib/measurable-overview/measurable-overview-example.component.html
@@ -1,5 +1,6 @@
 <div class="sample-container">
     <div #buttonContainer class="button-container">
+        <em class="sample-container-empty" *ngIf="buttons.length === 0">No buttons added</em>
         <hc-measurable
             *ngFor="let button of buttons"
             [itemKey]="button.key">

diff --git a/.../cashmere-examples/src/lib/measurable-overview/measurable-overview-example.component.scss b/.../cashmere-examples/src/lib/measurable-overview/measurable-overview-example.component.scss
@@ -8,6 +8,10 @@ hc-measurable {
     }
 }
 
+.sample-container-empty {
+    line-height: 35px;
+}
+
 button.hc-button hc-icon.hc-icon {
     margin-left: 10px;
 }

diff --git a/...ts/cashmere-examples/src/lib/measurable-overview/measurable-overview-example.component.ts b/...ts/cashmere-examples/src/lib/measurable-overview/measurable-overview-example.component.ts
@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import {ChangeDetectorRef, Component, ElementRef, HostListener, OnDestroy, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, OnDestroy, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { HcPopoverAnchorDirective, MeasurableComponent, MeasurableService } from '@healthcatalyst/cashmere';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -31,18 +31,8 @@ interface ButtonData {
         ])
     ]
 })
-export class MeasurableOverviewExampleComponent implements OnDestroy {
-    buttons: ButtonData[] = [
-        {
-            key: 'button1',
-            text: 'Button 1'
-        },
-        {
-            key: 'button2',
-            text: 'Button 2'
-        }
-    ];
-
+export class MeasurableOverviewExampleComponent implements AfterViewInit, OnDestroy {
+    buttons: ButtonData[] = [];
     moreButtons: ButtonData[] = [];
     moreSelected = false;
 
@@ -52,7 +42,7 @@ export class MeasurableOverviewExampleComponent implements OnDestroy {
 
     private unsubscribe$ = new Subject<void>();
 
-    private currentId = 3;
+    private currentId = 1;
 
     @ViewChildren(MeasurableComponent)
     buttonComponents: QueryList<MeasurableComponent>;
@@ -63,12 +53,7 @@ export class MeasurableOverviewExampleComponent implements OnDestroy {
     @ViewChild('buttonContainer')
     containerRef: ElementRef;
 
-    @HostListener('window:load')
-    setupButtons(): void {
-        setTimeout(() => {
-            this.refreshButtons();
-        });
-
+    ngAfterViewInit(): void {
         this.buttonComponents.changes.pipe(
             takeUntil(this.unsubscribe$)
         ).subscribe(() => this.refreshButtons());

diff --git a/.../cashmere-examples/src/lib/measurable-vertical/measurable-vertical-example.component.scss b/.../cashmere-examples/src/lib/measurable-vertical/measurable-vertical-example.component.scss
@@ -2,6 +2,8 @@
 
 .button-container {
     height: 305px;
+    padding: 5px;
+    border: 1px solid $slate-gray-300;
 }
 
 hc-measurable button {

diff --git a/...ts/cashmere-examples/src/lib/measurable-vertical/measurable-vertical-example.component.ts b/...ts/cashmere-examples/src/lib/measurable-vertical/measurable-vertical-example.component.ts
@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import {ChangeDetectorRef, Component, ElementRef, HostListener, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, OnDestroy, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { HcPopoverAnchorDirective, MeasurableComponent, MeasurableService } from '@healthcatalyst/cashmere';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -31,17 +31,8 @@ interface ButtonData {
         ])
     ]
 })
-export class MeasurableVerticalExampleComponent {
-    buttons: ButtonData[] = [
-        {
-            key: 'button1',
-            text: 'Button 1'
-        },
-        {
-            key: 'button2',
-            text: 'Button 2'
-        }
-    ];
+export class MeasurableVerticalExampleComponent implements AfterViewInit, OnDestroy {
+    buttons: ButtonData[] = [];
 
     moreButtons: ButtonData[] = [];
     moreSelected = false;
@@ -52,7 +43,7 @@ export class MeasurableVerticalExampleComponent {
 
     private unsubscribe$ = new Subject<void>();
 
-    private currentId = 3;
+    private currentId = 1;
 
     @ViewChildren(MeasurableComponent)
     buttonComponents: QueryList<MeasurableComponent>;
@@ -63,12 +54,7 @@ export class MeasurableVerticalExampleComponent {
     @ViewChild('buttonContainer')
     containerRef: ElementRef;
 
-    @HostListener('window:load')
-    setupButtons(): void {
-        setTimeout(() => {
-            this.refreshButtons();
-        });
-
+    ngAfterViewInit(): void {
         this.buttonComponents.changes.pipe(
             takeUntil(this.unsubscribe$)
         ).subscribe(() => this.refreshButtons());

diff --git a/projects/cashmere/src/lib/instance-switcher/instance-switcher.component.scss b/projects/cashmere/src/lib/instance-switcher/instance-switcher.component.scss
@@ -1,12 +1,39 @@
 @import '../sass/instance-switcher.scss';
-@import '../../lib/sass/cashmere.scss';
 
 .hc-instance-switcher {
     @include hc-instance-switcher();
 
     hc-measurable {
         @include hc-instance-switcher-measurable();
     }
+
+    .hc-chip.hc-chip-padding {
+        @include hc-instance-chip-padding();
+    }
+
+    button.hc-button.hc-instance-switcher-more {
+        @include hc-instance-more-button();
+
+        hc-icon {
+            @include hc-instance-button-icon();
+        }
+    }
+
+    button.hc-button.hc-instance-switcher-add {
+        @include hc-instance-add-button();
+    }
+
+    button.hc-icon-button.hc-instance-switcher-hide {
+        @include hc-instance-hide-button();
+    }
+
+    button.hc-menu-item.hc-instance-switcher-more-menu-item {
+        @include hc-instance-switcher-more();
+
+        hc-icon.hc-menu-icon.hc-instance-switcher-more-close {
+            @include hc-instance-switcher-more-close();
+        }
+    }
 }
 
 .hc-instance-container {
@@ -44,31 +71,3 @@
         @include hc-instance-edit();
     }
 }
-
-.hc-chip.hc-chip-padding {
-    @include hc-instance-chip-padding();
-}
-
-button.hc-button.hc-instance-switcher-more {
-    @include hc-instance-more-button();
-
-    hc-icon {
-        @include hc-instance-button-icon();
-    }
-}
-
-button.hc-button.hc-instance-switcher-add {
-    @include hc-instance-add-button();
-}
-
-button.hc-icon-button.hc-instance-switcher-hide {
-    @include hc-instance-hide-button();
-}
-
-button.hc-menu-item.hc-instance-switcher-more-menu-item {
-    @include hc-instance-switcher-more();
-
-    hc-icon.hc-menu-icon.hc-instance-switcher-more-close {
-        @include hc-instance-switcher-more-close();
-    }
-}