fix(inline-loading): add or update live control args (#22189)

irsalsss · web-flow · commit fbcc53bc2ce2 · 2026-05-18T09:05:03.000Z
* fix(InlineLoading): update args

* fix: update success callback and remove deprecated assistive text prop

* fix: import action handler and revert 'assistive-text' property
diff --git a/packages/react/src/components/InlineLoading/InlineLoading.stories.js b/packages/react/src/components/InlineLoading/InlineLoading.stories.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,6 +9,7 @@ import React, { useState } from 'react';
 import Button from '../Button';
 import InlineLoading from '.';
 import mdx from './InlineLoading.mdx';
+import { action } from 'storybook/actions';
 
 export default {
   title: 'Components/InlineLoading',
@@ -20,6 +21,38 @@ export default {
   },
 };
 
+const sharedArgTypes = {
+  description: {
+    control: {
+      type: 'text',
+    },
+  },
+  iconDescription: {
+    control: {
+      type: 'text',
+    },
+  },
+  successDelay: {
+    control: {
+      type: 'number',
+    },
+  },
+  status: {
+    options: ['inactive', 'active', 'error', 'finished'],
+    control: {
+      type: 'select',
+    },
+  },
+  onSuccess: {
+    action: 'onSuccess',
+  },
+  'aria-live': {
+    control: {
+      type: 'text',
+    },
+  },
+};
+
 export const UxExample = () => {
   function MockSubmission({ children }) {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
@@ -82,6 +115,9 @@ export const Default = (args) => <InlineLoading {...args} />;
 Default.args = {
   description: 'Loading',
   iconDescription: 'Loading data...',
+  status: 'active',
+  onSuccess: action('onSuccess'),
+  'aria-live': 'assertive',
 };
 
 Default.parameters = {
@@ -90,15 +126,4 @@ Default.parameters = {
   },
 };
 
-Default.argTypes = {
-  description: {
-    control: {
-      type: 'text',
-    },
-  },
-  iconDescription: {
-    control: {
-      type: 'text',
-    },
-  },
-};
+Default.argTypes = { ...sharedArgTypes };
diff --git a/packages/web-components/src/components/inline-loading/inline-loading.stories.ts b/packages/web-components/src/components/inline-loading/inline-loading.stories.ts
@@ -18,10 +18,8 @@ const states = {
 const noop = () => {};
 const defaultArgs = {
   description: 'Loading data...',
-  assistiveText: 'Loading',
   iconDescription: 'Loading',
   status: INLINE_LOADING_STATE.ACTIVE,
-  successDelay: 2000,
 };
 
 const getControls = ({ disableControl }) => {
@@ -40,22 +38,17 @@ const getControls = ({ disableControl }) => {
       description: 'Specify the loading status.',
       options: states,
     },
-    successDelay: {
-      control: disableControl,
-      description: 'Provide a delay for the setTimeout for success',
-    },
   };
 };
 
 export const Default = {
   args: defaultArgs,
   argTypes: getControls({ disableControl: false }),
-  render: ({ assistiveText, description, status, iconDescription }) => {
+  render: ({ description, status, iconDescription }) => {
     return html`
       <cds-inline-loading
         status="${status}"
         success-delay=${2000}
-        assistive-text=${assistiveText}
         icon-description=${iconDescription}
         }>
         ${description}
