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 main, this PR will be updated.

Releases

@primer/css@20.8.0

Minor Changes

• d7a4c343 Thanks @jonrohan! - Importing more styles from Primer View Components

  • Move labels styles to PVC view_components#1587
  • Move Truncate styles to PVC view_components#1590
  • Move Breadcrumbs styles to PVC view_components#1592
  • Move ToggleSwitch styles to PVC view_components#1593
  • Move Subhead styles to PVC view_components#1594
  • Move TimelineItem styles to PVC view_components#1598
  • Move Popover styles to PVC view_components#1599
  • Move dropdown styles to PVC view_components#1600
  • Move flash styles to PVC view_components#1601
  • Move Avatar + AvatarStack styles to PVC view_components#1607
  • Move autocomplete styles to PVC view_components#1609
  • Move Box styles to PVC view_components#1618
  • Move navigation styles to PVC view_components#1626

• #2318 aee4b6f5 Thanks @jonrohan! - Import blankslate styles from primer/view-components

Patch Changes

• #2309 f76e7858 Thanks @jdanyow! - Use --color-fg-default for mark

• #2330 83250f82 Thanks @stevenlaidlaw! - Fix collapsing spaces within inline code blocks

• #2327 8cf13e98 Thanks @simurai! - Move fieldset + label styles to base.scss

• #2340 ecbcbb1b Thanks @simurai! - Import Layout from PVC

[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-12-16 00:28:52.649802782 +0000
+++ after.txt	2022-12-16 00:28:52.713803716 +0000
@@ -163,4 +163,4 @@
 .AvatarStack--right .avatar.avatar-more
-.AvatarStack--right .avatar.avatar-more::after
-.AvatarStack--right .avatar.avatar-more::before
+.AvatarStack--right .avatar.avatar-more:after
+.AvatarStack--right .avatar.avatar-more:before
 .AvatarStack-body
@@ -298,3 +298,2 @@
 .FormControl-input
-.FormControl-input ::placeholder
 .FormControl-input-wrap
@@ -304,5 +303,5 @@
 .FormControl-input-wrap .FormControl-input-trailingAction svg
-.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider::before
-.FormControl-input-wrap .FormControl-input-trailingAction::after
+.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before
 .FormControl-input-wrap .FormControl-input-trailingAction:active
+.FormControl-input-wrap .FormControl-input-trailingAction:after
 .FormControl-input-wrap .FormControl-input-trailingAction:hover
@@ -314,3 +313,3 @@
 .FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction
-.FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction::before
+.FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction:before
 .FormControl-input-wrap.FormControl-large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large
@@ -320,3 +319,3 @@
 .FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction
-.FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction::before
+.FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction:before
 .FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small
@@ -333,8 +332,9 @@
 .FormControl-input.FormControl-warning
-.FormControl-input:not(:focus)[invalid]
-.FormControl-input:not([type=checkbox]):not([type=radio]):focus
-.FormControl-input:not([type=checkbox]):not([type=radio]):focus-visible
-.FormControl-input:not([type=checkbox]):not([type=radio]):focus:not(:focus-visible)
+.FormControl-input::placeholder
+.FormControl-input:not([type=checkbox],[type=radio]):focus
+.FormControl-input:not([type=checkbox],[type=radio]):focus-visible
+.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible)
 .FormControl-input[disabled]
 .FormControl-input[disabled]::placeholder
+.FormControl-input[invalid]:not(:focus)
 .FormControl-input[readonly]
@@ -346,6 +346,5 @@
 .FormControl-select
-.FormControl-select ::placeholder
 .FormControl-select-wrap
 .FormControl-select-wrap .FormControl-select
-.FormControl-select-wrap::after
+.FormControl-select-wrap:after
 .FormControl-select.FormControl-error
@@ -360,11 +359,11 @@
 .FormControl-select.FormControl-warning
-.FormControl-select:not(:focus)[invalid]
-.FormControl-select:not([type=checkbox]):not([type=radio]):focus
-.FormControl-select:not([type=checkbox]):not([type=radio]):focus-visible
-.FormControl-select:not([type=checkbox]):not([type=radio]):focus:not(:focus-visible)
+.FormControl-select::placeholder
+.FormControl-select:not([type=checkbox],[type=radio]):focus
+.FormControl-select:not([type=checkbox],[type=radio]):focus-visible
+.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible)
 .FormControl-select[disabled]
 .FormControl-select[disabled]::placeholder
