Merge pull request #279 from pxblue/dev

Release 4.4.0
etn-ccis · May 28, 2021 · bdc09bd · bdc09bd
2 parents ece404a + 116c8e4
commit bdc09bd
Show file tree

Hide file tree

Showing 19 changed files with 236 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Change Log
 
+## v4.4.0 (May 28, 2021)
+
+### Changed
+
+-   Update `<pxb-user-menu>` to responsively display a bottom sheet in place of an overlay menu.
+
+### Added
+
+-   Added `disableRailTooltip` prop to `<pxb-drawer>`.
+
+### Fixed
+
+-   Fixed non-centered `<pxb-list-item-tag>` text.
+
 ## v4.3.0 (April 27, 2021)
 
 ### Added

diff --git a/CODEOWNERS b/CODEOWNERS
@@ -0,0 +1 @@
+* @emclaug2 @daileytj @joebochill @jeffvg
diff --git a/README.md b/README.md
@@ -44,11 +44,12 @@ yarn link:components
 
 The following table outlines which versions of Angular and PX Blue resources will work together.
 
-|  @pxblue/angular-components   |  @pxblue/angular-themes     | @angular + @angular/material |
-| ----------------------------- | --------------------------- | ---------------------------- |
-| `^2.0.0`                      | `^5.0.0`                    | `^8.0.0`                     |
-| `^3.0.0`                      | `^5.1.0`                    | `8.x - 9.x`                  |
-| `^4.0.0`                      | `^5.2.0`                    | `^10.x`                       |
+| @pxblue/angular-components | @pxblue/angular-themes | @angular + @angular/material |
+| -------------------------- | ---------------------- | ---------------------------- |
+| `^2.0.0`                   | `^5.0.0`               | `^8.0.0`                     |
+| `^3.0.0`                   | `^5.1.0`               | `8.x - 9.x`                  |
+| `^4.0.0`                   | `^5.2.0`               | `^10.x`                      |
+| `^4.4.0`                   | `^6.1.0`               | `^10.x`                      |
 
 ## Running the demo projects
 

diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pxblue/angular-components",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Angular components for PX Blue applications",
   "scripts": {
     "ng": "ng",

diff --git a/components/src/core/drawer/drawer-body/nav-item/drawer-nav-item.component.ts b/components/src/core/drawer/drawer-body/nav-item/drawer-nav-item.component.ts
@@ -96,7 +96,7 @@ export type ActiveItemBackgroundShape = 'round' | 'square';
                     <div
                         (click)="selectItem()"
                         class="pxb-drawer-nav-item-rail"
-                        [matTooltip]="title"
+                        [matTooltip]="showTooltipOnRailHover() ? title : ''"
                         [matTooltipDisabled]="!isRailCondensed()"
                         matTooltipPosition="right"
                     >
@@ -186,6 +186,10 @@ export class DrawerNavItemComponent extends StateListener implements Omit<Drawer
         return this.drawerService.isRailCondensed();
     }
 
