fix(panel): raised and bordered variants (#2436)

* fix(panel): raised and bordered variants

* fix(panel): raised and bordered variants

* docs: update .changeset/pf-panel-2402.md

* fix(panel): fix firefox browser issue

* fix(panel): fix z-index issue in the header

---------

Co-authored-by: Anuj Singla <asingla@redhat.com>
Co-authored-by: Benny Powers <bennypowers@users.noreply.github.com>

Author: 3 people

.changeset/pf-panel-2402.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-panel>`: fixed raised and bordered variants

docs/main.css

@@ -324,7 +324,7 @@ main.blog {
   top: 0;
   left: 0;
   right: 0;
-  z-index: 200;
+  z-index: 300;
 }
 
 .pf-bar {

elements/pf-panel/docs/pf-panel.md

@@ -111,6 +111,52 @@
 </pf-panel>
 ```
 
+<h3>Scrollable with header and footer</h3>
+<pf-panel scrollable>
+<h3 slot="header">Header content</h3>
+  <p>
+  A couple of years ago the Computer Science Club at Bishop's University
+  ran into a problem. Our student run computer lab was running
+  unlicensed copies of a propriety operating system. The computers also
+  had many unlicensed programs installed. It was a big mess. At that
+  time we had to make an ethical decision. We had to decide whether we
+  wanted to continue breaking the law or not. We decided against running
+  software for which we didn't have licenses as it could lead to the lab
+  being closed.
+  </p>
+  <p>
+  A couple of years ago the Computer Science Club at Bishop's University
+  ran into a problem. Our student run computer lab was running
+  unlicensed copies of a propriety operating system. The computers also
+  had many unlicensed programs installed. It was a big mess. At that
+  time we had to make an ethical decision. We had to decide whether we
+  wanted to continue breaking the law or not. We decided against running
+  software for which we didn't have licenses as it could lead to the lab
+  being closed.
+  </p>
+  <p>
+  A couple of years ago the Computer Science Club at Bishop's University
+  ran into a problem. Our student run computer lab was running
+  unlicensed copies of a propriety operating system. The computers also
+  had many unlicensed programs installed. It was a big mess. At that
+  time we had to make an ethical decision. We had to decide whether we
+  wanted to continue breaking the law or not. We decided against running
+  software for which we didn't have licenses as it could lead to the lab
+  being closed.
+  </p>
+  <p slot="footer">Footer content</p>
+</pf-panel>
+
+```html
+<pf-panel scrollable>
+  <h3 slot="header">Header content</h3>
+  <p>
+    Long content...
+  </p>
+  <p slot="footer">Footer content</p>
+</pf-panel>
+```
+
 {% endband %}
 
 {% renderSlots %}{% endrenderSlots %}

elements/pf-panel/pf-panel.css

@@ -9,7 +9,7 @@
   --pf-c-panel--before--BorderWidth: 0;
   --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
   --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
-  --pf-c-panel--m-raised--BoxShadow: pfglobalvar(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
   --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);
   --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);
   --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);
@@ -36,6 +36,7 @@
   max-width: var(--pf-c-panel--MaxWidth);
   background-color: var(--pf-c-panel--BackgroundColor);
   box-shadow: var(--pf-c-panel--BoxShadow);
+  display: block;
 }
 
 :host([variant="bordered"])::before {
@@ -44,14 +45,21 @@
   pointer-events: none;
   content: "";
   border:
-    var(--pf-c-panel--before--BorderWidth,
-      var(--pf-c-panel--m-bordered--before--BorderWidth,
-        var(--pf-global--BorderWidth--sm, 1px)))
+  var(--pf-c-panel--m-bordered--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
     solid
     var(--pf-c-panel--before--BorderColor,
       var(--pf-global--BorderColor--100, #d2d2d2));
 }
 
+:host([variant="raised"])::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  box-shadow: var(--pf-c-panel--m-raised--BoxShadow, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+  z-index: var(--pf-c-panel--m-raised--ZIndex, var(--pf-global--ZIndex--sm, 200));
+}
+
 :host([variant="raised"]) {
   --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow,
     var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));