diff --git a/src/pages/components/inline-loading/images/inline-loading-alignment.png b/src/pages/components/inline-loading/images/inline-loading-alignment.png index 2a2524aeb3e..b4ca93532f0 100644 Binary files a/src/pages/components/inline-loading/images/inline-loading-alignment.png and b/src/pages/components/inline-loading/images/inline-loading-alignment.png differ diff --git a/src/pages/components/inline-loading/images/inline-loading-anatomy.png b/src/pages/components/inline-loading/images/inline-loading-anatomy.png index 0241db3c203..5dbb890dbc2 100644 Binary files a/src/pages/components/inline-loading/images/inline-loading-anatomy.png and b/src/pages/components/inline-loading/images/inline-loading-anatomy.png differ diff --git a/src/pages/components/inline-loading/images/inline-loading-interactions.png b/src/pages/components/inline-loading/images/inline-loading-interactions.png index 34dac94cce8..bde0f435cb2 100644 Binary files a/src/pages/components/inline-loading/images/inline-loading-interactions.png and b/src/pages/components/inline-loading/images/inline-loading-interactions.png differ diff --git a/src/pages/components/inline-loading/images/inline-loading-states-style.png b/src/pages/components/inline-loading/images/inline-loading-states-style.png new file mode 100644 index 00000000000..17b0e4ab56e Binary files /dev/null and b/src/pages/components/inline-loading/images/inline-loading-states-style.png differ diff --git a/src/pages/components/inline-loading/images/inline-loading-states.png b/src/pages/components/inline-loading/images/inline-loading-states.png index 2f87ff05921..17b0e4ab56e 100644 Binary files a/src/pages/components/inline-loading/images/inline-loading-states.png and b/src/pages/components/inline-loading/images/inline-loading-states.png differ diff --git a/src/pages/components/inline-loading/images/inline-loading-style-1.png b/src/pages/components/inline-loading/images/inline-loading-style-1.png index 0c4c28e866e..cdfb423411c 100644 Binary files a/src/pages/components/inline-loading/images/inline-loading-style-1.png and b/src/pages/components/inline-loading/images/inline-loading-style-1.png differ diff --git a/src/pages/components/inline-loading/images/inline-loading-style-2.png b/src/pages/components/inline-loading/images/inline-loading-style-2.png deleted file mode 100644 index 6193503a9de..00000000000 Binary files a/src/pages/components/inline-loading/images/inline-loading-style-2.png and /dev/null differ diff --git a/src/pages/components/inline-loading/style.mdx b/src/pages/components/inline-loading/style.mdx index 7790c650a12..485f23b9799 100644 --- a/src/pages/components/inline-loading/style.mdx +++ b/src/pages/components/inline-loading/style.mdx @@ -23,7 +23,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] -![Example of inline loading states](images/inline-loading-states.png) +![Example of inline loading states](images/inline-loading-states-style.png) @@ -33,9 +33,9 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] Text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. -| Element | Font-size (px/rem) | Font-weight | Type token | -| ------- | ------------------ | ------------- | ----------- | -| Text | 12 / 0.75 | Regular / 400 | `$label-01` | +| Element | Font-size (px/rem) | Font-weight | Type token | +| ------- | ------------------ | ------------- | ------------------ | +| Text | 14 / 0.75 | Regular / 400 | `$body-compact-01` | ## Structure diff --git a/src/pages/components/inline-loading/usage.mdx b/src/pages/components/inline-loading/usage.mdx index b3f092c22e5..cc15c13fe2d 100755 --- a/src/pages/components/inline-loading/usage.mdx +++ b/src/pages/components/inline-loading/usage.mdx @@ -48,14 +48,14 @@ processed. ## Overview -Inline loading spinners are used when performing actions. They notify to the -user that their request is being processed. Although they do not provide details -about what is occurring on the back-end, they reassure the user that their -action is being processed. +Inline loading spinners are used to indicate that an action is being processed. +They inform users that their request is in progress, providing reassurance even +though they do not reveal specific details about the back-end process. -Common actions that benefit from inline loading include any create, update, or -delete actions that may have a lot of data to process. It can be used in a -table, after a primary or secondary button click, or even in a modal. +Common actions where inline loading is beneficial include create, update, or +delete operations that involve significant data processing. Inline loading can +appear in various contexts, such as within a table, after clicking a primary or +secondary button, or inside a modal. ### When to use @@ -124,7 +124,7 @@ For further content guidance, see Carbon's ### States -There are four states to inline loading: inactive, active, success, and error. +There are four states to inline loading: inactive, active, finished, and error. @@ -143,9 +143,9 @@ visual indicator. The active loading state indicates that the action is still in progress. -#### Success +#### Finished -The success loading state indicates that the action completed successfully. The +The finished loading state indicates that the action completed successfully. The success state is active for 1.5 seconds before calling an optional function `onSuccess`. Use the `onSuccess` function to refetch new data, close a modal, or reset a form. If no function is specified the success state will last @@ -159,11 +159,11 @@ notification or error handling within the form should appear. ### Interactions -Any interactive elements associated with the item that is loading should be -disabled until the loading is complete. For example, in a file uploader the item -that is loading is disabled until fully uploaded. If the inline loading is being -used to submit a form, the form fields should be disabled until the loading is -complete. +Any interactive elements associated with the button should be disabled while it +is loading. For example, when a user clicks a button on a modal to submit +information, the button itself displays a loading state and is disabled until +the action is complete. This ensures users cannot interact with the button again +during the process.