Skip to content

Commit

Permalink
fix: remove Shellbar with SideNav (#2205)
Browse files Browse the repository at this point in the history 
* fix: remove Shellbar with SideNav

* [ci visual]

* [ci visual]
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Mar 23, 2021
1 parent ec95e4c commit 140dfbd
Show file tree
Hide file tree
Showing 3 changed files with 0 additions and 269 deletions.
25 changes: 0 additions & 25 deletions src/shellbar.scss
View file
Expand Up @@ -351,31 +351,6 @@ $block: #{$fd-namespace}-shellbar;
}
}

&--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;
}
Expand Down
188 changes: 0 additions & 188 deletions stories/shellbar/__snapshots__/shellbar.stories.storyshot
View file
Expand Up @@ -2319,194 +2319,6 @@ 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: 0 additions & 56 deletions stories/shellbar/shellbar.stories.js
View file
Expand Up @@ -711,59 +711,3 @@ 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 140dfbd

Please sign in to comment.