Skip to content

Refactor underline nav #377

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

Merged
merged 19 commits into from
Nov 7, 2017
+202 −11
Merged

Refactor underline nav #377

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ce1a6f8
Add underline nav styles and import file
ampinsk Oct 20, 2017
67fe320
Add octicon styles to prototype
ampinsk Oct 20, 2017
346992a
Add prototyping cases
ampinsk Oct 20, 2017
ca5a104
Add docs
ampinsk Oct 20, 2017
936a8fe
Move underline nav section in docs
ampinsk Oct 23, 2017
ad5fa52
Merge branch 'release-10.0.0' into underline-nav
jonrohan Oct 27, 2017
36565dc
Linting fixes
jonrohan Oct 27, 2017
f6dde1e
Using storiesfrommarkdown
jonrohan Oct 28, 2017
43b8b8e
Publish alpha release any time we're not on a release branch or master
jonrohan Nov 2, 2017
f85d54c
Add support for all container classes; add support for right + actions
ampinsk Nov 3, 2017
84efc60
Merge branch 'underline-nav' of https://github.com/primer/primer-css …
ampinsk Nov 3, 2017
573b961
Fix spacing
ampinsk Nov 3, 2017
921fef6
Update docs
ampinsk Nov 3, 2017
80f0616
Update naming and docs
ampinsk Nov 6, 2017
751b999
Remove mr-1 from octicon component style
ampinsk Nov 6, 2017
8336983
Update docs
ampinsk Nov 6, 2017
d7d54d5
Merge branch 'release-10.0.0' into underline-nav
jonrohan Nov 6, 2017
f270f97
Update docs
ampinsk Nov 7, 2017
0ffc472
Merge branch 'underline-nav' of https://github.com/primer/primer-css …
ampinsk Nov 7, 2017
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
Prev Previous commit
Next Next commit
Update naming and docs
  • Loading branch information
@ampinsk
ampinsk committed Nov 6, 2017
commit 80f06169a76b8cd784b6171a73ec622f469e9d85
45 changes: 20 additions & 25 deletions modules/primer-navigation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,11 @@ You can also add optional headings to a menu. Feel free to use nearly any semant

## Underline nav

`.UnderlineNav` is navigation that is typically used at the top of a page as the main page navigation.
Use `.UnderlineNav` to style navigation with a minimal underlined selected state. This component comes with variations to accommodate icons, counters, and button actions; and is typically used for navigation placed at the top of the page.
Copy link
Contributor

@broccolini broccolini Nov 7, 2017

Choose a reason for hiding this comment

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

I just realized we need to remove that it accommodates counters becaase of the Sass changes 😬

Copy link
Contributor Author

@ampinsk ampinsk Nov 7, 2017

Choose a reason for hiding this comment

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

I changed it to:

Use .UnderlineNav to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers, and other content.

It's a little wordy, so let me know if you have suggestions!


```html title="UnderlineNav"
<nav class="UnderlineNav">
<div class="UnderlineNav-items">
<div class="UnderlineNav-body">
<a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" role="tab" title="Item 2" class="UnderlineNav-item">Item 2</a>
<a href="#url" role="tab" title="Item 3" class="UnderlineNav-item">Item 3</a>
Expand All @@ -108,11 +108,11 @@ You can also add optional headings to a menu. Feel free to use nearly any semant
</nav>
```

Use `.UnderlineNav-actions` to use another element alongside the underline nav
Use `.UnderlineNav-actions` to place another element, such as a button, to the opposite side of the navigation items.

```html title="UnderlineNav-actions"
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-items">
<div class="UnderlineNav-body">
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" class="UnderlineNav-item">Item 2</a>
<a href="#url" class="UnderlineNav-item">Item 3</a>
Expand All @@ -124,11 +124,11 @@ Use `.UnderlineNav-actions` to use another element alongside the underline nav
</nav>
```

You can right align the navigation with `.UnderlineNav--right`.
Use `.UnderlineNav--right` to right align the navigation.