+.FormControl-select[invalid]:not(:focus)
 .FormControl-select[readonly]
 .FormControl-textarea
-.FormControl-textarea ::placeholder
 .FormControl-textarea.FormControl-error
@@ -379,8 +378,9 @@
 .FormControl-textarea.FormControl-warning
-.FormControl-textarea:not(:focus)[invalid]
-.FormControl-textarea:not([type=checkbox]):not([type=radio]):focus
-.FormControl-textarea:not([type=checkbox]):not([type=radio]):focus-visible
-.FormControl-textarea:not([type=checkbox]):not([type=radio]):focus:not(:focus-visible)
+.FormControl-textarea::placeholder
+.FormControl-textarea:not([type=checkbox],[type=radio]):focus
+.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible
+.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible)
 .FormControl-textarea[disabled]
 .FormControl-textarea[disabled]::placeholder
+.FormControl-textarea[invalid]:not(:focus)
 .FormControl-textarea[readonly]
@@ -539,2 +539,3 @@
 .Overlay-closeButton
+.Overlay-closeButton.close-button
 .Overlay-closeButton:focus
@@ -638,32 +639,32 @@
 .Popover-message--bottom-left
-.Popover-message--bottom-left::after
-.Popover-message--bottom-left::before
+.Popover-message--bottom-left:after
+.Popover-message--bottom-left:before
 .Popover-message--bottom-right
-.Popover-message--bottom-right::after
-.Popover-message--bottom-right::before
-.Popover-message--bottom::after
-.Popover-message--bottom::before
+.Popover-message--bottom-right:after
+.Popover-message--bottom-right:before
+.Popover-message--bottom:after
+.Popover-message--bottom:before
 .Popover-message--large
-.Popover-message--left-bottom::after
-.Popover-message--left-bottom::before
-.Popover-message--left-top::after
-.Popover-message--left-top::before
-.Popover-message--left::after
-.Popover-message--left::before
-.Popover-message--no-caret::after
-.Popover-message--no-caret::before
-.Popover-message--right-bottom::after
-.Popover-message--right-bottom::before
-.Popover-message--right-top::after
-.Popover-message--right-top::before
-.Popover-message--right::after
-.Popover-message--right::before
+.Popover-message--left-bottom:after
+.Popover-message--left-bottom:before
+.Popover-message--left-top:after
+.Popover-message--left-top:before
+.Popover-message--left:after
+.Popover-message--left:before
+.Popover-message--no-caret:after
+.Popover-message--no-caret:before
+.Popover-message--right-bottom:after
+.Popover-message--right-bottom:before
+.Popover-message--right-top:after
+.Popover-message--right-top:before
+.Popover-message--right:after
+.Popover-message--right:before
 .Popover-message--top-left
-.Popover-message--top-left::after
-.Popover-message--top-left::before
+.Popover-message--top-left:after
+.Popover-message--top-left:before
 .Popover-message--top-right
-.Popover-message--top-right::after
-.Popover-message--top-right::before
-.Popover-message::after
-.Popover-message::before
+.Popover-message--top-right:after
+.Popover-message--top-right:before
+.Popover-message:after
+.Popover-message:before
 .Popover-message>.btn-octicon
@@ -839,3 +840,3 @@
 .TimelineItem-break
-.TimelineItem::before
+.TimelineItem:before
 .TimelineItem:target .TimelineItem-badge
@@ -875,3 +876,3 @@
 .ToggleSwitch-track *
-.ToggleSwitch-track::before
+.ToggleSwitch-track:before
 .ToggleSwitch-track:focus
@@ -903,3 +904,2 @@
 .Truncate>.Truncate-text
-.Truncate>.Truncate-text+.Truncate-text
 .Truncate>.Truncate-text.Truncate-text--expandable:active
@@ -919,6 +919,5 @@
 .UnderlineNav-item
-.UnderlineNav-item [data-content]::before
+.UnderlineNav-item [data-content]:before
 .UnderlineNav-item.selected
