Merge pull request #350 from pxblue/dev

Publish v6.0.0

.circleci/config.yml

@@ -5,7 +5,7 @@ orbs:
 jobs:
     build_library:
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: circleci/node:14.17-browsers
         steps:
             - checkout
             - restore_cache:
@@ -55,7 +55,7 @@ jobs:
     coverage_report:
         working_directory: ~/angular-component-library
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: circleci/node:14.17-browsers
         steps:
             - checkout
             - attach_workspace:
@@ -67,7 +67,7 @@ jobs:
     # Builds the Storybook app using @pxblue/angular-components persisted in /dist folder.
     build_storybook:
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: circleci/node:14.17-browsers
         environment:
             - MASTER_BRANCH: master
             - DEV_BRANCH: dev
@@ -128,7 +128,7 @@ jobs:
     # Builds the Showcase app using @pxblue/angular-components persisted in /dist folder.
     build_showcase:
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: circleci/node:14.17-browsers
         environment:
             - MASTER_BRANCH: master
         steps:
@@ -166,7 +166,7 @@ jobs:
 
     deploy_storybook:
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: circleci/node:14.17-browsers
         environment:
             - MASTER_BRANCH: master
             - DEV_BRANCH: dev
@@ -213,7 +213,7 @@ jobs:
 
     publish:
       docker:
-        - image: circleci/node:12.9.1-browsers
+        - image: circleci/node:14.17-browsers
       steps:
         - checkout
         - attach_workspace:
@@ -229,7 +229,7 @@ jobs:
               yarn publish:package -b $CIRCLE_BRANCH
     tag:
       docker:
-        - image: circleci/node:12.9.1-browsers
+        - image: circleci/node:14.17-browsers
       steps:
         - checkout
         - gh/setup

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## v6.0.0 (September 30, 2021)
+
+### Added
+
+-   Added new property `unitSpace` to `<pxb-channel-value>` and `<pxb-hero>` to manage spacing between the value and units.
+
+### Changed
+
+-   Changed `<pxb-user-menu>` `open` property to be required instead of optional.
+-   Changed `<pxb-user-menu>` component to use a new `UserMenuHeaderComponent` in the menu overlay instead of using a `DrawerHeaderComponent`.
+
+
+### Fixed
+
+-   Fixed stepper spacing in `<pxb-mobile-stepper>` when Back and Next buttons are uneven width.
+-   Fixed bug in `<pxb-user-menu>` that prevented the bottom sheet from rendering when `open` was manually set to `true`.
+-   Fixed bug in `<pxb-user-menu>` where dismissing a bottomsheet via backdrop click did not emit a `backdropClick` event.
+-   Fixed bug in `<pxb-app-bar>` that prevented class overrides on the root element.
+-   Fixed bug in `<pxb-app-bar>` so scroll listeners can no longer attempt to measure `undefined` elements' scroll distance. 
+
 ## v5.0.1 (July 30, 2021)
 
 ### Added

README.md

@@ -50,6 +50,8 @@ The following table outlines which versions of Angular and PX Blue resources wil
 | `^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`                      |
+| `^5.0.0`                   | `^6.1.0`               | `^11.x`                      |
+| `^6.0.0`                   | `^6.3.0`               | `^12.x`                      |
 
 ## Running the demo projects
 

