Merge pull request #444 from brightlayer-ui/dev

Publish 7.0.2

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## v7.0.2 (June 8, 2022)
+
+### Fixed 
+
+- Fixed escape key permanently dismissing `<blui-drawer>` ([#426](https://github.com/brightlayer-ui/angular-component-library/issues/426)).
+- Fixed `<blui-drawer-layout>` opening side nav when transitioning to a `temporary` state ([#82](https://github.com/brightlayer-ui/angular-component-library/issues/82)).
+- Fixed escape key permanently dismissing `<blui-user-menu>` ([#434](https://github.com/brightlayer-ui/angular-component-library/issues/434)).
+- Fixed `<blui-empty-state>` not being centered when a description is not provided ([#378](https://github.com/brightlayer-ui/angular-component-library/issues/378)).
+
 ## v7.0.1 (April 15, 2022)
 
 ### Fixed

VALIDATION.md

@@ -0,0 +1,29 @@
+# Validation Steps
+
+### Manual Steps
+
+#### Showcase 
+1. Beta package integrates into showcase without errors.
+2. BLUI Data Display page renders correctly; checking ChannelValue, EmptyState, Hero, InfoListItem, ThreeLiner, and UserMenu.
+3. BLUI Navigation page renders correctly; checking Mobile Stepper.
+4. BLUI Surfaces page renders correctly; checking Collapsible Appbar, Toolbar Menu, and Scorecard. 
+5. BLUI Typography page renders correctly.
+
+#### Sandbox
+1. Verify the AppBar component renders correctly in the sandbox environment, using available knobs.
+2. Verify the ChannelValue component renders correctly in the sandbox environment, using available knobs.
+3. Verify the Drawer component renders correctly in the sandbox environment, using available knobs.
+4. Verify the DrawerLayout component renders correctly in the sandbox environment, using available knobs.
+5. Verify the Empty State component renders correctly in the sandbox environment, using available knobs.
+6. Verify the Hero component renders correctly in the sandbox environment, using available knobs.
+7. Verify the InfoListItem component renders correctly in the sandbox environment, using available knobs.
+8. Verify the ListItemTag component renders correctly in the sandbox environment, using available knobs.
+9. Verify the MobileStepper component renders correctly in the sandbox environment, using available knobs.
+10. Verify the ScoreCard component renders correctly in the sandbox environment, using available knobs.
+11. Verify the Spacer component renders correctly in the sandbox environment, using available knobs.
+12. Verify the ThreeLiner component renders correctly in the sandbox environment, using available knobs.
+13. Verify the ToolbarMenu component renders correctly in the sandbox environment, using available knobs.
+14. Verify the UserMenu component renders correctly in the sandbox environment, using available knobs.
+
+### Unit Test Count
+118

components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightlayer-ui/angular-components",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Angular components for Brightlayer UI applications",
   "scripts": {
     "ng": "ng",

components/src/core/drawer/drawer-layout/drawer-layout.component.ts

@@ -9,11 +9,13 @@ import {
     Output,
     ViewChild,
     ViewEncapsulation,
+    SimpleChanges,
 } from '@angular/core';
 import { DrawerService } from '../service/drawer.service';
 import { StateListener } from '../state-listener.component';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { Subscription } from 'rxjs';
+import { MatDrawerMode } from '@angular/material/sidenav';
 
 export type DrawerLayoutVariantType = 'permanent' | 'persistent' | 'temporary' | 'rail';
 
@@ -37,6 +39,7 @@ export type DrawerLayoutVariantType = 'permanent' | 'persistent' | 'temporary' |
                 [class.mat-elevation-z6]="!hasSideBorder()"
                 [style.width.rem]="isCollapsed() ? getCollapsedWidth() : toRem(width)"
                 [mode]="getMode()"
+                [disableClose]="true"
                 [opened]="isDrawerVisible()"
             >
                 <ng-content select="[blui-drawer]"></ng-content>
@@ -80,6 +83,10 @@ export class DrawerLayoutComponent extends StateListener implements AfterViewIni
     @ViewChild('remElement') remElement: ElementRef;
 
     isRtl = false;
+
+    /** This is true whenever the drawer is in a collapsed state & its variant has been transitioned to temporary. */
+    hasCollapsedTransitionToTemporary = false;
+
     remSizePx: number;
     dirChangeSubscription = Subscription.EMPTY;
 
@@ -101,8 +108,24 @@ export class DrawerLayoutComponent extends StateListener implements AfterViewIni
         this.isRtl = this._dir.value === 'rtl';
     }
 
-    ngOnChanges(): void {
+    ngOnChanges(simpleChanges: SimpleChanges): void {
         this.drawerService.setDrawerVariant(this.variant);
+
+        // Whenever a drawer has transitioned from a closed persistent drawer to a temporary variant,
+        // this edge case prevents the drawer from being redrawn at an opened size before it dismissed.
+        if (simpleChanges && simpleChanges.variant) {
+            const variant = simpleChanges.variant;
+            if (
+                variant.currentValue === 'temporary' &&
+                (variant.previousValue === 'rail' || (variant.previousValue === 'persistent' && !this.isOpen()))
+            ) {
+                this.hasCollapsedTransitionToTemporary = true;
+                setTimeout(() => {
+                    this.hasCollapsedTransitionToTemporary = false;
+                }, 500);
+            }
+        }
+
         this.changeDetector.detectChanges();
     }
 
@@ -111,7 +134,7 @@ export class DrawerLayoutComponent extends StateListener implements AfterViewIni
         this.dirChangeSubscription.unsubscribe();
     }
 
-    getMode(): string {
+    getMode(): MatDrawerMode {
         return this.variant === 'temporary' ? 'over' : 'side';
     }
 
@@ -155,6 +178,7 @@ export class DrawerLayoutComponent extends StateListener implements AfterViewIni
     isCollapsed(): boolean {
         if (this.variant === 'rail') return true; // Rail is always collapsed.
         if (this.variant === 'persistent') return !this.isOpen();
+        if (this.hasCollapsedTransitionToTemporary) return true;
         return false;
     }
 }

components/src/core/drawer/service/drawer.service.ts

@@ -19,7 +19,7 @@ export class DrawerService {
 
     drawerOpenObs = new Subject<boolean>();
     drawerSelectObs = new Subject<boolean>();
-    drawerActiveItemChangeObs = new Subject<boolean>();
+    drawerActiveItemChangeObs = new Subject<void>();
     drawerNewNavItemInit = new Subject<void>();
 
     hasSideBorder(): boolean {
@@ -110,7 +110,7 @@ export class DrawerService {
         this.drawerActiveItemChangeObs.next();
     }
 
-    drawerActiveItemChanges(): Observable<boolean> {
+    drawerActiveItemChanges(): Observable<void> {
         return this.drawerActiveItemChangeObs;
     }
 

components/src/core/empty-state/empty-state.component.html

@@ -6,11 +6,15 @@ <h2 class="blui-empty-state-title">
         <ng-content select="[blui-title]" *ngIf="!title"></ng-content>
         {{ title }}
     </h2>
-    <p class="blui-empty-state-description mat-subheading-2">
+    <p class="mat-subheading-2 blui-empty-state-description">
         <ng-content select="[blui-description]" *ngIf="!description"></ng-content>
         {{ description }}
     </p>
-    <div class="blui-empty-state-actions-wrapper">
+    <div
+        class="blui-empty-state-actions-wrapper"
+        [class.blui-empty-state-actions-wrapper-no-action]="!hasAction"
+        #actionsRef
+    >
         <ng-content select="[blui-actions]"></ng-content>
     </div>
 </div>

components/src/core/empty-state/empty-state.component.scss

@@ -16,10 +16,6 @@
         margin-bottom: 0;
     }
 
-    .blui-empty-state-description {
-        margin-bottom: 1rem;
-    }
-
     .blui-empty-state-title,
     .blui-empty-state-description {
         text-align: center;
@@ -38,6 +34,13 @@
         }
     }
 
+    .blui-empty-state-actions-wrapper {
+        margin-top: 1rem;
+        &.blui-empty-state-actions-wrapper-no-action {
+            margin-top: 0;
+        }
+    }
+
     .blui-empty-state-actions-wrapper .mat-button-wrapper {
         display: flex;
         align-items: center;

components/src/core/empty-state/empty-state.component.ts

@@ -1,13 +1,14 @@
 import {
     AfterViewInit,
+    ChangeDetectorRef,
     ChangeDetectionStrategy,
     Component,
     ElementRef,
     Input,
     ViewChild,
     ViewEncapsulation,
 } from '@angular/core';
-import { requireContent } from '../../utils/utils';
+import { requireContent, hasChildren } from '../../utils/utils';
 
 /**
  * [EmptyState Component](https://brightlayer-ui-components.github.io/angular/?path=/info/components-empty-state--readme)
@@ -34,8 +35,16 @@ export class EmptyStateComponent implements AfterViewInit {
     /** Used to check if an icon has been provided ngAfterViewInit */
     @ViewChild('emptyIcon') emptyIcon: ElementRef;
 
+    @ViewChild('actionsRef') actionsRef: ElementRef;
+    hasAction = false;
+
+    constructor(private readonly _ref: ChangeDetectorRef) {}
+
     ngAfterViewInit(): void {
         const required = { selector: 'emptyIcon', ref: this.emptyIcon };
         requireContent([required], this);
+
+        this.hasAction = hasChildren(this.actionsRef);
+        this._ref.detectChanges();
     }
 }

components/src/core/user-menu/user-menu.component.ts

@@ -78,6 +78,7 @@ import { requireInput } from '../../utils/utils';
 
         <ng-template
             cdkConnectedOverlay
+            (overlayKeydown)="dismissViaEscape($event)"
             (backdropClick)="onClickMenuBackdrop()"
             [cdkConnectedOverlayPush]="true"
             [cdkConnectedOverlayHasBackdrop]="true"
@@ -215,16 +216,26 @@ export class UserMenuComponent implements OnInit, OnChanges, OnDestroy {
             hasBackdrop: true,
         });
 
-        bottomSheetRef.afterDismissed().subscribe((openMenu: boolean) => {
+        bottomSheetRef.afterDismissed().subscribe((openMenu: boolean | undefined) => {
             this.isBottomSheetDismissing = false;
-            this.isMenuOpen = openMenu;
+            this.isMenuOpen = Boolean(openMenu);
             this._ref.detectChanges();
         });
 
+        bottomSheetRef.keydownEvents().subscribe((key: KeyboardEvent) => {
+            this.dismissViaEscape(key);
+        });
+
         bottomSheetRef.backdropClick().subscribe(() => {
             this.isBottomSheetDismissing = true;
             this.openChange.emit(false);
             this.backdropClick.emit();
         });
     }
+
+    dismissViaEscape(e: KeyboardEvent): void {
+        if (e && e.key && e.key.toLowerCase() === 'escape') {
+            this.openChange.emit(false);
+        }
+    }
 }

components/src/utils/utils.ts

@@ -25,7 +25,7 @@ export function requireContent(contentPairs: ContentPair[], component: any): voi
     });
 }
 
-function hasChildren(el: ElementRef): boolean {
+export function hasChildren(el: ElementRef): boolean {
     return el.nativeElement.children && el.nativeElement.children.length > 0;
 }
 

components/yarn.lock

@@ -2212,9 +2212,9 @@ [email protected], assert-plus@^1.0.0:
   integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
 async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 

demos/storybook/yarn.lock

@@ -7282,9 +7282,9 @@ events@^3.0.0, events@^3.2.0:
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
 eventsource@^1.0.7:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.1.0.tgz#00e8ca7c92109e94b0ddf32dac677d841028cfaf"
-  integrity sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.1.1.tgz#4544a35a57d7120fba4fa4c86cb4023b2c09df2f"
+  integrity sha512-qV5ZC0h7jYIAOhArFJgSfdyz6rALJyb270714o7ZtNnw2WSJ+eexhKtE0O8LYPRsHZHf2osHKZBxGPvm3kPkCA==
   dependencies:
     original "^1.0.0"
 
@@ -15864,9 +15864,9 @@ url-loader@^2.0.1:
     schema-utils "^2.5.0"
 
 url-parse@^1.4.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862"
-  integrity sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
   dependencies:
     querystringify "^2.1.1"
     requires-port "^1.0.0"

docs/EmptyState.md

@@ -66,11 +66,12 @@ The following child elements are projected into `<blui-empty-state>`:
 
 Each Brightlayer UI component has classes which can be used to override component styles:
 
-| Name                                | Description                              |
-| ----------------------------------- | ---------------------------------------- |
-| blui-empty-state                    | Styles applied to the tag                |
-| blui-empty-state-content            | Styles applied to the root element       |
-| blui-empty-state-empty-icon-wrapper | Styles applied to the icon container     |
-| blui-empty-state-title              | Styles applied to the title @Input       |
-| blui-empty-state-description        | Styles applied to the description @Input |
-| blui-empty-state-actions-wrapper    | Styles applied to the actions container  |
+| Name                                       | Description                                  |
+|--------------------------------------------|----------------------------------------------|
+| blui-empty-state                           | Styles applied to the tag                    |
+| blui-empty-state-content                   | Styles applied to the root element           |
+| blui-empty-state-empty-icon-wrapper        | Styles applied to the icon container         |
+| blui-empty-state-title                     | Styles applied to the title @Input           |
+| blui-empty-state-description               | Styles applied to the description @Input     |
+| blui-empty-state-actions-wrapper           | Styles applied to the actions container      |
+| blui-empty-state-actions-wrapper-no-action | Styles applied to an empty actions container | 

yarn.lock

@@ -35,9 +35,9 @@ asap@^2.0.0:
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 
 async@^2.6.1:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
@@ -207,9 +207,9 @@ lodash@^4.17.14:
     brace-expansion "^1.1.7"
 
 minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
 mkdirp@^0.3.5:
   version "0.3.5"