refa([DST-629]): Align <XLoader> modes with loading pattern naming convention

.changeset/violet-cherries-drop.md

@@ -0,0 +1,8 @@
+---
+"@marigold/docs": major
+"@marigold/components": major
+---
+
+refa(DST-629): Align `<XLoader>` modes with loading pattern naming convention
+
+**BREAKING CHANGE:** Rename `mode` prop to align with the "Lading state" pattern. Renamed `"fullsize"` to `"fullscreen"` and `"inline"` to `"section"`.

docs/content/components/content/xloader/xloader-fullscreen.demo.tsx

@@ -16,7 +16,7 @@ export default () => {
       <Button variant="primary" onPress={handlePress}>
         Submit
       </Button>
-      {loading ? <XLoader mode="fullsize" /> : null}
+      {loading ? <XLoader mode="fullscreen" /> : null}
     </>
   );
 };

docs/content/components/content/xloader/xloader-inline.demo.tsx → docs/content/components/content/xloader/xloader-section.demo.tsx

@@ -34,7 +34,7 @@ const Venues = () => {
   if (status === 'pending' || isFetching) {
     return (
       <div className="h-[300px] w-full">
-        <XLoader mode="inline" />
+        <XLoader mode="section" />
       </div>
     );
   }

docs/content/components/content/xloader/xloader.mdx

@@ -24,13 +24,13 @@ However, overuse of fullscreen loaders can lead to a frustrating user experience
 
 <ComponentDemo file="./xloader-fullscreen.demo.tsx" />
 
-### Inline
+### Section
 
-An inline loader is used to indicate that a specific section of the page is currently processing or loading data. Unlike a fullscreen loader, it only blocks interaction with that section, allowing users to continue interacting with other parts of the page.
+An section loader is used to indicate that a specific section of the page is currently processing or loading data. Unlike a fullscreen loader, it only blocks interaction with that section, allowing users to continue interacting with other parts of the page.
 
-Use inline loaders for non-blocking tasks, like loading a list of items. They should ideally not cause layout shifts, ensuring the rest of the page remains stable while the content is being loaded, providing a seamless experience for the user.
+Use section loaders for non-blocking tasks, like loading a list of items. They should ideally not cause layout shifts, ensuring the rest of the page remains stable while the content is being loaded, providing a seamless experience for the user.
 
-<ComponentDemo file="./xloader-inline.demo.tsx" />
+<ComponentDemo file="./xloader-section.demo.tsx" />
 
 ## Props
 

docs/content/patterns/loading-states/full-section.demo.tsx

@@ -59,7 +59,7 @@ export default () => {
           </Stack>
         </FieldGroup>
       </Form>
-      {isLoading && <XLoader mode="fullsize" />}
+      {isLoading && <XLoader mode="fullscreen" />}
     </div>
   );
 };

packages/components/src/XLoader/XLoader.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
         type: 'radio',
       },
       description: 'Mode of the Loader.',
-      options: ['default', 'fullsize', 'inline'],
+      options: ['default', 'fullscreen', 'section'],
     },
     variant: {
       control: {
@@ -34,9 +34,9 @@ export const Basic: Story = {
   render: args => <XLoader {...args} />,
 };
 
-export const Fullsize: Story = {
+export const Fullscreen: Story = {
   args: {
-    mode: 'fullsize',
+    mode: 'fullscreen',
   },
   render: args => (
     <>
@@ -45,9 +45,9 @@ export const Fullsize: Story = {
   ),
 };
 
-export const Inline: Story = {
+export const Section: Story = {
   args: {
-    mode: 'inline',
+    mode: 'section',
   },
   render: args => (
     <div className="h-96 w-96">

packages/components/src/XLoader/XLoader.test.tsx

@@ -63,7 +63,7 @@ test('render custom label', () => {
 test('fullsize uses "inverted" variant', () => {
   render(
     <ThemeProvider theme={theme}>
-      <XLoader mode="fullsize">Loading...</XLoader>
+      <XLoader mode="fullscreen">Loading...</XLoader>
     </ThemeProvider>
   );
 
@@ -74,7 +74,7 @@ test('fullsize uses "inverted" variant', () => {
 test('inline uses "inverted" variant', () => {
   render(
     <ThemeProvider theme={theme}>
-      <XLoader mode="inline">Loading...</XLoader>
+      <XLoader mode="section">Loading...</XLoader>
     </ThemeProvider>
   );
 

packages/components/src/XLoader/XLoader.tsx

@@ -7,15 +7,15 @@ import { BaseLoader } from './BaseLoader';
 // ---------------
 export interface XLoaderProps extends LoaderProps {
   /**
-   * Show the loader in `fullsize` to overlay and block interaction with the site or `ìnline` to show loading for a certain area.
+   * Show the loader in `fullscreen` to overlay and block interaction with the site or `section` to show loading for a certain area.
    * @default undefined
    */
-  mode?: 'fullsize' | 'inline';
+  mode?: 'fullscreen' | 'section';
 }
 
-// Full Size
+// Full Screen
 // ---------------
-const LoaderFullSize = (props: LoaderProps) => {
+const LoaderFullScreen = (props: LoaderProps) => {
   const className = useClassNames({
     component: 'Underlay',
     variant: 'modal',
@@ -33,9 +33,9 @@ const LoaderFullSize = (props: LoaderProps) => {
   );
 };
 
-// Inline
+// Section
 // ---------------
-const LoaderInline = (props: LoaderProps) => {
+const LoaderSection = (props: LoaderProps) => {
   const className = useClassNames({
     component: 'Underlay',
     variant: 'modal',
@@ -52,10 +52,10 @@ const LoaderInline = (props: LoaderProps) => {
 // Component
 // ---------------
 export const XLoader = ({ mode, variant, ...props }: XLoaderProps) =>
-  mode === 'fullsize' ? (
-    <LoaderFullSize variant={variant ?? 'inverted'} {...props} />
-  ) : mode === 'inline' ? (
-    <LoaderInline variant={variant ?? 'inverted'} {...props} />
+  mode === 'fullscreen' ? (
+    <LoaderFullScreen variant={variant ?? 'inverted'} {...props} />
+  ) : mode === 'section' ? (
+    <LoaderSection variant={variant ?? 'inverted'} {...props} />
   ) : (
     <BaseLoader variant={variant} {...props} />
   );