components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pxblue/angular-components",
-    "version": "5.0.1",
+    "version": "6.0.0",
     "description": "Angular components for PX Blue applications",
     "scripts": {
         "ng": "ng",
@@ -18,44 +18,44 @@
     },
     "peerDependencies": {},
     "devDependencies": {
-        "@angular-devkit/build-angular": "0.1102.13",
-        "@angular/animations": "~11.2.9",
-        "@angular/cdk": "^11.2.8",
-        "@angular/cli": "~11.2.8",
-        "@angular/common": "~11.2.9",
-        "@angular/compiler": "~11.2.9",
-        "@angular/compiler-cli": "~11.2.9",
-        "@angular/core": "~11.2.9",
-        "@angular/forms": "^11.2.9",
-        "@angular/material": "^11.2.8",
-        "@angular/platform-browser": "~11.2.9",
-        "@angular/platform-browser-dynamic": "~11.2.9",
-        "@pxblue/eslint-config": "^2.0.1",
-        "@pxblue/ng-progress-icons": "^1.1.3",
-        "@pxblue/prettier-config": "^1.0.2",
-        "@types/jasmine": "~3.6.0",
-        "@types/jasminewd2": "~2.0.8",
+        "@angular-devkit/build-angular": "~12.2.4",
+        "@angular/animations": "~12.2.4",
+        "@angular/cdk": "^12.2.4",
+        "@angular/cli": "~12.2.4",
+        "@angular/common": "~12.2.4",
+        "@angular/compiler": "~12.2.4",
+        "@angular/compiler-cli": "~12.2.4",
+        "@angular/core": "~12.2.4",
+        "@angular/forms": "^12.2.4",
+        "@angular/material": "^12.2.4",
+        "@angular/platform-browser": "~12.2.4",
+        "@angular/platform-browser-dynamic": "~12.2.4",
+        "@pxblue/eslint-config": "^2.0.5",
+        "@pxblue/ng-progress-icons": "^1.2.1",
+        "@pxblue/prettier-config": "^1.0.3",
+        "@types/jasmine": "~3.9.0",
+        "@types/jasminewd2": "~2.0.10",
         "@types/node": "^12.11.1",
-        "@typescript-eslint/eslint-plugin": "^4.4.0",
-        "@typescript-eslint/parser": "^4.4.0",
-        "codecov": "^3.8.2",
-        "codelyzer": "^6.0.0",
-        "eslint": "^7.10.0",
-        "eslint-config-prettier": "^6.12.0",
-        "jasmine-core": "~3.6.0",
-        "jasmine-spec-reporter": "~5.0.0",
-        "karma": "^6.3.3",
+        "@typescript-eslint/eslint-plugin": "^4.30.0",
+        "@typescript-eslint/parser": "^4.30.0",
+        "codecov": "^3.8.3",
+        "codelyzer": "^6.0.2",
+        "eslint": "^7.32.0",
+        "eslint-config-prettier": "^8.3.0",
+        "jasmine-core": "~3.9.0",
+        "jasmine-spec-reporter": "~6.0.0",
+        "karma": "^6.3.4",
         "karma-chrome-launcher": "~3.1.0",
         "karma-coverage": "^2.0.3",
-        "karma-jasmine": "~4.0.0",
-        "karma-jasmine-html-reporter": "^1.6.0",
-        "ng-packagr": "^11.2.4",
-        "prettier": "^1.19.1",
-        "rxjs": "^6.5.4",
-        "ts-node": "~8.6.2",
-        "typescript": "4.0.3",
-        "yarn-audit-fix": "^6.3.4",
-        "zone.js": "~0.10.2"
+        "karma-jasmine": "~4.0.1",
+        "karma-jasmine-html-reporter": "^1.7.0",
+        "ng-packagr": "^12.2.0",
+        "prettier": "^2.3.2",
+        "rxjs": "~6.6.0",
+        "ts-node": "~10.2.1",
+        "typescript": "4.3.5",
+        "yarn-audit-fix": "^6.4.4",
+        "zone.js": "~0.11.4"
     },
     "prettier": "@pxblue/prettier-config",
     "repository": {

components/src/core/app-bar/app-bar.component.spec.ts

@@ -33,6 +33,8 @@ describe('AppBarComponent', () => {
     it('should enforce class naming conventions', () => {
         fixture.detectChanges();
         const classList = [
+            '.pxb-app-bar',
+            '.mat-elevation-z4',
             '.pxb-app-bar-content',
             '.pxb-app-bar-background',
             '.pxb-app-bar-collapsed',

components/src/core/app-bar/app-bar.component.ts

@@ -4,7 +4,6 @@ import {
     ChangeDetectorRef,
     Component,
     EventEmitter,
-    HostBinding,
     Input,
     OnChanges,
     OnDestroy,
@@ -28,6 +27,9 @@ import { Element } from '@angular/compiler';
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     styleUrls: ['./app-bar.component.scss'],
+    host: {
+        class: 'pxb-app-bar mat-elevation-z4',
+    },
     template: `
         <mat-toolbar
             [color]="color"
@@ -87,8 +89,6 @@ export class AppBarComponent implements OnInit, AfterViewInit, OnChanges, OnDest
     /** Event emitter for when the appbar opens or closes.  Emits a boolean that indicates whether the AppBar is expanded. */
     @Output() collapsedChange: EventEmitter<boolean> = new EventEmitter();
 
-    @HostBinding('class') @Input('class') classList = 'pxb-app-bar mat-elevation-z4';
-
     scrollEl;
 
     isCollapsed = false;
@@ -124,17 +124,20 @@ export class AppBarComponent implements OnInit, AfterViewInit, OnChanges, OnDest
         this._setScrollEl();
         this._resizeOnModeChange();
         this.viewInit = true;
-        this.scrollListener = fromEvent(this.scrollEl, 'scroll')
-            .pipe(throttle(() => interval(10)))
-            .subscribe(() => {
-                this._resizeEl();
-            });
-
-        this.resizeListener = fromEvent(window, 'resize')
-            .pipe(throttle(() => interval(10)))
-            .subscribe(() => {
-                this._resizeEl();
-            });
+
+        if (this.scrollEl) {
+            this.scrollListener = fromEvent(this.scrollEl, 'scroll')
+                .pipe(throttle(() => interval(10)))
+                .subscribe(() => {
+                    this._resizeEl();
+                });
+
+            this.resizeListener = fromEvent(window, 'resize')
+                .pipe(throttle(() => interval(10)))
+                .subscribe(() => {
+                    this._resizeEl();
+                });
+        }
     }
 
     ngOnDestroy(): void {

components/src/core/channel-value/channel-value.component.scss

@@ -1,7 +1,31 @@
 /* RTL */
-[dir='rtl'] .pxb-channel-value-content .pxb-channel-value-icon-wrapper {
-    margin-right: 0;
-    margin-left: 0.25rem;
+[dir='rtl'] {
+    .pxb-channel-value-content {
+        .pxb-channel-value-icon-wrapper {
+            margin-right: 0;
+            margin-left: 0.35em;
+        }
+
+        .pxb-channel-value-value + .pxb-channel-value-units-suffix {
+            margin-left: 0;
+            margin-right: 0.25em;
+        }
+
+        .pxb-channel-value-units-prefix + .pxb-channel-value-value {
+            margin-left: 0;
+            margin-right: 0.25em;
+        }
+
+        .pxb-channel-value-value.pxb-channel-value-remove-space + .pxb-channel-value-units-suffix {
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        .pxb-channel-value-units-prefix + .pxb-channel-value-value.pxb-channel-value-remove-space {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
 }
 
 .pxb-channel-value {
@@ -24,10 +48,26 @@
         font-weight: 600;
     }
 
+    .pxb-channel-value-value + .pxb-channel-value-units-suffix {
+        margin-left: 0.25em;
+    }
+
+    .pxb-channel-value-units-prefix + .pxb-channel-value-value {
+        margin-left: 0.25em;
+    }
+
+    .pxb-channel-value-value.pxb-channel-value-remove-space + .pxb-channel-value-units-suffix {
+        margin-left: 0;
+    }
+
+    .pxb-channel-value-units-prefix + .pxb-channel-value-value.pxb-channel-value-remove-space {
+        margin-left: 0;
+    }
+
     .pxb-channel-value-icon-wrapper {
         font-size: inherit;
         display: block;
-        margin-right: 0.25rem;
+        margin-right: 0.35em;
         &:empty {
             display: none;
         }