Importing more styles from Primer View Components

[jonrohan]

What are you trying to accomplish?

• 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

Bundle size changes

name	selectors	±	gzip size	±	raw size	±
primer	4516	+ 5	64.6 kB	+ 241 B	757.13 kB	- 502 B
core	3398	0	31.12 kB	+ 119 B	226.18 kB	- 251 B
product	617	+ 5	8.32 kB	+ 112 B	46.04 kB	- 428 B
navigation	139	- 1	2.25 kB	+ 68 B	11.46 kB	- 20 B
toggle-switch	48	+ 3	1.03 kB	- 10 B	4.68 kB	- 149 B
box	57	+ 2	959 B	+ 23 B	3.94 kB	- 232 B
avatars	49	0	950 B	+ 15 B	3.42 kB	- 10 B
dropdown	41	+ 2	938 B	+ 1 B	3.34 kB	- 94 B
autocomplete	36	0	879 B	+ 25 B	3.28 kB	- 21 B
labels	48	+ 2	876 B	+ 42 B	3.54 kB	- 23 B
popover	92	0	763 B	+ 8 B	4.39 kB	- 98 B
alerts	23	- 2	623 B	+ 11 B	2.21 kB	- 36 B
timeline	11	0	540 B	+ 18 B	1.47 kB	+ 15 B
blankslate	17	0	374 B	- 3 B	900 B	0 B
truncate	17	0	346 B	+ 10 B	1.15 kB	+ 5 B
subhead	7	0	286 B	- 1 B	555 B	0 B
breadcrumb	5	- 1	259 B	+ 2 B	452 B	- 4 B
progress	5	0	185 B	- 4 B	278 B	- 12 B

Selector diffs

--- before.txt  2022-11-23 23:36:50.243025747 +0000
+++ after.txt   2022-11-23 23:36:50.307025569 +0000
@@ -466,7 +466,5 @@
 .breadcrumb-item
-.breadcrumb-item[aria-current]:not([aria-current=false])::after
 .breadcrumb-item:first-child
 .breadcrumb-item-selected a
-.breadcrumb-item-selected::after
 .btn
@@ -1623,2 +1621,3 @@
 .is-bad-permissions .drag-and-drop .bad-permissions
+:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after
 .is-default .drag-and-drop .default
@@ -1628,2 +1627,3 @@
 .is-hidden-file .drag-and-drop .hidden-file
+:is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before
 .is-repository-required .drag-and-drop .repository-required
@@ -1633,3 +1633,6 @@
 .IssueLabel:hover
+:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon
 .is-too-big .drag-and-drop .too-big
+: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-uploading .drag-and-drop .loading
@@ -2147,5 +2150,3 @@
 .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
 .menu-item .avatar
@@ -2160,3 +2161,2 @@
 .menu-item.selected
-.menu-item.selected::before
 .min-width-0
@@ -3830,5 +3830,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-tab .Counter
@@ -3840,3 +3838,2 @@
 .tabnav-tab.selected
-.tabnav-tab.selected .octicon
 td
@@ -4080,3 +4077,2 @@
 .Truncate>.Truncate-text
-.Truncate>.Truncate-text+.Truncate-text
 .Truncate>.Truncate-text.Truncate-text--expandable:active
@@ -4108,5 +4104,4 @@
 .UnderlineNav-item[aria-current]:not([aria-current=false])
-.UnderlineNav-item[aria-current]:not([aria-current=false])::after
 .UnderlineNav-item:focus
@@ -4115,5 +4110,3 @@
 .UnderlineNav-item[role=tab][aria-selected=true]
-.UnderlineNav-item[role=tab][aria-selected=true]::after
 .UnderlineNav-item.selected
-.UnderlineNav-item.selected::after
 .UnderlineNav-octicon

What approach did you choose and why?

What should reviewers focus on?

Can these changes ship as is?

• Yes, this PR does not depend on additional changes. 🚢

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3101b0d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[jonrohan]

I wanted to put this import back after #2318 in case anyone is importing the src/blankslate/blankslate.scss file directly so it's not breaking.

[jonrohan]

Figured out what was wrong with those failures, removing the .css here fixed it. We'll have to remember that it could cause problems

[simurai]

💡

[simurai]

One thing I was wondering: Should this be a major change?

It could be just a patch since the outputted CSS is still more or less the same. On the other hand, if you fork primer/css and wanted to make changes to the .scss files, the source for lots of components doesn't exist anymore, so it might also warrant a major version bump:

• Up to 20.7.1 -> you can still edit the source in .scss files
• From 21.0.0 -> lots of components only exist as "read only"

[jonrohan]

One thing I was wondering: Should this be a major change?

This was meant to be a step that would prevent us from doing a major bump. I think calling it a patch or minor is good enough to let folks know the styles aren't changing. The only thing someone might loose is access to changing the sass variables.