From 267fc025cca67550bcfb24afa1b3338e10d1c100 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Tue, 11 May 2021 11:01:07 +0300
Subject: [PATCH] feat(ui5-panel): expose content css part (#3211)

---
 packages/main/src/Panel.hbs | 8 +++++++-
 packages/main/src/Panel.js  | 9 +++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/Panel.hbs b/packages/main/src/Panel.hbs
index 14819da013bb..fc07a66e6f21 100644
--- a/packages/main/src/Panel.hbs
+++ b/packages/main/src/Panel.hbs
@@ -51,7 +51,13 @@
 	</div>
 
 	<!-- content area -->
-	<div class="ui5-panel-content" id="{{_id}}-content" tabindex="-1" style="{{styles.content}}">
+	<div
+		class="ui5-panel-content"
+		id="{{_id}}-content"
+		tabindex="-1"
+		style="{{styles.content}}"
+		part="content"
+	>
 		<slot></slot>
 	</div>
 </div>
diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js
index 9c54389ee226..8770c3ccb932 100644
--- a/packages/main/src/Panel.js
+++ b/packages/main/src/Panel.js
@@ -217,6 +217,15 @@ const metadata = {
  * clockwise/counter-clockwise.</li>
  * </ul>
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>content - Used to style the wrapper of the content</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Panel";</code>