@primer/css 20.0.0-rc.8702fd9a → 20.0.0-rc.e6f567ec

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (186) hide show
  1. package/CHANGELOG.md +166 -3
  2. package/CONTRIBUTING.md +6 -4
  3. package/DEVELOP.md +26 -21
  4. package/README.md +2 -2
  5. package/actionlist/action-list-item-divider.scss +8 -2
  6. package/actionlist/action-list-item.scss +214 -130
  7. package/actionlist/action-list-tree.scss +118 -0
  8. package/actionlist/action-list.scss +29 -0
  9. package/actionlist/index.scss +1 -0
  10. package/alerts/flash.scss +6 -2
  11. package/autocomplete/autocomplete.scss +51 -2
  12. package/avatars/avatar-stack.scss +1 -0
  13. package/base/base.scss +64 -3
  14. package/base/index.scss +0 -1
  15. package/base/kbd.scss +0 -1
  16. package/base/normalize.scss +13 -53
  17. package/base/typography-base.scss +3 -2
  18. package/blankslate/blankslate.scss +20 -1
  19. package/blankslate/index.scss +0 -1
  20. package/box/box.scss +0 -3
  21. package/branch-name/branch-name.scss +1 -0
  22. package/breadcrumb/breadcrumb.scss +1 -1
  23. package/buttons/button-group.scss +3 -2
  24. package/buttons/button.scss +64 -36
  25. package/buttons/misc.scss +30 -25
  26. package/color-modes/index.scss +2 -0
  27. package/color-modes/native.scss +12 -0
  28. package/color-modes/themes/dark.scss +0 -1
  29. package/color-modes/themes/dark_colorblind.scss +0 -1
  30. package/color-modes/themes/dark_dimmed.scss +0 -1
  31. package/color-modes/themes/dark_high_contrast.scss +0 -1
  32. package/color-modes/themes/dark_tritanopia.scss +6 -0
  33. package/color-modes/themes/light.scss +0 -1
  34. package/color-modes/themes/light_colorblind.scss +0 -1
  35. package/color-modes/themes/light_high_contrast.scss +0 -1
  36. package/color-modes/themes/light_tritanopia.scss +6 -0
  37. package/dist/actionlist.css +1 -1
  38. package/dist/actionlist.css.map +1 -1
  39. package/dist/alerts.css +1 -1
  40. package/dist/alerts.css.map +1 -1
  41. package/dist/autocomplete.css +1 -1
  42. package/dist/autocomplete.css.map +1 -1
  43. package/dist/avatars.css +1 -1
  44. package/dist/avatars.css.map +1 -1
  45. package/dist/base.css +1 -1
  46. package/dist/base.css.map +1 -1
  47. package/dist/blankslate.css +1 -1
  48. package/dist/blankslate.css.map +1 -1
  49. package/dist/box.css.map +1 -1
  50. package/dist/branch-name.css +1 -1
  51. package/dist/branch-name.css.map +1 -1
  52. package/dist/breadcrumb.css.map +1 -1
  53. package/dist/buttons.css +1 -1
  54. package/dist/buttons.css.map +1 -1
  55. package/dist/color-modes.css +1 -1
  56. package/dist/color-modes.css.map +1 -1
  57. package/dist/core.css +1 -1
  58. package/dist/core.css.map +1 -1
  59. package/dist/dropdown.css +1 -1
  60. package/dist/dropdown.css.map +1 -1
  61. package/dist/forms.css +1 -1
  62. package/dist/forms.css.map +1 -1
  63. package/dist/header.css.map +1 -1
  64. package/dist/labels.css +1 -1
  65. package/dist/labels.css.map +1 -1
  66. package/dist/layout.css +1 -1
  67. package/dist/layout.css.map +1 -1
  68. package/dist/links.css +1 -1
  69. package/dist/links.css.map +1 -1
  70. package/dist/loaders.css.map +1 -1
  71. package/dist/markdown.css +1 -1
  72. package/dist/markdown.css.map +1 -1
  73. package/dist/marketing-buttons.css +1 -1
  74. package/dist/marketing-buttons.css.map +1 -1
  75. package/dist/marketing-links.css +1 -1
  76. package/dist/marketing-links.css.map +1 -1
  77. package/dist/marketing-type.css.map +1 -1
  78. package/dist/marketing-utilities.css.map +1 -1
  79. package/dist/marketing.css +1 -1
  80. package/dist/marketing.css.map +1 -1
  81. package/dist/meta.json +73 -73
  82. package/dist/navigation.css +1 -1
  83. package/dist/navigation.css.map +1 -1
  84. package/dist/pagination.css +1 -1
  85. package/dist/pagination.css.map +1 -1
  86. package/dist/popover.css +1 -1
  87. package/dist/popover.css.map +1 -1
  88. package/dist/primer.css +4 -4
  89. package/dist/primer.css.map +1 -1
  90. package/dist/product.css +1 -1
  91. package/dist/product.css.map +1 -1
  92. package/dist/progress.css.map +1 -1
  93. package/dist/select-menu.css.map +1 -1
  94. package/dist/stats/actionlist.json +1 -1
  95. package/dist/stats/alerts.json +1 -1
  96. package/dist/stats/autocomplete.json +1 -1
  97. package/dist/stats/avatars.json +1 -1
  98. package/dist/stats/base.json +1 -1
  99. package/dist/stats/blankslate.json +1 -1
  100. package/dist/stats/branch-name.json +1 -1
  101. package/dist/stats/buttons.json +1 -1
  102. package/dist/stats/color-modes.json +1 -1
  103. package/dist/stats/core.json +1 -1
  104. package/dist/stats/dropdown.json +1 -1
  105. package/dist/stats/forms.json +1 -1
  106. package/dist/stats/labels.json +1 -1
  107. package/dist/stats/layout.json +1 -1
  108. package/dist/stats/links.json +1 -1
  109. package/dist/stats/markdown.json +1 -1
  110. package/dist/stats/marketing-buttons.json +1 -1
  111. package/dist/stats/marketing-links.json +1 -1
  112. package/dist/stats/marketing.json +1 -1
  113. package/dist/stats/navigation.json +1 -1
  114. package/dist/stats/pagination.json +1 -1
  115. package/dist/stats/popover.json +1 -1
  116. package/dist/stats/primer.json +1 -1
  117. package/dist/stats/product.json +1 -1
  118. package/dist/stats/subhead.json +1 -1
  119. package/dist/stats/toasts.json +1 -1
  120. package/dist/stats/tooltips.json +1 -1
  121. package/dist/stats/utilities.json +1 -1
  122. package/dist/subhead.css +1 -1
  123. package/dist/subhead.css.map +1 -1
  124. package/dist/table-object.css.map +1 -1
  125. package/dist/timeline.css.map +1 -1
  126. package/dist/toasts.css +1 -1
  127. package/dist/toasts.css.map +1 -1
  128. package/dist/tooltips.css +1 -1
  129. package/dist/tooltips.css.map +1 -1
  130. package/dist/truncate.css.map +1 -1
  131. package/dist/utilities.css +1 -1
  132. package/dist/utilities.css.map +1 -1
  133. package/dist/variables.json +7 -7
  134. package/dropdown/dropdown.scss +0 -2
  135. package/forms/form-control.scss +26 -5
  136. package/forms/form-group.scss +47 -13
  137. package/forms/form-validation.scss +1 -1
  138. package/forms/input-group.scss +18 -0
  139. package/labels/counters.scss +1 -1
  140. package/labels/index.scss +0 -1
  141. package/labels/labels.scss +12 -1
  142. package/labels/mixins.scss +7 -2
  143. package/labels/states.scss +2 -2
  144. package/layout/grid-offset.scss +1 -0
  145. package/layout/grid.scss +1 -0
  146. package/layout/index.scss +1 -1
  147. package/layout/layout.scss +8 -11
  148. package/layout/mixins.scss +30 -4
  149. package/layout/page-layout.scss +384 -0
  150. package/links/link.scss +6 -1
  151. package/markdown/code.scss +5 -0
  152. package/markdown/footnotes.scss +38 -26
  153. package/markdown/headings.scss +17 -0
  154. package/markdown/images.scss +3 -3
  155. package/markdown/markdown-body.scss +0 -8
  156. package/marketing/buttons/button.scss +32 -26
  157. package/marketing/links/link.scss +5 -5
  158. package/marketing/type/typography.scss +3 -0
  159. package/marketing/utilities/layout.scss +1 -0
  160. package/navigation/filter-list.scss +20 -2
  161. package/navigation/menu.scss +8 -10
  162. package/navigation/sidenav.scss +3 -12
  163. package/navigation/subnav.scss +20 -2
  164. package/navigation/tabnav.scss +9 -4
  165. package/navigation/underline-nav.scss +79 -28
  166. package/package.json +32 -26
  167. package/pagination/pagination.scss +65 -7
  168. package/popover/popover.scss +1 -2
  169. package/select-menu/select-menu.scss +3 -3
  170. package/stylelint.config.cjs +2 -11
  171. package/subhead/subhead.scss +3 -0
  172. package/support/mixins/color-modes.scss +3 -0
  173. package/support/mixins/misc.scss +48 -1
  174. package/support/mixins/typography.scss +3 -2
  175. package/support/variables/layout.scss +2 -3
  176. package/table-object/table-object.scss +3 -0
  177. package/timeline/timeline-item.scss +0 -1
  178. package/toasts/toasts.scss +7 -4
  179. package/tooltips/tooltips.scss +0 -7
  180. package/utilities/colors.scss +16 -0
  181. package/utilities/details.scss +81 -4
  182. package/utilities/layout.scss +1 -1
  183. package/utilities/margin.scss +4 -1
  184. package/utilities/padding.scss +3 -1
  185. package/utilities/visibility-display.scss +52 -3
  186. package/table-object/README.md +0 -25
