docs(ui5-dialog): edit footer layout in dialogs samples (#7334)

Fixes: #7307
SAP · Jul 21, 2023 · ad4a338 · ad4a338
1 parent 9ca02dd
commit ad4a338
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 24 deletions.
diff --git a/packages/playground/_stories/main/Dialog/Dialog.stories.ts b/packages/playground/_stories/main/Dialog/Dialog.stories.ts
@@ -90,7 +90,7 @@ Basic.args = {
 		<ui5-input id="address"></ui5-input>
 	</div>
 </section>`,
-	footer: `<div slot="footer" style="display: flex; align-items: center; padding: 0.5rem">
+	footer: `<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; align-items: center">
 	<div style="flex: 1;"></div>
 	<ui5-button class="dialogCloser" design="Emphasized">Register</ui5-button>
 </div>`,
@@ -104,7 +104,7 @@ DraggableAndResizable.args = {
 	default: `<p>Move this dialog around the screen by dragging it by its header.</p>
 <p>Resize this dialog by dragging it by its resize handle.</p>
 <p>These features are available only on Desktop.</p>`,
-	footer: `<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; padding: .25rem 1rem;">
+	footer: `<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; align-items: center">
 	<ui5-button class="dialogCloser" design="Emphasized">OK</ui5-button>
 </div>`,
 };
@@ -136,7 +136,7 @@ export const WithState = Template.bind({});
 WithState.args = {
 	state: ValueState.Error,
 	default: "<p>Dialog with state</p>",
-	footer: `<div slot="footer" style="display: flex; justify-content: flex-end; align-items: center;">
+	footer: `<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; align-items: center">
 	<ui5-button class="dialogCloser">Close</ui5-button>
 </div>`,
 };

diff --git a/packages/playground/_stories/main/Popover/Popover.stories.ts b/packages/playground/_stories/main/Popover/Popover.stories.ts
@@ -67,12 +67,9 @@ Basic.decorators = [
 	(story) => {
 		return html`<style>
 	.popover-content {
-		margin: 0.5rem;
-		height: 100px;
 		display: flex;
-		flex-direction:column;
+		flex-direction: column;
 		justify-content: center;
-		align-items: center;
 	}
 
 	.flex-column {
@@ -82,6 +79,8 @@ Basic.decorators = [
 
 	.popover-footer {
 		display: flex;
+		justify-content: flex-end;
+		width: 100%;
 		align-items: center;
 		padding: 0.5rem 0;
 	}

diff --git a/packages/playground/_stories/main/ResponsivePopover/ResponsivePopover.stories.ts b/packages/playground/_stories/main/ResponsivePopover/ResponsivePopover.stories.ts
@@ -65,15 +65,15 @@ Basic.decorators = [
 	(story) => {
 		return html`<style>
 	.popover-content {
-		width: auto;
-		padding: 2rem;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 	}
 
 	.popover-footer {
 		display: flex;
+		justify-content: flex-end;
+		width: 100%;
 		align-items: center;
 		padding: 0.5rem 0;
 	}

diff --git a/packages/playground/assets/css/api.css b/packages/playground/assets/css/api.css
@@ -98,21 +98,6 @@ body {
 	flex-direction: column;
 }
 
-.popover-content {
-	margin: 0.5rem;
-	height: 100px;
-	display: flex;
-	flex-direction:column;
-	justify-content: center;
-	align-items: center;
-}
-
-.popover-footer, .dialog-footer {
-	display: flex;
-	align-items: center;
-	padding: .5rem 0;
-}
-
 .login-form {
 	display: flex;
 	flex-direction: column;