Release Tracking

[primer-css]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next_major, this PR will be updated.

Releases

@primer/css@20.0.0

Major Changes

• #2049f4dba96e Thanks @langermank! - Comment box upload focus border-radius

• #1744942f65a4 Thanks @langermank! - Global CSS focus styles

• #17677e01db97 Thanks @tobiasahlin! - Marketing: Remove unused pullquote selector

• #1821daa2685c Thanks @jonrohan! - UnderlineNav :focus styles
  Refactor selected state and spacing
  Add selected bold state override from github/github

• #2047553d72cc Thanks @langermank! - UnderlineNav bug fix

• #204655e2b069 Thanks @langermank! - Global focus style CSS from feature flag (next major)

Patch Changes

• #2048dc529e31 Thanks @simurai! - Fix headings with an anchor in a summary

• #204120550bbf Thanks @jonrohan! - Upgrading to stylelint-config-12.4.0

[github-actions]

Preparing for a release.

Checklist

Make sure these items are checked before merging.

• Preview the docs change.
• Preview npm release candidate.
• CI passes on the release PR.

Selectors added/removed since latest release

--- before.txt	2022-04-29 17:24:20.035073046 +0000+++ after.txt	2022-04-29 17:24:20.123078464 +0000@@ -1,2 +1,4 @@
*
+*:focus+*:focus-visible
.ActionList
@@ -27,3 +29,5 @@
.ActionList-content.ActionList-content--sizeMedium
+.ActionList-content:focus
.ActionList-content:focus-visible
+.ActionList-content:focus:not(:focus-visible)
.ActionList-content:hover
@@ -374,2 +378,4 @@
.Link--secondary:hover [class*=color-fg]
+.Link:focus+.Link:focus-visible
.Link:hover
@@ -513,3 +519,2 @@
.SideNav-item:first-child
-.SideNav-item:focus
.SideNav-item:hover
@@ -521,3 +526,2 @@
.SideNav-subItem
-.SideNav-subItem:focus
.SideNav-subItem:hover
@@ -568,3 +572,2 @@
.Toast-dismissButton:active
-.Toast-dismissButton:focus
.Toast-dismissButton:hover
@@ -582,2 +585,3 @@
.UnderlineNav--full
+.UnderlineNav--full .UnderlineNav-body
.UnderlineNav--right
@@ -588,10 +592,13 @@
.UnderlineNav-item
+.UnderlineNav-item [data-content]::before
.UnderlineNav-item.selected
-.UnderlineNav-item.selected .UnderlineNav-octicon+.UnderlineNav-item.selected::after+.UnderlineNav-item::before
.UnderlineNav-item:focus
+.UnderlineNav-item:focus-visible
.UnderlineNav-item:hover
.UnderlineNav-item[aria-current]:not([aria-current=false])
-.UnderlineNav-item[aria-current]:not([aria-current=false]) .UnderlineNav-octicon+.UnderlineNav-item[aria-current]:not([aria-current=false])::after
.UnderlineNav-item[role=tab][aria-selected=true]
-.UnderlineNav-item[role=tab][aria-selected=true] .UnderlineNav-octicon+.UnderlineNav-item[role=tab][aria-selected=true]::after
.UnderlineNav-octicon
@@ -623,2 +630,3 @@
.autocomplete-embedded-icon-wrap .form-control:focus
+.autocomplete-embedded-icon-wrap .form-control:focus-visible
.autocomplete-embedded-icon-wrap:focus-within
@@ -833,3 +841,2 @@
.btn-danger:disabled .octicon
-.btn-danger:focus
.btn-danger:hover
@@ -849,3 +856,2 @@
.btn-invisible:disabled
-.btn-invisible:focus
.btn-invisible:hover
@@ -859,2 +865,4 @@
.btn-link:hover
+.btn-link:not(.dropdown-item):focus+.btn-link:not(.dropdown-item):focus-visible
.btn-link[aria-disabled=true]
@@ -866,7 +874,4 @@
.btn-mktg.disabled
-.btn-mktg.focus
.btn-mktg.focus::before
-.btn-mktg.focus:disabled
.btn-mktg::before
-.btn-mktg:active
.btn-mktg:active .arrow-symbol-mktg
@@ -876,4 +881,6 @@
.btn-mktg:focus .arrow-symbol-mktg path:last-child
+.btn-mktg:focus-visible+.btn-mktg:focus-visible::before
.btn-mktg:focus::before
-.btn-mktg:focus:disabled+.btn-mktg:focus:not(:focus-visible)
.btn-mktg:hover
@@ -882,6 +889,4 @@
.btn-mktg:hover::before
-.btn-mktg:hover:disabled
.btn-mktg[disabled]
.btn-muted-mktg
-.btn-muted-mktg.focus
.btn-muted-mktg::before
@@ -889,3 +894,2 @@
.btn-muted-mktg:disabled
-.btn-muted-mktg:focus
.btn-muted-mktg:hover
@@ -895,2 +899,4 @@
.btn-octicon.disabled:hover
+.btn-octicon:focus+.btn-octicon:focus-visible
.btn-octicon:hover
@@ -903,6 +909,11 @@
.btn-outline.selected
+.btn-outline.selected:focus+.btn-outline.selected:focus-visible+.btn-outline.selected:focus:not(:focus-visible)
.btn-outline:active
+.btn-outline:active:focus+.btn-outline:active:focus-visible+.btn-outline:active:focus:not(:focus-visible)
.btn-outline:disabled
.btn-outline:disabled .Counter
-.btn-outline:focus
.btn-outline:hover
@@ -913,2 +924,5 @@
.btn-outline[aria-selected=true]
+.btn-outline[aria-selected=true]:focus+.btn-outline[aria-selected=true]:focus-visible+.btn-outline[aria-selected=true]:focus:not(:focus-visible)
.btn-primary
@@ -918,3 +932,2 @@
.btn-primary.disabled .octicon
-.btn-primary.focus
.btn-primary.hover
@@ -925,2 +938,4 @@
.btn-primary:focus
+.btn-primary:focus-visible+.btn-primary:focus:not(:focus-visible)
.btn-primary:hover
@@ -932,2 +947,4 @@
.btn-signup-mktg:focus
+.btn-signup-mktg:focus-visible+.btn-signup-mktg:focus:not(:focus-visible)
.btn-sm
@@ -936,5 +953,3 @@
.btn-subtle-mktg
-.btn-subtle-mktg .focus
.btn-subtle-mktg::before
-.btn-subtle-mktg:focus
.btn-subtle-mktg:hover
@@ -944,3 +959,2 @@
.btn.disabled .octicon
-.btn.focus
.btn.hover
@@ -950,3 +964,2 @@
.btn:disabled .octicon
-.btn:focus
.btn:hover
@@ -960,3 +973,2 @@
.close-button:active
-.close-button:focus
.close-button:hover
@@ -1140,6 +1152,19 @@
.details-overlay-dark[open]>summary::before
+.details-overlay>summary+.details-overlay>summary.btn-primary:focus+.details-overlay>summary.btn-primary:focus-visible+.details-overlay>summary.btn-primary:focus:not(:focus-visible)+.details-overlay>summary:focus+.details-overlay>summary:focus-visible+.details-overlay>summary:focus:not(:focus-visible)
.details-overlay[open]>summary::before
.details-reset>summary
+.details-reset>summary.btn-primary:focus+.details-reset>summary.btn-primary:focus-visible+.details-reset>summary.btn-primary:focus:not(:focus-visible)
.details-reset>summary::-webkit-details-marker
.details-reset>summary::before
+.details-reset>summary:focus+.details-reset>summary:focus-visible+.details-reset>summary:focus:not(:focus-visible)
.diffstat
@@ -1173,6 +1198,2 @@
.dropdown-item.btn-link
-.dropdown-item:focus-.dropdown-item:focus [class*=color-text-]-.dropdown-item:focus>.Label-.dropdown-item:focus>.octicon
.dropdown-item:hover
@@ -1231,5 +1252,14 @@
.filter-item.selected
+.filter-item.selected:focus+.filter-item.selected:focus-visible+.filter-item.selected:focus:not(:focus-visible)
.filter-item:hover
.filter-item[aria-current]:not([aria-current=false])
+.filter-item[aria-current]:not([aria-current=false]):focus+.filter-item[aria-current]:not([aria-current=false]):focus-visible+.filter-item[aria-current]:not([aria-current=false]):focus:not(:focus-visible)
.filter-item[aria-selected=true]
+.filter-item[aria-selected=true]:focus+.filter-item[aria-selected=true]:focus-visible+.filter-item[aria-selected=true]:focus:not(:focus-visible)
.filter-list
@@ -1453,2 +1483,3 @@
.float-xl-right
+.focus
.form-action-spacious
@@ -1467,4 +1498,7 @@
.form-control
-.form-control.focus+.form-control.border-0:focus+.form-control.border-0:focus-visible
.form-control:focus
+.form-control:focus-visible+.form-control:focus:not(:focus-visible)
.form-control[disabled]
@@ -1498,3 +1532,3 @@
.form-group.errored .error::before
-.form-group.errored .form-control+.form-group.errored .form-control:not(:focus,:focus-visible)
.form-group.errored .success
@@ -1528,3 +1562,3 @@
.form-group.warn .error::before
-.form-group.warn .form-control+.form-group.warn .form-control:not(:focus,:focus-visible)
.form-group.warn .success
@@ -1539,5 +1573,8 @@
.form-select
-.form-select.focus+.form-select.border-0:focus+.form-select.border-0:focus-visible
.form-select::-ms-expand
.form-select:focus
+.form-select:focus-visible+.form-select:focus:not(:focus-visible)
.form-select[disabled]
@@ -1638,2 +1675,3 @@
.input-group.inline
+.input-group:focus-within button
.input-hide-webkit-autofill::-webkit-contacts-auto-fill-button
@@ -1765,8 +1803,8 @@
.link-mktg::after
-.link-mktg:active
.link-mktg:active .arrow-symbol-mktg
.link-mktg:active::after
+.link-mktg:focus
.link-mktg:focus .arrow-symbol-mktg
.link-mktg:focus .arrow-symbol-mktg path:last-child
-.link-mktg:focus::after+.link-mktg:focus-visible
.link-mktg:hover
@@ -1915,7 +1953,13 @@
.markdown-body summary h1
+.markdown-body summary h1 .anchor
.markdown-body summary h2
+.markdown-body summary h2 .anchor
.markdown-body summary h3
+.markdown-body summary h3 .anchor
.markdown-body summary h4
+.markdown-body summary h4 .anchor
.markdown-body summary h5
+.markdown-body summary h5 .anchor
.markdown-body summary h6
+.markdown-body summary h6 .anchor
.markdown-body table
@@ -2078,3 +2122,2 @@
.menu-item:first-child::before
-.menu-item:focus
.menu-item:hover
@@ -2974,3 +3017,2 @@
.pt-xl-9
-.pullquote
.px-0
@@ -3285,3 +3327,2 @@
.social-count:active
-.social-count:focus
.social-count:hover
@@ -3304,2 +3345,5 @@
.subnav-item.selected
+.subnav-item.selected:focus+.subnav-item.selected:focus-visible+.subnav-item.selected:focus:not(:focus-visible)
.subnav-item:first-child
@@ -3309,3 +3353,9 @@
.subnav-item[aria-current]:not([aria-current=false])
+.subnav-item[aria-current]:not([aria-current=false]):focus+.subnav-item[aria-current]:not([aria-current=false]):focus-visible+.subnav-item[aria-current]:not([aria-current=false]):focus:not(:focus-visible)
.subnav-item[aria-selected=true]
+.subnav-item[aria-selected=true]:focus+.subnav-item[aria-selected=true]:focus-visible+.subnav-item[aria-selected=true]:focus:not(:focus-visible)
.subnav-search
@@ -3354,2 +3404,3 @@
.tabnav-tab:focus
+.tabnav-tab:focus-visible
.tabnav-tab:hover
@@ -3612,4 +3663,6 @@
[open]>.btn-primary
-[type=button]:-moz-focusring-[type=button]::-moz-focus-inner+[role=button]+[role=button]:focus+[role=button]:focus-visible+[role=button]:focus:not(:focus-visible)
[type=checkbox]
@@ -3619,5 +3672,2 @@
[type=reset]
-[type=reset]:-moz-focusring-[type=reset]::-moz-focus-inner-[type=search]
[type=search]::-webkit-search-cancel-button
@@ -3625,4 +3675,2 @@
[type=submit]
-[type=submit]:-moz-focusring-[type=submit]::-moz-focus-inner
a
@@ -3630,5 +3678,12 @@
a.branch-name .octicon
+a.btn-primary:focus+a.btn-primary:focus-visible+a.btn-primary:focus:not(:focus-visible)
a.tabnav-extra:hover
-a:active+a:focus+a:focus-visible+a:focus:not(:focus-visible)
a:hover
+a:not([class]):focus+a:not([class]):focus-visible
abbr[title]
@@ -3645,4 +3700,5 @@
button
-button:-moz-focusring-button::-moz-focus-inner+button:focus+button:focus-visible+button:focus:not(:focus-visible)
canvas
@@ -3679,2 +3735,12 @@
input::-webkit-outer-spin-button
+input:not([type=radio],[type=checkbox]):focus+input:not([type=radio],[type=checkbox]):focus-visible+input[type=checkbox]+input[type=checkbox]:focus+input[type=checkbox]:focus-visible+input[type=checkbox]:focus:not(:focus-visible)+input[type=radio]+input[type=radio]:focus+input[type=radio]:focus-visible+input[type=radio]:focus:not(:focus-visible)
kbd
@@ -3701,2 +3767,4 @@
select
+select:focus+select:focus-visible
small
@@ -3712,2 +3780,4 @@
textarea.form-control
+textarea:focus+textarea:focus-visible
th

