fix(stepper): add back css selector on error state (#4648)

Talend · Mar 21, 2023 · 6d2d52b · 6d2d52b
1 parent 231bb3e
commit 6d2d52b
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 61 deletions.
diff --git a/.changeset/few-zebras-happen.md 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
@@ -174,12 +174,14 @@ function Stepper({ steps, title, renderActions, children }) {
 
 	if (!!errorStep) {
 		return (
-			<StackVertical gap={0} align="center" justify="center">
-				<ErrorState title={errorStep.label} description={errorStep.message?.label} />
-				{renderActions && renderActions(!!errorStep) ? (
-					<div>{renderActions(!!errorStep)}</div>
-				) : null}
-			</StackVertical>
+			<div className={getClass('loading-content-steps', 'error')}>
+				<StackVertical gap={0} align="center" justify="center">
+					<ErrorState title={errorStep.label} description={errorStep.message?.label} />
+					{renderActions && renderActions(!!errorStep) ? (
+						<div>{renderActions(!!errorStep)}</div>
+					) : null}
+				</StackVertical>
+			</div>
 		);
 	}
 

diff --git 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
@@ -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
@@ -4,67 +4,71 @@ exports[`Stepper Component render should render when there is an errors in the s
 <body>
   <div>
     <div
-      class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-column theme-block theme-gap-x-0 theme-gap-y-0"
+      class="loading-content-steps theme-loading-content-steps error theme-error"
     >
-      <article
-        class="theme-error-state"
+      <div
+        class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-column theme-block theme-gap-x-0 theme-gap-y-0"
       >
-        <div
-          class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-column theme-block theme-gap-x-M theme-gap-y-M"
+        <article
+          class="theme-error-state"
         >
-          <svg
-            fill="none"
-            height="40"
-            viewBox="0 0 40 40"
-            width="40"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M22 38C30.8366 38 38 30.8366 38 22C38 13.1634 30.8366 6 22 6C13.1634 6 6 13.1634 6 22C6 30.8366 13.1634 38 22 38ZM23.446 12.5863C24.2529 11.8046 25.5588 11.8046 26.3657 12.5863L29.2854 15.4147C30.0923 16.1964 30.0923 17.4614 29.2854 18.2431L26.3657 21.0715L29.2854 23.9C30.0923 24.6817 30.0923 25.9467 29.2854 26.7284L26.3657 29.5568C25.5588 30.3385 24.2529 30.3385 23.446 29.5568L20.5264 26.7284L17.6067 29.5568C16.7998 30.3385 15.4939 30.3385 14.687 29.5568L11.7674 26.7284C10.9605 25.9467 10.9605 24.6817 11.7674 23.9L14.687 21.0715L11.7674 18.2431C11.4851 17.9697 11.3012 17.6368 11.2157 17.286C11.0603 16.6356 11.2427 15.9229 11.7674 15.4147L14.687 12.5863C15.4939 11.8046 16.7998 11.8046 17.6067 12.5863L20.5264 15.4147L23.446 12.5863Z"
-              fill="var(--coral-color-illustration-color-05, hsla(20,23%,97%,1))"
-              fill-rule="evenodd"
-            />
-            <path
-              d="M14.4148 21.0715L11.5863 23.9C10.8047 24.6817 10.8047 25.9467 11.5863 26.7284L14.4148 29.5568C15.1965 30.3385 16.4615 30.3385 17.2432 29.5568L20.0716 26.7284L22.9001 29.5568C23.6817 30.3385 24.9468 30.3385 25.7285 29.5568L28.5569 26.7284C29.3386 25.9467 29.3386 24.6817 28.5569 23.9L25.7285 21.0715L28.5569 18.2431C29.3386 17.4614 29.3386 16.1964 28.5569 15.4147L25.7285 12.5863C24.9468 11.8046 23.6817 11.8046 22.9001 12.5863L20.0716 15.4147L17.2432 12.5863C16.4615 11.8046 15.1965 11.8046 14.4148 12.5863L11.5863 15.4147C11.0781 15.9229 10.9013 16.6356 11.0519 17.286C11.1347 17.6368 11.3129 17.9697 11.5863 18.2431L12.3432 19"
-              stroke="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-            <path
-              d="M27.4888 6.43875C19.8361 2.02047 10.0506 4.64247 5.63235 12.2952C1.21407 19.9478 3.83607 29.7333 11.4888 34.1516C19.1414 38.5698 28.9269 35.9478 33.3452 28.2952C35.3741 24.781 35.9184 20.8171 35.1727 17.1297"
-              stroke="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
-              stroke-linecap="round"
-              stroke-width="2"
-            />
-            <path
-              d="M33.6806 14.8354C33.2023 14.5592 33.0384 13.9476 33.3146 13.4693C33.5907 12.9911 34.2023 12.8272 34.6806 13.1033C35.1589 13.3795 35.3228 13.9911 35.0466 14.4693C34.7705 14.9476 34.1589 15.1115 33.6806 14.8354Z"
-              fill="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
-            />
-            <path
-              d="M31.9585 11.7008C31.4802 11.4247 31.3163 10.8131 31.5925 10.3348C31.8686 9.85653 32.4802 9.69265 32.9585 9.9688C33.4368 10.2449 33.6006 10.8565 33.3245 11.3348C33.0484 11.8131 32.4368 11.977 31.9585 11.7008Z"
-              fill="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
-            />
-            <path
-              d="M29.5849 9.17131C29.1067 8.89516 28.9428 8.28357 29.2189 7.80528C29.4951 7.32699 30.1067 7.16311 30.5849 7.43926C31.0632 7.7154 31.2271 8.32699 30.951 8.80528C30.6748 9.28357 30.0632 9.44745 29.5849 9.17131Z"
-              fill="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
-            />
-          </svg>
           <div
-            class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-column theme-block theme-gap-x-0 theme-gap-y-0"
+            class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-column theme-block theme-gap-x-M theme-gap-y-M"
           >
-            <h3
-              class="theme-error-state__title"
+            <svg
+              fill="none"
+              height="40"
+              viewBox="0 0 40 40"
+              width="40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M22 38C30.8366 38 38 30.8366 38 22C38 13.1634 30.8366 6 22 6C13.1634 6 6 13.1634 6 22C6 30.8366 13.1634 38 22 38ZM23.446 12.5863C24.2529 11.8046 25.5588 11.8046 26.3657 12.5863L29.2854 15.4147C30.0923 16.1964 30.0923 17.4614 29.2854 18.2431L26.3657 21.0715L29.2854 23.9C30.0923 24.6817 30.0923 25.9467 29.2854 26.7284L26.3657 29.5568C25.5588 30.3385 24.2529 30.3385 23.446 29.5568L20.5264 26.7284L17.6067 29.5568C16.7998 30.3385 15.4939 30.3385 14.687 29.5568L11.7674 26.7284C10.9605 25.9467 10.9605 24.6817 11.7674 23.9L14.687 21.0715L11.7674 18.2431C11.4851 17.9697 11.3012 17.6368 11.2157 17.286C11.0603 16.6356 11.2427 15.9229 11.7674 15.4147L14.687 12.5863C15.4939 11.8046 16.7998 11.8046 17.6067 12.5863L20.5264 15.4147L23.446 12.5863Z"
+                fill="var(--coral-color-illustration-color-05, hsla(20,23%,97%,1))"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M14.4148 21.0715L11.5863 23.9C10.8047 24.6817 10.8047 25.9467 11.5863 26.7284L14.4148 29.5568C15.1965 30.3385 16.4615 30.3385 17.2432 29.5568L20.0716 26.7284L22.9001 29.5568C23.6817 30.3385 24.9468 30.3385 25.7285 29.5568L28.5569 26.7284C29.3386 25.9467 29.3386 24.6817 28.5569 23.9L25.7285 21.0715L28.5569 18.2431C29.3386 17.4614 29.3386 16.1964 28.5569 15.4147L25.7285 12.5863C24.9468 11.8046 23.6817 11.8046 22.9001 12.5863L20.0716 15.4147L17.2432 12.5863C16.4615 11.8046 15.1965 11.8046 14.4148 12.5863L11.5863 15.4147C11.0781 15.9229 10.9013 16.6356 11.0519 17.286C11.1347 17.6368 11.3129 17.9697 11.5863 18.2431L12.3432 19"
+                stroke="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              />
+              <path
+                d="M27.4888 6.43875C19.8361 2.02047 10.0506 4.64247 5.63235 12.2952C1.21407 19.9478 3.83607 29.7333 11.4888 34.1516C19.1414 38.5698 28.9269 35.9478 33.3452 28.2952C35.3741 24.781 35.9184 20.8171 35.1727 17.1297"
+                stroke="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
+                stroke-linecap="round"
+                stroke-width="2"
+              />
+              <path
+                d="M33.6806 14.8354C33.2023 14.5592 33.0384 13.9476 33.3146 13.4693C33.5907 12.9911 34.2023 12.8272 34.6806 13.1033C35.1589 13.3795 35.3228 13.9911 35.0466 14.4693C34.7705 14.9476 34.1589 15.1115 33.6806 14.8354Z"
+                fill="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
+              />
+              <path
+                d="M31.9585 11.7008C31.4802 11.4247 31.3163 10.8131 31.5925 10.3348C31.8686 9.85653 32.4802 9.69265 32.9585 9.9688C33.4368 10.2449 33.6006 10.8565 33.3245 11.3348C33.0484 11.8131 32.4368 11.977 31.9585 11.7008Z"
+                fill="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
+              />
+              <path
+                d="M29.5849 9.17131C29.1067 8.89516 28.9428 8.28357 29.2189 7.80528C29.4951 7.32699 30.1067 7.16311 30.5849 7.43926C31.0632 7.7154 31.2271 8.32699 30.951 8.80528C30.6748 9.28357 30.0632 9.44745 29.5849 9.17131Z"
+                fill="var(--coral-color-illustration-color-04, hsla(201,41%,64%,1))"
+              />
+            </svg>
+            <div
+              class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-column theme-block theme-gap-x-0 theme-gap-y-0"
             >
-              Global Quality
-            </h3>
-            <p>
-              We couldn't connect to the remote engine
-            </p>
+              <h3
+                class="theme-error-state__title"
+              >
+                Global Quality
+              </h3>
+              <p>
+                We couldn't connect to the remote engine
+              </p>
+            </div>
           </div>
-        </div>
-      </article>
+        </article>
+      </div>
     </div>
   </div>
 </body>