package/CHANGELOG.md CHANGED
@@ -4,7 +4,166 @@
4
4
 
5
5
  ### Major Changes
6
6
 
7
- - [#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
7
+ - [#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
8
+
9
+ * [#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
10
+
11
+ - [#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
12
+ Refactor selected state and spacing
13
+ Add selected bold state override from github/github
14
+
15
+ ## 19.8.2
16
+
17
+ ### Patch Changes
18
+
19
+ - [#2019](https://github.com/primer/css/pull/2019) [`57be2d50`](https://github.com/primer/css/commit/57be2d50212b71f87ce612039375bcd5273eca53) Thanks [@langermank](https://github.com/langermank)! - [Bug] TreeView animation and padding fix
20
+
21
+ ## 19.8.1
22
+
23
+ ### Patch Changes
24
+
25
+ - [#1996](https://github.com/primer/css/pull/1996) [`a4293bf9`](https://github.com/primer/css/commit/a4293bf921ebcb74c6973e3f50f07e470f495bd0) Thanks [@langermank](https://github.com/langermank)! - TreeView: remove bold active items + markup changes
26
+
27
+ ## 19.8.0
28
+
29
+ ### Minor Changes
30
+
31
+ - [#1997](https://github.com/primer/css/pull/1997) [`9806b54b`](https://github.com/primer/css/commit/9806b54b3829219c9ad141efd2fcd99fc5c08751) Thanks [@simurai](https://github.com/simurai)! - Add Tritanopia theme
32
+
33
+ ### Patch Changes
34
+
35
+ - [#2002](https://github.com/primer/css/pull/2002) [`a3bc51f6`](https://github.com/primer/css/commit/a3bc51f6c4af0d45a9ce39f00c3cf3297b090067) Thanks [@simurai](https://github.com/simurai)! - Always break long `branch-name`s
36
+
37
+ ## 19.7.1
38
+
39
+ ### Patch Changes
40
+
41
+ - [#2001](https://github.com/primer/css/pull/2001) [`47cec404`](https://github.com/primer/css/commit/47cec40472173b412df59e6990c0ac1b1ed43d04) Thanks [@jdanyow](https://github.com/jdanyow)! - Remove IE11 support in tooltip
42
+
43
+ * [#1995](https://github.com/primer/css/pull/1995) [`557b100a`](https://github.com/primer/css/commit/557b100a77a4befe6d07fac14cb48b08bed18356) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add narrow/regular/wide viewport range utilities
44
+
45
+ - [#2000](https://github.com/primer/css/pull/2000) [`264a89a5`](https://github.com/primer/css/commit/264a89a51a75eefa6a371e6ad11518519cd98b36) Thanks [@khiga8](https://github.com/khiga8)! - More CSS updates to `Autocomplete`
46
+
47
+ ## 19.7.0
48
+
49
+ ### Minor Changes
50
+
51
+ - [#1994](https://github.com/primer/css/pull/1994) [`69fe8c65`](https://github.com/primer/css/commit/69fe8c6512a3f0bbdbfdf7080b916a39173c2df9) Thanks [@khiga8](https://github.com/khiga8)! - Add support for inline, stack label in autocomplete
52
+
53
+ ### Patch Changes
54
+
55
+ - [#1991](https://github.com/primer/css/pull/1991) [`5e87effa`](https://github.com/primer/css/commit/5e87effa671b194e188f699a79b246bdf61bd191) Thanks [@simurai](https://github.com/simurai)! - Fix `btn-primary` in flash alerts
56
+
57
+ ## 19.6.0
58
+
59
+ ### Minor Changes
60
+
61
+ - [#1989](https://github.com/primer/css/pull/1989) [`f544ef85`](https://github.com/primer/css/commit/f544ef8574a4d6e12cccf94d534ad66df3e9249a) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Make `pane` an optional region for PageLayout component
62
+
63
+ ### Patch Changes
64
+
65
+ - [#1988](https://github.com/primer/css/pull/1988) [`e3443f1a`](https://github.com/primer/css/commit/e3443f1a69ba5a23d3e3804bf4e22d384783c443) Thanks [@simurai](https://github.com/simurai)! - Fix color-fg utilities in links
66
+
67
+ * [#1985](https://github.com/primer/css/pull/1985) [`c2bd6bc9`](https://github.com/primer/css/commit/c2bd6bc9bf90686f258af11c102097d7da000a5b) Thanks [@cheshire137](https://github.com/cheshire137)! - Adding .color-bg-transparent utility class
68
+
69
+ ## 19.5.1
70
+
71
+ ### Patch Changes
72
+
73
+ - [#1983](https://github.com/primer/css/pull/1983) [`07bc069e`](https://github.com/primer/css/commit/07bc069ec0faae9c0e4530e5171e3346fa643a10) Thanks [@simurai](https://github.com/simurai)! - Bump `primer/primitives` to `^7.5.1`
74
+
75
+ ## 19.5.0
76
+
77
+ ### Minor Changes
78
+
79
+ - [#1948](https://github.com/primer/css/pull/1948) [`6a83a92b`](https://github.com/primer/css/commit/6a83a92b4332d577cdd72eee084e3f2c41b588ee) Thanks [@simurai](https://github.com/simurai)! - Add `open` and `closed` color roles
80
+
81
+ * [#1961](https://github.com/primer/css/pull/1961) [`a35a8bdc`](https://github.com/primer/css/commit/a35a8bdcc17906848fcb486842d2345db0441c7c) Thanks [@jonrohan](https://github.com/jonrohan)! - Default .PageLayout to display block
82
+
83
+ ### Patch Changes
84
+
85
+ - [#1954](https://github.com/primer/css/pull/1954) [`30f29d38`](https://github.com/primer/css/commit/30f29d383256a7d4023a859fdeee44471307159d) Thanks [@simurai](https://github.com/simurai)! - Fix `input-block` in `form-group`
86
+
87
+ * [#1956](https://github.com/primer/css/pull/1956) [`39063461`](https://github.com/primer/css/commit/3906346182ed983d9725fd95da41b21424378b3e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.2
88
+
89
+ - [#1931](https://github.com/primer/css/pull/1931) [`e5c5312e`](https://github.com/primer/css/commit/e5c5312ec8bf139f6c94d2f70ceecd4b3cd9fd82) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Page layout api updates renaming spacing options in storybook
90
+
91
+ * [#1950](https://github.com/primer/css/pull/1950) [`7c85c500`](https://github.com/primer/css/commit/7c85c500569fe6e1b29665c2eed37d58625ab06f) Thanks [@hectahertz](https://github.com/hectahertz)! - Fix sequence of content in Subhead
92
+
93
+ - [#1942](https://github.com/primer/css/pull/1942) [`0450ccbb`](https://github.com/primer/css/commit/0450ccbb86104564c7d4038eb68989f370014fa1) Thanks [@reeceatkinson](https://github.com/reeceatkinson)! - Added line break to docs
94
+
95
+ * [#1953](https://github.com/primer/css/pull/1953) [`3a91a29a`](https://github.com/primer/css/commit/3a91a29a822a28ea9679fbbb90250fc039057f23) Thanks [@hectahertz](https://github.com/hectahertz)! - Use `<h2>` instead of `<div>` on Subhead-heading docs
96
+
97
+ - [#1949](https://github.com/primer/css/pull/1949) [`dab83198`](https://github.com/primer/css/commit/dab83198c3bf1c7e03826b8cd498b8c48c9a2869) Thanks [@heiskr](https://github.com/heiskr)! - Render headings inline when in a `<summary>`
98
+
99
+ * [#1978](https://github.com/primer/css/pull/1978) [`a00e6bce`](https://github.com/primer/css/commit/a00e6bce01b368d9cb6da5ec2af1d833f4d785c1) Thanks [@langermank](https://github.com/langermank)! - Handle pointer-events on ActionList visuals
100
+
101
+ - [#1977](https://github.com/primer/css/pull/1977) [`80bf9d9d`](https://github.com/primer/css/commit/80bf9d9dea6fe7fbb0837fea265ec95cbbbd75d6) Thanks [@jonrohan](https://github.com/jonrohan)! - [Bug Fix] Adding white-space nowrap to Labels
102
+
103
+ ## 19.4.0
104
+
105
+ ### Minor Changes
106
+
107
+ - [#1937](https://github.com/primer/css/pull/1937) [`67f08009`](https://github.com/primer/css/commit/67f08009ef458088b9fda6267ab25ad6d0a514aa) Thanks [@langermank](https://github.com/langermank)! - TreeView single item nesting
108
+
109
+ * [#1905](https://github.com/primer/css/pull/1905) [`50221a54`](https://github.com/primer/css/commit/50221a5486d28c54dc1f578b459addd867bd01d3) Thanks [@langermank](https://github.com/langermank)! - Refactors NavigationList to better handle accessibility. Backwards compatible for TreeView CSS.
110
+
111
+ - [#1936](https://github.com/primer/css/pull/1936) [`c53ecdff`](https://github.com/primer/css/commit/c53ecdff5442cf4ac5da0d1e2ba45871ab662855) Thanks [@khiga8](https://github.com/khiga8)! - Deprecating `.tooltipped` CSS classes
112
+
113
+ ### Patch Changes
114
+
115
+ - [#1928](https://github.com/primer/css/pull/1928) [`0fb67895`](https://github.com/primer/css/commit/0fb6789555652860cfa5178b60433eb2c3d2575c) Thanks [@simurai](https://github.com/simurai)! - Fix `<sup><a>` from getting wrapped with `[ ]`
116
+
117
+ ## 19.3.0
118
+
119
+ ### Minor Changes
120
+
121
+ - [#1876](https://github.com/primer/css/pull/1876) [`bcf447ab`](https://github.com/primer/css/commit/bcf447ab226e6043dd47c1fcc395ba104af866d4) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add mono font stack to <samp> tag
122
+
123
+ * [#1919](https://github.com/primer/css/pull/1919) [`21085f5c`](https://github.com/primer/css/commit/21085f5c6cc538b5014a47de76642554a4291cc6) Thanks [@hectahertz](https://github.com/hectahertz)! - Add blankslate classes to replace utilities
124
+
125
+ ### Patch Changes
126
+
127
+ - [#1892](https://github.com/primer/css/pull/1892) [`55bd498b`](https://github.com/primer/css/commit/55bd498b7357e86659ac574f0f745f7b420fb6d3) Thanks [@langermank](https://github.com/langermank)! - Patch: Fix ActionList--divided for label with inline description scenarios
128
+
129
+ * [#1906](https://github.com/primer/css/pull/1906) [`f02d9a3e`](https://github.com/primer/css/commit/f02d9a3e4e86c2659a9f507995bcb90c5226e34e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.0 and fixing violations
130
+
131
+ - [#1908](https://github.com/primer/css/pull/1908) [`84581e96`](https://github.com/primer/css/commit/84581e96aee50ff3883907dfe1069701edd1c24a) Thanks [@simurai](https://github.com/simurai)! - Reduce size of `Label--inline`
132
+
133
+ * [#1890](https://github.com/primer/css/pull/1890) [`74d0438b`](https://github.com/primer/css/commit/74d0438bd4dbaed447b553c5d3c8b945da282836) Thanks [@andrialexandrou](https://github.com/andrialexandrou)! - Adds --color-accent-emphasis and --color-fg-on-emphasis rules for Windows High Contrast Mode
134
+
135
+ - [#1882](https://github.com/primer/css/pull/1882) [`4a06aba1`](https://github.com/primer/css/commit/4a06aba1d3f80bcc228ff4360d0e02d5ace158ff) Thanks [@tqwewe](https://github.com/tqwewe)! - Fix layout gutter none styles
136
+
137
+ * [#1894](https://github.com/primer/css/pull/1894) [`d1adf595`](https://github.com/primer/css/commit/d1adf595308afb97f83c5ca172222944189a5961) Thanks [@simurai](https://github.com/simurai)! - Make `pagination` responsive by default
138
+
139
+ ## 19.2.0
140
+
141
+ ### Minor Changes
142
+
143
+ - [#1737](https://github.com/primer/css/pull/1737) [`6b4089d8`](https://github.com/primer/css/commit/6b4089d8b37174ca061762c56b5e4134a54cf4ef) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Adds new PageLayout component CSS with Storybook documentation
144
+
145
+ ### Patch Changes
146
+
147
+ - [#1855](https://github.com/primer/css/pull/1855) [`8f2e7534`](https://github.com/primer/css/commit/8f2e7534ecbdb3d0e773d60c725b55dc4bb263e2) Thanks [@simurai](https://github.com/simurai)! - Bump primer/primitives to `7.4.0`
148
+
149
+ * [#1869](https://github.com/primer/css/pull/1869) [`868f61a1`](https://github.com/primer/css/commit/868f61a199df14862922d52905de66cdb1e1c192) Thanks [@jdanyow](https://github.com/jdanyow)! - Minor bugfix for AvatarStack. Removing the box-shadow from the AvatarStack-body on hover.
150
+
151
+ - [#1856](https://github.com/primer/css/pull/1856) [`cbe3fb56`](https://github.com/primer/css/commit/cbe3fb56e4c7ee6bfe803eb0c15e15ab95d84157) Thanks [@langermank](https://github.com/langermank)! - ActionList item outlines for high contrast theme
152
+
153
+ * [#1870](https://github.com/primer/css/pull/1870) [`815daff9`](https://github.com/primer/css/commit/815daff9f07d8096d572cf75bee17284f36492f6) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [ActionList] Add hover to `aria-current` elements and other micro interactions
154
+
155
+ ## 19.1.1
156
+
157
+ ### Patch Changes
158
+
159
+ - [#1827](https://github.com/primer/css/pull/1827) [`69e1fc53`](https://github.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://github.com/simurai)! - Support fractional viewport sizes for `max-width` media queries
160
+
161
+ * [#1803](https://github.com/primer/css/pull/1803) [`c46fe918`](https://github.com/primer/css/commit/c46fe9186efbcf6e4a482685529bdb0bda28aa9f) Thanks [@langermank](https://github.com/langermank)! - - Adds ActionList tree-view specific CSS
162
+ - Minor bug fixes for ActionList default
163
+
164
+ - [#1827](https://github.com/primer/css/pull/1827) [`69e1fc53`](https://github.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://github.com/simurai)! - Support fractional viewport sizes for the `hide` utilities
165
+
166
+ ## 19.1.0
8
167
 
9
168
  ### Minor Changes
10
169
 
@@ -24,7 +183,11 @@
24
183
 
25
184
  * [#1768](https://github.com/primer/css/pull/1768) [`4abb1af9`](https://github.com/primer/css/commit/4abb1af95b9b3c8c38512fa5e1e4fae9e7d01f4f) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Add disabled states for buttons (and tweak hover)
26
185
 
27
- - [#1808](https://github.com/primer/css/pull/1808) [`ee27583f`](https://github.com/primer/css/commit/ee27583f594248bd44122ea5dc81b12382c02b09) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Add hover and active states to btn-invisible
186
+ - [#1792](https://github.com/primer/css/pull/1792) [`b1c43f1f`](https://github.com/primer/css/commit/b1c43f1f8d9b07b58b275665ca69abd5d4f7a5fc) Thanks [@simurai](https://github.com/simurai)! - Use `counter-border` for LHC
187
+
188
+ * [#1808](https://github.com/primer/css/pull/1808) [`ee27583f`](https://github.com/primer/css/commit/ee27583f594248bd44122ea5dc81b12382c02b09) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Add hover and active states to btn-invisible
189
+
190
+ - [#1818](https://github.com/primer/css/pull/1818) [`22c29e7a`](https://github.com/primer/css/commit/22c29e7a8b1b6a0df1dd61d400cc0dd132e0c909) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [Layout component] Avoid resizing `main` while loading
28
191
 
29
192
  ## 19.0.0
30
193
 
@@ -226,7 +389,7 @@
226
389
 
227
390
  ### Patch Changes
228
391
 
229
- - [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecyle milestones for statuses.
392
+ - [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecycle milestones for statuses.
230
393
 
231
394
  * [#1528](https://github.com/primer/css/pull/1528) [`303cacae`](https://github.com/primer/css/commit/303cacae77244a9e0de02b4caee2a8c01097aced) Thanks [@koddsson](https://github.com/koddsson)! - Convert package to a ES module
232
395
 
package/CONTRIBUTING.md CHANGED
@@ -58,13 +58,15 @@ Anyone can open a pull request on Primer CSS. You do not need to work at GitHub
58
58
  2. Configure and install the dependencies: `npm install`
59
59
  3. Create a new branch from main `git checkout -b my-branch-name`
60
60
  4. Make your changes and commit them.
61
- 5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
62
- 6. Wait for CI tests to finish.
61
+ 5. Create a changeset for your changes: `npx changeset`
62
+ - See [changesets/changesets](https://github.com/changesets/changesets) for more information.
63
+ 6. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
64
+ 7. Wait for CI tests to finish.
63
65
  - If the tests pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects.
64
66
  - If the tests fail, review the logs and address any issues.
65
67
  - If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted.
66
- 7. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
67
- 8. Pat yourself on the back and wait for your pull request to be reviewed.
68
+ 8. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
69
+ 9. Pat yourself on the back and wait for your pull request to be reviewed.
68
70
 
69
71
  Here are a few things you can do that will increase the likelihood of your pull request being accepted:
70
72
 
package/DEVELOP.md CHANGED
@@ -3,29 +3,32 @@
3
3
  If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/css/issues/new).
4
4
 
5
5
  ## Structure
6
+
6
7
  Primer CSS is published to [npm] as [@primer/css]. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
7
8
 
8
- * **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
9
- * **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
10
- * **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
9
+ - **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
10
+ - **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
11
+ - **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
11
12
 
12
13
  ### Paths
13
- Here's what you need to know about how the files are structured in both git and in the published npm module:
14
14
 
15
- * In git, all of the SCSS source files live in the `src/` directory.
16
- * When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
15
+ Here's what you need to know about how the files are structured in both git and in the published npm module:
17
16
 
18
- ```scss
19
- @import "@primer/css/utilities/index.scss";
20
- ```
17
+ - In git, all of the SCSS source files live in the `src/` directory.
18
+ - When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
21
19
 
22
- * All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
20
+ ```scss
21
+ @import '@primer/css/utilities/index.scss';
22
+ ```
23
23
 
24
+ - All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
24
25
 
25
26
  ## Install
27
+
26
28
  Run `npm install` to install the npm dependencies.
27
29
 
28
30
  ## Docs site
31
+
29
32
  The Primer CSS docs are built with React using [Doctocat](https://primer.style/doctocat) and automatically deployed on every push to this repo with [Now]. You can run the server locally with:
30
33
 
31
34
  ```sh
@@ -35,41 +38,43 @@ npm start
35
38
  Then visit http://localhost:8000 to view the site.
36
39
 
37
40
  ### The docs directory
38
- The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
39
41
 
42
+ The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
40
43
 
41
44
  ### Code blocks
45
+
42
46
  All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
43
47
 
44
48
  ## Storybook
45
49
 
46
- Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
50
+ Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
47
51
 
48
52
  ```sh
49
53
  npm run storybook
50
54
  ```
51
55
 
52
56
  ### The Storybook directory
57
+
53
58
  Storybook configuration files live in [.storybook](../docs/.storybook). Addons and additional global config can be added to [main.js](../docs/.storybook/main.js) or [preview.js](../docs/.storybook/preview.js)
54
59
 
55
60
  ### Stories
61
+
56
62
  Stories are individual `.jsx` or `.mdx` files that contain component HTML for prototyping, typically showcasing all possible variations of a component. Stories can be found in the [stories directory](../docs/src/stories/components) and are organized by component. Storybook will build and deploy a preview on any open Pull Request.
57
63
 
58
64
  ## Scripts
65
+
59
66
  Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
60
67
 
61
- * `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
62
- * `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
63
- * `stylelint` lints the CSS source files.
64
- * `eslint` lints the JavaScript source files.
65
- * `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
66
- * `start` runs the documentation site locally (alias: `dev`).
67
- * `test` runs our test suite.
68
- * `storybook` runs storybook local development server.
68
+ - `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
69
+ - `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
70
+ - `stylelint` lints the CSS source files.
71
+ - `eslint` lints the JavaScript source files.
72
+ - `start` runs the documentation site locally (alias: `dev`).
73
+ - `test` runs our test suite.
74
+ - `storybook` runs storybook local development server.
69
75
 
70
76
  The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.
71
77
 
72
-
73
78
  [@primer/css]: https://www.npmjs.com/package/@primer/css
74
79
  [run-scripts]: https://docs.npmjs.com/cli/run-script
75
80
  [now]: https://zeit.co/now
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <p align="center">
2
- <img width="300px" src="./docs/src/readme.png">
2
+ <img width="300px" alt="" src="./docs/src/readme.png">
3
3
  </p>
4
4
 
5
5
  <h1 align="center">Primer CSS</h1>
@@ -14,7 +14,7 @@
14
14
  <img alt="" src="https://github.com/primer/css/actions/workflows/ci.yml/badge.svg">
15
15
  </a>
16
16
  <a aria-label="contributors graph" href="https://github.com/primer/css/graphs/contributors">
17
- <img src="https://img.shields.io/github/contributors/primer/css.svg">
17
+ <img alt="" src="https://img.shields.io/github/contributors/primer/css.svg">
18
18
  </a>
19
19
  <a aria-label="last commit" href="https://github.com/primer/css/commits/main">
20
20
  <img alt="" src="https://img.shields.io/github/last-commit/primer/css.svg">
@@ -1,10 +1,9 @@
1
- // emtpy divider
1
+ // empty divider
2
2
 
3
3
  .ActionList-sectionDivider {
4
4
  // has children
5
5
  &:not(:empty) {
6
6
  display: flex;
7
- // stylelint-disable-next-line primer/spacing
8
7
  padding: ($spacer-1 * 1.5) $spacer-2;
9
8
  font-size: $font-size-small;
10
9
  font-weight: $font-weight-bold;
@@ -14,6 +13,7 @@
14
13
 
15
14
  // no children
16
15
  &:empty {
16
+ display: block;
17
17
  height: 1px;
18
18
  padding: 0;
19
19
  // stylelint-disable-next-line primer/spacing
@@ -22,6 +22,12 @@
22
22
  background: var(--color-action-list-item-inline-divider);
23
23
  border: 0;
24
24
  }
25
+
26
+ .ActionList-sectionDivider-title {
27
+ font-size: $font-size-small;
28
+ font-weight: $font-weight-bold;
29
+ color: var(--color-fg-muted);
30
+ }
25
31
  }
26
32
 
27
33
  .ActionList-sectionDivider--filled {