Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(styles): panel static examples [ci visual] #4952

Closed
wants to merge 1 commit into from
Closed

fix(styles): panel static examples [ci visual] #4952

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion .storybook/static/preview-head.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@
var els = document.querySelectorAll("[aria-controls]");
for (var i = 0; i < els.length; i++) {
var el = els[i];
if (el.hasAttribute('data-ignore-click') || el.hasAttribute('data-aria-controls-listener')) {
return;
}
el.setAttribute('data-aria-controls-listener', 'true')
el.addEventListener('click', function () {
var targetId = this.getAttribute("aria-controls");
var target = document.getElementById(targetId);
Expand Down Expand Up @@ -149,11 +153,15 @@
}

document.addEventListener('DOMContentLoaded', function () {
setTimeout(function() {
runOnPageChange();
}, 10);
const callback = function(mutationsList) {
for (let i = 0, len = mutationsList.length; i < len; i++) {
if (mutationsList[i].type == 'childList') {
setTimeout(function() {
runOnPageChange();
}, 10);
break;
}
}
Expand Down Expand Up @@ -444,7 +452,7 @@ function toggleNavigationSubmenu(event) {
}

function toggleNavigationPopover(event) {

let button = event.target;
if (button.tagName.toLowerCase() === 'a') {
button = event.target.parentNode;
Expand Down
4 changes: 2 additions & 2 deletions packages/styles/stories/Components/panel/borderless.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<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-label="expand/collapse panel" aria-controls="__panel-1">
aria-expanded="false" aria-haspopup="true" aria-label="expand/collapse panel" data-ignore-click aria-controls="__panel-1">
<i class="sap-icon--slim-arrow-right"></i>
</button>
</div>
Expand Down Expand Up @@ -35,7 +35,7 @@ <h4 class="fd-panel__title" id="__panel-title-1">Panel header collapsed</h4>
<div class="fd-panel__header">
<div class="fd-panel__expand">
<button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-2">
aria-haspopup="true" aria-label="expand/collapse panel" data-ignore-click aria-controls="__panel-2">
<i class="sap-icon--slim-arrow-down"></i>
</button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/styles/stories/Components/panel/expandable.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<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-label="expand/collapse panel" aria-controls="__panel-7">
aria-expanded="false" aria-haspopup="true" aria-label="expand/collapse panel" data-ignore-click aria-controls="__panel-7">
<i class="sap-icon--slim-arrow-right"></i>
</button>
</div>
Expand Down Expand Up @@ -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" data-ignore-click aria-expanded="true"
aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-8">
<i class="sap-icon--slim-arrow-down"></i>
</button>
Expand Down
6 changes: 3 additions & 3 deletions packages/styles/stories/Components/panel/fixed-height-content.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="fd-panel" 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 class="fd-button fd-button--transparent fd-panel__button" data-ignore-click aria-expanded="true" aria-haspopup="true" aria-controls="__panel-10">
<i class="sap-icon--slim-arrow-down"></i>
</button>
</div>
<h4 class="fd-panel__title" id="__panel-title-10">Panel header</h4>
Expand All @@ -15,7 +15,7 @@ <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;">
<div role="region" id="__panel-10" aria-labelledby="__panel-title-10" class="fd-panel__content" aria-hidden="false" 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.
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/stories/Components/panel/transparent.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 class="fd-button fd-button--transparent fd-panel__button" data-ignore-click aria-expanded="true"
aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-4">
<i class="sap-icon--slim-arrow-down"></i>
</button>
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/stories/Components/popover/control-examples-btp.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<i class="sap-icon--cart" role="presentation"></i>
</button>
</div>
<div class="fd-popover__body fd-popover__body--padding" aria-hidden="false" id="popoverB4BTP">
<div class="fd-popover__body fd-popover__body--padding" aria-hidden="false" id="popoverB4B">
<div class="fd-popover__body-header">Header (optional, empty container)</div>
<div class="fd-popover__body-content" style="color: #fff; background: #0e7290; width: 15rem; height: 18rem;">
Content (empty container)
Expand Down
8 changes: 4 additions & 4 deletions packages/styles/stories/Components/popover/no-arrow.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<div class="fd-popover__control">
<button
class="fd-button"
aria-controls="popoverF1"
aria-controls="popoverNoArrow"
aria-expanded="true"
aria-haspopup="true"
onClick="onPopoverClick('popoverF1');"
onClick="onPopoverClick('popoverNoArrow');"
role="button"
>
<i class="sap-icon--navigation-down-arrow" role="presentation"></i>
</button>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false" id="popoverF1">
<div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false" id="popoverNoArrow">
<div class="fd-popover__wrapper" style="max-height: 250px;">
<nav class="fd-menu" aria-label="big navigation menu">
<ul class="fd-menu__list fd-menu__list--no-shadow">
Expand All @@ -29,4 +29,4 @@
</nav>
</div>
</div>
</div>
</div>
8 changes: 4 additions & 4 deletions packages/styles/stories/Components/popover/scrollable.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<div class="fd-popover__control">
<button
class="fd-button"
aria-controls="popoverF1"
aria-controls="popoverScrollable"
aria-expanded="true"
aria-haspopup="true"
onclick="onPopoverClick('popoverF1');"
onclick="onPopoverClick('popoverScrollable');"
role="button">
<!- role is needed to override the combobox role due to aria-haspopup -->
<!-- role is needed to override the combobox role due to aria-haspopup -->
Popover with overflow
</button>
</div>
<div class="fd-popover__body" aria-hidden="false" id="popoverF1">
<div class="fd-popover__body" aria-hidden="false" id="popoverScrollable">
<div class="fd-popover__wrapper" style="max-height: 250px;">
<nav class="fd-menu" aria-label="big navigation menu">
<ul class="fd-menu__list fd-menu__list--no-shadow">
Expand Down
4 changes: 2 additions & 2 deletions packages/styles/stories/Components/progress-indicator/truncation.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@
<div style="margin-bottom: 5rem"></div>

<div class="fd-progress-indicator fd-popover" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="70" aria-valuemax="100" aria-valuetext="In cases where the label is being truncated a small popover appears on click." aria-label="Progress Indicator">
<div class="fd-progress-indicator__container fd-popover__control" onclick="onPopoverClick('popoverF1')">
<div class="fd-progress-indicator__container fd-popover__control" onclick="onPopoverClick('popoverTruncation')">
<div class="fd-progress-indicator__progress-bar" style="min-width: 30%; width: 30%;">
</div>
<div class="fd-progress-indicator__remaining">
<span class="fd-progress-indicator__label">In cases where the label is being truncated a small popover appears on click.</span>
</div>
<div class="fd-popover__body fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverF1">
<div class="fd-popover__body fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverTruncation">
<div class="fd-popover__wrapper">
<div class="fd-progress-indicator__overflow">
<span>In cases where the label is being truncated a small popover appears on click.</span>
Expand Down
Loading