🐛 Fix Alert descriptin wrapping

close #20313
ant-design · Dec 18, 2019 · 45dd1e5 · 45dd1e5
1 parent 0195679
commit 45dd1e5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/components/alert/ErrorBoundary.tsx b/components/alert/ErrorBoundary.tsx
@@ -34,7 +34,9 @@ export default class ErrorBoundary extends React.Component<
     const errorDescription = typeof description === 'undefined' ? componentStack : description;
     if (error) {
       // You can render any custom fallback UI
-      return <Alert type="error" message={errorMessage} description={errorDescription} />;
+      return (
+        <Alert type="error" message={errorMessage} description={<pre>{errorDescription}</pre>} />
+      );
     }
     return children;
   }

diff --git a/components/alert/__tests__/__snapshots__/index.test.js.snap b/components/alert/__tests__/__snapshots__/index.test.js.snap
@@ -13,10 +13,11 @@ exports[`Alert ErrorBoundary 1`] = `
   <span
     class="ant-alert-description"
   >
-    
-    in ThrowError
+    <pre>
+          in ThrowError
     in ErrorBoundary (created by WrapperComponent)
     in WrapperComponent
+    </pre>
   </span>
 </div>
 `;
diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -68,8 +68,9 @@
       color: @alert-error-icon-color;
     }
 
-    .@{alert-prefix-cls}-description {
-      white-space: pre;
+    .@{alert-prefix-cls}-description > pre {
+      margin: 0;
+      padding: 0;
     }
   }