Merge branch 'master' into charlesdedreuille/act-355-header-improvements

docs-ui/src/app/components/alert/components.tsx

@@ -119,20 +119,20 @@ export const WithActionsAndDescriptions = () => {
   );
 };
 
-export const LoadingStates = () => {
+export const PendingStates = () => {
   return (
     <Flex direction="column" gap="4">
       <Alert
         status="info"
         icon={true}
-        loading
+        isPending
         title="Processing your request..."
       />
-      <Alert status="success" icon={true} loading title="Saving changes..." />
+      <Alert status="success" icon={true} isPending title="Saving changes..." />
       <Alert
         status="info"
         icon={true}
-        loading
+        isPending
         title="Processing your request"
         description="This may take a few moments. Please do not close this window."
       />

docs-ui/src/app/components/alert/page.mdx

@@ -8,7 +8,7 @@ import {
   statusVariantsSnippet,
   withDescriptionSnippet,
   withActionsSnippet,
-  loadingStatesSnippet,
+  pendingStatesSnippet,
   withoutIconsSnippet,
   customIconSnippet,
 } from './snippets';
@@ -17,7 +17,7 @@ import {
   StatusVariants,
   WithDescription,
   WithActions,
-  LoadingStates,
+  PendingStates,
   WithoutIcons,
   CustomIcon,
 } from './components';
@@ -79,16 +79,16 @@ Include custom actions like buttons for interactive alerts.
   code={withActionsSnippet}
 />
 
-### Loading States
+### Pending State
 
-The loading spinner replaces the icon to indicate an ongoing process.
+The pending spinner replaces the icon to indicate an ongoing process.
 
 <Snippet
   align="center"
   py={4}
   open
-  preview={<LoadingStates />}
-  code={loadingStatesSnippet}
+  preview={<PendingStates />}
+  code={pendingStatesSnippet}
 />
 
 ### Without Icons

docs-ui/src/app/components/alert/props-definition.ts

@@ -10,31 +10,45 @@ export const alertPropDefs: Record<string, PropDef> = {
     values: ['info', 'success', 'warning', 'danger'],
     responsive: true,
     default: 'info',
+    description:
+      'Visual status of the alert, which determines color and default icon.',
   },
   icon: {
     type: 'enum',
     values: ['boolean', 'React.ReactElement'],
     responsive: false,
+    description:
+      'Set to true to show the default status icon, or pass a custom icon element. Set to false to hide the icon.',
+  },
+  isPending: {
+    type: 'boolean',
+    default: 'false',
+    description:
+      'Replaces the icon with a spinner to indicate a pending operation.',
   },
   loading: {
-    type: 'enum',
-    values: ['boolean'],
-    responsive: false,
+    type: 'boolean',
+    default: 'false',
+    description: 'Deprecated. Use `isPending` instead.',
   },
   title: {
     type: 'enum',
     values: ['React.ReactNode'],
     responsive: false,
+    description: 'Primary message displayed in the alert.',
   },
   description: {
     type: 'enum',
     values: ['React.ReactNode'],
     responsive: false,
+    description: 'Additional detail shown below the title.',
   },
   customActions: {
     type: 'enum',
     values: ['React.ReactNode'],
     responsive: false,
+    description:
+      'Custom action buttons displayed on the right side of the alert.',
   },
   m: {
     type: 'enum',

docs-ui/src/app/components/alert/snippets.ts

@@ -97,13 +97,13 @@ export const withActionsAndDescriptionsSnippet = `<Alert
   }
 />`;
 
-export const loadingStatesSnippet = `<Flex direction="column" gap="4">
-  <Alert status="info" icon={true} loading title="Processing your request..." />
-  <Alert status="success" icon={true} loading title="Saving changes..." />
+export const pendingStatesSnippet = `<Flex direction="column" gap="4">
+  <Alert status="info" icon={true} isPending title="Processing your request..." />
+  <Alert status="success" icon={true} isPending title="Saving changes..." />
   <Alert
     status="info"
     icon={true}
-    loading
+    isPending
     title="Processing your request"
     description="This may take a few moments. Please do not close this window."
   />

docs-ui/src/app/components/button-icon/components.tsx

@@ -56,12 +56,12 @@ export const Disabled = () => {
   );
 };
 
-export const Loading = () => {
+export const Pending = () => {
   return (
     <ButtonIcon
       icon={<RiCloudLine />}
       variant="primary"
-      loading
+      isPending
       aria-label="Cloud"
     />
   );

docs-ui/src/app/components/button-icon/page.mdx

@@ -7,9 +7,9 @@ import {
   variantsSnippet,
   sizesSnippet,
   disabledSnippet,
-  loadingSnippet,
+  isPendingSnippet,
 } from './snippets';
-import { Variants, Sizes, Disabled, Loading } from './components';
+import { Variants, Sizes, Disabled, Pending } from './components';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ButtonIconDefinition } from '../../../utils/definitions';
@@ -63,7 +63,7 @@ export const reactAriaUrls = {
   code={disabledSnippet}
 />
 
-### Loading
+### Pending
 
 Shows a spinner during async operations.
 
@@ -71,8 +71,8 @@ Shows a spinner during async operations.
   align="center"
   py={4}
   open
-  preview={<Loading />}
-  code={loadingSnippet}
+  preview={<Pending />}
+  code={isPendingSnippet}
 />
 
 <Theming definition={ButtonIconDefinition} />

docs-ui/src/app/components/button-icon/props-definition.tsx

@@ -42,11 +42,16 @@ export const buttonIconPropDefs: Record<string, PropDef> = {
     default: 'false',
     description: 'Prevents interaction and applies disabled styling.',
   },
-  loading: {
+  isPending: {
     type: 'boolean',
     default: 'false',
     description: 'Shows a spinner and disables the button.',
   },
+  loading: {
+    type: 'boolean',
+    default: 'false',
+    description: 'Deprecated. Use `isPending` instead.',
+  },
   type: {
     type: 'enum',
     values: ['button', 'submit', 'reset'],

docs-ui/src/app/components/button-icon/snippets.ts

@@ -20,4 +20,4 @@ export const disabledSnippet = `<Flex direction="row" gap="2">
   <ButtonIcon isDisabled icon={<RiCloudLine />} variant="tertiary" aria-label="Cloud" />
 </Flex>`;
 
-export const loadingSnippet = `<ButtonIcon icon={<RiCloudLine />} variant="primary" loading aria-label="Cloud" />`;
+export const isPendingSnippet = `<ButtonIcon icon={<RiCloudLine />} variant="primary" isPending aria-label="Cloud" />`;

docs-ui/src/app/components/button/components.tsx

@@ -75,9 +75,9 @@ export const Destructive = () => {
   );
 };
 
-export const Loading = () => {
+export const Pending = () => {
   return (
-    <Button variant="primary" loading={true}>
+    <Button variant="primary" isPending={true}>
       Load more items
     </Button>
   );

docs-ui/src/app/components/button/page.mdx

@@ -8,7 +8,7 @@ import {
   withIconsSnippet,
   disabledSnippet,
   destructiveSnippet,
-  loadingSnippet,
+  isPendingSnippet,
   asLinkSnippet,
   buttonSnippetUsage,
   buttonResponsiveSnippet,
@@ -24,7 +24,7 @@ import {
   WithIcons,
   Disabled,
   Destructive,
-  Loading,
+  Pending,
   AsLink,
 } from './components';
 
@@ -34,7 +34,7 @@ export const reactAriaUrls = {
 
 <PageTitle
   title="Button"
-  description="A button with primary, secondary, and tertiary variants, destructive styling, and loading state."
+  description="A button with primary, secondary, and tertiary variants, destructive styling, and pending state."
 />
 
 <Snippet align="center" py={4} preview={<Variants />} code={variantsSnippet} />
@@ -110,7 +110,7 @@ Use the `destructive` prop for dangerous actions like delete or remove.
   layout="side-by-side"
 />
 
-### Loading
+### Pending
 
 Shows a spinner and disables interaction during async operations.
 
@@ -118,8 +118,8 @@ Shows a spinner and disables interaction during async operations.
   align="center"
   py={4}
   open
-  preview={<Loading />}
-  code={loadingSnippet}
+  preview={<Pending />}
+  code={isPendingSnippet}
   layout="side-by-side"
 />
 

docs-ui/src/app/components/button/props-definition.tsx

@@ -48,11 +48,16 @@ export const buttonPropDefs: Record<string, PropDef> = {
     default: 'false',
     description: 'Prevents interaction and applies disabled styling.',
   },
-  loading: {
+  isPending: {
     type: 'boolean',
     default: 'false',
     description: 'Shows a spinner and disables the button.',
   },
+  loading: {
+    type: 'boolean',
+    default: 'false',
+    description: 'Deprecated. Use `isPending` instead.',
+  },
   children: {
     type: 'enum',
     values: ['ReactNode'],

docs-ui/src/app/components/button/snippets.ts

@@ -55,7 +55,7 @@ export const destructiveSnippet = `<Flex gap="4">
   </Button>
 </Flex>`;
 
-export const loadingSnippet = `<Button variant="primary" loading={true}>
+export const isPendingSnippet = `<Button variant="primary" isPending={true}>
   Load more items
 </Button>`;
 

docs-ui/src/app/components/table/page.mdx

@@ -202,11 +202,11 @@ Use `mode: 'cursor'` when your API uses cursor-based pagination (common with Gra
 
 <CodeBlock code={tableCursorPaginationSnippet} />
 
-### Loading States
+### Pending States
 
-When fetching data, the table shows a loading state. If the user triggers a new query (by paginating, sorting, or searching) while previous data is displayed, the table enters a "stale" state where it continues showing the previous data until new data arrives. This prevents jarring layout shifts.
+When fetching data, the table shows a pending state. If the user triggers a new query (by paginating, sorting, or searching) while previous data is displayed, the table enters a "stale" state where it continues showing the previous data until new data arrives. This prevents jarring layout shifts.
 
-You can access these states via `tableProps.loading` and `tableProps.isStale` if you need to render additional loading indicators.
+You can access these states via `tableProps.isPending` and `tableProps.isStale` if you need to render additional pending indicators.
 
 ## Combining Features
 

docs-ui/src/app/components/table/props-definition.tsx

@@ -166,7 +166,7 @@ export const useTableReturnPropDefs: Record<string, PropDef> = {
     description: (
       <>
         Props to spread onto the <Chip>Table</Chip> component. Includes data,
-        loading, error, pagination, and sort state.
+        isPending, error, pagination, and sort state.
       </>
     ),
   },
@@ -207,10 +207,15 @@ export const tablePropDefs: Record<string, PropDef> = {
     values: ['T[]'],
     description: 'Array of data items to display in the table.',
   },
+  isPending: {
+    type: 'boolean',
+    default: 'false',
+    description: 'Whether the table is in a pending state.',
+  },
   loading: {
     type: 'boolean',
     default: 'false',
-    description: 'Whether the table is in a loading state.',
+    description: 'Deprecated. Use `isPending` instead.',
   },
   isStale: {
     type: 'boolean',
@@ -466,17 +471,22 @@ export const tableRootPropDefs: Record<string, PropDef> = {
       </>
     ),
   },
-  loading: {
+  isPending: {
     type: 'boolean',
     default: 'false',
     description: (
       <>
-        Whether the table is in a loading state (e.g., initial data fetch). Adds{' '}
-        <Chip>aria-busy</Chip> attribute and <Chip>data-loading</Chip> data
+        Whether the table is in a pending state (e.g., initial data fetch). Adds{' '}
+        <Chip>aria-busy</Chip> attribute and <Chip>data-ispending</Chip> data
         attribute for styling.
       </>
     ),
   },
+  loading: {
+    type: 'boolean',
+    default: 'false',
+    description: 'Deprecated. Use `isPending` instead.',
+  },
 };
 
 export const columnPropDefs: Record<string, PropDef> = {