diff --git a/.changeset/few-zebras-happen.md b/.changeset/few-zebras-happen.md new file mode 100644 index 00000000000..a5dac25c642 --- /dev/null +++ b/.changeset/few-zebras-happen.md @@ -0,0 +1,5 @@ +--- +'@talend/react-components': patch +--- + +fix(stepper): bring back a css selector and setup a width diff --git a/packages/components/src/Stepper/Stepper.component.js b/packages/components/src/Stepper/Stepper.component.js index 5d9bba6e222..eda6ffb0472 100644 --- a/packages/components/src/Stepper/Stepper.component.js +++ b/packages/components/src/Stepper/Stepper.component.js @@ -174,12 +174,14 @@ function Stepper({ steps, title, renderActions, children }) { if (!!errorStep) { return ( - - - {renderActions && renderActions(!!errorStep) ? ( -
{renderActions(!!errorStep)}
- ) : null} - +
+ + + {renderActions && renderActions(!!errorStep) ? ( +
{renderActions(!!errorStep)}
+ ) : null} + +
); } diff --git a/packages/components/src/Stepper/Stepper.component.module.scss b/packages/components/src/Stepper/Stepper.component.module.scss index c728e51e972..3edb45cf42e 100644 --- a/packages/components/src/Stepper/Stepper.component.module.scss +++ b/packages/components/src/Stepper/Stepper.component.module.scss @@ -2,6 +2,13 @@ $stepper-icon-size: $svg-md-size !default; +.loading-content-steps { + &.error { + width: 70%; + margin: auto; + } +} + .stepper { display: flex; width: 100%; diff --git a/packages/components/src/Stepper/Stepper.stories.js b/packages/components/src/Stepper/Stepper.stories.js index d1d69abc8eb..9723c428ab8 100644 --- a/packages/components/src/Stepper/Stepper.stories.js +++ b/packages/components/src/Stepper/Stepper.stories.js @@ -56,7 +56,10 @@ export const StepperWithError = () => { { label: 'Global Quality', status: Stepper.LOADING_STEP_STATUSES.FAILURE, - message: { label: "We couldn't connect to the remote engine" }, + message: { + label: + "We couldn't connect to the remote engine - We couldn't connect to the remote engine - We couldn't connect to the remote engine - We couldn't connect to the remote engine - We couldn't connect to the remote engine - We couldn't connect to the remote engine - We couldn't connect to the remote engine - We couldn't connect to the remote engine", + }, }, { label: 'Flattening', status: Stepper.LOADING_STEP_STATUSES.ABORTED }, { diff --git a/packages/components/src/Stepper/__snapshots__/Stepper.component.test.js.snap b/packages/components/src/Stepper/__snapshots__/Stepper.component.test.js.snap index 44b4a4ddd23..fdc5a3dcba9 100644 --- a/packages/components/src/Stepper/__snapshots__/Stepper.component.test.js.snap +++ b/packages/components/src/Stepper/__snapshots__/Stepper.component.test.js.snap @@ -4,67 +4,71 @@ exports[`Stepper Component render should render when there is an errors in the s
-
-
- - - - - - - -
-

+ + + + + + + +
- Global Quality -

-

- We couldn't connect to the remote engine -

+

+ Global Quality +

+

+ We couldn't connect to the remote engine +

+
-
- + +