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/[email protected]

Major Changes

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

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

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

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

• #2047 553d72cc Thanks @langermank! - UnderlineNav bug fix

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

Patch Changes

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

• #2041 20550bbf 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