fix(styles): update Panel and add sticky header [ci visual]

SAP · Nov 22, 2024 · e81987c · e81987c
1 parent 2f0fcff
commit e81987c
Show file tree

Hide file tree

Showing 7 changed files with 281 additions and 48 deletions.
diff --git a/packages/styles/src/panel.scss b/packages/styles/src/panel.scss
@@ -6,10 +6,9 @@
 $block: #{$fd-namespace}-panel;
 
 .#{$block} {
+  --fdPanel_Header_Width: 100%;
   --fdPanel_Header_Height: 2.75rem;
-
-  $fd-panel-header-right-padding: 0.5rem;
-  $fd-panel-header-fixed-left-padding: 1rem;
+  --fdPanel_Flex_Direction: column;
 
   &,
   &__content,
@@ -19,51 +18,78 @@ $block: #{$fd-namespace}-panel;
     @include fd-reset();
   }
 
-  border-radius: var(--fdPanel_Border_Radius);
-  overflow: hidden;
+  @include fd-flex(var(--fdPanel_Flex_Direction));
 
   &:not(:last-child) {
     margin-block-end: var(--fdPanel_Margin_Bottom);
   }
 
   &__header {
+    @include fd-flex-vertical-center();
+
     overflow: hidden;
+    border-bottom-style: solid;
+    width: var(--fdPanel_Header_Width);
+    min-width: var(--fdPanel_Header_Width);
     height: var(--fdPanel_Header_Height);
     min-height: var(--fdPanel_Header_Height);
-    padding-inline-end: $fd-panel-header-right-padding;
+    top: var(--fdPanel_Header_Position_Top, unset);
     background-color: var(--sapGroup_TitleBackground);
-    border-bottom: solid 0.0625rem var(--sapGroup_TitleBorderColor);
+    position: var(--fdPanel_Header_Position, relative);
+    border-bottom-width: var(--sapGroup_TitleBorderWidth);
+    padding-inline-start: var(--fdPanel_Header_Padding_Inline_Start, 0);
+    padding-inline-end: var(--fdPanel_Header_Padding_Inline_End, 0.5rem);
+    border-bottom-left-radius: var(--fdPanel_Header_Border_Bottom_Left_Radius, 0);
+    border-bottom-right-radius: var(--fdPanel_Header_Border_Bottom_Right_Radius, 0);
+    border-bottom-color: var(--fdPanel_Header_Border_Color, var(--sapGroup_TitleBorderColor));
+    border-top-left-radius: var(--fdPanel_Header_Border_Top_Left_Radius, var(--fdPanel_Border_Radius));
+    border-top-right-radius: var(--fdPanel_Header_Border_Top_Right_Radius, var(--fdPanel_Border_Radius));
+
+    &:has(.#{$block}__button[aria-expanded="false"]) {
+      --fdPanel_Header_Border_Bottom_Left_Radius: var(--fdPanel_Border_Radius);
+      --fdPanel_Header_Border_Bottom_Right_Radius: var(--fdPanel_Border_Radius);
+    }
+
+    &:has(.#{$fd-namespace}-toolbar) {
+      --fdPanel_Header_Padding_Inline_End: 0;
+    }
 
-    @include fd-flex-vertical-center();
+    &:not(:has(.#{$block}__button)) {
+      --fdPanel_Header_Padding_Inline_Start: 1rem;
+    }
   }
 
   &__title {
-    @include fd-typography(var(--sapFontHeader4Size));
+    @include fd-typography(var(--sapGroup_Title_FontSize));
 
-    font-size: var(--fdPanel_Title_Font_Size);
     flex: 1;
+    font-size: var(--fdPanel_Title_Font_Size);
   }
 
   &__content {
     @include fd-scrollbar(var(--fdScrollbar_Border_Radius));
 
-    padding-block: 0.625rem;
-    padding-inline: 1rem;
     overflow: auto;
-    border-bottom: solid 0.0625rem var(--fdPanel_Content_Border_Bottom_Color);
+    padding-inline: 1rem;
+    padding-block: 0.625rem;
     background: var(--fdPanel_Content_Background_Color);
+    border-bottom: solid 0.0625rem var(--fdPanel_Content_Border_Bottom_Color);
+    border-top-left-radius: var(--fdPanel_Content_Border_Top_Left_Radius, 0);
+    border-top-right-radius: var(--fdPanel_Content_Border_Top_Right_Radius, 0);
+    border-bottom-left-radius: var(--fdPanel_Content_Border_Bottom_Left_Radius, var(--fdPanel_Border_Radius));
+    border-bottom-right-radius: var(--fdPanel_Content_Border_Bottom_Right_Radius, var(--fdPanel_Border_Radius));
 
     &[aria-hidden="true"] {
       display: none;
     }
   }
 
   &__expand {
+    @include fd-flex-center();
+
     width: 2.75rem;
     height: var(--fdPanel_Header_Height);
     min-height: var(--fdPanel_Header_Height);
-
-    @include fd-flex-center();
   }
 
   &__button {
@@ -77,21 +103,20 @@ $block: #{$fd-namespace}-panel;
   }
 
   &--fixed {
-    .#{$block}__header {
-      padding-inline-start: $fd-panel-header-fixed-left-padding;
-    }
+    --fdPanel_Header_Padding_Inline_Start: 1rem;
+  }
+
+  &--sticky {
+    --fdPanel_Header_Position: sticky;
+    --fdPanel_Header_Position_Top: 0;
   }
 
   &--borderless {
-    .#{$block}__header {
-      border-bottom: none;
-    }
+    --fdPanel_Header_Border_Color: transparent;
   }
 
   &--transparent {
-    .#{$block}__content {
-      background: transparent;
-    }
+    --fdPanel_Content_Background_Color: transparent;
   }
 
   @include fd-compact-or-condensed() {

diff --git a/packages/styles/stories/Components/panel/fixed-height-content.example.html b/packages/styles/stories/Components/panel/fixed-height-content.example.html
@@ -1,13 +1,28 @@
-<div class="fd-panel fd-panel--fixed" aria-labelledby="__panel-title-10" role="form">
+<div class="fd-panel" aria-labelledby="__panel-title-fixed" role="form">
     <div class="fd-panel__header">
-        <h4 class="fd-panel__title" id="__panel-title-10">Panel header</h4>
-        <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
-            <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
-            <div class="fd-segmented-button" role="group" aria-label="Group label">
-              <button class="fd-button fd-button--toggled" aria-pressed="true">Left</button>
-              <button class="fd-button" aria-pressed="false">Middle</button>
-              <button class="fd-button" aria-pressed="false">Right</button>
-            </div>
+        <div class="fd-panel__expand">
+            <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true" onclick="toggleExpandedButton(event)"
+                aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-fixed">
+                <i class="sap-icon--slim-arrow-down"></i>
+            </button>
         </div>
+        <h4 class="fd-panel__title" id="__panel-title-fixed">Panel header expanded</h4>
+    </div>
+    <div role="region" aria-labelledby="__panel-title-fixed" class="fd-panel__content" aria-hidden="false" id="__panel-fixed" style="height: 150px;">
+        <span>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
+            et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
+            Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
+            Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
+            Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
+            Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
+            Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed temporibus dolorum cupiditate recusandae quaerat aperiam facilis provident nemo nostrum porro corporis nesciunt ducimus, ad molestias adipisci soluta iure quam repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi placeat temporibus, eveniet modi nobis inventore debitis explicabo consectetur, sunt fugit suscipit dolore ab et ullam natus, in molestiae deserunt. Aperiam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum eveniet consequatur quis dolores, voluptatem et! Odit laboriosam, ducimus accusantium autem minus maxime excepturi, voluptatibus delectus sint animi soluta incidunt officia? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam blanditiis fuga aspernatur dolore numquam culpa quos perspiciatis nobis ipsum soluta nostrum, consequatur ab, asperiores minus eum labore inventore maxime tempore! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima, deserunt nisi veritatis omnis corrupti id esse minus. Repellat cum maxime, ipsam quia voluptate doloremque similique esse rerum animi provident quos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta nemo non perferendis odit necessitatibus eius dolorum nam dolor neque sed. Dolores obcaecati facilis voluptate temporibus eaque saepe reprehenderit, voluptatum repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae temporibus repellendus nulla aliquam eos officiis molestias doloribus magnam, ullam sunt, explicabo similique delectus voluptatum laudantium doloremque at cum non esse! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius iusto odit saepe. Delectus optio reiciendis quia unde est excepturi blanditiis, nisi sed voluptatem obcaecati commodi illum dolorem architecto in officia! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
+            et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
+            Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
+            Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
+            Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
+            Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
+            Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed temporibus dolorum cupiditate recusandae quaerat aperiam facilis provident nemo nostrum porro corporis nesciunt ducimus, ad molestias adipisci soluta iure quam repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi placeat temporibus, eveniet modi nobis inventore debitis explicabo consectetur, sunt fugit suscipit dolore ab et ullam natus, in molestiae deserunt. Aperiam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum eveniet consequatur quis dolores, voluptatem et! Odit laboriosam, ducimus accusantium autem minus maxime excepturi, voluptatibus delectus sint animi soluta incidunt officia? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam blanditiis fuga aspernatur dolore numquam culpa quos perspiciatis nobis ipsum soluta nostrum, consequatur ab, asperiores minus eum labore inventore maxime tempore! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima, deserunt nisi veritatis omnis corrupti id esse minus. Repellat cum maxime, ipsam quia voluptate doloremque similique esse rerum animi provident quos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta nemo non perferendis odit necessitatibus eius dolorum nam dolor neque sed. Dolores obcaecati facilis voluptate temporibus eaque saepe reprehenderit, voluptatum repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae temporibus repellendus nulla aliquam eos officiis molestias doloribus magnam, ullam sunt, explicabo similique delectus voluptatum laudantium doloremque at cum non esse! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius iusto odit saepe. Delectus optio reiciendis quia unde est excepturi blanditiis, nisi sed voluptatem obcaecati commodi illum dolorem architecto in officia!
+        </span>
     </div>
 </div>
diff --git a/packages/styles/stories/Components/panel/fixed.example.html b/packages/styles/stories/Components/panel/fixed.example.html
@@ -1,4 +1,4 @@
-<div class="fd-panel fd-panel--fixed" aria-labelledby="__panel-title-6" role="form">
+<div class="fd-panel" aria-labelledby="__panel-title-6" role="form">
     <div class="fd-panel__header">
         <h4 class="fd-panel__title" id="__panel-title-6">Panel header</h4>
         <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">

diff --git a/packages/styles/stories/Components/panel/panel.stories.js b/packages/styles/stories/Components/panel/panel.stories.js
@@ -3,6 +3,8 @@ import borderlessExampleHtml from "./borderless.example.html?raw";
 import fixedHeightContentExampleHtml from "./fixed-height-content.example.html?raw";
 import expandableExampleHtml from "./expandable.example.html?raw";
 import fixedExampleHtml from "./fixed.example.html?raw";
+import stickyHeaderExampleHtml from "./sticky-header.example.html?raw";
+
 import '../../../src/button.scss';
 import '../../../src/icon.scss';
 import '../../../src/panel.scss';
@@ -37,7 +39,7 @@ export const Fixed = () => fixedExampleHtml;
 Fixed.parameters = {
   docs: {
     description: {
-      story: `When the height of the panel's content is set to a fixed size, the content area becomes scrollable.
+      story: `
         `
     }
   }
@@ -78,4 +80,12 @@ Transparent.parameters = {
         `
     }
   }
-};
+};
+export const StickyHeader = () => stickyHeaderExampleHtml;
+StickyHeader.parameters = {
+  docs: {
+    description: {
+      story: `Sticky header can be achieved by applying the \`.fd-panel--sticky \` modifier class to the panel. The container should have a fixed height, position relative and overflow-y set to scroll.`
+    }
+  }
+};