Skip to content

Commit

Permalink
fix: add alignment and focus related fixes for Shellbar (#2179)
Browse files Browse the repository at this point in the history 
* fix: add alignment amd focus related fixes to Shellbar

* update storyshot [ci visual]

* add aria label for the hamburger button

* [ci visual]
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Mar 4, 2021
1 parent d379dd1 commit 657329a
Show file tree
Hide file tree
Showing 4 changed files with 281 additions and 1 deletion.
7 changes: 7 additions & 0 deletions src/product-switch.scss
View file
@@ -1,6 +1,7 @@
@import "./new-settings";
@import "./mixins";
@import "./drag-and-drop";
@import "./mixins/button/button-helper";

/*!
.fd-product-switch
Expand Down Expand Up @@ -55,6 +56,12 @@ $block: #{$fd-namespace}-product-switch;
color: var(--sapShell_Active_TextColor);
background-color: var(--sapShell_Active_Background);
}

@include fd-focus() {
@include buttonFocus() {
outline-color: var(--sapContent_ContrastFocusColor);
}
}
}

&__list {
Expand Down
31 changes: 30 additions & 1 deletion src/shellbar.scss
View file
Expand Up @@ -239,7 +239,7 @@ $block: #{$fd-namespace}-shellbar;

@include fd-focus() {
@include buttonFocus() {
border-color: var(--sapContent_ContrastFocusColor);
outline-color: var(--sapContent_ContrastFocusColor);
}
}

Expand Down Expand Up @@ -350,4 +350,33 @@ $block: #{$fd-namespace}-shellbar;
display: inline-block;
}
}

&--side-nav {
padding: 0 1rem 0 0;

@include fd-rtl() {
padding: 0 0 0 1rem;
}

&.#{$block}--m,
&.#{$block}--l {
padding: 0 2rem 0 0;

@include fd-rtl() {
padding: 0 0 0 2rem;
}
}

&.#{$block}--xl {
padding: 0 3rem 0 0;

@include fd-rtl() {
padding: 0 0 0 3rem;
}
}
}

&__side-nav-control {
margin: 0 0.25rem;
}
}
188 changes: 188 additions & 0 deletions stories/shellbar/__snapshots__/shellbar.stories.storyshot
View file
Expand Up @@ -2319,6 +2319,194 @@ exports[`Storyshots Components/Shellbar Product switch 1`] = `
</div>


</div>
`;

exports[`Storyshots Components/Shellbar Side Navigation 1`] = `
<div
style="height:600px"
>


<div
class="fd-shellbar fd-shellbar--side-nav"
>


<div
class="fd-shellbar__group fd-shellbar__group--product"
>


<button
aria-label="Side Nav control button"
class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__side-nav-control"
>


<i
class="sap-icon--menu2"
/>


</button>


<span
class="fd-shellbar__logo"
>
<img
alt="SAP"
height="24"
src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x"
width="48"
/>
</span>


<span
class="fd-shellbar__title"
>
Corporate Portal
</span>


</div>


<div
class="fd-shellbar__group fd-shellbar__group--actions"
>


<div
class="fd-shellbar__action"
>


<div
class="fd-popover fd-popover--right"
>


<div
class="fd-popover__control"
>


<div
aria-controls="MKFAY276"
aria-expanded="false"
aria-haspopup="true"
class="fd-button fd-shellbar__button fd-user-menu__control"
onclick="onPopoverClick('MKFAY276')"
role="button"
>


<span
aria-label="William Wallingham"
class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
style="background-image: url('assets/images/avatars/1.svg');"
>


</span>


</div>


</div>


<div
aria-hidden="true"
class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
id="MKFAY276"
>


<nav
class="fd-menu"
>


<ul
class="fd-menu__list fd-menu__list--no-shadow"
>


<li
class="fd-menu__item"
>


<a
class="fd-menu__link"
role="button"
>


<span
class="fd-menu__title"
>
Settings
</span>


</a>


</li>


<li
class="fd-menu__item"
>


<a
class="fd-menu__link"
role="button"
>


<span
class="fd-menu__title"
>
Sign Out
</span>


</a>


</li>


</ul>


</nav>


</div>


</div>


</div>


</div>


</div>


</div>
`;

Expand Down
56 changes: 56 additions & 0 deletions stories/shellbar/shellbar.stories.js
View file
Expand Up @@ -711,3 +711,59 @@ Shellbar can be displayed with a product switch component, indicating to the use
`
}
};

export const sideNav = () => `<div style="height:600px">
<div class="fd-shellbar fd-shellbar--side-nav">
<div class="fd-shellbar__group fd-shellbar__group--product">
<button class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__side-nav-control" aria-label="Side Nav control button">
<i class="sap-icon--menu2"></i>
</button>
<span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
<span class="fd-shellbar__title">Corporate Portal</span>
</div>
<div class="fd-shellbar__group fd-shellbar__group--actions">
<div class="fd-shellbar__action">
<div class="fd-popover fd-popover--right">
<div class="fd-popover__control">
<div class="fd-button fd-shellbar__button fd-user-menu__control"
onclick="onPopoverClick('MKFAY276')" aria-controls="MKFAY276" aria-expanded="false"
aria-haspopup="true" role="button">
<span
class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
style="background-image: url('assets/images/avatars/1.svg');"
aria-label="William Wallingham">
</span>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true"
id="MKFAY276">
<nav class="fd-menu">
<ul class="fd-menu__list fd-menu__list--no-shadow">
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<span class="fd-menu__title">Settings</span>
</a>
</li>
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<span class="fd-menu__title">Sign Out</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
`;

sideNav.storyName = 'Side Navigation';

sideNav.parameters = {
docs: {
storyDescription: `Apply the <code>fd-shellbar--side-nav</code> modifier class to <code>fd-shellbar</code> when the Shellbar contains Side Navigation control. The button that is controlling the state of the Side Navigation (expanded, condensed, off-screen) has \`fd-shellbar__side-nav-control\` modifier class applied on it, together with \`fd-shellbar__button\` class. The Shellbar used with Side Navigation can also be optimised for different screens by appling <code>fd-shellbar--m</code>, <code>fd-shellbar--l</code> or <code>fd-shellbar--xl</code> modifier classes. In this case the responsive padding will only be applied on the right-hand side of the Shellbar.
`
}
};

0 comments on commit 657329a

Please sign in to comment.