+    showTooltipOnRailHover(): boolean {
+        return !this.drawerService.isDisableRailTooltip();
+    }
+
     manageActiveItemTreeHighlight(): void {
         if (!this.navItemEl) {
             return;

diff --git a/components/src/core/drawer/drawer.component.ts b/components/src/core/drawer/drawer.component.ts
@@ -45,6 +45,7 @@ export class DrawerComponent extends StateListener implements OnInit, OnChanges
     @Input() disableActiveItemParentStyles = false;
     @Input() openOnHover = true;
     @Input() openOnHoverDelay = 500;
+    @Input() disableRailTooltip = false;
 
     hoverDelayTimeout: any;
     drawerSelectionListener: Subscription;
@@ -64,6 +65,7 @@ export class DrawerComponent extends StateListener implements OnInit, OnChanges
         this.drawerService.setSideBorder(this.sideBorder);
         this.drawerService.setDrawerOpen(this.open);
         this.drawerService.setIsCondensed(this.condensed);
+        this.drawerService.setDisableRailTooltip(this.disableRailTooltip);
         this.drawerService.setDisableActiveItemParentStyles(this.disableActiveItemParentStyles);
     }
 

diff --git a/components/src/core/drawer/service/drawer.service.ts b/components/src/core/drawer/service/drawer.service.ts
@@ -13,6 +13,7 @@ export class DrawerService {
     private tempOpen = false;
     private isCondensed: boolean;
     private sideBorder: boolean;
+    private disableRailTooltip: boolean;
 
     drawerOpenObs = new Subject<boolean>();
     drawerSelectObs = new Subject<boolean>();
@@ -48,6 +49,14 @@ export class DrawerService {
         this.drawerOpenObs.next(this.isDrawerOpen());
     }
 
+    setDisableRailTooltip(disableRailTooltip: boolean): void {
+        this.disableRailTooltip = disableRailTooltip;
+    }
+
+    isDisableRailTooltip(): boolean {
+        return this.disableRailTooltip;
+    }
+
     setDrawerVariant(variant: DrawerLayoutVariantType): void {
         this.variant = variant;
         this.drawerOpenObs.next(this.isDrawerOpen());

diff --git a/components/src/core/list-item-tag/list-item-tag.component.scss b/components/src/core/list-item-tag/list-item-tag.component.scss
@@ -15,6 +15,7 @@
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1px;
+        margin-right: -1px;
         line-height: 1rem;
         font-size: 0.625rem;
     }

diff --git a/components/src/core/user-menu/user-menu.component.scss b/components/src/core/user-menu/user-menu.component.scss
@@ -39,22 +39,45 @@ mat-card.pxb-user-menu-overlay {
 }
 
 .pxb-user-menu-header mat-toolbar {
-    border-top-left-radius: 4px !important;
-    border-top-right-radius: 4px !important;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
     .pxb-drawer-header-title {
         font-size: 1rem;
     }
     .pxb-drawer-header-subtitle {
         font-size: 0.875rem;
     }
 }
+.pxb-user-menu-bottomsheet .pxb-user-menu-header mat-toolbar {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+}
 
-.pxb-user-menu-overlay-backdrop {
-    background-color: unset;
+.cdk-overlay-backdrop-showing {
+    &.pxb-user-menu-overlay-backdrop {
+        background-color: unset;
+    }
+    &.pxb-user-menu-bottomsheet-backdrop {
+        background-color: #424e54;
+        opacity: 0.5;
+    }
+}
+.cdk-overlay-backdrop.pxb-user-menu-bottomsheet-backdrop,
+.cdk-overlay-backdrop.pxb-user-menu-overlay-backdrop {
+    transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.pxb-user-menu-overlay {
+.pxb-user-menu-overlay,
+.pxb-user-menu-bottomsheet {
     .mat-list-base .mat-list-item.pxb-info-list-item-content .pxb-info-list-item-title-wrapper {
         font-weight: 400;
     }
 }
+
+.pxb-user-menu-bottomsheet.mat-bottom-sheet-container {
+    padding: 0;
+}
+
+.pxb-user-menu-bottomsheet .mat-toolbar-single-row {
+    height: 4rem;
+}
diff --git a/components/src/core/user-menu/user-menu.component.spec.ts b/components/src/core/user-menu/user-menu.component.spec.ts
@@ -43,6 +43,7 @@ describe('UserMenuComponent', () => {
         }).compileComponents();
         fixture = TestBed.createComponent(UserMenuComponent);
         component = fixture.componentInstance;
+        spyOn(component, 'checkScreenSize').and.stub();
     });
 
     it('should initialize', () => {
@@ -62,6 +63,8 @@ describe('UserMenuComponent', () => {
         let menu = document.getElementsByClassName('.pxb-user-menu-overlay');
         void expect(menu).toBeTruthy();
         component.open = true;
+        component.isMenuOpen = true;
+        component.useBottomSheet = false;
         fixture.detectChanges();
         menu = document.getElementsByClassName('.pxb-user-menu-overlay');
         void expect(menu).toBeTruthy();
@@ -70,6 +73,8 @@ describe('UserMenuComponent', () => {
     it('should render the title', () => {
         component.menuTitle = 'Sample Title';
         component.open = true;
+        component.isMenuOpen = true;
+        component.useBottomSheet = false;
         fixture.detectChanges();
         const title = document.getElementsByClassName('pxb-drawer-header-title')[0] as HTMLElement;
         void expect(title.innerText).toBe('Sample Title');
@@ -79,6 +84,8 @@ describe('UserMenuComponent', () => {
         component.menuTitle = 'Sample Title';
         component.menuSubtitle = 'Sample Subtitle';
         component.open = true;
+        component.isMenuOpen = true;
+        component.useBottomSheet = false;
         fixture.detectChanges();
         const title = document.getElementsByClassName('pxb-drawer-header-subtitle')[0] as HTMLElement;
         void expect(title.innerText).toBe('Sample Subtitle');
@@ -101,19 +108,31 @@ describe('UserMenuComponent', () => {
     it('should enforce class naming conventions', () => {
         component.avatarValue = 'EM';
         component.open = true;
+        component.isMenuOpen = true;
+        component.useBottomSheet = false;
         component.menuTitle = 'Title';
         fixture.detectChanges();
         const fixtureClassList = ['.pxb-user-menu-avatar', '.pxb-user-menu-text-avatar'];
-        const overlayClassList = [
+        const menuOverlayClassList = [
             'pxb-user-menu-overlay-backdrop',
             'pxb-user-menu-overlay',
             'pxb-user-menu-header',
             'pxb-user-menu-header-avatar',
         ];
+        const bottomSheetClassList = ['pxb-user-menu-bottomsheet', 'pxb-user-menu-bottomsheet-backdrop'];
         for (const className of fixtureClassList) {
             count(fixture, className);
         }
-        for (const className of overlayClassList) {
+        for (const className of menuOverlayClassList) {
+            void expect(document.getElementsByClassName(className).length).toBe(1);
+        }
+        for (const className of bottomSheetClassList) {
+            void expect(document.getElementsByClassName(className).length).toBe(0);
+        }
+        component.useBottomSheet = true;
+        component.isMenuOpen = false;
+        component.openMenu();
+        for (const className of bottomSheetClassList) {
             void expect(document.getElementsByClassName(className).length).toBe(1);
         }
     });