diff --git a/packages/react/src/components/ComposedModal/ModalFooter.tsx b/packages/react/src/components/ComposedModal/ModalFooter.tsx index 688040a74bd6..1d8100532c2c 100644 --- a/packages/react/src/components/ComposedModal/ModalFooter.tsx +++ b/packages/react/src/components/ComposedModal/ModalFooter.tsx @@ -6,6 +6,7 @@ import cx from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { noopFn } from '../../internal/noopFn'; import InlineLoading from '../InlineLoading'; +import { InlineLoadingStatus } from '../InlineLoading/InlineLoading'; interface SecondaryButtonProps { buttonText: ReactNode; @@ -166,7 +167,7 @@ export interface ModalFooterProps { /** * loading status */ - loadingStatus?: string; + loadingStatus?: InlineLoadingStatus; /** * Specify the description for the loading text diff --git a/packages/react/src/components/InlineLoading/InlineLoading.js b/packages/react/src/components/InlineLoading/InlineLoading.tsx similarity index 70% rename from packages/react/src/components/InlineLoading/InlineLoading.js rename to packages/react/src/components/InlineLoading/InlineLoading.tsx index 7b4bbc9ba6f2..0f5d838936ef 100644 --- a/packages/react/src/components/InlineLoading/InlineLoading.js +++ b/packages/react/src/components/InlineLoading/InlineLoading.tsx @@ -12,15 +12,64 @@ import { CheckmarkFilled, ErrorFilled } from '@carbon/icons-react'; import Loading from '../Loading'; import { usePrefix } from '../../internal/usePrefix'; -export default function InlineLoading({ +export const InlineLoadingStatuses = [ + 'inactive', + 'active', + 'finished', + 'error', +] as const; + +export type InlineLoadingStatus = (typeof InlineLoadingStatuses)[number]; + +export interface InlineLoadingProps + extends Omit< + React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLDivElement + >, + 'children' + > { + /** + * Specify a custom className to be applied to the container node + */ + className?: string; + + /** + * Specify the description for the inline loading text + */ + description?: React.ReactNode; + + /** + * Specify the description for the inline loading text + */ + iconDescription?: string; + + /** + * Provide an optional handler to be invoked when is + * successful + */ + onSuccess?: () => void; + + /** + * Specify the loading status + */ + status?: InlineLoadingStatus; + + /** + * Provide a delay for the `setTimeout` for success + */ + successDelay?: number; +} + +const InlineLoading = ({ className, status = 'active', iconDescription, description, onSuccess, successDelay = 1500, - ...other -}) { + ...rest +}: InlineLoadingProps) => { const prefix = usePrefix(); const loadingClasses = classNames(`${prefix}--inline-loading`, className); const getLoading = () => { @@ -70,13 +119,13 @@ export default function InlineLoading({ return (
+ {...rest} + aria-live={'assertive' || rest['aria-live']}> {loadingAnimation} {description && loadingText}
); -} +}; InlineLoading.propTypes = { /** @@ -110,3 +159,5 @@ InlineLoading.propTypes = { */ successDelay: PropTypes.number, }; + +export default InlineLoading; diff --git a/packages/react/src/components/InlineLoading/index.js b/packages/react/src/components/InlineLoading/index.ts similarity index 100% rename from packages/react/src/components/InlineLoading/index.js rename to packages/react/src/components/InlineLoading/index.ts diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx index 3168587f70de..ac4b27fa00c2 100644 --- a/packages/react/src/components/Modal/Modal.tsx +++ b/packages/react/src/components/Modal/Modal.tsx @@ -23,6 +23,7 @@ import { keys, match } from '../../internal/keyboard'; import { noopFn } from '../../internal/noopFn'; import { Text } from '../Text'; import { ReactAttr } from '../../types/common'; +import { InlineLoadingStatus } from '../InlineLoading/InlineLoading'; const getInstanceId = setupGetInstanceId(); @@ -101,7 +102,7 @@ export interface ModalProps extends ReactAttr { /** * Specify loading status */ - loadingStatus?: string; + loadingStatus?: InlineLoadingStatus; /** * Specify a label to be read by screen readers on the modal root node @@ -128,7 +129,7 @@ export interface ModalProps extends ReactAttr { * Specify an optional handler to be invoked when loading is * successful */ - onLoadingSuccess?: React.ReactEventHandler; + onLoadingSuccess?: () => void; /** * Specify a handler for closing modal.