feat(Panel): added Penta styles (#6741)

patternfly · Jun 18, 2024 · c36a7a1 · c36a7a1
1 parent 71815db
commit c36a7a1
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 14 deletions.
diff --git a/src/patternfly/components/Panel/examples/Panel.md b/src/patternfly/components/Panel/examples/Panel.md
@@ -155,6 +155,7 @@ cssPrefix: pf-v6-c-panel
 | `.pf-v6-c-panel__header` | `<div>` | Initiates the panel header. |
 | `.pf-v6-c-panel__main` | `<div>` | Initiates the panel main content. |
 | `.pf-v6-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
+| `.pf-v6-c-panel__menu` | `<div>` | Initiates a panel menu container. |
 | `.pf-v6-c-panel__footer` | `<div>` | Initiates the panel footer. |
 | `.pf-m-bordered` | `.pf-v6-c-panel` | Modifies the panel for bordered styles. |
 | `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |

diff --git a/src/patternfly/components/Panel/panel-menu.hbs b/src/patternfly/components/Panel/panel-menu.hbs
@@ -0,0 +1,6 @@
+<div class="{{pfv}}panel__menu{{#if panel-menu--modifier}} {{panel-menu--modifier}}{{/if}}"
+  {{#if panel-menu--attribute}}
+    {{{panel-menu--attribute}}}
+  {{/if}}>
+  {{>@partial-block}}
+</div>
diff --git a/src/patternfly/components/Panel/panel.scss b/src/patternfly/components/Panel/panel.scss
@@ -4,9 +4,9 @@
   --#{$panel}--Width: auto;
   --#{$panel}--MinWidth: auto;
   --#{$panel}--MaxWidth: none;
-  --#{$panel}--ZIndex: auto;
   --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$panel}--BoxShadow: none;
+  --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--small);
 
   // border
   --#{$panel}--before--BorderWidth: 0;
@@ -16,49 +16,50 @@
   --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // bordered
-  --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
 
   // raised
   --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --#{$panel}--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // header
   --#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --#{$panel}__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$panel}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --#{$panel}__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --#{$panel}__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$panel}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // main
   --#{$panel}__main--MaxHeight: none;
   --#{$panel}__main--Overflow: visible;
 
   // body
   --#{$panel}__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --#{$panel}__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // footer
-  --#{$panel}__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --#{$panel}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --#{$panel}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --#{$panel}__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$panel}__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$panel}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$panel}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$panel}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$panel}__footer--BoxShadow: none;
 
   // scrollable
   --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
   --#{$panel}--m-scrollable__main--Overflow: auto;
-  --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} rgba(0 0 0 / 16%); // insets the shadow so it doesn't show on left/right sides
+  --#{$panel}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --#{$panel}--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$panel}--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
 }
 
 .#{$panel} {
   position: relative;
-  z-index: var(--#{$panel}--ZIndex);
   width: var(--#{$panel}--Width);
   min-width: var(--#{$panel}--MinWidth);
   max-width: var(--#{$panel}--MaxWidth);
   background-color: var(--#{$panel}--BackgroundColor);
+  border-radius: var(--#{$panel}--BorderRadius);
   box-shadow: var(--#{$panel}--BoxShadow);
 
   &::before {
@@ -67,6 +68,7 @@
     pointer-events: none;
     content: "";
     border: var(--#{$panel}--before--BorderWidth) solid var(--#{$panel}--before--BorderColor);
+    border-radius: var(--#{$panel}--BorderRadius);
   }
 
   &.pf-m-bordered {
@@ -80,13 +82,14 @@
   &.pf-m-raised {
     --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
     --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
-    --#{$panel}--ZIndex: var(--#{$panel}--m-raised--ZIndex);
   }
 
   &.pf-m-scrollable {
     --#{$panel}__main--MaxHeight: var(--#{$panel}--m-scrollable__main--MaxHeight);
     --#{$panel}__main--Overflow: var(--#{$panel}--m-scrollable__main--Overflow);
     --#{$panel}__footer--BoxShadow: var(--#{$panel}--m-scrollable__footer--BoxShadow);
+    --#{$panel}__footer--PaddingBlockStart: var(--#{$panel}--m-scrollable__footer--PaddingBlockStart);
+    --#{$panel}__footer--PaddingBlockEnd: var(--#{$panel}--m-scrollable__footer--PaddingBlockEnd);
   }
 }
 

diff --git a/src/patternfly/demos/Panel/Panel.md b/src/patternfly/demos/Panel/Panel.md
@@ -0,0 +1,83 @@
+---
+id: Panel
+section: components
+---
+
+## Demos
+
+### With a menu
+
+```hbs
+{{#> panel panel--modifier="pf-m-raised"}}
+  {{#> panel-header}}
+    Header content
+  {{/panel-header}}
+  {{#> panel-main}}
+    {{#> panel-menu}}
+      {{#> menu menu--modifier="pf-m-plain"}}
+        {{#> menu-content}}
+          {{#> menu-list}}
+            {{#> menu-list-item}}
+              {{#> menu-item}}
+                {{#> menu-item-main}}
+                  {{#> menu-item-text}}
+                    Action
+                  {{/menu-item-text}}
+                {{/menu-item-main}}
+              {{/menu-item}}
+            {{/menu-list-item}}
+            {{#> menu-list-item}}
+              {{#> menu-item menu-item--IsLink="true"}}
+                {{#> menu-item-main}}
+                  {{#> menu-item-text}}
+                    Link
+                  {{/menu-item-text}}
+                {{/menu-item-main}}
+              {{/menu-item}}
+            {{/menu-list-item}}
+            {{#> menu-list-item menu-list-item--IsDisabled="true"}}
+              {{#> menu-item}}
+                {{#> menu-item-main}}
+                  {{#> menu-item-text}}
+                  Disabled action
+                  {{/menu-item-text}}
+                {{/menu-item-main}}
+              {{/menu-item}}
+            {{/menu-list-item}}
+            {{#> menu-list-item menu-list-item--IsDisabled="true"}}
+              {{#> menu-item menu-item--IsLink="true"}}
+                {{#> menu-item-main}}
+                  {{#> menu-item-text}}
+                  Disabled link
+                  {{/menu-item-text}}
+                {{/menu-item-main}}
+              {{/menu-item}}
+            {{/menu-list-item}}
+            {{#> menu-list-item menu-list-item--IsAriaDisabled=true}}
+              {{#> menu-item}}
+                {{#> menu-item-main}}
+                  {{#> menu-item-text}}
+                  Aria-disabled action
+                  {{/menu-item-text}}
+                {{/menu-item-main}}
+              {{/menu-item}}
+            {{/menu-list-item}}
+            {{#> menu-list-item menu-list-item--IsAriaDisabled=true}}
+              {{#> menu-item menu-item--IsLink=true}}
+                {{#> menu-item-main}}
+                  {{#> menu-item-text}}
+                  Aria-disabled link
+                  {{/menu-item-text}}
+                {{/menu-item-main}}
+              {{/menu-item}}
+            {{/menu-list-item}}
+          {{/menu-list}}
+        {{/menu-content}}
+      {{/menu}}
+    {{/panel-menu}}
+  {{/panel-main}}
+  {{#> panel-footer}}
+    Footer content
+  {{/panel-footer}}
+{{/panel}}
+```