diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss index 1efdc8ef7201..e18eeeea04a2 100644 --- a/packages/components/src/components/progress-indicator/_progress-indicator.scss +++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss @@ -225,10 +225,14 @@ display: block; } + .#{$prefix}--progress--vertical .#{$prefix}--progress-step { + padding-bottom: rem(24px); + } + .#{$prefix}--progress--vertical .#{$prefix}--progress-step, .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button { display: list-item; - min-height: 3.625rem; + min-height: rem(58px); width: initial; min-width: initial; } @@ -250,9 +254,10 @@ .#{$prefix}--progress--vertical .#{$prefix}--progress-label { display: inline-block; width: initial; - max-width: none; + max-width: rem(160px); vertical-align: top; margin: 0; + white-space: initial; } .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip { diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js index 1be3bf646867..84782662cadf 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js @@ -7,7 +7,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; -import { withKnobs, number } from '@storybook/addon-knobs'; +import { withKnobs, number, boolean, text } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; import { ProgressIndicator, ProgressStep } from '../ProgressIndicator'; import ProgressIndicatorSkeleton from '../ProgressIndicator/ProgressIndicator.Skeleton'; @@ -22,76 +22,10 @@ storiesOf('ProgressIndicator', module) 'Default', () => ( - ( - -

Overflow 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. -

-
- )} - /> - - -
- ), - { - info: { - text: ` - For React usage, ProgressIndicator holds the currentIndex state to indicate which ProgressStep is the current step. The ProgressIndicator component should always be used with ProgressStep components as its children. Changing currentIndex prop will automatically set the ProgressStep components props (complete, incomplete, current). - For general usage, Progress Indicators display steps in a process. It should indicate when steps have been complete, the active step, - and the steps to come. - `, - }, - } - ) - .add( - 'Vertical', - () => ( - -