Merge pull request #224 from porscheinformatik/bugfix/isakovic/fix-stepper-styling

fix: stepper error state color, css, add mat-error to stepper demo

Author: stefan-isakovic

package-lock.json

@@ -10,12 +10,12 @@ import {
   OnInit,
   Output,
   SimpleChanges,
-  ViewChild
-} from "@angular/core";
-import { ControlContainer, FormGroupDirective } from "@angular/forms";
-import { ReadOnlyFormFieldComponent } from "../readonly-form-field/readonly-form-field.component";
-import { NgIf } from "@angular/common";
-import { ObserversModule } from "@angular/cdk/observers";
+  ViewChild,
+} from '@angular/core';
+import { ControlContainer, FormGroupDirective } from '@angular/forms';
+import { ReadOnlyFormFieldComponent } from '../readonly-form-field/readonly-form-field.component';
+import { NgIf } from '@angular/common';
+import { ObserversModule } from '@angular/cdk/observers';
 
 /**
  * Wraps a mat-form-field to replace it by a readOnly representation if necessary

projects/material-addons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.ts

@@ -1,6 +1,6 @@
 .header {
   overflow: hidden;
-  outline: var(--warn-color);
+  outline: var(--error-color);
   cursor: pointer;
   box-sizing: content-box;
   -webkit-tap-highlight-color: transparent;
@@ -26,7 +26,7 @@
 
 .step-state-error {
   width: 5px;
-  background: var(--warn-color);
+  background: var(--error-color);
 }
 
 .step-state-neutral {
@@ -39,13 +39,13 @@
 }
 
 .red-error {
-  color: var(--warn-color);
+  color: var(--error-color);
 }
 
 .check-border {
   border-color: #d3d3d3;
 }
 
 .error-border {
-  border-color: var(--warn-color);
+  border-color: var(--error-color);
 }

projects/material-addons/src/lib/stepper/step-header/step-header.component.scss

@@ -12,7 +12,7 @@
         [attr.aria-labelledby]="_getStepLabelId(i)"
         [attr.aria-expanded]="selectedIndex === i"
       >
-        <div data-cy="stepper-content" class="vertical-content">
+        <div data-cy="stepper-content">
           <ng-container
             [ngTemplateOutlet]="step.content"
             [ngTemplateOutletContext]="{

projects/material-addons/src/lib/stepper/stepper.component.html

@@ -27,10 +27,6 @@
   outline: 0;
 }
 
-.vertical-content {
-  padding: 0 24px 0 24px;
-}
-
 .step-container {
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;

projects/material-addons/src/lib/stepper/stepper.component.scss

@@ -49,6 +49,7 @@ $default-palette: (
   $table-hover-color: theme.get-table-hover-color($main-primary);
   $background-color: theme.get-background-color();
   $warn-color: map-get(theme.$primary-palette, warn-color);
+  $error-color: map-get(theme.$primary-palette, error-color);
   $hover-color: map-get(theme.$primary-palette, 50);
   $panel-color: map-get(theme.$primary-palette, 900);
   $panel-background-color: theme.map-get-or-default(theme.$primary-palette, panel-background-color);
@@ -82,6 +83,7 @@ $default-palette: (
     --hover-color: #{$hover-color};
     --table-hover-color: #{$table-hover-color};
     --warn-color: #{$warn-color};
+    --error-color: #{$error-color};
     --background-color: #{$background-color};
     --panel-color: #{$panel-color};
     --panel-background-color: #{$panel-background-color};

projects/material-addons/src/themes/common/styles.scss

@@ -5,10 +5,12 @@
         <mat-form-field>
           <mat-label>Firstname</mat-label>
           <input matInput placeholder="Firstname" formControlName="firstName" />
+          <mat-error>Please enter a first name</mat-error>
         </mat-form-field>
         <mat-form-field>
           <mat-label>Lastname</mat-label>
           <input matInput placeholder="Lastname" formControlName="lastName" />
+          <mat-error>Please enter a last name</mat-error>
         </mat-form-field>
       </div>
     </form>
@@ -19,10 +21,12 @@
         <mat-form-field>
           <mat-label>Email</mat-label>
           <input matInput placeholder="Firstname" formControlName="email" />
+          <mat-error>Please enter an email</mat-error>
         </mat-form-field>
         <mat-form-field>
           <mat-label>Phone</mat-label>
           <input matInput placeholder="Lastname" formControlName="phone" />
+          <mat-error>Please enter a phone number</mat-error>
         </mat-form-field>
       </div>
     </form>