-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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.
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
Refactor underline nav #377
Changes from 13 commits
ce1a6f8
67fe320
346992a
ca5a104
936a8fe
ad5fa52
36565dc
f6dde1e
43b8b8e
f85d54c
84efc60
573b961
921fef6
80f0616
751b999
8336983
d7d54d5
f270f97
0ffc472
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -48,7 +48,7 @@ Primer comes with several navigation components. Some were designed with singula | |
|
||
The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`. | ||
|
||
```html | ||
```html title="Menu" | ||
<nav class="menu" aria-label="Person settings"> | ||
<a class="menu-item selected" href="#url" aria-current="page">Account</a> | ||
<a class="menu-item" href="#url">Profile</a> | ||
|
@@ -59,7 +59,7 @@ The menu is a vertical list of navigational links. **A menu's width and placemen | |
|
||
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons. | ||
|
||
```html | ||
```html title="Menu with octicons, avatars and counters" | ||
<nav class="menu" aria-label="Person settings"> | ||
<a class="menu-item selected" href="#url" aria-current="page"> | ||
<%= octicon "tools" %> | ||
|
@@ -83,7 +83,7 @@ There are a few subcomponents and add-ons that work well with the menu, includin | |
|
||
You can also add optional headings to a menu. Feel free to use nearly any semantic element with the `.menu-heading` class, including inline elements, headings, and more. | ||
|
||
```html | ||
```html title="Menu with heading" | ||
<nav class="menu" aria-labelledby="menu-heading"> | ||
<span class="menu-heading" id="menu-heading">Menu heading</span> | ||
<a class="menu-item selected" href="#url" aria-current="page">Account</a> | ||
|
@@ -93,12 +93,123 @@ You can also add optional headings to a menu. Feel free to use nearly any semant | |
</nav> | ||
``` | ||
|
||
## Underline nav | ||
|
||
`.UnderlineNav` is navigation that is typically used at the top of a page as the main page navigation. | ||
|
||
```html title="UnderlineNav" | ||
<nav class="UnderlineNav"> | ||
<div class="UnderlineNav-items"> | ||
<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> | ||
<a href="#url" role="tab" title="Item 4" class="UnderlineNav-item">Item 4</a> | ||
</div> | ||
</nav> | ||
``` | ||
|
||
Use `.UnderlineNav-actions` to use another element alongside the underline nav | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use is used twice here, could be worded better, suggest something like this:
|
||
|
||
```html title="UnderlineNav-actions" | ||
<nav class="UnderlineNav" aria-label="Foo bar"> | ||
<div class="UnderlineNav-items"> | ||
<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> | ||
<a href="#url" class="UnderlineNav-item">Item 4</a> | ||
</div> | ||
<div class="UnderlineNav-actions"> | ||
<a class="btn">Button</a> | ||
</div> | ||
</nav> | ||
``` | ||
|
||
You can right align the navigation with `.UnderlineNav--right`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. To keep in style with our newer docs (i.e. less wordy and command tense), suggest changing this to:
|
||
|
||
```html title="UnderlineNav--right" | ||
<nav class="UnderlineNav UnderlineNav--right"> | ||
<div class="UnderlineNav-items"> | ||
<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> | ||
<a href="#url" role="tab" title="Item 4" class="UnderlineNav-item">Item 4</a> | ||
</div> | ||
</nav> | ||
``` | ||
|
||
This also works when adding actions. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Suggest changing description to: |
||
|
||
```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"> | ||
<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> | ||
<a href="#url" class="UnderlineNav-item">Item 4</a> | ||
</div> | ||
</nav> | ||
``` | ||
|
||
|
||
The navigation will work with added counters and/or octicons | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Again, use a more commanding tone, such as:
|
||
|
||
```html title="UnderlineNav with Counter" | ||
<nav class="UnderlineNav" aria-label="Foo bar"> | ||
<div class="UnderlineNav-items"> | ||
<a href="#url" class="UnderlineNav-item selected"> | ||
<%= octicon "tools" %> | ||
Item 1 | ||
</a> | ||
<a href="#url" class="UnderlineNav-item"> | ||
<%= octicon "tools" %> | ||
Item 2 | ||
<span class="Counter">10</span> | ||
</a> | ||
<a href="#url" class="UnderlineNav-item"> | ||
<%= octicon "tools" %> | ||
Item 3 | ||
</a> | ||
<a href="#url" class="UnderlineNav-item"> | ||
<%= octicon "tools" %> | ||
Item 4 | ||
</a> | ||
</div> | ||
</nav> | ||
``` | ||
|
||
Use `.UnderlineNav--full` to use a container within the components | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Suggesting change wording to something like:
I couldn't find a way to avoid using "container" twice but I think it's okay. |
||
|
||
```html title="UnderlineNav--full" | ||
<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar"> | ||
<div class="container-lg"> | ||
<div class="UnderlineNav-items"> | ||
<a href="#url" class="UnderlineNav-item selected">Item 1</a> | ||
<a href="#url" class="UnderlineNav-item">Item 2 | ||
<span class="Counter">10</span> | ||
</a> | ||
<a href="#url" class="UnderlineNav-item">Item 3</a> | ||
<a href="#url" class="UnderlineNav-item">Item 4</a> | ||
</div> | ||
<div class="UnderlineNav-actions"> | ||
<a class="btn">Button</a> | ||
</div> | ||
</div> | ||
</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! | ||
|
||
```html | ||
```html title="tabnav" | ||
<div class="tabnav"> | ||
<nav class="tabnav-tabs" aria-label="Foo bar"> | ||
<a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab</a> | ||
|
@@ -109,7 +220,7 @@ When you need to toggle between different views, consider using a tabnav. It'll | |
|
||
Use `.float-right` to align additional elements in the `.tabnav`: | ||
|
||
```html | ||
```html title="tabnav with buttons" | ||
<div class="tabnav"> | ||
<a class="btn btn-sm float-right" href="#url" role="button">Button</a> | ||
<nav class="tabnav-tabs" aria-label="Foo bar"> | ||
|
@@ -121,7 +232,7 @@ Use `.float-right` to align additional elements in the `.tabnav`: | |
|
||
Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`: | ||
|
||
```html | ||
```html title="tabnav-extra" | ||
<div class="tabnav"> | ||
<div class="tabnav-extra float-right"> | ||
Tabnav widget text here. | ||
|
@@ -133,7 +244,7 @@ Additional bits of text and links can be styled for optimal placement with `.tab | |
</div> | ||
``` | ||
|
||
```html | ||
```html title="tabnav with everything" | ||
<div class="tabnav"> | ||
<div class="float-right"> | ||
<a class="tabnav-extra" href="#url"> | ||
|
@@ -154,7 +265,7 @@ Additional bits of text and links can be styled for optimal placement with `.tab | |
|
||
A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white. | ||
|
||
```html | ||
```html title="filter-list" | ||
<ul class="filter-list"> | ||
<li> | ||
<a href="#url" class="filter-item selected" aria-current="page"> | ||
|
@@ -180,7 +291,7 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr | |
|
||
`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy. | ||
|
||
```html | ||
```html title="subnav" | ||
<nav class="subnav" aria-label="Respository"> | ||
<a href="#url" class="subnav-item selected" aria-current="page">Item 1</a> | ||
<a href="#url" class="subnav-item">Item 2</a> | ||
|
@@ -190,7 +301,7 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr | |
|
||
You can have `subnav-search` in the subnav bar. | ||
|
||
```html | ||
```html title="subnav-search" | ||
<div class="subnav"> | ||
<nav class="subnav-links" aria-label="Repository"> | ||
<a href="#url" class="subnav-item selected" aria-current="page">Item 1</a> | ||
|
@@ -207,7 +318,7 @@ You can have `subnav-search` in the subnav bar. | |
|
||
You can also use a `subnav-search-context` to display search help in a select menu. | ||
|
||
```html | ||
```html title="subnav-search-context" | ||
<div class="subnav"> | ||
<nav class="subnav-links"> | ||
<a href="#url" class="subnav-item selected">Item 1</a> | ||
|
@@ -244,6 +355,8 @@ You can also use a `subnav-search-context` to display search help in a select me | |
</div> | ||
</div> | ||
``` | ||
|
||
|
||
<!-- %enddocs --> | ||
|
||
## License | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
.UnderlineNav { | ||
display: flex; | ||
justify-content: space-between; | ||
border-bottom: 1px solid $gray-200; | ||
} | ||
|
||
.UnderlineNav-items { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I feel a little worried having There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Changing to |
||
display: flex; | ||
margin-bottom: -1px; | ||
} | ||
|
||
.UnderlineNav-item { | ||
padding: $spacer-3 $spacer-2; | ||
margin-right: $spacer-3; | ||
font-size: $body-font-size; | ||
line-height: $lh-default; | ||
color: $text-gray; | ||
text-align: center; | ||
border-bottom: 2px solid transparent; | ||
|
||
.Counter { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'd prefer to avoid nesting other component selectors like this because it creates dependencies and means overriding if we want to act differently. We could just use the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I removed this from the component. My only concern is that people will use inconsistent spacing, but I think it needs to be flexible because markup spacing affects this There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah this, and the other similar scenarios, are tricky. This is where I feel like we should handle the |
||
margin-left: $spacer-1; | ||
} | ||
|
||
.octicon { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Similar thoughts here to nesting There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I removed the spacing from the component (same concern as Counter) but kept the color styles in under |
||
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 { | ||
color: $gray-500; | ||
} | ||
} | ||
|
||
&.selected { | ||
font-weight: $font-weight-bold; | ||
color: $text-gray-dark; | ||
border-bottom-color: $orange-600; | ||
|
||
.octicon { | ||
color: $gray-500; | ||
} | ||
} | ||
} | ||
|
||
.UnderlineNav--right { | ||
justify-content: flex-end; | ||
|
||
.UnderlineNav-item { | ||
margin-right: 0; | ||
margin-left: $spacer-3; | ||
} | ||
|
||
.UnderlineNav-actions { | ||
flex: 1 1 auto; | ||
} | ||
} | ||
|
||
.UnderlineNav-actions { | ||
align-self: center; | ||
} | ||
|
||
.UnderlineNav--full { | ||
display: block; | ||
|
||
.container-lg, | ||
.container-md, | ||
.container-xl { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same here re nesting other Primer styles. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Changed this to |
||
display: flex; | ||
justify-content: space-between; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react' | ||
import { storiesOf } from '@storybook/react' | ||
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown' | ||
|
||
const stories = storiesOf('Navigation', module) | ||
|
||
storiesFromMarkdown(require.context('.', true, /\.md$/)) | ||
.forEach(({title, story}) => { | ||
stories.add(title, story) | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,11 @@ | ||
#!/bin/bash | ||
set -e | ||
|
||
branch=$TRAVIS_BRANCH | ||
branch=$TRAVIS_PULL_REQUEST_BRANCH | ||
event=$TRAVIS_EVENT_TYPE | ||
|
||
# only publish canary releases on PRs against dev | ||
if [[ "$event" = "pull_request" && "$branch" = "dev" ]]; then | ||
if [[ "$event" = "pull_request" ]] && [[ !("$branch" =~ ^release-.*) ]] && [[ !("$branch" = "master") ]]; | ||
then | ||
script/release-pr --yes | ||
fi |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This could be worded better, it says navigation twice and descriptions could be a little more helpful. Suggest something like this but feel free to edit: