[Inline loading] Updated text size and states (carbon-design-system#4374

)

* inline loading

* Update style.mdx

* inlineloading

* inlineloading

* inlineloading

* inline loading

---------

Co-authored-by: Guilherme Datilio Ribeiro <[email protected]>

src/pages/components/inline-loading/style.mdx

@@ -23,7 +23,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 <Row>
 <Column colLg={8}>
 
-![Example of inline loading states](images/inline-loading-states.png)
+![Example of inline loading states](images/inline-loading-states-style.png)
 
 </Column>
 </Row>
@@ -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
 

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.
 
 <Row>
 <Column colLg={8}>
@@ -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.
 
 <Row>
 <Column colLg={8}>