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.

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

UnderlineNav :focus styles #1764

Merged
merged 22 commits into from
Dec 7, 2021
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c2c90a0
add pseudo selectors
langermank Nov 22, 2021
8c9e587
adjustments
langermank Nov 23, 2021
baa6f76
add stories, cleanup
langermank Nov 23, 2021
e8ad83c
update mixin
langermank Nov 23, 2021
64bccfb
fix mixin
langermank Nov 24, 2021
8974596
Merge branch 'main' into underline-nav-focus-state
langermank Nov 24, 2021
2ad2bac
lint
langermank Nov 24, 2021
98a31d6
Merge branch 'underline-nav-focus-state' of https://github.com/primer…
langermank Nov 24, 2021
959e470
add back overflow styles
langermank Nov 24, 2021
b97f98b
adjust focus for better overflow state, scrollsnap
langermank Nov 29, 2021
4934508
Merge branch 'main' into underline-nav-focus-state
langermank Nov 29, 2021
b3491b7
post test adjustments, move hacks to primer css
langermank Dec 1, 2021
0bc6793
Merge branch 'underline-nav-focus-state' of https://github.com/primer…
langermank Dec 1, 2021
085fc6e
Stylelint auto-fixes
actions-user Dec 1, 2021
45c7685
hover state desktop only
langermank Dec 1, 2021
391543d
Merge branch 'underline-nav-focus-state' of https://github.com/primer…
langermank Dec 1, 2021
de74b44
Merge branch 'main' into underline-nav-focus-state
langermank Dec 1, 2021
4997af5
document data-content hack
langermank Dec 2, 2021
fee7903
Merge branch 'main' of https://github.com/primer/css into underline-n…
langermank Dec 2, 2021
b0aaadf
Create nice-days-jog.md
langermank Dec 2, 2021
8ca5bff
Merge branch 'main' into underline-nav-focus-state
simurai Dec 3, 2021
759a925
Merge branch 'main' into underline-nav-focus-state
langermank Dec 7, 2021
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
7 changes: 7 additions & 0 deletions .changeset/nice-days-jog.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@primer/css": minor
---

UnderlineNav `:focus` styles
Refactor selected state and spacing
Add selected bold state override from github/github
73 changes: 73 additions & 0 deletions docs/src/stories/components/Navigation/UnderlineNav.stories.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from 'react'
import clsx from 'clsx'
import {UnderlineNavItemTemplate} from './UnderlineNavItem.stories'

export default {
title: 'Components/Navigation/UnderlineNav',
excludeStories: ['UnderlineNavTemplate'],
layout: 'padded',
argTypes: {
variant: {
options: [0, 1, 2], // iterator
mapping: ['', 'UnderlineNav--right', 'UnderlineNav--full'], // values
control: {
type: 'inline-radio',
labels: ['default', 'align-right', 'fullwidth']
},
description: 'nav positioning options',
table: {
category: 'CSS'
}
},
children: {
description: 'creates a slot for children',
table: {
category: 'HTML'
}
},
actionStart: {
description: 'action to left of nav',
table: {
category: 'HTML'
}
},
actionEnd: {
description: 'action to right of nav',
table: {
category: 'HTML'
}
}
}
}

export const UnderlineNavTemplate = ({variant, children, actionStart, actionEnd}) => (
<>
<nav className={clsx('UnderlineNav', variant && `${variant}`)}>
{actionStart}
{variant === 'UnderlineNav--full' ? (
<div class="container-lg UnderlineNav-container">
<ul class="UnderlineNav-body" role="tablist">
{children}
</ul>
</div>
) : (
<ul class="UnderlineNav-body" role="tablist">
{children}
</ul>
)}
{actionEnd}
</nav>
</>
)

