Merge branch 'main' into loading-spinner-button

marigold-ui · Nov 25, 2024 · 110f21e · 110f21e
2 parents f3c9af8 + 3bf3a8e
commit 110f21e
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 107 deletions.
diff --git a/.changeset/three-apes-decide.md b/.changeset/three-apes-decide.md
@@ -0,0 +1,8 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+docs([DST-615]): Revise `<Center>` documentation
+
+Revised the `<Center>` page according to our new structure of component documentation.
diff --git a/docs/content/components/layout/center/center.demo.tsx b/docs/content/components/layout/center/center.demo.tsx
@@ -0,0 +1,10 @@
+import { Center } from '@marigold/components';
+import { Rectangle } from '@/ui/Rectangle';
+
+export default () => (
+  <Center maxWidth="xxlarge" space={1}>
+    <Rectangle height="50px" width="300px" />
+    <Rectangle height="50px" width="300px" />
+    <Rectangle height="50px" width="300px" />
+  </Center>
+);
diff --git a/docs/content/components/layout/center/center.mdx b/docs/content/components/layout/center/center.mdx
@@ -1,39 +1,50 @@
 ---
 title: Center
 caption: Component to center its children horizontally.
+badge: updated
 ---
 
-The `<Center>` is a layout component that centers its children horizontally.
-You can use it to center a single child or a list of children. The `<Center>` component has also the property maxWidth.
+The `<Center>` is a layout component that centers its children <strong>horizontally</strong> within a container.
 
-The `<Center>` component can also be a child from the [`<Stack>`](/components/stack/) or [`<Inline>`](/components/inline/) component.
+## Usage
 
-## Import
+You can use it to center a single child or a list of children. The `maxWidth` prop sets the maximum width of the container
+and the `space` prop adds spacing between the children elements.
 
-```tsx
-import { Center } from '@marigold/components';
-```
+The `<Center>` component can also be used with components like [`<Text>`](/components/content/text), [`<Stack>`](/components/layout/stack/) or [`<Inline>`](/components/layout/inline/) component.
 
-## Props
-
-<PropsTable component={title} />
-
-## Examples
-
-### Center element with maximum width
-
-To center an element you must give the element a `maxWidth` prop.
+<ComponentDemo file="./center.demo.tsx" />
 
-<ComponentDemo file="./width-center.demo.tsx" />
-
-### Center more than one element with space
-
-To add spaces between each child you can use the prop `space`.
-
-<ComponentDemo file="./space-center.demo.tsx" />
+## Props
 
-### Center inside Text Block
+<StorybookHintMessage component={title} />
 
-If you want to center something like a `<Button>` you must only wrap your component with a `<Center>` component.
+<PropsTable component={title} />
 
-<ComponentDemo file="./text-center.demo.tsx" />
+## Related
+
+<TeaserList
+  items={[
+    {
+      title: 'Building layouts',
+      href: '../../foundations/layouts',
+      caption: 'Learn how to build layouts.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
+          />
+        </svg>
+      ),
+    },
+  ]}
+/>
diff --git a/docs/content/components/layout/center/space-center.demo.tsx b/docs/content/components/layout/center/space-center.demo.tsx
diff --git a/docs/content/components/layout/center/text-center.demo.tsx b/docs/content/components/layout/center/text-center.demo.tsx
diff --git a/docs/content/components/layout/center/width-center.demo.tsx b/docs/content/components/layout/center/width-center.demo.tsx
diff --git a/packages/components/src/Center/Center.stories.tsx b/packages/components/src/Center/Center.stories.tsx
@@ -18,7 +18,7 @@ const meta = {
         'the maximum width of the center element. Should be a string value (e.g. 500px)',
       table: {
         defaultValue: {
-          summary: 'not set',
+          summary: '100%',
         },
       },
     },
@@ -42,42 +42,34 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   render: args => (
-    <Center {...args}>
-      <div className="h-[100px] w-full border border-solid border-[#ced4da] bg-[#ced4da]" />
+    <Center maxWidth="xxlarge" {...args}>
+      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
     </Center>
   ),
 };
 
 export const Children: Story = {
   render: args => (
-    <Center {...args}>
-      <div className="h-[100px] w-full border border-solid border-[#ced4da] bg-[#ced4da]" />
-      <div className="h-[100px] w-full border border-solid border-[#ced4da] bg-[#ced4da]" />
-      <div className="h-[100px] w-full border border-solid border-[#ced4da] bg-[#ced4da]" />
+    <Center {...args} space={2}>
+      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
+      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
+      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
     </Center>
   ),
 };
 
-export const Icon: Story = {
+export const Nested: Story = {
   render: args => (
     <Center {...args}>
       <div className="size-[40px] bg-blue-700">
-        <Ticket className="fill-white" />
+        <Center {...args}>
+          <Ticket className="fill-white" />
+        </Center>
       </div>
     </Center>
   ),
 };
 
-export const SpaceCenter: Story = {
-  render: args => (
-    <Center maxWidth="500px" space={4} {...args}>
-      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-    </Center>
-  ),
-};
-
 export const Complex: Story = {
   render: args => (
     <Stack space={3}>

diff --git a/packages/components/src/Dialog/DialogActions.tsx b/packages/components/src/Dialog/DialogActions.tsx
@@ -1,11 +1,4 @@
-import { useContext } from 'react';
 import type { ReactNode } from 'react';
-import {
-  ButtonContext,
-  DEFAULT_SLOT,
-  OverlayTriggerStateContext,
-  Provider,
-} from 'react-aria-components';
 import { cn, useClassNames } from '@marigold/system';
 
 export interface DialogActionsRenderProps {
@@ -23,26 +16,10 @@ export interface DialogActions {
 
 export const DialogActions = ({ variant, size, children }: DialogActions) => {
   const classNames = useClassNames({ component: 'Dialog', variant, size });
-  const overlayContext = useContext(OverlayTriggerStateContext);
-  const closeButtonProps = { onPress: overlayContext?.close };
 
   return (
     <div className={cn('[grid-area:actions]', classNames.actions)}>
-      <Provider
-        values={[
-          [
-            ButtonContext,
-            {
-              slots: {
-                [DEFAULT_SLOT]: {},
-                close: closeButtonProps,
-              },
-            },
-          ],
-        ]}
-      >
-        {children}
-      </Provider>
+      {children}
     </div>
   );
 };