fix(dashboardeditor): add padding around skeletontext in loading

carbon-design-system · Dec 9, 2020 · 7da9a63 · 7da9a63
1 parent 9986d4f
commit 7da9a63
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/src/components/DashboardEditor/DashboardEditor.jsx b/src/components/DashboardEditor/DashboardEditor.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { InlineNotification } from 'carbon-components-react';
+import { InlineNotification, SkeletonText } from 'carbon-components-react';
 import isNil from 'lodash/isNil';
 import classnames from 'classnames';
 import update from 'immutability-helper';
@@ -11,12 +11,7 @@ import {
   CARD_ACTIONS,
   CARD_TYPES,
 } from '../../constants/LayoutConstants';
-import {
-  DashboardGrid,
-  CardEditor,
-  ErrorBoundary,
-  SkeletonText,
-} from '../../index';
+import { DashboardGrid, CardEditor, ErrorBoundary } from '../../index';
 import ImageGalleryModal, {
   ImagePropTypes,
 } from '../ImageGalleryModal/ImageGalleryModal';
@@ -394,7 +389,9 @@ const DashboardEditor = ({
   });
 
   return isLoading ? (
-    <SkeletonText width="30%" />
+    <div className={baseClassName}>
+      <SkeletonText width="30%" />
+    </div>
   ) : (
     <div className={baseClassName}>
       <div

diff --git a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
@@ -4326,14 +4326,18 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
         }
       }
     >
-      <p
-        className="bx--skeleton__text"
-        style={
-          Object {
-            "width": "30%",
+      <div
+        className="iot--dashboard-editor"
+      >
+        <p
+          className="bx--skeleton__text"
+          style={
+            Object {
+              "width": "30%",
+            }
           }
-        }
-      />
+        />
+      </div>
     </div>
   </div>
   <button

diff --git a/src/components/DashboardEditor/_dashboard-editor.scss b/src/components/DashboardEditor/_dashboard-editor.scss
@@ -1,6 +1,10 @@
 .#{$iot-prefix}--dashboard-editor {
   display: flex;
   height: 100%;
+  > .#{$prefix}--skeleton__text {
+    margin-top: 1rem;
+    margin-left: 1rem;
+  }
 
   &__overflow {
     overflow-x: auto; // allows a larger width