fix(styles): make panel button work, rename function [ci visual] (#4949)

SAP · Nov 1, 2023 · 3a28c5f · 3a28c5f
1 parent 48adc45
commit 3a28c5f
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 201 deletions.
diff --git a/.storybook/static/preview-head.js b/.storybook/static/preview-head.js
@@ -381,7 +381,7 @@ function isSpaceOrEnter(event, buttonFn) {
     }
 }
 
-function toggleNestedListSubmenu(event) {
+function toggleExpandedButton(event) {
     let button = event.target;
     let icon = button.children[0];
 

diff --git a/packages/styles/stories/Components/panel/borderless.example.html b/packages/styles/stories/Components/panel/borderless.example.html
@@ -1,7 +1,7 @@
 <div class="fd-panel fd-panel--borderless" aria-labelledby="__panel-title-1" role="form">
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
-            <button class="fd-button fd-button--transparent fd-panel__button"
+            <button class="fd-button fd-button--transparent fd-panel__button" onclick="toggleExpandedButton(event)"
                 aria-expanded="false" aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-1">
                 <i class="sap-icon--slim-arrow-right"></i>
             </button>
@@ -34,7 +34,7 @@ <h4 class="fd-panel__title" id="__panel-title-1">Panel header collapsed</h4>
 <div class="fd-panel fd-panel--borderless" aria-labelledby="__panel-title-2" role="form">
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
-            <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
+            <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-2">
                 <i class="sap-icon--slim-arrow-down"></i>
             </button>

diff --git a/packages/styles/stories/Components/panel/expandable.example.html b/packages/styles/stories/Components/panel/expandable.example.html
@@ -1,7 +1,7 @@
 <div class="fd-panel" aria-labelledby="__panel-title-7" role="form">
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
-            <button class="fd-button fd-button--transparent fd-panel__button"
+            <button class="fd-button fd-button--transparent fd-panel__button" onclick="toggleExpandedButton(event)"
                 aria-expanded="false" aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-7">
                 <i class="sap-icon--slim-arrow-right"></i>
             </button>
@@ -32,7 +32,7 @@ <h4 class="fd-panel__title" id="__panel-title-7">Panel header collapsed</h4>
 <div class="fd-panel" aria-labelledby="__panel-title-8" role="form">
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
-            <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
+            <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-8">
                 <i class="sap-icon--slim-arrow-down"></i>
             </button>

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,10 +1,5 @@
-<div class="fd-panel" aria-labelledby="__panel-title-10" role="form">
+<div class="fd-panel fd-panel--fixed" aria-labelledby="__panel-title-10" role="form">
     <div class="fd-panel__header">
-        <div class="fd-panel__expand">
-            <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="false" aria-haspopup="true" aria-controls="__panel-10">
-                <i class="sap-icon--slim-arrow-right"></i>
-            </button>
-        </div>
         <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>
@@ -15,22 +10,4 @@ <h4 class="fd-panel__title" id="__panel-title-10">Panel header</h4>
             </div>
         </div>
     </div>
-    <div role="region" id="__panel-10" aria-labelledby="__panel-title-10" class="fd-panel__content" aria-hidden="true" style="height: 100px;">
-        <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.
-            Morbi eget diam vehicula, porttitor orci eu, posuere leo. Sed varius orci id ipsum pharetra feugiat.
-            Donec libero mi, vestibulum eget massa non, pretium egestas eros. Aenean quis eros ut augue condimentum faucibus.
-            Nam tristique, enim eu volutpat cursus, enim neque pulvinar mauris, nec tempor libero lacus vel lacus. Nunc molestie elit in
-            aliquam eleifend. Ut consequat convallis erat, porta egestas lectus sagittis et. Mauris fermentum semper lorem, a sollicitudin nisi sollicitudin nec.
-            Duis semper pretium elit ac molestie. Morbi condimentum nisl vitae dolor varius convallis. Donec a molestie ex,
-            id condimentum velit. Proin dignissim dolor velit, eu malesuada magna porta vel. Aenean quis feugiat libero, sed pretium libero.
-            Nunc ex orci, volutpat in tristique et, accumsan sed ante. Maecenas laoreet egestas iaculis. In quis ligula mauris.
-        </span>
-    </div>
 </div>
diff --git a/packages/styles/stories/Components/panel/transparent.example.html b/packages/styles/stories/Components/panel/transparent.example.html
@@ -1,7 +1,7 @@
 <div class="fd-panel fd-panel--transparent" aria-labelledby="__panel-title-4" role="form">
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
-            <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
+            <button onclick="toggleExpandedButton(event)" class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
                 aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-4">
                 <i class="sap-icon--slim-arrow-down"></i>
             </button>

diff --git a/...s/styles/stories/Deprecated/Components/side-navigation/complex-cozy-side-nav.example.html b/...s/styles/stories/Deprecated/Components/side-navigation/complex-cozy-side-nav.example.html
@@ -29,7 +29,7 @@
                         aria-haspopup="true"
                         aria-expanded="false"
                         aria-label="Expand submenu"
-                        onclick="toggleNestedListSubmenu(event)">
+                        onclick="toggleExpandedButton(event)">
                         <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
                     </button>
                 </div>

diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/cozy-grouping.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/cozy-grouping.example.html
@@ -22,7 +22,7 @@
                         aria-haspopup="true"
                         aria-expanded="false"
                         aria-label="Expand submenu"
-                        onclick="toggleNestedListSubmenu(event)"
+                        onclick="toggleExpandedButton(event)"
                         >
                         <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
                     </button>