-.UnderlineNav-item.selected::after
-.UnderlineNav-item::before
+.UnderlineNav-item:before
 .UnderlineNav-item:focus
@@ -927,5 +926,3 @@
 .UnderlineNav-item[aria-current]:not([aria-current=false])
-.UnderlineNav-item[aria-current]:not([aria-current=false])::after
 .UnderlineNav-item[role=tab][aria-selected=true]
-.UnderlineNav-item[role=tab][aria-selected=true]::after
 .UnderlineNav-octicon
@@ -986,4 +983,4 @@
 .avatar.avatar-more
-.avatar.avatar-more::after
-.avatar.avatar-more::before
+.avatar.avatar-more:after
+.avatar.avatar-more:before
 .blankslate
@@ -1145,6 +1142,4 @@
 .breadcrumb-item-selected a
-.breadcrumb-item-selected::after
-.breadcrumb-item::after
+.breadcrumb-item:after
 .breadcrumb-item:first-child
-.breadcrumb-item[aria-current]:not([aria-current=false])::after
 .btn
@@ -1434,2 +1429,3 @@
 .css-truncate.css-truncate-target
+.css-truncate.expandable.css-truncate-target:hover
 .css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target
@@ -1437,3 +1433,2 @@
 .css-truncate.expandable:hover .css-truncate-target
-.css-truncate.expandable:hover.css-truncate-target
 .d-block
@@ -1532,7 +1527,7 @@
 .dropdown-menu-e
-.dropdown-menu-e::after
-.dropdown-menu-e::before
+.dropdown-menu-e:after
+.dropdown-menu-e:before
 .dropdown-menu-ne
-.dropdown-menu-ne::after
-.dropdown-menu-ne::before
+.dropdown-menu-ne:after
+.dropdown-menu-ne:before
 .dropdown-menu-no-overflow
@@ -1540,14 +1535,14 @@
 .dropdown-menu-s
-.dropdown-menu-s::after
-.dropdown-menu-s::before
-.dropdown-menu-se::after
-.dropdown-menu-se::before
+.dropdown-menu-s:after
+.dropdown-menu-s:before
+.dropdown-menu-se:after
+.dropdown-menu-se:before
 .dropdown-menu-sw
-.dropdown-menu-sw::after
-.dropdown-menu-sw::before
+.dropdown-menu-sw:after
+.dropdown-menu-sw:before
 .dropdown-menu-w
-.dropdown-menu-w::after
-.dropdown-menu-w::before
-.dropdown-menu::after
-.dropdown-menu::before
+.dropdown-menu-w:after
+.dropdown-menu-w:before
+.dropdown-menu:after
+.dropdown-menu:before
 .dropdown-menu>ul
@@ -1595,6 +1590,6 @@
 .filter-list.small .filter-item
+.flash-action.btn-primary:not(.Banner-actions)
+.flash-action.btn-primary:not(.Banner-actions) .octicon
+.flash-action.btn:not(.Banner-actions) .octicon
 .flash-action:not(.Banner-actions)
-.flash-action:not(.Banner-actions).btn .octicon
-.flash-action:not(.Banner-actions).btn-primary
-.flash-action:not(.Banner-actions).btn-primary .octicon
 .flash-banner
@@ -2449,13 +2444,10 @@
 .menu-item.selected
-.menu-item.selected::before
 .menu-item:active
 .menu-item:first-child
-.menu-item:first-child::before
+.menu-item:first-child:before
 .menu-item:hover
 .menu-item:last-child
-.menu-item:last-child::before
+.menu-item:last-child:before
 .menu-item[aria-current]:not([aria-current=false])
-.menu-item[aria-current]:not([aria-current=false])::before
 .menu-item[aria-selected=true]
-.menu-item[aria-selected=true]::before
 .min-width-0
@@ -3732,3 +3724,2 @@
 .tabnav-tab.selected
-.tabnav-tab.selected .octicon
 .tabnav-tab:active
@@ -3738,5 +3729,3 @@
 .tabnav-tab[aria-current]:not([aria-current=false])
-.tabnav-tab[aria-current]:not([aria-current=false]) .octicon
 .tabnav-tab[aria-selected=true]
