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

Jump to bottom

Side navigation status labels and icons #2928

Merged
merged 4 commits into from Mar 17, 2020
Merged

Side navigation status labels and icons #2928

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3763fb5
Add status icons and labels to side navigation
bartaz Mar 13, 2020
17e27aa
Document status styles for side navigation
bartaz Mar 16, 2020
911f76d
Add icons and labels to standalone example
bartaz Mar 16, 2020
a3532de
Update spacing from the right side of side navigation
bartaz Mar 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 7 additions & 2 deletions scss/_patterns_side-navigation.scss
View file
Open in desktop
Expand Up @@ -25,8 +25,8 @@

.p-side-navigation__text,
.p-side-navigation__link {
display: block;
padding: $spv-inner--x-small $sph-inner--small $spv-inner--x-small $sph-inner;
display: flex;
padding: $spv-inner--x-small $sph-inner $spv-inner--x-small $sph-inner;

// nested 2 or 3 levels
.p-side-navigation__item .p-side-navigation__item & {
Expand All @@ -52,6 +52,11 @@
}
}

.p-side-navigation__status {
margin-left: auto;
padding-left: $spv-inner--small;
}

// default light theme
@include vf-side-navigation-theme;
}
Expand Down
7 changes: 7 additions & 0 deletions scss/standalone/patterns_side-navigation.scss
View file
Open in desktop
@@ -1,5 +1,12 @@
@import '../base';
@include vf-base;

// labels and icons for navigation statuses
@import '../patterns_label';
@include vf-p-label;

@import '../patterns_icons';
@include vf-p-icons;

@import '../patterns_side-navigation';
@include vf-p-side-navigation;
2 changes: 1 addition & 1 deletion templates/_layouts/docs.html
View file
Open in desktop
Expand Up @@ -88,7 +88,7 @@
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/media-object' %}is-active{% endif %}" href="/docs/patterns/media-object">Media object</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/modal' %}is-active{% endif %}" href="/docs/patterns/modal">Modal</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/muted-heading' %}is-active{% endif %}" href="/docs/patterns/muted-heading">Muted heading</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/navigation' %}is-active{% endif %}" href="/docs/patterns/navigation">Navigation</a><div class="p-label--new u-float-right u-no-margin--bottom">New</div></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/navigation' %}is-active{% endif %}" href="/docs/patterns/navigation">Navigation</a><div class="p-label--new u-float-right">New</div></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/notification' %}is-active{% endif %}" href="/docs/patterns/notification">Notifications</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/pagination' %}is-active{% endif %}" href="/docs/patterns/pagination">Pagination</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/pull-quote' %}is-active{% endif %}" href="/docs/patterns/pull-quote">Quotes</a></li>
Expand Down
9 changes: 6 additions & 3 deletions templates/docs/examples/patterns/side-navigation/default.html
View file
Open in desktop
Expand Up @@ -12,11 +12,14 @@
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">First level link</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">First level link with status<div class="p-side-navigation__status"><i class="p-icon--error"></i></div></a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">Link with children</a>
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">Second level link</a>
<a class="p-side-navigation__link" href="#">Second level link<div class="p-side-navigation__status"><i class="p-icon--warning"></i></div></a>
</li>
<li class="p-side-navigation__item ">
<span class="p-side-navigation__text">Second level text</span>
Expand All @@ -31,7 +34,7 @@
<a class="p-side-navigation__link is-active" href="#">Third level active link</a>
</li>
<li class="p-side-navigation__item ">
<a class="p-side-navigation__link" href="#">Third level link</a>
<a class="p-side-navigation__link" href="#">Third level link with status<div class="p-side-navigation__status"><i class="p-icon--success"></i></div></a>
</li>
</ul>
</li>
Expand All @@ -41,7 +44,7 @@
<span class="p-side-navigation__text">First level item that is not a link</span>
</li>
<li class="p-side-navigation__item ">
<a class="p-side-navigation__link" href="#">First level link</a>
<a class="p-side-navigation__link" href="#">First level link with a label<div class="p-side-navigation__status"><span class="p-label--new">New</span></div></a>
</li>
</ul>
<ul class="p-side-navigation__list">
Expand Down
4 changes: 2 additions & 2 deletions templates/docs/examples/patterns/side-navigation/docs.html
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@
<a class="p-side-navigation__link" href="#">Explore MAAS</a>
</li>
<li class="p-side-navigation__item ">
<a class="p-side-navigation__link" href="#">Quick start</a>
<a class="p-side-navigation__link" href="#">Quick start<span class="p-side-navigation__status"><span class="p-label--new">New</span></span></a>
</li>
</ul>
<ul class="p-side-navigation__list">
Expand Down Expand Up @@ -66,7 +66,7 @@
<a class="p-side-navigation__link" href="#">Upgrade from 2.3 to 2.4</a>
</li>
<li class="p-side-navigation__item ">
<a class="p-side-navigation__link" href="#">Upgrade from 1.9 to 2.x</a>
<a class="p-side-navigation__link" href="#">Upgrade from 1.9 to 2.x<span class="p-side-navigation__status"><i class="p-icon--warning"></i></span></a>
</li>
</ul>
</li>
Expand Down
9 changes: 9 additions & 0 deletions templates/docs/patterns/navigation.md
View file
Open in desktop
Expand Up @@ -71,6 +71,8 @@ It allows grouping the links into navigation sections and nesting them up to thr

Current page in the side navigation should be highlighted by adding `is-active` class to the corresponding `p-side-navigation__link` element.

Use `p-side-navigation__status` inside `p-side-navigation__link` elements to add status labels or icons on right side of navigation items.

<a href="/docs/examples/patterns/side-navigation/docs" class="js-example">
View example of the side navigation pattern
</a>
Expand All @@ -93,6 +95,13 @@ To import side navigation, copy snippet below:
```scss
@import 'patterns_side-navigation';
@include vf-p-side-navigation;

// optionally add icons and/or labels if you use them in side navigation__nav
@import 'patterns_label';
@include vf-p-label;

@import 'patterns_icons';
@include vf-p-icons;
```

For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
Expand Down