refactor(stepper): rename useGuidelines to displayDefaultIndicatorType, add spacing in scss, and use .first function in tests

Author: arodr967

src/cdk/stepper/stepper.ts

@@ -90,11 +90,11 @@ export interface StepperOptions {
   showError?: boolean;
 
   /**
-   * Whether the stepper should use the Material UI guidelines when
-   * displaying the icons or not.
-   * Default behavior is assumed to be false.
+   * Whether the stepper should display the default indicator type
+   * or not.
+   * Default behavior is assumed to be true.
    */
-  useGuidelines?: boolean;
+  displayDefaultIndicatorType?: boolean;
 }
 
 @Component({
@@ -108,7 +108,7 @@ export interface StepperOptions {
 export class CdkStep implements OnChanges {
   private _stepperOptions: StepperOptions;
   _showError: boolean;
-  _useGuidelines: boolean;
+  _displayDefaultIndicatorType: boolean;
 
   /** Template for step label if it exists. */
   @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel;
@@ -189,7 +189,7 @@ export class CdkStep implements OnChanges {
     @Optional() @Inject(MAT_STEPPER_GLOBAL_OPTIONS) stepperOptions: StepperOptions) {
     this._stepperOptions = stepperOptions ? stepperOptions : {};
     this._showError = !!this._stepperOptions.showError;
-    this._useGuidelines = !!this._stepperOptions.useGuidelines;
+    this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
   }
 
   /** Selects this step component. */
@@ -365,11 +365,9 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
     const step = this._steps.toArray()[index];
     const isCurrentStep = this._isCurrentStep(index);
 
-    if (step._useGuidelines) {
-      return this._getGuidelineLogic(step, isCurrentStep, state);
-    } else {
-      return this._getDefaultIndicatorLogic(step, isCurrentStep);
-    }
+    return step._displayDefaultIndicatorType
+      ? this._getDefaultIndicatorLogic(step, isCurrentStep)
+      : this._getGuidelineLogic(step, isCurrentStep, state);
   }
 
   private _getDefaultIndicatorLogic(step: CdkStep, isCurrentStep: boolean): StepState {

src/lib/stepper/step-header.scss

@@ -39,9 +39,9 @@ $mat-step-header-icon-size: 16px !default;
 }
 
 .mat-step-icon-error .mat-icon {
-  font-size: $mat-step-header-icon-size+8;
-  height: $mat-step-header-icon-size+8;
-  width: $mat-step-header-icon-size+8;
+  font-size: $mat-step-header-icon-size + 8;
+  height: $mat-step-header-icon-size + 8;
+  width: $mat-step-header-icon-size + 8;
 }
 
 .mat-step-label {

src/lib/stepper/stepper.md

@@ -188,15 +188,15 @@ You can set the state of a step to whatever you want. The given state by default
 </mat-horizontal-stepper>
 ```
 
-In order to use the custom step states, you must add the `useGuidelines` option to the global default stepper options which can be specified by providing a value for
+In order to use the custom step states, you must add the `displayDefaultIndicatorType` option to the global default stepper options which can be specified by providing a value for
 `MAT_STEPPER_GLOBAL_OPTIONS` in your application's root module.
 
 ```ts
 @NgModule({
   providers: [
     {
       provide: MAT_STEPPER_GLOBAL_OPTIONS,
-      useValue: { useGuidelines: true }
+      useValue: { displayDefaultIndicatorType: false }
     }
   ]
 })

src/lib/stepper/stepper.spec.ts

@@ -905,7 +905,7 @@ describe('MatStepper', () => {
           .queryAll(By.directive(MatStepperNext))[0].nativeElement;
 
       stepper.selectedIndex = 1;
-      stepper._steps.toArray()[0].hasError = true;
+      stepper._steps.first.hasError = true;
       nextButtonNativeEl.click();
       fixture.detectChanges();
 
@@ -922,7 +922,7 @@ describe('MatStepper', () => {
         MatHorizontalStepperWithErrorsApp,
         [{
           provide: MAT_STEPPER_GLOBAL_OPTIONS,
-          useValue: {useGuidelines: true}
+          useValue: {displayDefaultIndicatorType: false}
         }],
         [MatFormFieldModule, MatInputModule]
       );
@@ -936,7 +936,7 @@ describe('MatStepper', () => {
           .queryAll(By.directive(MatStepperNext))[0].nativeElement;
 
       stepper.selectedIndex = 1;
-      stepper._steps.toArray()[0].completed = true;
+      stepper._steps.first.completed = true;
       nextButtonNativeEl.click();
       fixture.detectChanges();