-.tabnav-tab[aria-selected=true] .octicon
 .tabnav-tabs
@@ -3935,2 +3924,7 @@
 :checked+.radio-label
+:is(.Truncate>.Truncate-text)+.Truncate-text
+:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after
+:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after
+:is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before
+:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon
 :not(.Stack--dir-inline-whenNarrow)>.Stack-divider
@@ -4074,2 +4068,26 @@
 input
+input.FormControl-checkbox[type=checkbox]:after
+input.FormControl-checkbox[type=checkbox]:before
+input.FormControl-checkbox[type=checkbox]:checked
+input.FormControl-checkbox[type=checkbox]:checked:before
+input.FormControl-checkbox[type=checkbox]:checked:disabled
+input.FormControl-checkbox[type=checkbox]:checked:disabled:before
+input.FormControl-checkbox[type=checkbox]:focus-visible
+input.FormControl-checkbox[type=checkbox]:indeterminate:before
+input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus
+input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible
+input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)
+input.FormControl-checkbox[type=checkbox][disabled]
+input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label
+input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label
+input.FormControl-checkbox[type=checkbox][invalid]:not(:focus)
+input.FormControl-radio[type=radio]:after
+input.FormControl-radio[type=radio]:checked
+input.FormControl-radio[type=radio]:checked:disabled
+input.FormControl-radio[type=radio]:focus-visible
+input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus
+input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible
+input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)
+input.FormControl-radio[type=radio][disabled]
+input.FormControl-radio[type=radio][invalid]:not(:focus)
 input::-webkit-inner-spin-button
@@ -4079,17 +4097,2 @@
 input[type=checkbox].FormControl-checkbox
-input[type=checkbox].FormControl-checkbox::after
-input[type=checkbox].FormControl-checkbox::before
-input[type=checkbox].FormControl-checkbox:checked
-input[type=checkbox].FormControl-checkbox:checked::before
-input[type=checkbox].FormControl-checkbox:checked:disabled
-input[type=checkbox].FormControl-checkbox:checked:disabled::before
-input[type=checkbox].FormControl-checkbox:focus-visible
-input[type=checkbox].FormControl-checkbox:indeterminate::before
-input[type=checkbox].FormControl-checkbox:not(:focus)[invalid]
-input[type=checkbox].FormControl-checkbox:not([type=checkbox]):not([type=radio]):focus
-input[type=checkbox].FormControl-checkbox:not([type=checkbox]):not([type=radio]):focus-visible
-input[type=checkbox].FormControl-checkbox:not([type=checkbox]):not([type=radio]):focus:not(:focus-visible)
-input[type=checkbox].FormControl-checkbox[disabled]
-input[type=checkbox].FormControl-checkbox[disabled]~.FormControl-checkbox-labelWrap .FormControl-label
-input[type=checkbox].FormControl-checkbox[disabled]~.FormControl-radio-labelWrap .FormControl-label
 input[type=checkbox]:focus
@@ -4098,11 +4101,2 @@
 input[type=radio].FormControl-radio
-input[type=radio].FormControl-radio::after
-input[type=radio].FormControl-radio:checked
-input[type=radio].FormControl-radio:checked:disabled
-input[type=radio].FormControl-radio:focus-visible
-input[type=radio].FormControl-radio:not(:focus)[invalid]
-input[type=radio].FormControl-radio:not([type=checkbox]):not([type=radio]):focus
-input[type=radio].FormControl-radio:not([type=checkbox]):not([type=radio]):focus-visible
-input[type=radio].FormControl-radio:not([type=checkbox]):not([type=radio]):focus:not(:focus-visible)
-input[type=radio].FormControl-radio[disabled]
 input[type=radio]:focus

[simurai]

The diff is quite big. Most are changes like ::before -> :before, using :is() or re-odering the selector like:

- .FormControl-input:not(:focus)[invalid]
+ .FormControl-input[invalid]:not(:focus)

I guess Post CSS just compiles the CSS slightly different than SCSS, but it should not have any effect. 🤞

[simurai]

Ohh.. wait. There is a regression, but it's intended. 😆 By changing

- .FormControl-input ::placeholder {
+ .FormControl-input::placeholder {

the placeholder now gets the right color/opacity:

Before	After