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

Add side navigation variant with icons on the left #2932

Merged
merged 3 commits into from Mar 18, 2020
Merged

Add side navigation variant with icons on the left #2932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a3cd846
Add side navigation variant with icons on the left
bartaz Mar 13, 2020
f40397e
Add docs for side navigation with icons
bartaz Mar 17, 2020
c135f32
Clean up selectors for nested navigation levels
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
43 changes: 37 additions & 6 deletions scss/_patterns_side-navigation.scss
View file
Open in desktop
@@ -1,13 +1,16 @@
@import 'settings';

@mixin vf-p-side-navigation {
.p-side-navigation__list {
@extend %vf-list;

.p-side-navigation > &:first-child {
.p-side-navigation,
.p-side-navigation--icons {
& > .p-side-navigation__list:first-child {
// nudge from top to put text on baseline grid
padding-top: 0.5 * $spv-inner--x-small;
}
}

.p-side-navigation__list {
@extend %vf-list;

& + & {
@extend %vf-pseudo-border--top;
Expand All @@ -28,13 +31,40 @@
display: flex;
padding: $spv-inner--x-small $sph-inner $spv-inner--x-small $sph-inner;

// nested 2 or 3 levels
// space for the right hand icon with default inner spacing on the left
$icon-spacing-width: map-get($icon-sizes, default) + $sph-inner;

.p-side-navigation--icons & {
padding-left: $sph-inner + $icon-spacing-width;
position: relative;
}

// nested 2nd level of navigation
.p-side-navigation__item .p-side-navigation__item & {
padding-left: 2 * $sph-inner;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the levels should be configurable when you invoke the mixin; many sites won't need 3 levels, and some might need 5; my proposal: @mixin p-side-navigation($depth: 3)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels a bit overkill.

The design was discussed many times and it seems for now we barely have examples that would use all 3 level of navigation. If anything really needs more nesting we could add it later.

Also nesting is just 2 not very long rules (4 precisely if you count --icons variant), so there is no much benefit in file size to reduce it to just one.

The complexity of adding configurable mixin that probably no one will use doesn't seem worth it. It doesn't seem like we do anything like this anywhere else.

While flexibility and ability to configure things is great it comes with cost of maintenance and ease of use.

I guess the biggest problem we are trying to solve with Vanilla is to keep our products consistent, so lets start with good default variants of components. If anything different is needed we can consider it on case by case basis.


// add spacing for variant with right side icons
.p-side-navigation--icons & {
padding-left: 2 * $sph-inner + $icon-spacing-width;
}
}

// nested 3rd level of navigation
.p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & {
padding-left: 3 * $sph-inner;

// add spacing for variant with right side icons
.p-side-navigation--icons & {
padding-left: 3 * $sph-inner + $icon-spacing-width;
}
}
}

.p-side-navigation--icons {
.p-side-navigation__icon {
left: $sph-inner;
position: absolute;
top: $sph-inner--small;
}
}

Expand Down Expand Up @@ -74,7 +104,8 @@
// border color of items list
$color-sidenav-list-border: $colors--light-theme--border-default
) {
.p-side-navigation {
.p-side-navigation,
.p-side-navigation--icons {
color: $color-sidenav-text-default;
}

Expand Down
56 changes: 56 additions & 0 deletions templates/docs/examples/patterns/side-navigation/icons.html
View file
Open in desktop
@@ -0,0 +1,56 @@
{% extends "_layouts/examples.html" %}
{% block title %}Side navigation / With icons{% endblock %}

{% block standalone_css %}patterns_side-navigation{% endblock %}

{% block content %}
<div class="p-side-navigation--icons">
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item">
<a class="p-side-navigation__link is-active" href="#"><i class="p-icon--information p-side-navigation__icon"></i>Information</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#"><i class="p-icon--user p-side-navigation__icon"></i>Users</a>
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">Anna von Example</a>
</li>
<li class="p-side-navigation__item ">
<a class="p-side-navigation__link" href="#">Bob Anonymous</a>
</li>
</ul>
</li>
<li class="p-side-navigation__item ">
<a class="p-side-navigation__link" href="#">
<i class="p-icon--help p-side-navigation__icon"></i>
Get help
<span class="p-side-navigation__status">
<span class="p-label--updated">Updated</span>
</span>
</a>
</li>
</ul>
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">Release notes</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">Contribute</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">Contact us</a>
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">IRC channel</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">Discourse forum</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="#">Contact form</a>
</li>
</ul>
</li>
</ul>
</div>
{% endblock %}
12 changes: 12 additions & 0 deletions templates/docs/patterns/navigation.md
View file
Open in desktop
Expand Up @@ -77,6 +77,18 @@ Use `p-side-navigation__status` inside `p-side-navigation__link` elements to add
View example of the side navigation pattern
</a>

To add icons on the left side of the items in side navigation use the `.p-side-navigation--items` class.

<div class="p-notification--information">
<p class="p-notification__response">
<span class="p-notification__status">Note:</span>Icons should only be used on the items in the first level of side navigation.
</p>
</div>

<a href="/docs/examples/patterns/side-navigation/icons" class="js-example">
View example of the side navigation pattern with icons
</a>

### Import

To import just navigation or sub-navigation component into your project, copy snippets below and include it in your main Sass file.
Expand Down