docs(Dialog): fix footer role (#6817)

Fixes #6781

Author: Lukas742

packages/main/src/components/Modals/Modals.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { FlexBox, FlexBoxJustifyContent } from '@ui5/webcomponents-react';
 import { MessageBoxType } from '../../enums/index.js';
-import { Bar, Button, MenuItem } from '../../webComponents/index.js';
+import { Button, MenuItem } from '../../webComponents/index.js';
 import { Modals } from './index.js';
 
 const meta = {
@@ -19,7 +20,11 @@ export const Dialog: Story = {
             const { close } = Modals.showDialog({
               headerText: 'Dialog Title',
               children: "I'm a Dialog!",
-              footer: <Bar endContent={<Button onClick={() => close()}>Close</Button>} />
+              footer: (
+                <FlexBox justifyContent={FlexBoxJustifyContent.End} fitContainer style={{ paddingBlock: '0.25rem' }}>
+                  <Button onClick={() => close()}>Close</Button>{' '}
+                </FlexBox>
+              )
             });
           }}
         >

packages/main/src/webComponents/Dialog/Dialog.stories.tsx

@@ -1,10 +1,8 @@
 import { isChromatic } from '@sb/utils.js';
 import type { Meta, StoryObj } from '@storybook/react';
-import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
-import settingsIcon from '@ui5/webcomponents-icons/dist/settings.js';
-import { clsx } from 'clsx';
+import { FlexBox, FlexBoxJustifyContent } from '@ui5/webcomponents-react';
 import { useEffect, useState } from 'react';
-import { Bar, Button, Icon, List, ListItemStandard, Title } from '../index.js';
+import { Button, List, ListItemStandard } from '../index.js';
 import { Dialog } from './index.js';
 
 const meta = {
@@ -23,8 +21,7 @@ const meta = {
       </List>
     ),
     headerText: 'Dialog Header',
-    open: isChromatic,
-    className: 'footerPartNoPadding'
+    open: isChromatic
   },
   tags: ['package:@ui5/webcomponents']
 } satisfies Meta<typeof Dialog>;
@@ -55,18 +52,15 @@ export const Default: Story = {
             setDialogOpen(false);
           }}
           footer={
-            <Bar
-              design={BarDesign.Footer}
-              endContent={
-                <Button
-                  onClick={() => {
-                    setDialogOpen(false);
-                  }}
-                >
-                  Close
-                </Button>
-              }
-            />
+            <FlexBox justifyContent={FlexBoxJustifyContent.End} fitContainer style={{ paddingBlock: '0.25rem' }}>
+              <Button
+                onClick={() => {
+                  setDialogOpen(false);
+                }}
+              >
+                Close
+              </Button>
+            </FlexBox>
           }
         />
       </>