Merge pull request #2515 from rajeshkumaru/issue-2513

issue-2513: Progress Indicator: fixed optionalText styling to make it consistent with react carbon component

Author: zvonimirfras

src/progress-indicator/progress-indicator.component.ts

@@ -28,7 +28,7 @@ import { Step } from "./progress-indicator-step.interface";
 			class="bx--progress-step bx--progress-step--{{step.state[0]}}"
 			*ngFor="let step of steps; let i = index"
 			[ngClass]="{'bx--progress-step--disabled' : step.disabled}">
-			<div class="bx--progress-step-button bx--progress-step-button--unclickable" role="button" tabindex="-1">
+			<button class="bx--progress-step-button bx--progress-step-button--unclickable" role="button" tabindex="-1">
 				<ng-container *ngIf="!step.state.includes('error')">
 					<svg ibmIcon="checkmark--outline" size="16" *ngIf="step.state.includes('complete')"></svg>
 					<svg ibmIcon="incomplete" size="16" *ngIf="step.state.includes('current')"></svg>
@@ -48,10 +48,12 @@ import { Step } from "./progress-indicator-step.interface";
 					(click)="stepSelected.emit({ step: step, index: i })">
 					{{step.text}}
 				</p>
-				<p class="bx--progress-label" *ngIf="!step.tooltip" (click)="stepSelected.emit({ step: step, index: i })">{{step.text}}</p>
-				<p *ngIf="step.optionalText" class="bx--progress-optional">{{step.optionalText}}</p>
+				<div class="bx--progress-text" *ngIf="!step.tooltip || step.optionalText">
+					<p class="bx--progress-label" *ngIf="!step.tooltip" (click)="stepSelected.emit({ step: step, index: i })">{{step.text}}</p>
+					<p *ngIf="step.optionalText" class="bx--progress-optional">{{step.optionalText}}</p>
+				</div>
 				<span class="bx--progress-line"></span>
-			</div>
+			</button>
 		</li>
 	</ul>
 	`

src/progress-indicator/progress-indicator.stories.ts

@@ -120,15 +120,25 @@ storiesOf("Components|Progress Indicator", module)
 			steps : [
 				{
 					text: "First step",
-					state: ["complete"]
+					state: ["complete"],
+					optionalText: "optional"
 				},
 				{
 					text: "Second step",
-					state: ["current"]
+					state: ["current"],
+					tooltip: { content: "Overflow tooltip content.", trigger: "click", placement: "bottom" }
 				},
 				{
 					text: "Third step",
-					state: ["incomplete"]
+					state: ["incomplete"],
+					tooltip: {
+						content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+							Animi consequuntur hic ratione aliquid cupiditate, nesciunt saepe iste
+							blanditiis cumque maxime tenetur veniam est illo deserunt sint quae pariatur.
+							Laboriosam, consequatur.`,
+						trigger: "click",
+						placement: "bottom"
+					}
 				},
 				{
 					text: "Fourth step",