Skip to content

Commit cc81c59

Browse files
primer-cssjonrohantobiasahlinlangermankactions-user
authored
Release Tracking (#2039)
* Adding pre.json * Delete pre.json * Marketing: Remove unused pullquote selector (#1767) * Remove unused pullquote style * Create good-fireants-collect.md * next_major protection * On push * Exit 1 * Update instructions * 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 <langermank@github.com> Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: simurai <simurai@github.com> * Global focus styles (#1744) * setup base focus styles * add feature stories * add stories for focusable things, delete outline:0 * switch back to box-shadow * support class * stylelint * fix theme viewer * switch back to outline, address feedback * lint * temp stashing stories here * Create giant-bees-talk.md * I think we got it! * address input directly * checkbox/radio outline offset * lint * change actionlist to just use focus * merge * Update giant-bees-talk.md * address marketing styles * tabnav focus fix * reach all buttons * attempt windows hc selector * Stylelint auto-fixes * fixes * add focus style testing page * Stylelint auto-fixes * add href for testing * remove position relative to fix chrome bug * fix details scenario * add offset to WHC * maintain offset specificity in whc * inset tabnav focus * switch offset to inset * fix actionlist focus * lint * better scoping, handle forms for safari * moving specific styles from dotcom * address autocomplete * cleanup * cleanup * selected focus states * adjust marketing focus * use offset instead for marketing * Stylelint auto-fixes * fix merge Co-authored-by: Jon Rohan <yes@jonrohan.codes> Co-authored-by: Actions Auto Build <actions@github.com> * Upgrading to stylelint-config-12.4.0 (#2041) * Upgrading to stylelint-config-12.4.0 * Create tame-clouds-shop.md * Global focus style CSS from feature flag (#2046) * extra CSS found from cleaning up feat flag * lint * Create young-trainers-yell.md * fix mixin Co-authored-by: Jon Rohan <yes@jonrohan.codes> * UnderlineNav bug fix (#2047) * fix selector (bad merge?) * Create ninety-bobcats-do.md * lint * Comment box upload focus border-radius (#2049) * missing border-radius * Create beige-horses-fetch.md * lint * you would think I would know these by now * Fix headings with an anchor in a summary (#2048) * Fix headings with an anchor in a summary * Create hip-readers-press.md * Lint * Version Packages Co-authored-by: Jon Rohan <yes@jonrohan.codes> Co-authored-by: Tobias Ahlin <hello@tobiasahlin.com> Co-authored-by: langermank <langermank@github.com> Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: simurai <simurai@github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 90e8bd5 commit cc81c59

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1142
-275
lines changed

‎.github/workflows/next_major.yml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
name: Next Major Pull Request
2+
on:
3+
push:
4+
branches:
5+
- 'changeset-release/next_major'
6+
7+
jobs:
8+
next_major_pr:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- name: Don't Merge
12+
run: |
13+
echo "Don't merge the next_major, changeset pr into next_major. Instead when you're ready to release a new major version, change the base of this pr to main, and merge."
14+
exit 1

‎CHANGELOG.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
# @primer/css
22

3+
## 20.0.0
4+
5+
### Major Changes
6+
7+
- [#2049](https://github.com/primer/css/pull/2049) [`f4dba96e`](https://github.com/primer/css/commit/f4dba96e0cb78d3d451226cf60b01187678ced45) Thanks [@langermank](https://github.com/langermank)! - Comment box upload focus border-radius
8+
9+
* [#1744](https://github.com/primer/css/pull/1744) [`942f65a4`](https://github.com/primer/css/commit/942f65a45a18b7042ba1ce2703688b62d874cf18) Thanks [@langermank](https://github.com/langermank)! - Global CSS focus styles
10+
11+
- [#1767](https://github.com/primer/css/pull/1767) [`7e01db97`](https://github.com/primer/css/commit/7e01db97f3f2b9d9383f66385ca16f0bdc06abd1) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Remove unused pullquote selector
12+
13+
* [#1821](https://github.com/primer/css/pull/1821) [`daa2685c`](https://github.com/primer/css/commit/daa2685c596d894b3bae1896bf97c3319cd9816c) Thanks [@jonrohan](https://github.com/jonrohan)! - UnderlineNav `:focus` styles
14+
Refactor selected state and spacing
15+
Add selected bold state override from github/github
16+
17+
- [#2047](https://github.com/primer/css/pull/2047) [`553d72cc`](https://github.com/primer/css/commit/553d72cc1baaf43a4c743c50cc8881f3811123e9) Thanks [@langermank](https://github.com/langermank)! - UnderlineNav bug fix
18+
19+
* [#2046](https://github.com/primer/css/pull/2046) [`55e2b069`](https://github.com/primer/css/commit/55e2b069a4cbd225af676bef918bbbe2e6cd73b7) Thanks [@langermank](https://github.com/langermank)! - Global focus style CSS from feature flag (next major)
20+
21+
### Patch Changes
22+
23+
- [#2048](https://github.com/primer/css/pull/2048) [`dc529e31`](https://github.com/primer/css/commit/dc529e3102788d5caa136a9d30c58e56721427a7) Thanks [@simurai](https://github.com/simurai)! - Fix headings with an anchor in a summary
24+
25+
* [#2041](https://github.com/primer/css/pull/2041) [`20550bbf`](https://github.com/primer/css/commit/20550bbfaa236ac197ca58805542eaab0bf38fd4) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading to stylelint-config-12.4.0
26+
327
## 19.8.2
428

529
### Patch Changes

‎docs/src/stories/components/Forms/FormGroups.stories.jsx‎ renamed to ‎docs/src/stories/components/Forms/FormGroup.stories.jsx‎

File renamed without changes.

‎docs/src/stories/components/Link/Link.stories.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const LinkTemplate = ({label, variant, href, noUnderline, focusElement, f
7171
<>
7272
<a
7373
href={href}
74-
className={clsx(variant && `${variant}`, noUnderline && 'no-underline', focusAllElements && 'focus')}
74+
className={clsx('Link', variant && `${variant}`, noUnderline && 'no-underline', focusAllElements && 'focus')}
7575
>
7676
{label}
7777
</a>

‎docs/src/stories/components/Marketing/MarketingButton.stories.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default {
77
layout: 'padded'
88
},
99

10-
excludeStories: ['ButtonTemplate'],
10+
excludeStories: ['MarketingButtonTemplate'],
1111
argTypes: {
1212
variant: {
1313
options: [0, 1, 2, 3], // iterator
@@ -77,7 +77,7 @@ const focusMethod = function getFocus() {
7777
button.focus()
7878
}
7979

80-
export const ButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
80+
export const MarketingButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
8181
<>
8282
<button
8383
disabled={disabled}
@@ -111,7 +111,7 @@ export const ButtonTemplate = ({label, variant, disabled, size, animated, focusE
111111
</>
112112
)
113113

114-
export const Playground = ButtonTemplate.bind({})
114+
export const Playground = MarketingButtonTemplate.bind({})
115115
Playground.args = {
116116
animated: false,
117117
focusElement: false,

‎docs/src/stories/components/Marketing/MarketingLink.stories.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default {
77
layout: 'padded'
88
},
99

10-
excludeStories: ['LinkTemplate'],
10+
excludeStories: ['MarketingLinkTemplate'],
1111
argTypes: {
1212
size: {
1313
options: [0, 1], // iterator
@@ -67,7 +67,7 @@ const focusMethod = function getFocus() {
6767
link.focus()
6868
}
6969

70-
export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
70+
export const MarketingLinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
7171
<>
7272
<a
7373
href={href}
@@ -98,7 +98,7 @@ export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAl
9898
</>
9999
)
100100

101-
export const Playground = LinkTemplate.bind({})
101+
export const Playground = MarketingLinkTemplate.bind({})
102102
Playground.args = {
103103
label: 'Link label',
104104
href: '/',

‎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+
}

0 commit comments

Comments
 (0)