Fixes for Wizard Issues

Fixes to:
hide the back button only when ‘true’ is passed,
remove trailing space on next and back buttons,
reduce margin on cancel button when no back button

Fixes #468
Fixes #469
Fixes #474

Author: jeff-phillips-18

src/wizard/wizard.component.js

@@ -376,7 +376,7 @@ angular.module('patternfly.wizard').component('pfWizard', {
       ctrl.context = {};
       ctrl.hideHeader = ctrl.hideHeader === 'true';
       ctrl.hideSidebar = ctrl.hideSidebar === 'true';
-      ctrl.hideBaackButton = ctrl.hideBackButton === 'true';
+      ctrl.hideBackButton = ctrl.hideBackButton === 'true';
 
       // If a step class is given use it for all steps
       if (angular.isDefined(ctrl.stepClass)) {
@@ -415,6 +415,18 @@ angular.module('patternfly.wizard').component('pfWizard', {
     ctrl.$onChanges = function (changesObj) {
       var step;
 
+      if (changesObj.hideHeader) {
+        ctrl.hideHeader = ctrl.hideHeader === 'true';
+      }
+
+      if (changesObj.hideSidebar) {
+        ctrl.hideSidebar = ctrl.hideSidebar === 'true';
+      }
+
+      if (changesObj.hideBackButton) {
+        ctrl.hideBackButton = ctrl.hideBackButton === 'true';
+      }
+
       if (changesObj.wizardReady && changesObj.wizardReady.currentValue) {
         ctrl.goTo(ctrl.getEnabledSteps()[0]);
       }

src/wizard/wizard.html

@@ -28,21 +28,25 @@ <h3 class="blank-slate-pf-main-action">{{$ctrl.loadingWizardTitle}}</h3>
     <div class="wizard-pf-position-override" ng-transclude ></div>
   </div>
   <div class="modal-footer wizard-pf-footer wizard-pf-position-override" ng-class="{'wizard-pf-footer-inline': $ctrl.embedInPage}">
-    <pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel" ng-disabled="$ctrl.wizardDone" ng-click="$ctrl.onCancel()" ng-if="!$ctrl.embedInPage">{{$ctrl.cancelTitle}}</pf-wiz-cancel>
+    <pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel"
+                   ng-class="{'wizard-pf-cancel-no-back': $ctrl.hideBackButton}"
+                   ng-disabled="$ctrl.wizardDone" ng-click="$ctrl.onCancel()"
+                   ng-if="!$ctrl.embedInPage">{{$ctrl.cancelTitle}}</pf-wiz-cancel>
     <div ng-if="!$ctrl.hideBackButton" class="tooltip-wrapper" uib-tooltip="{{$ctrl.prevTooltip}}" tooltip-placement="left">
-      <pf-wiz-previous id="backButton" class="btn btn-default" ng-disabled="!$ctrl.wizardReady || $ctrl.wizardDone || !$ctrl.selectedStep.prevEnabled || $ctrl.firstStep"
-              callback="$ctrl.backCallback">
-        <span class="i fa fa-angular-left"></span>
-        {{$ctrl.backTitle}}
-      </pf-wiz-previous>
+      <pf-wiz-previous id="backButton"
+                       class="btn btn-default"
+                       ng-disabled="!$ctrl.wizardReady || $ctrl.wizardDone || !$ctrl.selectedStep.prevEnabled || $ctrl.firstStep"
+                       callback="$ctrl.backCallback">{{$ctrl.backTitle}}</pf-wiz-previous>
     </div>
     <div class="tooltip-wrapper" uib-tooltip="{{$ctrl.nextTooltip}}" tooltip-placement="left">
-      <pf-wiz-next id="nextButton" class="btn btn-primary wizard-pf-next" ng-disabled="!$ctrl.wizardReady || !$ctrl.selectedStep.nextEnabled"
-              callback="$ctrl.nextCallback">
-        {{$ctrl.nextTitle}}
-        <span class="i fa fa-angular-right"></span>
-      </pf-wiz-next>
+      <pf-wiz-next id="nextButton"
+                   class="btn btn-primary wizard-pf-next"
+                   ng-disabled="!$ctrl.wizardReady || !$ctrl.selectedStep.nextEnabled"
+                   callback="$ctrl.nextCallback">{{$ctrl.nextTitle}}</pf-wiz-next>
     </div>
-    <pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-cancel-inline" ng-disabled="$ctrl.wizardDone" ng-click="$ctrl.onCancel()" ng-if="$ctrl.embedInPage">{{$ctrl.cancelTitle}}</pf-wiz-cancel>
+    <pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-cancel-inline"
+                   ng-disabled="$ctrl.wizardDone"
+                   ng-click="$ctrl.onCancel()"
+                   ng-if="$ctrl.embedInPage">{{$ctrl.cancelTitle}}</pf-wiz-cancel>
   </div>
 </div>

src/wizard/wizard.less

@@ -10,6 +10,11 @@
       pointer-events: none;
     }
   }
+  .btn-cancel {
+    &.wizard-pf-cancel-no-back {
+      margin-right: 0;
+    }
+  }
 }
 .wizard-pf-singlestep {
   margin-left: 0;

test/wizard/wizard-container-hide-back.html

@@ -7,7 +7,7 @@
   next-callback="nextCallback"
   back-callback="backCallback"
   current-step="currentStep"
-  hide-back-button="true"
+  hide-back-button="{{hideBackButton}}"
   wizard-done="deployComplete || deployInProgress"
   loading-secondary-information="secondaryLoadInformation">
   <div ng-include="'test/wizard/wizard-test-steps.html'"></div>

test/wizard/wizard.spec.js

@@ -259,10 +259,26 @@ describe('Component:  pfWizard', function () {
     expect(sidebarPanel.length).toBe(3);
   });
 
+  it('should show the back button when not specified', function () {
+    setupWizard('test/wizard/wizard-container.html');
+
+    var backButton = element.find('.wizard-pf-footer #backButton');
+    expect(backButton.length).toBe(1);
+  });
+
   it('should hide the back button when specified', function () {
+    $scope.hideBackButton = true;
     setupWizard('test/wizard/wizard-container-hide-back.html');
 
     var backButton = element.find('.wizard-pf-footer #backButton');
     expect(backButton.length).toBe(0);
   });
+
+  it('should not hide the back button when specified', function () {
+    $scope.hideBackButton = false;
+    setupWizard('test/wizard/wizard-container-hide-back.html');
+
+    var backButton = element.find('.wizard-pf-footer #backButton');
+    expect(backButton.length).toBe(1);
+  });
 });