[DST-462]Refactor <Dialog> component use Grid Areas (#4164)

* Refactor dialog component * Fixing tests * Adding changeset * Adding more tests for content footer and actions sub-components * Deleting stack wrapper from withdialogcontroller story * Update changeset * Update docs examples * Remove the gap * Adding badge * Editing changeset * Adding more info in the changeset about changing dialog.headline to dialog.title
marigold-ui · Oct 10, 2024 · 2d9917f · 2d9917f
1 parent 4818227
commit 2d9917f
Show file tree

Hide file tree

Showing 9 changed files with 226 additions and 123 deletions.
diff --git a/.changeset/early-sloths-work.md b/.changeset/early-sloths-work.md
@@ -0,0 +1,16 @@
+---
+'@marigold/components': major
+'@marigold/theme-core': major
+'@marigold/theme-b2b': major
+---
+
+**Breaking changes**
+
+- `Dialog.Headline` has been renamed to `Dialog.Title`. Please update your code accordingly.
+
+- `<Dialog.Content>`, `<Dialog.Actions>`, and `<Dialog.Footer>` have been introduced for better organization and flexibility.
+
+- The internal layout now uses grid areas, ensuring consistent ordering and layout of the dialog elements.
+
+- Existing implementations of the `<Dialog>` component will need to be updated to use these new subcomponents.
+
diff --git a/docs/content/components/overlay/dialog/dialog-dismiss.demo.tsx b/docs/content/components/overlay/dialog/dialog-dismiss.demo.tsx
@@ -1,11 +1,13 @@
-import { Button, Dialog, Headline, Text } from '@marigold/components';
+import { Button, Dialog, Text } from '@marigold/components';
 
 export default () => (
   <Dialog.Trigger dismissable={false}>
     <Button variant="primary">Open me</Button>
     <Dialog closeButton>
-      <Headline level={3}>Information!</Headline>
-      <Text>This is a simple info Dialog.</Text>
+      <Dialog.Title level={3}>Information!</Dialog.Title>
+      <Dialog.Content>
+        <Text>This is a simple info Dialog.</Text>
+      </Dialog.Content>
     </Dialog>
   </Dialog.Trigger>
 );
diff --git a/docs/content/components/overlay/dialog/dialog-form.demo.tsx b/docs/content/components/overlay/dialog/dialog-form.demo.tsx
@@ -1,29 +1,24 @@
-import {
-  Button,
-  Dialog,
-  Headline,
-  Inline,
-  Stack,
-  TextField,
-} from '@marigold/components';
+import { Button, Dialog, Stack, TextField } from '@marigold/components';
 
 export default () => (
   <Dialog.Trigger>
     <Button variant="primary">Login</Button>
     <Dialog>
       {({ close }) => (
         <>
-          <Headline level={2}>Please log into account</Headline>
-          <Stack space={2}>
-            <TextField label="Username" />
-            <TextField label="Password" type="password" />
-            <Inline space={5}>
-              <Button variant="ghost" onPress={close}>
-                Cancel
-              </Button>
-              <Button variant="primary">Login</Button>
-            </Inline>
-          </Stack>
+          <Dialog.Title level={2}>Please log into account</Dialog.Title>
+          <Dialog.Content>
+            <Stack space={3}>
+              <TextField label="Username" />
+              <TextField label="Password" type="password" />
+            </Stack>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button variant="ghost" onPress={close}>
+              Cancel
+            </Button>
+            <Button variant="primary">Login</Button>
+          </Dialog.Actions>
         </>
       )}
     </Dialog>

diff --git a/docs/content/components/overlay/dialog/dialog.mdx b/docs/content/components/overlay/dialog/dialog.mdx
@@ -1,15 +1,18 @@
 ---
 title: Dialog
 caption: Component for displaying dialogs.
+badge: updated
 ---
 
-The `<Dialog>` is a overlay component. This means it displays a modal as a reaction to an event. It appears in the middle of the display and blurs out the underlay.
+The `<Dialog>` is an overlay component. This means it displays a modal as a reaction to an event. It appears in the middle of the display and blurs out the underlay.
 
-This component can be styled in different parts. It has as parts `closeButton` and `container`, which is the component itself, and these parts can be styled separately.
+This component can be styled in different parts. It has parts like closeButton and container, which is the component itself, and these parts can be styled separately.
 
-A special thing is also that you can have props on the `<Dialog.Trigger>` and on the `<Dialog>` itself. The `closeButton` is an optionally property with which you can close the `<Dialog>`.
+Additionally, the `<Dialog>` is composed of other flexible parts: `<Dialog.Title>`, `<Dialog.Content>`, `<Dialog.Action>`, and `<Dialog.Footer`. The `<Dialog.Content>` holds the primary content or message, while the `<Dialog.Action>` defines interactive buttons for user decisions. `<Dialog.Footer>` can be used to place additional information , ensuring clear separation and organization within the dialog.
 
-The `<Dialog>` can also be used if you want to controll it for example within a `<Menu>`.
+A special feature is that you can also pass props to the `<Dialog.Trigger>` and on the `<Dialog>` itself. The closeButton is an optional property that allows you to close the `<Dialog>`.
+
+The `<Dialog>` can also be controlled programmatically, for example, when used within a `<Menu>`.
 
 ## Import
 

diff --git a/packages/components/src/Dialog/Dialog.stories.tsx b/packages/components/src/Dialog/Dialog.stories.tsx
@@ -1,12 +1,8 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { Body } from '../Body';
 import { Button } from '../Button';
 import { Checkbox, CheckboxGroup } from '../Checkbox';
-import { Container } from '../Container';
-import { Footer } from '../Footer';
-import { Header } from '../Header';
 import { Inline } from '../Inline';
 import { Menu } from '../Menu';
 import { Modal, ModalProps } from '../Overlay/Modal';
@@ -69,8 +65,8 @@ export const Basic: Story = {
     return (
       <Dialog.Trigger {...args}>
         <Button variant="primary">Open</Button>
-        <Dialog closeButton size={args.size}>
-          <Dialog.Headline>This is a headline!</Dialog.Headline>
+        <Dialog closeButton>
+          <Dialog.Title>This is a headline!</Dialog.Title>
           <Text>This is some not so very long text.</Text>
         </Dialog>
       </Dialog.Trigger>
@@ -83,20 +79,20 @@ export const Form: Story = {
     return (
       <Dialog.Trigger {...args}>
         <Button variant="primary">Open</Button>
-        <Dialog size={args.size}>
+        <Dialog closeButton>
           {({ close }) => (
             <>
-              <Dialog.Headline>Please log into account</Dialog.Headline>
-              <Stack space={4}>
+              <Dialog.Title>Please log into account</Dialog.Title>
+              <Dialog.Content>
                 <TextField label="Username" />
                 <TextField label="Password" type="password" />
-                <Inline space={4}>
-                  <Button variant="ghost" onPress={close}>
-                    Cancel
-                  </Button>
-                  <Button variant="primary">Login</Button>
-                </Inline>
-              </Stack>
+              </Dialog.Content>
+              <Dialog.Actions>
+                <Button variant="ghost" onPress={close}>
+                  Cancel
+                </Button>
+                <Button variant="primary">Login</Button>
+              </Dialog.Actions>
             </>
           )}
         </Dialog>
@@ -109,9 +105,11 @@ export const CustomTitleProps: Story = {
   render: args => (
     <Dialog.Trigger {...args}>
       <Button variant="primary">Open</Button>
-      <Dialog size={args.size} closeButton aria-labelledby="my-cool-headline">
-        <Dialog.Headline>This is a headline!</Dialog.Headline>
-        <Text>This is some not so very long text.</Text>
+      <Dialog closeButton aria-labelledby="my-cool-headline">
+        <Dialog.Title>This is a headline!</Dialog.Title>
+        <Dialog.Content>
+          <Text>This is some not so very long text.</Text>
+        </Dialog.Content>
       </Dialog>
     </Dialog.Trigger>
   ),
@@ -121,34 +119,30 @@ export const ScrollableContent: Story = {
   render: args => (
     <Dialog.Trigger {...args}>
       <Button variant="primary">Open</Button>
-      <Dialog size={args.size} closeButton aria-labelledby="my-cool-headline">
-        <Container>
-          <Header>
-            <Dialog.Headline>This is a headline!</Dialog.Headline>
-          </Header>
-          <Body>
-            <Stack space={2}>
-              <Text>This is some not so very long text.</Text>
-              <div className="max-h-[200px] overflow-y-auto pb-2 pl-2">
-                <CheckboxGroup>
-                  <Checkbox value="one">One</Checkbox>
-                  <Checkbox value="two">Two</Checkbox>
-                  <Checkbox value="three">Three</Checkbox>
-                  <Checkbox value="four">Four</Checkbox>
-                  <Checkbox value="five">Five</Checkbox>
-                  <Checkbox value="six">Six</Checkbox>
-                  <Checkbox value="seven">Seven</Checkbox>
-                  <Checkbox value="eight">Eight</Checkbox>
-                  <Checkbox value="nine">Nine</Checkbox>
-                  <Checkbox value="ten">Ten</Checkbox>
-                </CheckboxGroup>
-              </div>
-            </Stack>
-          </Body>
-          <Footer>
-            <Button variant="primary">ok</Button>
-          </Footer>
-        </Container>
+      <Dialog closeButton aria-labelledby="my-cool-headline">
+        <Dialog.Title>This is a headline!</Dialog.Title>
+        <Dialog.Content>
+          <Stack space={2}>
+            <Text>This is some not so very long text.</Text>
+            <div className="max-h-[200px] overflow-y-auto pb-2 pl-2">
+              <CheckboxGroup>
+                <Checkbox value="one">One</Checkbox>
+                <Checkbox value="two">Two</Checkbox>
+                <Checkbox value="three">Three</Checkbox>
+                <Checkbox value="four">Four</Checkbox>
+                <Checkbox value="five">Five</Checkbox>
+                <Checkbox value="six">Six</Checkbox>
+                <Checkbox value="seven">Seven</Checkbox>
+                <Checkbox value="eight">Eight</Checkbox>
+                <Checkbox value="nine">Nine</Checkbox>
+                <Checkbox value="ten">Ten</Checkbox>
+              </CheckboxGroup>
+            </div>
+          </Stack>
+        </Dialog.Content>
+        <Dialog.Footer>
+          <Button variant="primary">ok</Button>
+        </Dialog.Footer>
       </Dialog>
     </Dialog.Trigger>
   ),
@@ -158,14 +152,12 @@ export const StickyFooter: Story = {
   render: args => (
     <Dialog.Trigger {...args}>
       <Button variant="primary">Open</Button>
-      <Dialog size={args.size} closeButton aria-labelledby="my-cool-headline">
+      <Dialog closeButton aria-labelledby="my-cool-headline">
+        <Dialog.Title>This is a headline!</Dialog.Title>
         <div className="flex max-h-[400px] flex-col">
-          <Header>
-            <Dialog.Headline>This is a headline!</Dialog.Headline>
-            <Text>This is some additional text that is always visible!</Text>
-          </Header>
+          <Text>This is some additional text that is always visible!</Text>
           <div className="max-w-[400px] flex-1 overflow-y-auto">
-            <Body>
+            <Dialog.Content>
               <Text>
                 Pellentesque habitant morbi tristique senectus et netus et
                 malesuada fames ac turpis egestas. Vestibulum tortor quam,
@@ -181,11 +173,11 @@ export const StickyFooter: Story = {
                 erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
                 accumsan porttitor, facilisis luctus, metus
               </Text>
-            </Body>
+            </Dialog.Content>
           </div>
-          <Footer>
+          <Dialog.Footer>
             <Button variant="primary">Ok</Button>
-          </Footer>
+          </Dialog.Footer>
         </div>
       </Dialog>
     </Dialog.Trigger>
@@ -221,14 +213,12 @@ export const WithDialogController: Story = {
         <Dialog.Trigger open={open} onOpenChange={setDialogOpen}>
           <Dialog closeButton>
             {({ close }) => (
-              <Stack space={5}>
-                <Header>
-                  <Dialog.Headline>Confirm delete</Dialog.Headline>
-                </Header>
-                <Body>
+              <>
+                <Dialog.Title>Confirm delete</Dialog.Title>
+                <Dialog.Content>
                   <Text>Do you really wanna delete this?</Text>
-                </Body>
-                <Footer>
+                </Dialog.Content>
+                <Dialog.Footer>
                   <Inline space={5}>
                     <Button size="small" variant="ghost" onPress={close}>
                       Cancel
@@ -237,8 +227,8 @@ export const WithDialogController: Story = {
                       Delete
                     </Button>
                   </Inline>
-                </Footer>
-              </Stack>
+                </Dialog.Footer>
+              </>
             )}
           </Dialog>
         </Dialog.Trigger>