fix(loading-message): display message with overlay (#500)

Co-authored-by: Jen Downs <[email protected]>

src/components/Loading/Loading.stories.js

@@ -1,15 +1,15 @@
 /**
  * @file Loading stories.
- * @copyright IBM Security 2019
+ * @copyright IBM Security 2019 - 2020
  */
 
-import React from 'react';
+import { boolean, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
-import { boolean } from '@storybook/addon-knobs';
 
-import { components } from '../../../.storybook';
+import React from 'react';
 
-import { Loading, LoadingMessage } from '../../';
+import { components, info } from '../../../.storybook';
+import { Loading, LoadingMessage } from '../..';
 
 const props = () => ({
   active: boolean('Active (active)', true),
@@ -20,31 +20,19 @@ const props = () => ({
 storiesOf(components('Loading'), module)
   .add(
     'Default',
-    () => {
-      return <Loading {...props()} className="some-class" />;
-    },
-    {
-      info: {
-        text: `
-            Loading spinners are used when retrieving data or performing slow computations,
-            and help to notify users that loading is underway. The 'active' property is true by default;
-            set to false to end the animation.
-          `,
-      },
-    }
+    () => <Loading {...props()} />,
+    info(
+      "Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. The 'active' property is true by default; set to false to end the animation."
+    )
   )
   .add(
-    'with message',
+    'Message',
     () => (
-      <LoadingMessage {...props}>
-        <div>Loading message</div>
+      <LoadingMessage {...props()}>
+        {text('Children (children)', 'Loading message')}
       </LoadingMessage>
     ),
-    {
-      info: {
-        text: `
-            The \`LoadingMessage\` component is like the \`Loading\`, but it accepts a child node with a message to display in the loading overlay.
-          `,
-      },
-    }
+    info(
+      'The `LoadingMessage` component is like the `Loading` component, but it accepts a child node with a message to display within the loading overlay.'
+    )
   );

src/components/Loading/LoadingMessage/LoadingMessage.js

@@ -1,12 +1,20 @@
 /**
- * @file LoadingMessage.
- * @copyright IBM Security 2019
+ * @file Loading message.
+ * @copyright IBM Security 2019 - 2020
  */
 
-import PropTypes from 'prop-types';
-import React from 'react';
 import classnames from 'classnames';
-import Loading from '../';
+import { bool, node, string } from 'prop-types';
+import React from 'react';
+
+import Loading from '..';
+
+import {
+  carbonPrefix,
+  getComponentNamespace,
+} from '../../../globals/namespace';
+
+const overlayNamespace = `${carbonPrefix}loading-overlay`;
 
 const LoadingMessage = ({
   active,
@@ -15,51 +23,41 @@ const LoadingMessage = ({
   small,
   withOverlay,
   ...other
-}) => {
-  const loading = (
+}) => (
+  <div
+    className={classnames(getComponentNamespace('loading-message'), className, {
+      [overlayNamespace]: withOverlay,
+      [`${overlayNamespace}--stop`]: withOverlay && !active,
+    })}
+  >
     <Loading active={active} small={small} withOverlay={false} {...other} />
-  );
+    {children}
+  </div>
+);
 
-  const overlayClasses = classnames('bx--loading-overlay', className, {
-    'bx--loading-overlay--stop': !active,
-  });
-
-  return withOverlay ? (
-    <div className={overlayClasses}>
-      {loading}
-      {children}
-    </div>
-  ) : (
-    loading
-  );
+LoadingMessage.defaultProps = {
+  children: null,
+  active: true,
+  withOverlay: true,
+  small: false,
+  className: null,
 };
 
-const propTypes = {
-  /** @type {bool} Active loading icon. */
-  active: PropTypes.bool,
-
-  /** @type {string} A class. */
-  className: PropTypes.string,
+LoadingMessage.propTypes = {
+  /** Provide the contents of the `LoadingMessage` */
+  children: node,
 
-  /** @type {bool} Overlay all other elements. */
-  withOverlay: PropTypes.bool,
+  /** Specify whether the `Loading` is active */
+  active: bool,
 
-  /** @type {bool} Small loading view. */
-  small: PropTypes.bool,
+  /** Specify whether to use an overlay */
+  withOverlay: bool,
 
-  /** @type {ReactNode|Object<ReactNode>} Children. */
-  children: PropTypes.node,
-};
+  /** Specify whether to use the small variation  */
+  small: bool,
 
-const defaultProps = {
-  active: true,
-  className: '',
-  withOverlay: true,
-  small: false,
-  children: null,
+  /** Provide an optional class to be applied to the containing node */
+  className: string,
 };
 
-LoadingMessage.defaultProps = defaultProps;
-LoadingMessage.propTypes = propTypes;
-
 export default LoadingMessage;

src/components/Loading/LoadingMessage/_index.scss

@@ -0,0 +1,12 @@
+////
+/// Loading message.
+/// @group loading-message
+/// @copyright IBM Security 2020
+////
+
+@import '../../Component/mixins';
+
+@include security--component($name: loading-message) {
+  display: flex;
+  align-items: center;
+}

src/components/Loading/_index.scss

@@ -1,7 +1,7 @@
 ////
 /// Loading component.
 /// @group loading
-/// @copyright IBM Security 2019
+/// @copyright IBM Security 2019 - 2020
 ////
 
 @import '@carbon/layout/scss/spacing';
@@ -11,6 +11,8 @@
 
 @import '../../globals/namespace/index';
 
+@import 'LoadingMessage/index';
+
 @include export-namespace($name: loading) {
   .#{$prefix}--loading {
     /// Dimensions.

src/components/__tests__/__snapshots__/publicAPI.spec.js.snap

@@ -4520,7 +4520,7 @@ Map {
     "defaultProps": Object {
       "active": true,
       "children": null,
-      "className": "",
+      "className": null,
       "small": false,
       "withOverlay": true,
     },