Bundles with a size change since latest release

name	selectors	±	gzip size	±	raw size	±
primer	4130	+ 75	58.01 kB	+ 534 B	705.49 kB	+ 4.89 kB
core	3065	+ 79	25.59 kB	+ 620 B	185.85 kB	+ 6.07 kB
utilities	1681	+ 13	10.1 kB	+ 184 B	85.54 kB	+ 1.72 kB
product	564	+ 2	7.46 kB	+ 1 B	41.08 kB	+ 140 B
forms	270	+ 7	3.94 kB	+ 139 B	19.81 kB	+ 739 B
marketing	453	- 6	3.52 kB	- 151 B	20.09 kB	- 476 B
actionlist	137	+ 2	2.45 kB	+ 2 B	16.19 kB	- 3 B
navigation	140	+ 21	2.19 kB	+ 345 B	11.5 kB	+ 2.14 kB
buttons	186	+ 10	2.12 kB	+ 80 B	12.93 kB	+ 826 B
base	157	+ 24	1.83 kB	+ 193 B	5.45 kB	+ 961 B
markdown	147	+ 6	1.78 kB	+ 25 B	7.98 kB	+ 222 B
dropdown	39	- 4	939 B	- 28 B	3.44 kB	- 134 B
autocomplete	36	+ 1	854 B	+ 18 B	3.3 kB	+ 113 B
pagination	39	0	804 B	- 33 B	2.31 kB	- 361 B
marketing-buttons	28	- 4	786 B	0 B	2.76 kB	- 71 B
toasts	18	- 1	635 B	- 13 B	2.08 kB	- 40 B
alerts	25	0	591 B	- 6 B	1.96 kB	- 21 B
marketing-type	47	- 2	566 B	- 176 B	3.44 kB	- 411 B
marketing-links	12	0	368 B	+ 10 B	732 B	+ 6 B
links	14	+ 2	238 B	+ 26 B	749 B	+ 49 B