From c143204fa8fad4d1ccad82d8ecabd73428648e6d Mon Sep 17 00:00:00 2001
From: Diana Pazheva <diana.pazheva@sap.com>
Date: Mon, 27 Nov 2023 00:00:20 +0200
Subject: [PATCH] feat(ui5-dynamic-page): apply paddings to individual elements

---
 packages/fiori/src/DynamicPage.hbs            | 16 +++++-----
 packages/fiori/src/themes/DynamicPage.css     | 29 +++++++++++++++----
 .../fiori/src/themes/DynamicPageHeader.css    |  3 --
 .../base/DynamicPageHeader-parameters.css     |  4 ---
 .../themes/sap_belize/parameters-bundle.css   |  1 -
 .../sap_belize_hcb/parameters-bundle.css      |  1 -
 .../sap_belize_hcw/parameters-bundle.css      |  1 -
 .../themes/sap_fiori_3/parameters-bundle.css  |  1 -
 .../sap_fiori_3_dark/parameters-bundle.css    |  1 -
 .../sap_fiori_3_hcb/parameters-bundle.css     |  1 -
 .../sap_fiori_3_hcw/parameters-bundle.css     |  1 -
 .../themes/sap_horizon/parameters-bundle.css  |  1 -
 .../sap_horizon_dark/parameters-bundle.css    |  1 -
 .../parameters-bundle.css                     |  1 -
 .../sap_horizon_exp/parameters-bundle.css     |  1 -
 .../sap_horizon_hcb/parameters-bundle.css     |  1 -
 .../sap_horizon_hcb_exp/parameters-bundle.css |  1 -
 .../sap_horizon_hcw/parameters-bundle.css     |  1 -
 .../sap_horizon_hcw_exp/parameters-bundle.css |  1 -
 19 files changed, 32 insertions(+), 35 deletions(-)
 delete mode 100644 packages/fiori/src/themes/base/DynamicPageHeader-parameters.css

diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
index f04d9d52d134..eb3dd1e43fe2 100644
--- a/packages/fiori/src/DynamicPage.hbs
+++ b/packages/fiori/src/DynamicPage.hbs
@@ -18,11 +18,11 @@
 
     </div>
 
-    <div class="{{classes.content}}">
-      {{#if headerInContent}}
-        <slot name="headerArea"></slot>
-      {{/if}}
+    {{#if headerInContent}}
+      <slot name="headerArea"></slot>
+    {{/if}}
 
+    <div class="{{classes.content}}">
       {{#unless actionsInTitle}}
         <ui5-dynamic-page-header-actions
             ?snapped="{{headerSnapped}}"
@@ -36,7 +36,7 @@
     </div>
   </div>
 
-    <div class="{{classes.footer}}">
-      <slot name="footer"></slot>
-    </div>
-</div>
\ No newline at end of file
+  <div class="{{classes.footer}}">
+    <slot name="footer"></slot>
+  </div>
+</div>
diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
index 590884cc7dad..15aca60d77e7 100644
--- a/packages/fiori/src/themes/DynamicPage.css
+++ b/packages/fiori/src/themes/DynamicPage.css
@@ -49,6 +49,9 @@
     border: 1px solid;
     border-radius: 0.25rem;
     background-color: #fff;
+    box-sizing: border-box;
+    width: auto;
+    margin: 0 0.5rem 0.5rem 0.5rem;
 }
 
 /* Footer animation */
@@ -73,21 +76,37 @@
     }
 }
 
+::slotted([slot="titleArea"]) {
+    width: auto;
+}
+
+::slotted([slot="headerArea"]) {
+    display: block;
+}
+
 /* Responsive paddings */
 
-:host([media-range="S"]) .ui5-dynamic-page-root {
+:host([media-range="S"]) .ui5-dynamic-page-content,
+:host([media-range="S"]) ::slotted([slot="titleArea"]),
+:host([media-range="S"]) ::slotted([slot="headerArea"]) {
     padding: 0 1rem;
 }
 
-:host([media-range="S"]) ::slotted([ui5-dynamic-page-header][slot="headerArea"]) {
+:host([media-range="S"]) ::slotted([slot="headerArea"]) {
     padding-top: 0.5rem;
 }
 
-:host([media-range="M"]) .ui5-dynamic-page-root,
-:host([media-range="L"]) .ui5-dynamic-page-root {
+:host([media-range="M"]) .ui5-dynamic-page-content,
+:host([media-range="M"]) ::slotted([slot="titleArea"]),
+:host([media-range="M"]) ::slotted([slot="headerArea"]),
+:host([media-range="L"]) .ui5-dynamic-page-content,
+:host([media-range="L"]) ::slotted([slot="titleArea"]),
+:host([media-range="L"]) ::slotted([slot="headerArea"]) {
     padding: 0 2rem;
 }
 
-:host([media-range="XL"]) .ui5-dynamic-page-root {
+:host([media-range="XL"]) .ui5-dynamic-page-content,
+:host([media-range="XL"]) ::slotted([slot="titleArea"]),
+:host([media-range="XL"]) ::slotted([slot="headerArea"]) {
     padding: 0 3rem;
 }
\ No newline at end of file
diff --git a/packages/fiori/src/themes/DynamicPageHeader.css b/packages/fiori/src/themes/DynamicPageHeader.css
index e8e240f5d698..06263867c5a1 100644
--- a/packages/fiori/src/themes/DynamicPageHeader.css
+++ b/packages/fiori/src/themes/DynamicPageHeader.css
@@ -1,8 +1,5 @@
 :host {
     background: #fff;
-    padding-top: var(--_ui5_dynamic_page_header_padding_top);
-    padding-bottom: var(--_ui5_dynamic_page_header_padding_bottom);
-    display: block;
 }
 
 .ui5-dynamic-page-header-root {
diff --git a/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css b/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css
deleted file mode 100644
index e930737f274e..000000000000
--- a/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css
+++ /dev/null
@@ -1,4 +0,0 @@
-:root {
-	--_ui5_dynamic_page_header_padding_top: 1rem;
-    --_ui5_dynamic_page_header_padding_bottom: 1rem;
-}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
index 617e604eae32..9da626b9315c 100644
--- a/packages/fiori/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
index 7a6127a914b3..6041c4fca78f 100644
--- a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
index 7a6127a914b3..6041c4fca78f 100644
--- a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
index 67ebf4269608..f9c94ef8e13c 100644
--- a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 67ebf4269608..f9c94ef8e13c 100644
--- a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 7a6127a914b3..6041c4fca78f 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index 7a6127a914b3..6041c4fca78f 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
index a682ab7f37a0..12ea4aa5e086 100644
--- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
index a682ab7f37a0..12ea4aa5e086 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
index 9b2d12fa832d..806494fc6f9b 100644
--- a/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
index 9b2d12fa832d..806494fc6f9b 100644
--- a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
index 94e705a03bb1..f1359bb15083 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
index 94e705a03bb1..f1359bb15083 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
index 60b43b5e0f3d..a91b63b97c20 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
index 60b43b5e0f3d..a91b63b97c20 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";