export const Playground = UnderlineNavTemplate.bind({})
Playground.args = {
variant: 0,
children: (
<>
<UnderlineNavItemTemplate label="Item" semanticItemType="button" selected usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
</>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react'
import clsx from 'clsx'
import {ButtonTemplate} from '../Button/Button.stories'
import {LinkTemplate} from '../Link/Link.stories'

export default {
title: 'Components/Navigation/UnderlineNav/Action',
excludeStories: ['UnderlineNavActionTemplate'],
layout: 'padded',
argTypes: {
semanticItemType: {
options: ['button', 'link'],
control: {
type: 'inline-radio'
},
description: 'item can be a button or a link',
table: {
category: 'HTML'
}
},
label: {
name: 'label',
type: 'string',
description: 'Item label text',
table: {
category: 'HTML'
}
},
focusElement: {
control: {type: 'boolean'},
description: 'set manual focus on item',
table: {
category: 'Interactive'
}
}
}
}

export const UnderlineNavActionTemplate = ({semanticItemType, label, focusElement}) => {
return (
<div class="UnderlineNav-actions">
{semanticItemType === 'button' ? (
<ButtonTemplate label={label} focusAllElements={focusElement} />
) : (
<LinkTemplate label={label} focusAllElements={focusElement} />
)}
</div>
)
}

export const Playground = UnderlineNavActionTemplate.bind({})
Playground.args = {
semanticItemType: 'button',
label: 'Action',
focusElement: false
}
140 changes: 140 additions & 0 deletions docs/src/stories/components/Navigation/UnderlineNavItem.stories.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import React from 'react'
import clsx from 'clsx'
import useToggle from '../../helpers/useToggle.jsx'

export default {
title: 'Components/Navigation/UnderlineNav/Item',
excludeStories: ['UnderlineNavItemTemplate'],
layout: 'padded',
argTypes: {
selected: {
control: {type: 'boolean'},
description: 'active nav item',
table: {
category: 'CSS'
}
},
usesDataContent: {
control: {type: 'boolean'},
description: 'creates a hidden label to allow for bold text without layout shift',
table: {
category: 'CSS'
}
},
semanticItemType: {
options: ['button', 'link'],
control: {
type: 'inline-radio'
},
description: 'item can be a button or a link',
table: {
category: 'HTML'
}
},
label: {
name: 'label',
type: 'string',
description: 'Item label text',
table: {
category: 'HTML'
}
},
focusElement: {
control: {type: 'boolean'},
description: 'set manual focus on tab item',
table: {
category: 'Interactive'
}
},
icon: {
control: {type: 'boolean'},
description: 'show icon',
table: {
category: 'CSS'
}
},
counter: {
control: {type: 'boolean'},
description: 'show counter',
table: {
category: 'CSS'
}
}
}
}

export const UnderlineNavItemTemplate = ({
semanticItemType,
label,
selected,
focusElement,
icon,
counter,
usesDataContent
}) => {
const [isSelected, itemisSelected] = useToggle()
return (
<li className="d-inline-flex">
{semanticItemType === 'button' ? (
<button
className={clsx('UnderlineNav-item', focusElement && 'focus')}
role="tab"
aria-selected={selected || isSelected ? 'true' : undefined}
onClick={itemisSelected}
>
{icon && (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
className="UnderlineNav-octicon"
>
<path
fill-rule="evenodd"
d="M14.064 0a8.75 8.75 0 00-6.187 2.563l-.459.458c-.314.314-.616.641-.904.979H3.31a1.75 1.75 0 00-1.49.833L.11 7.607a.75.75 0 00.418 1.11l3.102.954c.037.051.079.1.124.145l2.429 2.428c.046.046.094.088.145.125l.954 3.102a.75.75 0 001.11.418l2.774-1.707a1.75 1.75 0 00.833-1.49V9.485c.338-.288.665-.59.979-.904l.458-.459A8.75 8.75 0 0016 1.936V1.75A1.75 1.75 0 0014.25 0h-.186zM10.5 10.625c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 00.119-.213v-2.066zM3.678 8.116L5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 00-.213.119l-1.2 1.95 1.782.547zm5.26-4.493A7.25 7.25 0 0114.063 1.5h.186a.25.25 0 01.25.25v.186a7.25 7.25 0 01-2.123 5.127l-.459.458a15.21 15.21 0 01-2.499 2.02l-2.317 1.5-2.143-2.143 1.5-2.317a15.25 15.25 0 012.02-2.5l.458-.458h.002zM12 5a1 1 0 11-2 0 1 1 0 012 0zm-8.44 9.56a1.5 1.5 0 10-2.12-2.12c-.734.73-1.047 2.332-1.15 3.003a.23.23 0 00.265.265c.671-.103 2.273-.416 3.005-1.148z"
></path>
</svg>
)}
<span data-content={usesDataContent ? label : undefined}>{label}</span>
{counter && <span class="Counter">10</span>}
</button>
) : (
<a
className={clsx('UnderlineNav-item', focusElement && 'focus')}
aria-current={selected || isSelected ? 'true' : undefined}
onClick={itemisSelected}
// aria-current={selected ? 'page' : undefined}
>
{icon && (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
className="UnderlineNav-octicon"
>
<path
fill-rule="evenodd"
d="M14.064 0a8.75 8.75 0 00-6.187 2.563l-.459.458c-.314.314-.616.641-.904.979H3.31a1.75 1.75 0 00-1.49.833L.11 7.607a.75.75 0 00.418 1.11l3.102.954c.037.051.079.1.124.145l2.429 2.428c.046.046.094.088.145.125l.954 3.102a.75.75 0 001.11.418l2.774-1.707a1.75 1.75 0 00.833-1.49V9.485c.338-.288.665-.59.979-.904l.458-.459A8.75 8.75 0 0016 1.936V1.75A1.75 1.75 0 0014.25 0h-.186zM10.5 10.625c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 00.119-.213v-2.066zM3.678 8.116L5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 00-.213.119l-1.2 1.95 1.782.547zm5.26-4.493A7.25 7.25 0 0114.063 1.5h.186a.25.25 0 01.25.25v.186a7.25 7.25 0 01-2.123 5.127l-.459.458a15.21 15.21 0 01-2.499 2.02l-2.317 1.5-2.143-2.143 1.5-2.317a15.25 15.25 0 012.02-2.5l.458-.458h.002zM12 5a1 1 0 11-2 0 1 1 0 012 0zm-8.44 9.56a1.5 1.5 0 10-2.12-2.12c-.734.73-1.047 2.332-1.15 3.003a.23.23 0 00.265.265c.671-.103 2.273-.416 3.005-1.148z"
></path>
</svg>
)}
<span data-content={usesDataContent ? label : undefined}>{label}</span>
{counter && <span class="Counter">10</span>}
</a>
)}
</li>
)
}

export const Playground = UnderlineNavItemTemplate.bind({})
Playground.args = {
semanticItemType: 'button',
label: 'Item',
selected: false,
focusElement: false,
icon: false,
counter: false,
usesDataContent: true
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import React from 'react'
import clsx from 'clsx'
import {UnderlineNavTemplate} from './UnderlineNav.stories'
import {UnderlineNavItemTemplate} from './UnderlineNavItem.stories'
import {UnderlineNavActionTemplate} from './UnderlineNavAction.stories'

export default {
title: 'Components/Navigation/UnderlineNav/Features',
layout: 'padded'
}

export const LinkItems = UnderlineNavTemplate.bind({})
LinkItems.args = {
children: (
<>
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selectedusesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
</>
)
}

export const ButtonItems = UnderlineNavTemplate.bind({})
ButtonItems.args = {
children: (
<>
<UnderlineNavItemTemplate label="Item" semanticItemType="button" selected usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
</>
)
}

export const NavRight = UnderlineNavTemplate.bind({})
NavRight.args = {
variant: 'UnderlineNav--right',
children: (
<>
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
</>
)
}

export const NavFullWidth = UnderlineNavTemplate.bind({})
NavFullWidth.args = {
variant: 'UnderlineNav--full',
children: (
<>
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
</>
)
}

export const ActionRight = UnderlineNavTemplate.bind({})
ActionRight.args = {
children: (
<>
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
</>
),
actionEnd: <UnderlineNavActionTemplate label="Action" semanticItemType="button" />
}

export const ActionLeft = UnderlineNavTemplate.bind({})
ActionLeft.args = {
children: (
<>
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
</>
),
actionStart: <UnderlineNavActionTemplate label="Action" semanticItemType="button" />
}

export const Overflow = UnderlineNavTemplate.bind({})
Overflow.args = {
children: (
<>
<UnderlineNavItemTemplate label="Item name 1" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item name 2" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item name 3" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item name 4" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item name 5" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item name 6" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item name 7" semanticItemType="link" selected />
<UnderlineNavItemTemplate label="Item name 8" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item name 9" semanticItemType="link" usesDataContent />
<UnderlineNavItemTemplate label="Item name 10" semanticItemType="link" usesDataContent />
</>
)
}

export const Icons = UnderlineNavTemplate.bind({})
Icons.args = {
children: (
<>
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" selected icon usesDataContent />
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
</>
)
}
Loading