Skip to content

Commit daa2685

Browse files
jonrohanlangermankactions-usersimurai
authored
Underline nav focus state (#1821)
* add pseudo selectors * adjustments * add stories, cleanup * update mixin * fix mixin * lint * add back overflow styles * adjust focus for better overflow state, scrollsnap * post test adjustments, move hacks to primer css * Stylelint auto-fixes * hover state desktop only * document data-content hack * Create nice-days-jog.md * Use counter-border for LHC (#1792) * Use counter-border for LHC * Create orange-ties-sin.md * Remove fallback * Update nice-days-jog.md Co-authored-by: langermank <[email protected]> Co-authored-by: Actions Auto Build <[email protected]> Co-authored-by: simurai <[email protected]>
1 parent 085ae3f commit daa2685

File tree

9 files changed

+493
-32
lines changed

9 files changed

+493
-32
lines changed

‎.changeset/nice-days-jog.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@primer/css": major
3+
---
4+
5+
UnderlineNav `:focus` styles
6+
Refactor selected state and spacing
7+
Add selected bold state override from github/github

‎.changeset/orange-ties-sin.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Use `counter-border` for LHC

‎docs/src/stories/components/Navigation/UnderlineNav.stories.jsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
import {UnderlineNavItemTemplate} from './UnderlineNavItem.stories'
4+
5+
export default {
6+
title: 'Components/Navigation/UnderlineNav',
7+
excludeStories: ['UnderlineNavTemplate'],
8+
layout: 'padded',
9+
argTypes: {
10+
variant: {
11+
options: [0, 1, 2], // iterator
12+
mapping: ['', 'UnderlineNav--right', 'UnderlineNav--full'], // values
13+
control: {
14+
type: 'inline-radio',
15+
labels: ['default', 'align-right', 'fullwidth']
16+
},
17+
description: 'nav positioning options',
18+
table: {
19+
category: 'CSS'
20+
}
21+
},
22+
children: {
23+
description: 'creates a slot for children',
24+
table: {
25+
category: 'HTML'
26+
}
27+
},
28+
actionStart: {
29+
description: 'action to left of nav',
30+
table: {
31+
category: 'HTML'
32+
}
33+
},
34+
actionEnd: {
35+
description: 'action to right of nav',
36+
table: {
37+
category: 'HTML'
38+
}
39+
}
40+
}
41+
}
42+
43+
export const UnderlineNavTemplate = ({variant, children, actionStart, actionEnd}) => (
44+
<>
45+
<nav className={clsx('UnderlineNav', variant && `${variant}`)}>
46+
{actionStart}
47+
{variant === 'UnderlineNav--full' ? (
48+
<div class="container-lg UnderlineNav-container">
49+
<ul class="UnderlineNav-body" role="tablist">
50+
{children}
51+
</ul>
52+
</div>
53+
) : (
54+
<ul class="UnderlineNav-body" role="tablist">
55+
{children}
56+
</ul>
57+
)}
58+
{actionEnd}
59+
</nav>
60+
</>
61+
)
62+
63+
export const Playground = UnderlineNavTemplate.bind({})
64+
Playground.args = {
65+
variant: 0,
66+
children: (
67+
<>
68+
<UnderlineNavItemTemplate label="Item" semanticItemType="button" selected usesDataContent />
69+
<UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
70+
<UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
71+
</>
72+
)
73+
}

‎docs/src/stories/components/Navigation/UnderlineNavAction.stories.jsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
import {ButtonTemplate} from '../Button/Button.stories'
4+
import {LinkTemplate} from '../Link/Link.stories'
5+
6+
export default {
7+
title: 'Components/Navigation/UnderlineNav/Action',
8+
excludeStories: ['UnderlineNavActionTemplate'],
9+
layout: 'padded',
10+
argTypes: {
11+
semanticItemType: {
12+
options: ['button', 'link'],
13+
control: {
14+
type: 'inline-radio'
15+
},
16+
description: 'item can be a button or a link',
17+
table: {
18+
category: 'HTML'
19+
}
20+
},
21+
label: {
22+
name: 'label',
23+
type: 'string',
24+
description: 'Item label text',
25+
table: {
26+
category: 'HTML'
27+
}
28+
},
29+
focusElement: {
30+
control: {type: 'boolean'},
31+
description: 'set manual focus on item',
32+
table: {
33+
category: 'Interactive'
34+
}
35+
}
36+
}
37+
}
38+
39+
export const UnderlineNavActionTemplate = ({semanticItemType, label, focusElement}) => {
40+
return (
41+
<div class="UnderlineNav-actions">
42+
{semanticItemType === 'button' ? (
43+
<ButtonTemplate label={label} focusAllElements={focusElement} />
44+
) : (
45+
<LinkTemplate label={label} focusAllElements={focusElement} />
46+
)}
47+
</div>
48+
)
49+
}
50+
51+
export const Playground = UnderlineNavActionTemplate.bind({})
52+
Playground.args = {
53+
semanticItemType: 'button',
54+
label: 'Action',
55+
focusElement: false
56+
}

‎docs/src/stories/components/Navigation/UnderlineNavItem.stories.jsx

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
import useToggle from '../../helpers/useToggle.jsx'
4+
5+
export default {
6+
title: 'Components/Navigation/UnderlineNav/Item',
7+
excludeStories: ['UnderlineNavItemTemplate'],
8+
layout: 'padded',
9+
argTypes: {
10+
selected: {
11+
control: {type: 'boolean'},
12+
description: 'active nav item',
13+
table: {
14+
category: 'CSS'
15+
}
16+
},
17+
usesDataContent: {
18+
control: {type: 'boolean'},
19+
description: 'creates a hidden label to allow for bold text without layout shift',
20+
table: {
21+
category: 'CSS'
22+
}
23+
},
24+
semanticItemType: {
25+
options: ['button', 'link'],
26+
control: {
27+
type: 'inline-radio'
28+
},
29+
description: 'item can be a button or a link',
30+
table: {
31+
category: 'HTML'
32+
}
33+
},
34+
label: {
35+
name: 'label',
36+
type: 'string',
37+
description: 'Item label text',
38+
table: {
39+
category: 'HTML'
40+
}
41+
},
42+
focusElement: {
43+
control: {type: 'boolean'},
44+
description: 'set manual focus on tab item',
45+
table: {
46+
category: 'Interactive'
47+
}
48+
},
49+
icon: {
50+
control: {type: 'boolean'},
51+
description: 'show icon',
52+
table: {
53+
category: 'CSS'
54+
}
55+
},
56+
counter: {
57+
control: {type: 'boolean'},
58+
description: 'show counter',
59+
table: {
60+
category: 'CSS'
61+
}
62+
}
63+
}
64+
}
65+
66+
export const UnderlineNavItemTemplate = ({
67+
semanticItemType,
68+
label,
69+
selected,
70+
focusElement,
71+
icon,
72+
counter,
73+
usesDataContent
74+
}) => {
75+
const [isSelected, itemisSelected] = useToggle()
76+
return (
77+
<li className="d-inline-flex">
78+
{semanticItemType === 'button' ? (
79+
<button
80+
className={clsx('UnderlineNav-item', focusElement && 'focus')}
81+
role="tab"
82+
aria-selected={selected || isSelected ? 'true' : undefined}
83+
onClick={itemisSelected}
84+
>
85+
{icon && (
86+
<svg
87+
xmlns="http://www.w3.org/2000/svg"
88+
viewBox="0 0 16 16"
89+
width="16"
90+
height="16"
91+
className="UnderlineNav-octicon"
92+
>
93+
<path
94+
fill-rule="evenodd"
95+
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"
96+
></path>
97+
</svg>
98+
)}
99+
<span data-content={usesDataContent ? label : undefined}>{label}</span>
100+
{counter && <span class="Counter">10</span>}
101+
</button>
102+
) : (
103+
<a
104+
className={clsx('UnderlineNav-item', focusElement && 'focus')}
105+
aria-current={selected || isSelected ? 'true' : undefined}
106+
onClick={itemisSelected}
107+
// aria-current={selected ? 'page' : undefined}
108+
>
109+
{icon && (
110+
<svg
111+
xmlns="http://www.w3.org/2000/svg"
112+
viewBox="0 0 16 16"
113+
width="16"
114+
height="16"
115+
className="UnderlineNav-octicon"
116+
>
117+
<path
118+
fill-rule="evenodd"
119+
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"
120+
></path>
121+
</svg>
122+
)}
123+
<span data-content={usesDataContent ? label : undefined}>{label}</span>
124+
{counter && <span class="Counter">10</span>}
125+
</a>
126+
)}
127+
</li>
128+
)
129+
}
130+
131+
export const Playground = UnderlineNavItemTemplate.bind({})
132+
Playground.args = {
133+
semanticItemType: 'button',
134+
label: 'Item',
135+
selected: false,
136+
focusElement: false,
137+
icon: false,
138+
counter: false,
139+
usesDataContent: true
140+
}

‎docs/src/stories/components/Navigation/UnderlineNavPatterns.stories.jsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
import {UnderlineNavTemplate} from './UnderlineNav.stories'
4+
import {UnderlineNavItemTemplate} from './UnderlineNavItem.stories'
5+
import {UnderlineNavActionTemplate} from './UnderlineNavAction.stories'
6+
7+
export default {
8+
title: 'Components/Navigation/UnderlineNav/Features',
9+
layout: 'padded'
10+
}
11+
12+
export const LinkItems = UnderlineNavTemplate.bind({})
13+
LinkItems.args = {
14+
children: (
15+
<>
16+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selectedusesDataContent />
17+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
18+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
19+
</>
20+
)
21+
}
22+
23+
export const ButtonItems = UnderlineNavTemplate.bind({})
24+
ButtonItems.args = {
25+
children: (
26+
<>
27+
<UnderlineNavItemTemplate label="Item" semanticItemType="button" selected usesDataContent />
28+
<UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
29+
<UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
30+
</>
31+
)
32+
}
33+
34+
export const NavRight = UnderlineNavTemplate.bind({})
35+
NavRight.args = {
36+
variant: 'UnderlineNav--right',
37+
children: (
38+
<>
39+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
40+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
41+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
42+
</>
43+
)
44+
}
45+
46+
export const NavFullWidth = UnderlineNavTemplate.bind({})
47+
NavFullWidth.args = {
48+
variant: 'UnderlineNav--full',
49+
children: (
50+
<>
51+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
52+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
53+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
54+
</>
55+
)
56+
}
57+
58+
export const ActionRight = UnderlineNavTemplate.bind({})
59+
ActionRight.args = {
60+
children: (
61+
<>
62+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
63+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
64+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
65+
</>
66+
),
67+
actionEnd: <UnderlineNavActionTemplate label="Action" semanticItemType="button" />
68+
}
69+
70+
export const ActionLeft = UnderlineNavTemplate.bind({})
71+
ActionLeft.args = {
72+
children: (
73+
<>
74+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
75+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
76+
<UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
77+
</>
78+
),
79+
actionStart: <UnderlineNavActionTemplate label="Action" semanticItemType="button" />
80+
}
81+
82+
export const Overflow = UnderlineNavTemplate.bind({})
83+
Overflow.args = {
84+
children: (
85+
<>
86+
<UnderlineNavItemTemplate label="Item name 1" semanticItemType="link" usesDataContent />
87+
<UnderlineNavItemTemplate label="Item name 2" semanticItemType="link" usesDataContent />
88+
<UnderlineNavItemTemplate label="Item name 3" semanticItemType="link" usesDataContent />
89+
<UnderlineNavItemTemplate label="Item name 4" semanticItemType="link" usesDataContent />
90+
<UnderlineNavItemTemplate label="Item name 5" semanticItemType="link" usesDataContent />
91+
<UnderlineNavItemTemplate label="Item name 6" semanticItemType="link" usesDataContent />
92+
<UnderlineNavItemTemplate label="Item name 7" semanticItemType="link" selected />
93+
<UnderlineNavItemTemplate label="Item name 8" semanticItemType="link" usesDataContent />
94+
<UnderlineNavItemTemplate label="Item name 9" semanticItemType="link" usesDataContent />
95+
<UnderlineNavItemTemplate label="Item name 10" semanticItemType="link" usesDataContent />
96+
</>
97+
)
98+
}
99+
100+
export const Icons = UnderlineNavTemplate.bind({})
101+
Icons.args = {
102+
children: (
103+
<>
104+
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
105+
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
106+
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" selected icon usesDataContent />
107+
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
108+
<UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
109+
</>
110+
)
111+
}

0 commit comments

Comments
 (0)