fix: improvements to the wizard in dialog (#4580)

* progress on wizard dialog improvements * couple fixes with tall content * fix bug where using step indicators to change steps would break next step button * remove unnecessary binding * event type * force build * missing import * ngFor example in fullscreen * put back ngFor example * couple bug fixes
SAP · Feb 11, 2021 · faf00ce · faf00ce
1 parent 5677e5f
commit faf00ce
Show file tree

Hide file tree

Showing 16 changed files with 205 additions and 110 deletions.
diff --git a/.../docs/src/app/core/component-docs/wizard/examples/wizard-branching-example.component.html b/.../docs/src/app/core/component-docs/wizard/examples/wizard-branching-example.component.html
@@ -14,7 +14,7 @@
                         <li
                             fd-wizard-step
                             [status]="step1status"
-                            (statusChange)="step1status = $event"
+                            (statusChange)="statusChanged(1, $event)"
                             label="Step 1: One Line"
                         >
                             <fd-wizard-step-indicator glyph="accept"></fd-wizard-step-indicator>
@@ -42,7 +42,7 @@
                             fd-wizard-step
                             branching="true"
                             [status]="step2status"
-                            (statusChange)="step2status = $event"
+                            (statusChange)="statusChanged(2, $event)"
                             label="Step 2: Payment Selection"
                         >
                             <fd-wizard-step-indicator>2</fd-wizard-step-indicator>
@@ -82,7 +82,7 @@
                             *ngIf="step2status === 'completed'"
                             fd-wizard-step
                             [status]="step3status"
-                            (statusChange)="step3status = $event"
+                            (statusChange)="statusChanged(3, $event)"
                             [label]="
                                 paymentSelection === 'bank' ? 'Step 3: Bank Details' : 'Step 3: Credit Card Details'
                             "

diff --git a/apps/docs/src/app/core/component-docs/wizard/examples/wizard-branching-example.component.ts b/apps/docs/src/app/core/component-docs/wizard/examples/wizard-branching-example.component.ts
@@ -40,6 +40,12 @@ export class WizardBranchingExampleComponent implements OnInit {
         this.oldPayment = this.paymentSelection;
     }
 
+    statusChanged(stepNumber: number, event: WizardStepStatus): void {
+        if (event === 'current') {
+            this.goToStep(stepNumber);
+        }
+    }
+
     paymentSelectionChanged(dialog: TemplateRef<any>): void {
         if (this.oldPayment !== this.paymentSelection) {
             if (!this.init) {

diff --git a/...cs/src/app/core/component-docs/wizard/examples/wizard-customizable-example.component.html b/...cs/src/app/core/component-docs/wizard/examples/wizard-customizable-example.component.html
@@ -14,7 +14,7 @@
                         <li
                             fd-wizard-step
                             [status]="step1status"
-                            (statusChange)="step1status = $event"
+                            (statusChange)="statusChanged(1, $event)"
                             label="Step 1: One Line"
                         >
                             <fd-wizard-step-indicator glyph="accept"></fd-wizard-step-indicator>
@@ -30,7 +30,7 @@
                         <li
                             fd-wizard-step
                             [status]="step2status"
-                            (statusChange)="step2status = $event"
+                            (statusChange)="statusChanged(2, $event)"
                             label="Step 2: Another Step"
                         >
                             <fd-wizard-step-indicator>2</fd-wizard-step-indicator>
@@ -46,7 +46,7 @@
                         <li
                             fd-wizard-step
                             [status]="step3status"
-                            (statusChange)="step3status = $event"
+                            (statusChange)="statusChanged(3, $event)"
                             label="Step 3: One line truncates"
                             optionalText="(Optional)"
                         >

diff --git a/...docs/src/app/core/component-docs/wizard/examples/wizard-customizable-example.component.ts b/...docs/src/app/core/component-docs/wizard/examples/wizard-customizable-example.component.ts
@@ -28,8 +28,20 @@ export class WizardCustomizableExampleComponent {
     step2status: WizardStepStatus = 'upcoming';
     step3status: WizardStepStatus = 'upcoming';
 
+    statusChanged(stepNumber: number, event: WizardStepStatus): void {
+        if (event === 'current') {
+            this.goToStep(stepNumber);
+        }
+    }
+
     goToStep(step: number): void {
         switch (step) {
+            case 1: {
+                this.step1status = 'current';
+                this.step2status = 'upcoming';
+                this.step3status = 'upcoming';
+                break;
+            }
             case 2: {
                 this.step1status = 'completed';
                 this.step2status = 'current';

diff --git a/apps/docs/src/app/core/component-docs/wizard/examples/wizard-dialog-example.component.html b/apps/docs/src/app/core/component-docs/wizard/examples/wizard-dialog-example.component.html
@@ -1,17 +1,14 @@
 <ng-template let-dialog let-dialogConfig="dialogConfig" #confirmationDialog>
     <fd-dialog [dialogConfig]="dialogConfig" [dialogRef]="dialog" class="fd-wizard-example">
-        <fd-dialog-header>
-            <h1 fd-title>Checkout</h1>
-        </fd-dialog-header>
-
         <fd-dialog-body>
+            <h2 fd-title>Checkout</h2>
             <fd-wizard [appendToWizard]="false">
                 <fd-wizard-navigation>
                     <ul fd-wizard-progress-bar>
                         <li
                             fd-wizard-step
                             [status]="step1status"
-                            (statusChange)="step1status = $event"
+                            (statusChange)="statusChanged(1, $event)"
                             label="Product Type"
                         >
                             <fd-wizard-step-indicator>1</fd-wizard-step-indicator>
@@ -37,7 +34,7 @@ <h3 fd-title>1. Product Type</h3>
                         <li
                             fd-wizard-step
                             [status]="step2status"
-                            (statusChange)="step2status = $event"
+                            (statusChange)="statusChanged(2, $event)"
                             label="Customer Information"
                         >
                             <fd-wizard-step-indicator>2</fd-wizard-step-indicator>
@@ -102,7 +99,7 @@ <h3 fd-title>2. Customer Information</h3>
                         <li
                             fd-wizard-step
                             [status]="step3status"
-                            (statusChange)="step3status = $event"
+                            (statusChange)="statusChanged(3, $event)"
                             label="Additional Information"
                             optionalText="(Optional)"
                         >
@@ -126,7 +123,7 @@ <h3 fd-title>3. Additional Information</h3>
                         <li
                             fd-wizard-step
                             [status]="step4status"
-                            (statusChange)="step4status = $event"
+                            (statusChange)="statusChanged(4, $event)"
                             label="Pricing and Payment"
                         >
                             <fd-wizard-step-indicator>4</fd-wizard-step-indicator>
@@ -145,7 +142,7 @@ <h3 fd-title>4. Payment</h3>
                                     </div>
                             </fd-wizard-content>
                         </li>
-                        <li fd-wizard-step [status]="summaryStatus" [isSummary]="true">
+                        <li fd-wizard-step [status]="summaryStatus" [isSummary]="true" (statusChange)="statusChanged(5, $event)">
                             <fd-wizard-content>
                                 <h4 class="fd-title fd-title--h4">1. Product Type</h4>
                                 <fd-layout-grid style="margin-bottom: 2rem">
@@ -219,52 +216,15 @@ <h4 class="fd-title fd-title--h4">4. Payment Information</h4>
                     </ul>
                 </fd-wizard-navigation>
             </fd-wizard>
+            <div fd-bar barDesign="floating-footer">
+                <div fd-bar-right>
+                    <fd-button-bar *ngIf="step1status !== 'current'" label="Previous Step" (click)="goToStep(currentStep - 1)"></fd-button-bar>
+                    <fd-button-bar *ngIf="summaryStatus !== 'current'" [label]="step4status === 'current' ? 'Review' : 'Next Step'" [disabled]="step2status === 'current' && (fullName === '' || addressLine1 === '')" (click)="goToStep(currentStep + 1)"></fd-button-bar>
+                    <fd-button-bar *ngIf="summaryStatus === 'current'" label="Finish" [disabled]="step2status === 'current' && (fullName === '' || addressLine1 === '')" (click)="dialog.close('Continue')"></fd-button-bar>
+                    <fd-button-bar label="Cancel" (click)="dialog.dismiss('Cancel')"></fd-button-bar>
+                </div>
+            </div>
         </fd-dialog-body>
-
-        <fd-dialog-footer>
-            <fd-dialog-footer-button *ngIf="step1status !== 'current'">
-                <button
-                        fd-button
-                        fd-dialog-decisive-button
-                        label="Previous Step"
-                        [compact]="true"
-                        (click)="goToStep(currentStep - 1)">
-                </button>
-            </fd-dialog-footer-button>
-            <fd-dialog-footer-button *ngIf="summaryStatus !== 'current'">
-                <button
-                    fd-button
-                    fd-dialog-decisive-button
-                    fdType="emphasized"
-                    [label]="step4status === 'current' ? 'Review' : 'Next Step'"
-                    [disabled]="step2status === 'current' && (fullName === '' || addressLine1 === '')"
-                    [compact]="true"
-                    (click)="goToStep(currentStep + 1)">
-                </button>
-            </fd-dialog-footer-button>
-            <fd-dialog-footer-button *ngIf="summaryStatus === 'current'">
-                <button
-                    fd-button
-                    fd-dialog-decisive-button
-                    fdType="emphasized"
-                    label="Finish"
-                    [compact]="true"
-                    (click)="dialog.close('Continue')">
-                </button>
-            </fd-dialog-footer-button>
-
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
-                    fd-initial-focus
-                    fd-dialog-decisive-button
-                    fdType="transparent"
-                    label="Cancel"
-                    [compact]="true"
-                    (click)="dialog.dismiss('Cancel')">
-                </button>
-            </fd-dialog-footer-button>
-        </fd-dialog-footer>
     </fd-dialog>
 </ng-template>
 

diff --git a/apps/docs/src/app/core/component-docs/wizard/examples/wizard-dialog-example.component.ts b/apps/docs/src/app/core/component-docs/wizard/examples/wizard-dialog-example.component.ts
@@ -23,6 +23,12 @@ export class WizardDialogExampleComponent {
 
     constructor(private _dialogService: DialogService) {}
 
+    statusChanged(stepNumber: number, event: WizardStepStatus): void {
+        if (event === 'current') {
+            this.goToStep(stepNumber);
+        }
+    }
+
     openDialog(dialog: TemplateRef<any>): void {
         this._dialogService.open(dialog, {
             width: '100%',

diff --git a/apps/docs/src/app/core/component-docs/wizard/examples/wizard-example.component.html b/apps/docs/src/app/core/component-docs/wizard/examples/wizard-example.component.html
@@ -14,7 +14,7 @@
                         <li
                             fd-wizard-step
                             [status]="step1status"
-                            (statusChange)="step1status = $event"
+                            (statusChange)="statusChanged(1, $event)"
                             label="Product Type"
                         >
                             <fd-wizard-step-indicator glyph="product"></fd-wizard-step-indicator>
@@ -45,7 +45,7 @@ <h3 fd-title>1. Product Type</h3>
                         <li
                             fd-wizard-step
                             [status]="step2status"
-                            (statusChange)="step2status = $event"
+                            (statusChange)="statusChanged(2, $event)"
                             label="Customer Information"
                         >
                             <fd-wizard-step-indicator glyph="user-edit"></fd-wizard-step-indicator>
@@ -121,7 +121,7 @@ <h3 fd-title>2. Customer Information</h3>
                         <li
                             fd-wizard-step
                             [status]="step3status"
-                            (statusChange)="step3status = $event"
+                            (statusChange)="statusChanged(3, $event)"
                             label="Additional Information"
                             optionalText="(Optional)"
                         >
@@ -150,7 +150,7 @@ <h3 fd-title>3. Additional Information</h3>
                         <li
                             fd-wizard-step
                             [status]="step4status"
-                            (statusChange)="step4status = $event"
+                            (statusChange)="statusChanged(4, $event)"
                             label="Pricing and Payment"
                         >
                             <fd-wizard-step-indicator glyph="paid-leave"></fd-wizard-step-indicator>
@@ -174,7 +174,8 @@ <h3 fd-title>4. Payment</h3>
                                 </fd-wizard-next-step>
                             </fd-wizard-content>
                         </li>
-                        <li fd-wizard-step [status]="summaryStatus" [isSummary]="true">
+                        <li fd-wizard-step [status]="summaryStatus" [isSummary]="true"
+                            (statusChange)="statusChanged(5, $event)">
                             <fd-wizard-content>
                                 <h4 class="fd-title fd-title--h4">1. Product Type</h4>
                                 <fd-layout-grid style="margin-bottom: 2rem">

diff --git a/apps/docs/src/app/core/component-docs/wizard/examples/wizard-example.component.scss b/apps/docs/src/app/core/component-docs/wizard/examples/wizard-example.component.scss
@@ -8,6 +8,10 @@
         margin-bottom: 12px !important;
     }
 
+    .fd-title--h2 {
+        padding: 8px 0 8px 32px;
+    }
+
     .fd-wizard__content {
         padding-left: 32px;
         padding-right: 32px;
@@ -18,6 +22,10 @@
         padding-right: 32px;
     }
 
+    .fd-bar--floating-footer {
+        margin: 8px;
+    }
+
     /* All calsses below are for the fullscreen functionality */
     .docs-wizard-example-overlay {
         height: 100%;

diff --git a/apps/docs/src/app/core/component-docs/wizard/examples/wizard-example.component.ts b/apps/docs/src/app/core/component-docs/wizard/examples/wizard-example.component.ts
@@ -34,6 +34,12 @@ export class WizardExampleComponent {
     addressLine1 = '';
     addressLine2 = '';
 
+    statusChanged(stepNumber: number, event: WizardStepStatus): void {
+        if (event === 'current') {
+            this.goToStep(stepNumber);
+        }
+    }
+
     goToStep(step: number): void {
         switch (step) {
             case 1: {

diff --git a/apps/docs/src/app/core/component-docs/wizard/examples/wizard-mobile-example.component.html b/apps/docs/src/app/core/component-docs/wizard/examples/wizard-mobile-example.component.html
@@ -5,7 +5,7 @@
                 <li
                     fd-wizard-step
                     [status]="example1step1status"
-                    (statusChange)="example1step1status = $event"
+                    (statusChange)="statusChanged(1, 1, $event)"
                     label="Step 1: One Line"
                 >
                     <fd-wizard-step-indicator glyph="accept"></fd-wizard-step-indicator>
@@ -23,7 +23,7 @@
                 <li
                     fd-wizard-step
                     [status]="example1step2status"
-                    (statusChange)="example1step2status = $event"
+                    (statusChange)="statusChanged(1, 2, $event)"
                     label="Step 2: Very long label that truncates on the second line"
                 >
                     <fd-wizard-step-indicator>2</fd-wizard-step-indicator>
@@ -48,7 +48,7 @@
                 <li
                     fd-wizard-step
                     [status]="example2step1status"
-                    (statusChange)="example2step1status = $event"
+                    (statusChange)="statusChanged(2, 1, $event)"
                     label="Step 1: One Line"
                 >
                     <fd-wizard-step-indicator glyph="accept"></fd-wizard-step-indicator>
@@ -62,7 +62,7 @@
                 <li
                     fd-wizard-step
                     [status]="example2step2status"
-                    (statusChange)="example2step2status = $event"
+                    (statusChange)="statusChanged(2, 2, $event)"
                     label="Step 2: Very long label that truncates on the second line"
                 >
                     <fd-wizard-step-indicator>2</fd-wizard-step-indicator>

diff --git a/apps/docs/src/app/core/component-docs/wizard/examples/wizard-mobile-example.component.ts b/apps/docs/src/app/core/component-docs/wizard/examples/wizard-mobile-example.component.ts
@@ -26,6 +26,16 @@ export class WizardMobileExampleComponent {
     example2step2status: WizardStepStatus = 'upcoming';
     example2step3status: WizardStepStatus = 'upcoming';
 
+    statusChanged(exampleNumber: number, stepNumber: number, event: WizardStepStatus): void {
+        if (event === 'current') {
+            if (exampleNumber === 1) {
+                this.example1goToStep(stepNumber);
+            } else if (exampleNumber === 2) {
+                this.example2goToStep(stepNumber);
+            }
+        }
+    }
+
     example1goToStep(step: number): void {
         switch (step) {
             case 2: {