```html title="UnderlineNav--right"
<nav class="UnderlineNav UnderlineNav--right">
<div class="UnderlineNav-items">
<div class="UnderlineNav-body">
<a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" role="tab" title="Item 2" class="UnderlineNav-item">Item 2</a>
<a href="#url" role="tab" title="Item 3" class="UnderlineNav-item">Item 3</a>
Expand All @@ -137,14 +137,14 @@ You can right align the navigation with `.UnderlineNav--right`.
</nav>
```

This also works when adding actions.
`.UnderlineNav--right` also works with when used with `.UnderlineNav-actions`.

```html title="UnderlineNav--right with actions"
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
<div class="UnderlineNav-actions">
<a class="btn">Button</a>
</div>
<div class="UnderlineNav-items">
<div class="UnderlineNav-body">
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" class="UnderlineNav-item">Item 2</a>
<a href="#url" class="UnderlineNav-item">Item 3</a>
Expand All @@ -153,42 +153,42 @@ This also works when adding actions.
</nav>
```


The navigation will work with added counters and/or octicons
<!-- Update wording here -->
`.Counters` and `.octicons` can be used with navigation items. Use `.UnderlineNav-octicon` to add color and hover styles.

```html title="UnderlineNav with Counter"
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-items">
<div class="UnderlineNav-body">
<a href="#url" class="UnderlineNav-item selected">
<%= octicon "tools" %>
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
Item 1
</a>
<a href="#url" class="UnderlineNav-item">
<%= octicon "tools" %>
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
Item 2
<span class="Counter">10</span>
<span class="Counter ml-1">10</span>
</a>
<a href="#url" class="UnderlineNav-item">
<%= octicon "tools" %>
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
Item 3
</a>
<a href="#url" class="UnderlineNav-item">
<%= octicon "tools" %>
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
Item 4
</a>
</div>
</nav>
```

Use `.UnderlineNav--full` to use a container within the components
Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNav-container` to make navigation fill the width of the container.

```html title="UnderlineNav--full"
<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar">
<div class="container-lg">
<div class="UnderlineNav-items">
<div class="container-lg UnderlineNav-container">
<div class="UnderlineNav-body">
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" class="UnderlineNav-item">Item 2
<span class="Counter">10</span>
<span class="Counter ml-1">10</span>
</a>
<a href="#url" class="UnderlineNav-item">Item 3</a>
<a href="#url" class="UnderlineNav-item">Item 4</a>
Expand All @@ -200,11 +200,6 @@ Use `.UnderlineNav--full` to use a container within the components
</nav>
```






## Tabnav

When you need to toggle between different views, consider using a tabnav. It'll given you a left-aligned horizontal row of... tabs!
Expand Down
30 changes: 12 additions & 18 deletions modules/primer-navigation/lib/underline-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
border-bottom: 1px solid $gray-200;
}

.UnderlineNav-items {
.UnderlineNav-body {
display: flex;
margin-bottom: -1px;
}
Expand All @@ -18,23 +18,14 @@
text-align: center;
border-bottom: 2px solid transparent;

.Counter {
margin-left: $spacer-1;
}

.octicon {
margin-right: $spacer-1;
color: $gray-400;
}

&:hover,
&:focus {
color: $text-gray-dark;
text-decoration: none;
border-bottom-color: $gray-300;
transition: 0.2s ease;

.octicon {
.UnderlineNav-octicon {
color: $gray-500;
}
}
Expand All @@ -44,7 +35,7 @@
color: $text-gray-dark;
border-bottom-color: $orange-600;

.octicon {
.UnderlineNav-octicon {
color: $gray-500;
}
}
Expand All @@ -69,11 +60,14 @@

.UnderlineNav--full {
display: block;
}

.container-lg,
.container-md,
.container-xl {
display: flex;
justify-content: space-between;
}
.UnderlineNav-octicon {
margin-right: $spacer-1;
color: $gray-400;
}

.UnderlineNav-container {
display: flex;
justify-content: space-between;
}