fix(Loading): use description prop as SVG title (carbon-design-system…

…#2955) * fix(Loading): use description prop as SVG title * docs(Loading): expose icon description props
joshblack · Jun 11, 2019 · ecfe501 · ecfe501
1 parent 29d95fe
commit ecfe501
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/packages/react/src/components/InlineLoading/InlineLoading-story.js b/packages/react/src/components/InlineLoading/InlineLoading-story.js
@@ -16,6 +16,10 @@ import InlineLoading from '../InlineLoading';
 
 const props = () => ({
   success: boolean('Loading successful state (success)', false),
+  iconDescription: text(
+    'Icon description (iconDescription)',
+    'Active loading indicator'
+  ),
   description: text(
     'Loading progress description (description)',
     'Loading data...'
@@ -105,7 +109,7 @@ storiesOf('InlineLoading', module)
       info: {
         text: `
             This is a full example of how to levarage the <InlineLoading /> component to create a nice user experience when submitting a form.
-    
+
             For the full source code of this example, check out the 'story' panel below.
           `,
       },

diff --git a/packages/react/src/components/InlineLoading/InlineLoading.js b/packages/react/src/components/InlineLoading/InlineLoading.js
@@ -30,6 +30,11 @@ export default class InlineLoading extends React.Component {
      */
     description: PropTypes.string,
 
+    /**
+     * Specify the description for the inline loading text
+     */
+    iconDescription: PropTypes.string,
+
     /**
      * Provide an optional handler to be inovked when <InlineLoading> is
      * successful
@@ -51,6 +56,7 @@ export default class InlineLoading extends React.Component {
     const {
       className,
       success,
+      iconDescription,
       description,
       onSuccess,
       successDelay,
@@ -80,7 +86,9 @@ export default class InlineLoading extends React.Component {
         );
       }
 
-      return <Loading small withOverlay={false} />;
+      return (
+        <Loading small description={iconDescription} withOverlay={false} />
+      );
     };
 
     const loadingText = (

diff --git a/packages/react/src/components/Loading/Loading-story.js b/packages/react/src/components/Loading/Loading-story.js
@@ -7,14 +7,14 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import Loading from '../Loading';
 
 const props = () => ({
   active: boolean('Active (active)', true),
   withOverlay: boolean('With overlay (withOverlay)', false),
   small: boolean('Small (small)', false),
+  description: text('Description (description)', 'Active loading indicator'),
 });
 
 storiesOf('Loading', module)

diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.js
@@ -73,7 +73,7 @@ export default class Loading extends React.Component {
         aria-live={active ? 'assertive' : 'off'}
         className={loadingClasses}>
         <svg className={`${prefix}--loading__svg`} viewBox="-75 -75 150 150">
-          <title>Loading</title>
+          <title>{description}</title>
           {small ? (
             <circle
               className={`${prefix}--loading__background`}