Merge pull request #247 from pxblue/dev

[NG-#1B]Release 4.2.0
etn-ccis · Mar 31, 2021 · a04b448 · a04b448
2 parents 763d0e8 + 55a2a86
commit a04b448
Show file tree

Hide file tree

Showing 46 changed files with 399 additions and 183 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Change Log
 
+## v4.2.0
+
+### Added
+
+-   Added new property `color` to `<pxb-dropdown-toolbar>`.
+-   Added new property `color` to `<pxb-drawer-header>`.
+
+### Changed
+
+-   Changed vertical margins to use rem units so they scale with system font-size
+-   Updated `<pxb-score-card>` header and subtitle font size to match DSM.
+
 ## v4.1.0
 
 ### Added
@@ -8,17 +20,17 @@
 -   Adds new class `pxb-dropdown-toolbar-subtitle-icon` to `<pxb-dropdown-toolbar>`
 -   Adds lighter font weight to `<pxb-info-list-item>` placed inside `<pxb-user-menu>`.
 -   Adds a shadow to the `<pxb-user-menu>` when opened.
--   Adds new property `openOnHoverDelay` to `<pxb-drawer>` to alter open-on-hover delay for closed persistent drawers. 
+-   Adds new property `openOnHoverDelay` to `<pxb-drawer>` to alter open-on-hover delay for closed persistent drawers.
 
 ### Fixed
 
 -   Fixes bug in `<pxb-mobile-stepper>` which makes component span 100% of parent width.
 -   Fixes header height bug which affected `<pxb-drawer-header>` in Safari.
 -   Fixes misalignment of `<pxb-info-list-item>`'s right content.
 -   Fixes RTL styles in `<pxb-dropdown-toolbar>`.
--   Fixes uneven vertical alignment of icon and text in `<pxb-empty-state>` action buttons. 
+-   Fixes uneven vertical alignment of icon and text in `<pxb-empty-state>` action buttons.
 -   Fixes `<pxb-user-menu>` menu header avatar offset.
--   Fixes `<pxb-drawer>` `sideBorder` prop to use `mat-elevation` class.  
+-   Fixes `<pxb-drawer>` `sideBorder` prop to use `mat-elevation` class.
 
 ### Removed
 

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

diff --git a/components/src/core/channel-value/channel-value.component.scss b/components/src/core/channel-value/channel-value.component.scss
@@ -1,7 +1,7 @@
 /* RTL */
 [dir='rtl'] .pxb-channel-value-content .pxb-channel-value-icon-wrapper {
     margin-right: 0;
-    margin-left: 4px;
+    margin-left: 0.25rem;
 }
 
 .pxb-channel-value {
@@ -27,7 +27,7 @@
     .pxb-channel-value-icon-wrapper {
         font-size: inherit;
         display: block;
-        margin-right: 4px;
+        margin-right: 0.25rem;
         &:empty {
             display: none;
         }

diff --git a/components/src/core/drawer/drawer-body/nav-group/drawer-nav-group.component.ts b/components/src/core/drawer/drawer-body/nav-group/drawer-nav-group.component.ts
@@ -28,8 +28,8 @@ export type DrawerNavGroup = {
             }
             .pxb-drawer-nav-group-content .pxb-drawer-nav-group-title {
                 font-weight: 600;
-                height: 48px;
-                line-height: 48px;
+                height: 3rem;
+                line-height: 3rem;
                 padding: 0 16px;
                 overflow: hidden;
                 white-space: nowrap;

diff --git a/components/src/core/drawer/drawer-body/nav-item/drawer-nav-item.component.scss b/components/src/core/drawer/drawer-body/nav-item/drawer-nav-item.component.scss
@@ -1,9 +1,11 @@
+@import '../../../utility/utility';
+
 /* RTL */
 [dir='rtl'] .pxb-drawer-nav-item-content {
     .pxb-drawer-nav-item-active-highlight {
         right: 0;
         &.pxb-drawer-nav-item-active-round {
-            border-radius: 24px 0 0 24px;
+            border-radius: 1.5rem 0 0 1.5rem;
         }
     }
     .pxb-drawer-nav-item-depth-3 {
@@ -24,8 +26,7 @@ pxb-drawer-nav-item {
 }
 
 .pxb-drawer-condensed-rail .pxb-drawer-nav-item-content .pxb-drawer-nav-item-rail {
-    width: 56px;
-    min-height: 56px;
+    min-height: 3.5rem;
     .pxb-drawer-nav-item-rail-text {
         display: none;
     }
@@ -37,12 +38,12 @@ pxb-drawer-nav-item {
     user-select: none;
 
     &.pxb-drawer-nav-item-compact {
-        margin-top: 8px;
-        margin-bottom: 8px;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
         .pxb-info-list-item-content {
             &.pxb-info-list-item-dense,
             .mat-list-item-content {
-                height: 40px !important;
+                height: 2.5rem !important;
             }
         }
     }
@@ -91,8 +92,8 @@ pxb-drawer-nav-item {
         left: 0;
         top: 0;
         &.pxb-drawer-nav-item-active-round {
-            width: calc(100% - 8px);
-            border-radius: 0 24px 24px 0;
+            width: calc(100% - 0.5rem);
+            border-radius: 0 1.5rem 1.5rem 0;
         }
         &.pxb-drawer-nav-item-active-square {
             border-radius: 0;
@@ -102,6 +103,7 @@ pxb-drawer-nav-item {
 
     .pxb-drawer-nav-item-expand-icon {
         transition: 300ms;
+        @include scale-icon-content();
         &.pxb-drawer-nav-item-expanded {
             transform: rotate(180deg);
         }
@@ -110,25 +112,28 @@ pxb-drawer-nav-item {
         z-index: 1;
         display: flex;
         flex-direction: column;
+        .mat-icon {
+            @include scale-icon-content();
+        }
     }
     .pxb-drawer-nav-item-rail {
         z-index: 1;
         display: flex;
         flex-direction: column;
-        min-height: 72px;
-        width: 72px;
+        min-height: 4.5rem;
+        width: calc(3.5rem + 16px);
         justify-content: center;
         align-items: center;
-        padding: 16px 8px;
+        padding: 1rem 8px;
         box-sizing: border-box;
         cursor: pointer;
         text-align: center;
         * {
             z-index: 1; // Keep items above the highlight.
         }
         .pxb-drawer-nav-item-rail-text {
-            font-size: 12px;
-            line-height: 16px;
+            font-size: 0.75rem;
+            line-height: 1rem;
             word-break: break-word;
             hyphens: auto;
         }
@@ -139,9 +144,6 @@ pxb-drawer-nav-item {
     .pxb-info-list-item .mat-list-item-content {
         padding-left: 16px;
     }
-    /*pxb-info-list-item .pxb-info-list-item .mat-list-text .pxb-info-list-item-title-wrapper {
-        font-weight: 400;
-    }*/
     .mat-expansion-panel-body {
         padding: 0;
     }

diff --git a/components/src/core/drawer/drawer-header/drawer-header.component.scss b/components/src/core/drawer/drawer-header/drawer-header.component.scss
@@ -1,13 +1,14 @@
+@import '../../utility/utility';
+
 /* RTL */
 [dir='rtl'] .pxb-drawer-header-content {
     .pxb-drawer-header-icon-wrapper {
-        margin-right: 0;
-        margin-left: 16px;
+        margin-right: -0.5rem;
+        margin-left: calc(24px + (1rem - 16px) / 2);
     }
     &.pxb-drawer-header-no-icon .pxb-drawer-header-icon-wrapper {
         margin-right: 0;
         margin-left: 0;
-        margin-left: 0;
     }
 }
 
@@ -18,12 +19,9 @@
     position: relative;
     overflow: hidden;
     display: flex;
+    height: 4rem;
 
     &.mat-toolbar-single-row.mat-toolbar {
-        padding-right: 8px;
-        padding-left: 8px;
-    }
-    &.rail.mat-toolbar-single-row.mat-toolbar {
         padding-right: 16px;
         padding-left: 16px;
     }
@@ -55,20 +53,21 @@
         display: flex;
         align-items: center;
         z-index: 1;
-        margin-right: 16px;
+        margin-right: calc(24px + (1rem - 16px) / 2); // Intense math: default needs 24, xLarge needs 28
+        margin-left: -0.5rem;
+        width: 2.5rem;
+        @include scale-icon-button();
     }
     &.pxb-drawer-header-no-icon .pxb-drawer-header-icon-wrapper {
         margin-right: 0;
     }
 
     .pxb-drawer-header-title-wrapper {
         display: flex;
-        padding-left: 8px;
-        padding-right: 8px;
         justify-content: center;
         align-self: stretch;
         flex-direction: column;
-        width: calc(100% - 56px);
+        width: calc(100% - 3.5rem);
         box-sizing: border-box;
         z-index: 1;
 
@@ -82,7 +81,7 @@
         .pxb-drawer-header-subtitle {
             font-weight: 300;
             line-height: 1.3rem;
-            margin-top: -2px;
+            margin-top: -0.125rem;
             overflow: hidden;
             text-overflow: ellipsis;
             &.mat-subheading-2 {
@@ -91,3 +90,9 @@
         }
     }
 }
+
+@media (max-width: 599px) {
+    .pxb-drawer-header-content {
+        height: 3.5rem;
+    }
+}
diff --git a/components/src/core/drawer/drawer-header/drawer-header.component.ts b/components/src/core/drawer/drawer-header/drawer-header.component.ts
@@ -19,6 +19,7 @@ import { isEmptyView } from '../../../utils/utils';
         <mat-toolbar
             class="pxb-drawer-header-content"
             [class.rail]="isRail()"
+            [color]="color"
             [class.pxb-drawer-header-no-icon]="isEmpty(iconEl)"
         >
             <div class="pxb-drawer-header-background"></div>
@@ -44,6 +45,7 @@ export class DrawerHeaderComponent extends StateListener {
     @Input() subtitle: string;
     @Input() title: string;
     @Input() divider = false;
+    @Input() color: 'primary' | 'accent' | 'warn' | undefined = 'primary';
     @ViewChild('icon', { static: true }) iconEl: ElementRef;
 
     isEmpty = (el: ElementRef): boolean => isEmptyView(el);

diff --git a/components/src/core/drawer/drawer-layout/drawer-layout.component.scss b/components/src/core/drawer/drawer-layout/drawer-layout.component.scss
@@ -8,9 +8,6 @@ $transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
 /* RTL */
 [dir='rtl'] .pxb-drawer-layout-content .mat-drawer-side {
     border-left: 0; // Border-left is provided by the Drawer component.
-    .pxb-drawer-layout-sidenav.pxb-drawer-layout-shadow {
-        box-shadow: 0 0 -4px 0 #424e54;
-    }
 }
 
 .pxb-drawer-layout-content {
@@ -36,10 +33,6 @@ $transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
         }
     }
 
-    .pxb-drawer-layout-sidenav.pxb-drawer-layout-shadow {
-        box-shadow: 0 0 4px 0 #424e54;
-    }
-
     .pxb-drawer-layout-sidenav,
     .pxb-drawer-layout-nav-content {
         min-height: 100%;

diff --git a/components/src/core/drawer/drawer-layout/drawer-layout.component.ts b/components/src/core/drawer/drawer-layout/drawer-layout.component.ts
@@ -2,10 +2,12 @@ import {
     AfterViewInit,
     ChangeDetectorRef,
     Component,
+    ElementRef,
     EventEmitter,
     Input,
     OnChanges,
     Output,
+    ViewChild,
     ViewEncapsulation,
 } from '@angular/core';
 import { DrawerService } from '../service/drawer.service';
@@ -25,8 +27,8 @@ export type DrawerLayoutVariantType = 'permanent' | 'persistent' | 'temporary' |
                 class="pxb-drawer-layout-sidenav"
                 [fixedInViewport]="false"
                 [class.pxb-drawer-layout-smooth]="variant !== 'temporary'"
-                [class.pxb-drawer-layout-shadow]="!hasSideBorder()"
-                [style.width.px]="isCollapsed() ? getCollapsedWidth() : width"
+                [class.mat-elevation-z6]="!hasSideBorder()"
+                [style.width.rem]="isCollapsed() ? getCollapsedWidth() : toRem(width)"
                 [mode]="getMode()"
                 [opened]="isDrawerVisible()"
             >
@@ -35,11 +37,12 @@ export type DrawerLayoutVariantType = 'permanent' | 'persistent' | 'temporary' |
             <div
                 class="pxb-drawer-layout-nav-content"
                 [class.pxb-drawer-layout-smooth]="variant !== 'temporary'"
-                [style.marginRight.px]="isRtl ? getContentMargin() : 0"
-                [style.marginLeft.px]="isRtl ? 0 : getContentMargin()"
+                [style.marginRight.rem]="isRtl ? getContentMargin() : 0"
+                [style.marginLeft.rem]="isRtl ? 0 : getContentMargin()"
             >
                 <ng-content select="[pxb-content]"></ng-content>
             </div>
+            <div style="display:none; font-size: 1rem" #remElement></div>
         </mat-sidenav-container>
     `,
     host: {
@@ -50,8 +53,10 @@ export class DrawerLayoutComponent extends StateListener implements AfterViewIni
     @Input() variant: DrawerLayoutVariantType;
     @Input() width = 350;
     @Output() backdropClick: EventEmitter<void> = new EventEmitter();
+    @ViewChild('remElement') remElement: ElementRef;
 
     isRtl = false;
+    remSizePx: number;
     dirChangeSubscription = Subscription.EMPTY;
 
     content: HTMLElement;
@@ -86,6 +91,14 @@ export class DrawerLayoutComponent extends StateListener implements AfterViewIni
         return this.variant === 'temporary' ? 'over' : 'side';
     }
 
+    toRem(px: number): number {
+        if (this.remElement && this.remElement.nativeElement) {
+            const style = getComputedStyle(this.remElement.nativeElement);
+            this.remSizePx = Number(style.fontSize.split('px')[0]);
+        }
+        return px / (this.remSizePx || 16);
+    }
+
     hasSideBorder(): boolean {
         return this.drawerService.hasSideBorder();
     }
@@ -105,11 +118,13 @@ export class DrawerLayoutComponent extends StateListener implements AfterViewIni
         if (this.variant === 'temporary') {
             return 0;
         }
-        return this.isCollapsed() ? this.getCollapsedWidth() : this.width;
+        return this.isCollapsed() ? this.getCollapsedWidth() : this.toRem(this.width);
     }
 
     getCollapsedWidth(): number {
-        return this.variant === 'rail' && !this.drawerService.isRailCondensed() ? 72 : 56;
+        return this.variant === 'rail' && !this.drawerService.isRailCondensed()
+            ? 3.5 + this.toRem(16) // Rail (default)
+            : 1.5 + this.toRem(32); //  Rail (condensed) || closed persistent
     }
 
     // Is the drawer condensed.

diff --git a/components/src/core/drawer/drawer.component.scss b/components/src/core/drawer/drawer.component.scss
@@ -1,5 +1,5 @@
 $width-open: 360px;
-$width-closed: 56px;
+$width-closed: calc(1.5rem + 16px * 2);
 $transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
 .pxb-drawer-layout .pxb-drawer-content {
@@ -42,7 +42,9 @@ $transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
         border-right: 0;
     }
 
-    &.pxb-drawer-collapse {
+    /* Drawer condensed-rail & Drawer closed (persistent) are the same width. */
+    &.pxb-drawer-collapse,
+    &.pxb-drawer-condensed-rail .pxb-drawer-nav-item-content .pxb-drawer-nav-item-rail {
         width: $width-closed;
     }
 

diff --git a/components/src/core/drawer/drawer.component.ts b/components/src/core/drawer/drawer.component.ts
@@ -19,7 +19,7 @@ import { Subscription } from 'rxjs';
         <div
             class="pxb-drawer-content"
             [class.pxb-drawer-side-border]="sideBorder"
-            [class.mat-elevation-z4]="!sideBorder"
+            [class.mat-elevation-z6]="!sideBorder"
             [class.pxb-drawer-condensed-rail]="condensed"
             [class.pxb-drawer-collapse]="!isOpen()"
             [class.pxb-drawer-temp-variant]="isTemporaryVariant()"