docs(Dialog/Popovers): remove padding if Bar is slotted (#4907)

Related to: SAP/ui5-webcomponents#7354
SAP · Jul 31, 2023 · e0c6d64 · e0c6d64
1 parent 861fc87
commit e0c6d64
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -60,6 +60,10 @@
     padding: 0;
   }
 
+  .footerPartNoPadding::part(footer) {
+    padding: 0;
+  }
+
   .infoTable {
     margin: 1rem 0;
     border-spacing: 0;
@@ -80,8 +84,8 @@
 
   /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */
   .docs-story > div > div[scale] {
-      min-height: 20px;
-      height: auto;
+    min-height: 20px;
+    height: auto;
   }
 </style>
 <script data-ui5-config type="application/json">

diff --git a/packages/main/src/webComponents/Dialog/Dialog.stories.tsx b/packages/main/src/webComponents/Dialog/Dialog.stories.tsx
@@ -1,6 +1,7 @@
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
 import settingsIcon from '@ui5/webcomponents-icons/dist/settings.js';
+import { clsx } from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { BarDesign } from '../../enums';
 import { Bar, Button, Icon, List, StandardListItem, Title } from '../index.js';
@@ -17,7 +18,8 @@ const meta = {
   args: {
     children: 'Press "Escape" to close the Dialog.',
     headerText: 'Dialog Header',
-    open: false
+    open: false,
+    className: 'footerPartNoPadding'
   }
 } satisfies Meta<typeof OriginalDialog>;
 
@@ -82,12 +84,13 @@ export const WithContent: Story = {
           {...args}
           open={dialogIsOpen}
           onAfterClose={handleClose}
+          className={clsx('headerPartNoPadding', args.className)}
           header={
             <Bar endContent={<Icon name={settingsIcon} />}>
               <Title>Dialog</Title>
             </Bar>
           }
-          footer={<Bar endContent={<Button onClick={handleClose}>Close</Button>} />}
+          footer={<Bar design={BarDesign.Footer} endContent={<Button onClick={handleClose}>Close</Button>} />}
         >
           <List>
             <StandardListItem additionalText="3">List Item 1</StandardListItem>

diff --git a/packages/main/src/webComponents/Popover/Popover.stories.mdx b/packages/main/src/webComponents/Popover/Popover.stories.mdx
@@ -20,6 +20,7 @@ import { Popover as OriginalPopover } from './index';
 import { Popover } from './CodeGen';
 import { isChromatic } from '@sb/utils';
 import PopoverDomRef from './PopoverDomRef.json';
+import { clsx } from 'clsx';
 
 <Meta
   title="Modals & Popovers / Popover"
@@ -33,7 +34,8 @@ import PopoverDomRef from './PopoverDomRef.json';
     headerText: 'Popover Header',
     horizontalAlign: PopoverHorizontalAlign.Center,
     placementType: PopoverPlacementType.Right,
-    verticalAlign: PopoverVerticalAlign.Center
+    verticalAlign: PopoverVerticalAlign.Center,
+    className: 'footerPartNoPadding'
   }}
 />
 
@@ -233,6 +235,7 @@ const PopoverComponent = () => {
             opener="openPopoverBtn2"
             open={popoverIsOpen}
             onAfterClose={handleClose}
+            className={clsx('headerPartNoPadding', args.className)}
             header={
               <Bar endContent={<Icon name="settings" />}>
                 <Title>Popover</Title>

diff --git a/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.mdx b/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.mdx
@@ -18,6 +18,7 @@ import { ResponsivePopover } from './CodeGen';
 import { isChromatic } from '@sb/utils';
 import ResponsivePopoverDomRef from './ResponsivePopoverDomRef.json';
 import { MessageStrip } from '../MessageStrip';
+import { clsx } from 'clsx';
 
 <Meta
   title="Modals & Popovers / ResponsivePopover"
@@ -36,7 +37,8 @@ import { MessageStrip } from '../MessageStrip';
     horizontalAlign: PopoverHorizontalAlign.Center,
     placementType: PopoverPlacementType.Right,
     verticalAlign: PopoverVerticalAlign.Center,
-    opener: 'openPopoverBtn'
+    opener: 'openPopoverBtn',
+    className: 'footerPartNoPadding'
   }}
 />
 
@@ -233,6 +235,7 @@ const PopoverComponent = () => {
           </Button>
           <ResponsivePopover
             {...args}
+            className={clsx('headerPartNoPadding', args.className)}
             opener="respPopoverBtn2"
             open={responsivePopoverIsOpen}
             onAfterClose={handleClose}