feat(theming): Add critical color to theme. Closes APM-304694.

dynatrace-oss · Jun 2, 2021 · 2537701 · 2537701
1 parent bbadf67
commit 2537701
Show file tree

Hide file tree

Showing 25 changed files with 145 additions and 26 deletions.
diff --git a/apps/dev/src/icon/icon-demo.component.html b/apps/dev/src/icon/icon-demo.component.html
@@ -5,3 +5,4 @@
 <dt-icon name="user-uem" color="cta"></dt-icon>
 <dt-icon name="user-uem" color="light"></dt-icon>
 <dt-icon name="user-uem" color="dark"></dt-icon>
+<dt-icon name="user-uem" color="critical"></dt-icon>
diff --git a/apps/dev/src/indicator/indicator-demo.component.ts b/apps/dev/src/indicator/indicator-demo.component.ts
@@ -54,6 +54,15 @@ const TESTDATA: ThreadNode[] = [
       },
     ],
   },
+  {
+    name: 'hz.hzInstance_2_cluster.thread',
+    icon: 'process',
+    threadlevel: 'S0',
+    totalTimeConsumption: 250,
+    waiting: 157,
+    running: 20,
+    blocked: 30,
+  },
   {
     name: 'jetty',
     icon: 'process',
@@ -129,7 +138,7 @@ const TESTDATA: ThreadNode[] = [
         <dt-cell
           *dtCellDef="let row"
           [dtIndicator]="row.blocked > 0"
-          dtIndicatorColor="error"
+          [dtIndicatorColor]="indicatorColor(row.blocked)"
         >
           {{ row.blocked }}ms
         </dt-cell>
@@ -216,6 +225,10 @@ export class IndicatorDemo {
     this.dataSource.data = TESTDATA;
   }
 
+  indicatorColor(blocked: number): 'error' | 'critical' | null {
+    return blocked > 20 ? 'critical' : blocked > 0 ? 'error' : null;
+  }
+
   hasChild = (_: number, _nodeData: ThreadFlatNode) => _nodeData.expandable;
 
   transformer = (node: ThreadNode, level: number): ThreadFlatNode => {

diff --git a/libs/barista-components/core/src/common-behaviours/color.ts b/libs/barista-components/core/src/common-behaviours/color.ts
@@ -37,6 +37,7 @@ export type DtThemePalette =
   | 'cta'
   | 'recovered'
   | 'neutral'
+  | 'critical'
   | undefined;
 
 /** Mixin to augment a directive with a `color` property. */

diff --git a/libs/barista-components/core/src/theming/_theming-core.scss b/libs/barista-components/core/src/theming/_theming-core.scss
@@ -39,7 +39,8 @@
   $error-palette,
   $recovered-palette,
   $cta-palette,
-  $neutral-palette
+  $neutral-palette,
+  $critical-pallete
 ) {
   @return (
     main: $main-palette,
@@ -49,7 +50,8 @@
     recovered: $recovered-palette,
     cta: $cta-palette,
     neutral: $neutral-palette,
-    is-dark: false
+    is-dark: false,
+    critical: $critical-pallete
   );
 }
 
@@ -62,7 +64,8 @@
   $error-palette,
   $recovered-palette,
   $cta-palette,
-  $neutral-palette
+  $neutral-palette,
+  $critical-pallete
 ) {
   @return (
     main: $main-palette,
@@ -72,7 +75,8 @@
     recovered: $recovered-palette,
     cta: $cta-palette,
     neutral: $neutral-palette,
-    is-dark: true
+    is-dark: true,
+    critical: $critical-pallete
   );
 }
 

diff --git a/libs/barista-components/core/src/theming/theme-definitions/_blue-theme.scss b/libs/barista-components/core/src/theming/theme-definitions/_blue-theme.scss
@@ -16,7 +16,8 @@ $dt-blue-theme-light: dt-theme-light(
   /* recovered */
     dt-theme-palette($green-700, $green-800, $green-900, $green-100),
   /* cta */ dt-theme-palette($green-600, $green-700, $green-800, $green-100),
-  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100)
+  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100),
+  /* critical */ dt-theme-palette($red-700, $red-800, $red-900, $red-200)
 );
 
 $dt-blue-theme-dark: dt-theme-dark(
@@ -34,7 +35,8 @@ $dt-blue-theme-dark: dt-theme-dark(
   /* recovered */
     dt-theme-palette($green-700, $green-600, $green-500, $green-100),
   /* cta */ dt-theme-palette($green-500, $green-400, $green-300, $green-100),
-  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100)
+  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100),
+  /* critical */ dt-theme-palette($red-700, $red-600, $red-500, $red-200)
 );
 
 @include dt-register-theme(

diff --git a/libs/barista-components/core/src/theming/theme-definitions/_purple-theme.scss b/libs/barista-components/core/src/theming/theme-definitions/_purple-theme.scss
@@ -17,7 +17,8 @@ $dt-purple-theme-light: dt-theme-light(
   /* recovered */
     dt-theme-palette($green-700, $green-800, $green-900, $green-100),
   /* cta */ dt-theme-palette($green-600, $green-700, $green-800, $green-100),
-  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100)
+  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100),
+  /* critical */ dt-theme-palette($red-700, $red-800, $red-900, $red-200)
 );
 
 $dt-purple-theme-dark: dt-theme-dark(
@@ -36,7 +37,8 @@ $dt-purple-theme-dark: dt-theme-dark(
   /* recovered */
     dt-theme-palette($green-700, $green-600, $green-500, $green-100),
   /* cta */ dt-theme-palette($green-500, $green-400, $green-300, $green-100),
-  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100)
+  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100),
+  /* critical */ dt-theme-palette($red-700, $red-600, $red-500, $red-200)
 );
 
 @include dt-register-theme(

diff --git a/libs/barista-components/core/src/theming/theme-definitions/_royalblue-theme.scss b/libs/barista-components/core/src/theming/theme-definitions/_royalblue-theme.scss
@@ -22,7 +22,8 @@ $dt-royalblue-theme-light: dt-theme-light(
   /* recovered */
     dt-theme-palette($green-700, $green-800, $green-900, $green-100),
   /* cta */ dt-theme-palette($green-600, $green-700, $green-800, $green-100),
-  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100)
+  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100),
+  /* critical */ dt-theme-palette($red-700, $red-800, $red-900, $red-200)
 );
 
 $dt-royalblue-theme-dark: dt-theme-dark(
@@ -46,7 +47,8 @@ $dt-royalblue-theme-dark: dt-theme-dark(
   /* recovered */
     dt-theme-palette($green-700, $green-600, $green-500, $green-100),
   /* cta */ dt-theme-palette($green-500, $green-400, $green-300, $green-100),
-  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100)
+  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100),
+  /* critical */ dt-theme-palette($red-700, $red-600, $red-500, $red-200)
 );
 
 @include dt-register-theme(

diff --git a/libs/barista-components/core/src/theming/theme-definitions/_turquoise-theme.scss b/libs/barista-components/core/src/theming/theme-definitions/_turquoise-theme.scss
@@ -22,7 +22,8 @@ $dt-turquoise-theme-light: dt-theme-light(
   /* recovered */
     dt-theme-palette($green-700, $green-800, $green-900, $green-100),
   /* cta */ dt-theme-palette($green-600, $green-700, $green-800, $green-100),
-  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100)
+  /* neutral */ dt-theme-palette($gray-600, $gray-700, $gray-800, $gray-100),
+  /* critical */ dt-theme-palette($red-700, $red-800, $red-900, $red-200)
 );
 
 $dt-turquoise-theme-dark: dt-theme-dark(
@@ -46,7 +47,8 @@ $dt-turquoise-theme-dark: dt-theme-dark(
   /* recovered */
     dt-theme-palette($green-700, $green-600, $green-500, $green-100),
   /* cta */ dt-theme-palette($green-500, $green-400, $green-300, $green-100),
-  /* neutral */ dt-theme-palette($gray-500, $gray-400, $gray-300, $gray-100)
+  /* neutral */ dt-theme-palette($gray-500, $gray-400, $gray-300, $gray-100),
+  /* critical */ dt-theme-palette($red-700, $red-600, $red-500, $red-200)
 );
 
 @include dt-register-theme(

diff --git a/libs/barista-components/icon/src/icon.scss b/libs/barista-components/icon/src/icon.scss
@@ -31,6 +31,9 @@
 .dt-icon.dt-color-dark {
   --dt-icon-color: #{$gray-300};
 }
+.dt-icon.dt-color-critical {
+  --dt-icon-color: var(--dt-critical-default-color);
+}
 
 .dt-theme-dark {
   .dt-icon.dt-color-main,
@@ -39,7 +42,8 @@
   .dt-icon.dt-color-error,
   .dt-icon.dt-color-cta,
   .dt-icon.dt-color-light,
-  .dt-icon.dt-color-dark {
+  .dt-icon.dt-color-dark,
+  .dt-icon.dt-color-critical {
     --dt-icon-color: #{$white};
   }
 }
diff --git a/libs/barista-components/icon/src/icon.spec.ts b/libs/barista-components/icon/src/icon.spec.ts
@@ -105,6 +105,9 @@ describe('DtIcon', () => {
     testComponent.iconColor = 'cta';
     fixture.detectChanges();
     expect(iconElement.classList).toContain('dt-color-cta');
+    testComponent.iconColor = 'critical';
+    fixture.detectChanges();
+    expect(iconElement.classList).toContain('dt-color-critical');
   });
 
   it('colors from the extended color palette', () => {

diff --git a/libs/barista-components/icon/src/icon.ts b/libs/barista-components/icon/src/icon.ts
@@ -42,7 +42,8 @@ export type DtIconColorPalette =
   | 'cta'
   | 'recovered'
   | 'light'
-  | 'dark';
+  | 'dark'
+  | 'critical';
 
 const iconLogger = DtLoggerFactory.create('DtIcon');
 

diff --git a/libs/barista-components/indicator/README.md b/libs/barista-components/indicator/README.md
@@ -4,7 +4,7 @@ The `dtIndicator` directive adds the capability to add styling to indicate a
 warning or an error.
 
 This directive was introduced to add indicators in the `<dt-table>`, but can be
-used in other components as well to handle error, warning or recovered
+used in other components as well to handle error, warning, recovered or critical
 indications.
 
 <ba-live-example name="DtExampleIndicatorDefault" fullwidth></ba-live-example>
@@ -31,7 +31,7 @@ component or HTML element.
 
 ## Inputs
 
-| Name               | Type                                  | Default | Description                      |
-| ------------------ | ------------------------------------- | ------- | -------------------------------- |
-| `dtIndicator`      | `boolean`                             | `true`  | Whether the indicator is active. |
-| `dtIndicatorColor` | `'error' \| 'warning' \| 'recovered'` | `error` | Sets the color.                  |
+| Name               | Type                                                | Default | Description                      |
+| ------------------ | --------------------------------------------------- | ------- | -------------------------------- |
+| `dtIndicator`      | `boolean`                                           | `true`  | Whether the indicator is active. |
+| `dtIndicatorColor` | `'error' \| 'warning' \| 'recovered' \| 'critical'` | `error` | Sets the color.                  |
diff --git a/libs/barista-components/indicator/src/indicator.scss b/libs/barista-components/indicator/src/indicator.scss
@@ -7,6 +7,9 @@
 .dt-indicator-active.dt-color-recovered {
   --dt-indicator-color: var(--dt-recovered-default-color);
 }
+.dt-indicator-active.dt-color-critical {
+  --dt-indicator-color: var(--dt-critical-default-color);
+}
 
 .dt-indicator-active {
   color: var(--dt-indicator-color);

diff --git a/libs/barista-components/indicator/src/indicator.spec.ts b/libs/barista-components/indicator/src/indicator.spec.ts
@@ -36,6 +36,7 @@ describe('DtIndicator without table', () => {
         DtIndicatorColor,
         DtIndicatorWarning,
         DtIndicatorRecovered,
+        DtIndicatorCritical,
       ],
     });
 
@@ -93,6 +94,18 @@ describe('DtIndicator without table', () => {
     expect(indicator.classList.contains('dt-color-recovered')).toBe(true);
   });
 
+  it('should set the color to critical', () => {
+    const fixture = TestBed.createComponent(DtIndicatorCritical);
+    fixture.detectChanges();
+
+    const indicator: HTMLSpanElement = fixture.debugElement.query(
+      By.css('.dt-indicator'),
+    ).nativeElement;
+
+    expect(indicator.classList.contains('dt-indicator-active')).toBe(true);
+    expect(indicator.classList.contains('dt-color-critical')).toBe(true);
+  });
+
   it('should set the color on a binding', () => {
     const fixture = TestBed.createComponent(DtIndicatorColor);
     fixture.detectChanges();
@@ -161,3 +174,9 @@ class DtIndicatorColor {
 class DtIndicatorRecovered {
   color = 'recovered';
 }
+@Component({
+  template: ` <span dtIndicator [dtIndicatorColor]="color"></span> `,
+})
+class DtIndicatorCritical {
+  color = 'critical';
+}
diff --git a/libs/barista-components/indicator/src/indicator.ts b/libs/barista-components/indicator/src/indicator.ts
@@ -34,6 +34,7 @@ export type DtIndicatorThemePalette =
   | 'error'
   | 'warning'
   | 'recovered'
+  | 'critical'
   | undefined;
 
 // Boilerplate for applying mixins to DtIndicator.

diff --git a/libs/barista-components/style/main.scss b/libs/barista-components/style/main.scss
@@ -42,4 +42,8 @@
   --dt-cta-default-color: #{$green-600};
   --dt-cta-hover-color: #{$green-700};
   --dt-cta-active-color: #{$green-800};
+  --dt-critical-default-color: #{$red-700};
+  --dt-critical-hover-color: #{$red-800};
+  --dt-critical-active-color: #{$red-900};
+  --dt-critical-background-color: #{$red-200};
 }
diff --git a/libs/barista-components/style/themes.scss b/libs/barista-components/style/themes.scss
@@ -29,6 +29,11 @@
   --dt-cta-hover-color: #{$green-700};
   --dt-cta-active-color: #{$green-800};
   --dt-cta-active-background-color: #{$green-100};
+
+  --dt-critical-default-color: #{$red-700};
+  --dt-critical-hover-color: #{$red-800};
+  --dt-critical-active-color: #{$red-900};
+  --dt-critical-active-background-color: #{$red-200};
 }
 
 /* Accent, warning, error and cta colors for dark theme */
@@ -57,6 +62,11 @@
   --dt-cta-hover-color: #{$green-400};
   --dt-cta-active-color: #{$green-300};
   --dt-cta-active-background-color: #{$green-100};
+
+  --dt-critical-default-color: #{$red-700};
+  --dt-critical-hover-color: #{$red-600};
+  --dt-critical-active-color: #{$red-500};
+  --dt-critical-active-background-color: #{$red-200};
 }
 
 /* theme turquoise */

diff --git a/libs/barista-components/table/src/cell.ts b/libs/barista-components/table/src/cell.ts
@@ -117,7 +117,7 @@ export class DtColumnDef extends CdkColumnDef implements OnChanges {
   }
 }
 
-type IndicatorType = 'error' | 'warning' | 'recovered';
+type IndicatorType = 'error' | 'warning' | 'recovered' | 'critical';
 
 /** Cell template container that adds the right classes and role. */
 @Component({
@@ -153,6 +153,11 @@ export class DtCell implements AfterContentInit, OnDestroy {
     return this._hasIndicator('recovered');
   }
 
+  /** Whether the cell is critical */
+  get isCritical(): boolean {
+    return this._hasIndicator('critical');
+  }
+
   /**
    * @internal
    * Emits whenever the indicators change or one of the inputs on the indicators changes

diff --git a/libs/barista-components/table/src/expandable/expandable-row.scss b/libs/barista-components/table/src/expandable/expandable-row.scss
@@ -47,6 +47,11 @@
   background-color: var(--dt-recovered-default-color);
 }
 
+:host.dt-table-row-indicator.dt-color-critical
+  > .dt-expandable-row-base::before {
+  background-color: var(--dt-critical-default-color);
+}
+
 :host.dt-expandable-row {
   &:nth-child(even) {
     background-color: #ffffff;

diff --git a/libs/barista-components/table/src/row.scss b/libs/barista-components/table/src/row.scss
@@ -41,4 +41,7 @@
   &.dt-color-recovered::before {
     background-color: var(--dt-recovered-default-color);
   }
+  &.dt-color-critical::before {
+    background-color: var(--dt-critical-default-color);
+  }
 }
diff --git a/libs/barista-components/table/src/row.ts b/libs/barista-components/table/src/row.ts
@@ -177,7 +177,8 @@ export class DtRow extends CdkRow implements OnDestroy {
     const hasError = !!cells.find((cell) => cell.hasError);
     const hasWarning = !!cells.find((cell) => cell.hasWarning);
     const hasRecovered = !!cells.find((cell) => cell.hasRecovered);
-    const hasIndicator = hasError || hasWarning || hasRecovered;
+    const isCritical = !!cells.find((cell) => cell.isCritical);
+    const hasIndicator = hasError || hasWarning || hasRecovered || isCritical;
     const orderCell = this._getChangedOrderCell();
     if (hasIndicator) {
       _addCssClass(this._elementRef.nativeElement, 'dt-table-row-indicator');
@@ -216,6 +217,16 @@ export class DtRow extends CdkRow implements OnDestroy {
       _removeCssClass(this._elementRef.nativeElement, 'dt-color-error');
     }
 
+    if (isCritical) {
+      _replaceCssClass(
+        this._elementRef.nativeElement,
+        'dt-color-error',
+        'dt-color-critical',
+      );
+    } else {
+      _removeCssClass(this._elementRef.nativeElement, 'dt-color-critical');
+    }
+
     if (orderCell) {
       this._orderChangedIndicatorAnimationState = 'changed';
     }

diff --git a/libs/barista-components/tree-table/src/tree-table-row.scss b/libs/barista-components/tree-table/src/tree-table-row.scss
@@ -21,6 +21,11 @@
     .dt-tree-table-toggle-cell-wrap::before {
     background-color: var(--dt-recovered-default-color);
   }
+  &.dt-table-row-indicator.dt-color-critical
+    ::ng-deep
+    .dt-tree-table-toggle-cell-wrap::before {
+    background-color: var(--dt-critical-default-color);
+  }
 
   &:nth-child(even) ::ng-deep .dt-cell {
     background-color: $dt-table-row-color-even;