Primer CSS 15.1.0

CHANGELOG.md

@@ -1,3 +1,25 @@
+## 15.1.0
+
+### :rocket: Enhancements
+- [#1062](https://github.com/primer/css/pull/1062) Make tabnav responsive
+- [#1128](https://github.com/primer/css/pull/1128) Add support for table border
+- [#1132](https://github.com/primer/css/pull/1132) Add .bg-orange to the list of colors
+
+### :memo: Documentation
+- [#1122](https://github.com/primer/css/pull/1122) fix comment typo
+
+### :nail_care: Polish
+- [#1121](https://github.com/primer/css/pull/1121) Update layout when the Counter is empty
+- [#1126](https://github.com/primer/css/pull/1126) Increase border contrast for Label--yellow
+
+### Committers
+- [@colinkeany](https://github.com/colinkeany)
+- [@garman](https://github.com/garman)
+- [@nikolasveneti](https://github.com/nikolasveneti)
+- [@nuthinking](https://github.com/nuthinking)
+- [@simurai](https://github.com/simurai)
+
+
 ## 15.0.0
 
 ### :rocket: Enhancements

RELEASING.md

@@ -9,15 +9,15 @@
 
 1. Run [`npm version <version>`](https://docs.npmjs.com/cli/version) to update the `version` field in both `package.json` and `package-lock.json`.
 
-1. Create a new PR for the `release-<version>` branch. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change. The changelog gets generated automatically :
+1. Create a new PR for the `release-<version>` branch. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change.
 
     ```md
     # Primer CSS [Major|Minor|Patch] Release
 
     Version: 📦 **`0.0.0`**
-    Approximate release date: 📆 **DD/MM/YY**
-    Changes: 🎉 [All merged PRs](https://github.com/primer/css/pulls?q=is%3Apr+is%3Amerged+base%3Arelease-0.0.0)
-    
+    Approximate release date: 📆 **Mon DD, YYYY**
+    Changes: 🎉 [All merged PRs](https://github.com/primer/css/pulls?q=is%3Apr+is%3Amerged+base%3Arelease-0.0.0) <!-- Update version at the end of the link. E.g. ...release-0.0.0 -> ...release-15.1.0 -->
+
     ---
 
     ### :boom: Breaking Change
@@ -43,8 +43,10 @@
     ### Ship checklist
 
     - [x] Update the `version` field in `package.json`
+    - [ ] Merge all PRs
     - [ ] Update `CHANGELOG.md`
-    - [ ] Test the release candidate version with `github/github`
+    - [ ] Test the release candidate version with `github/github` (optional)
+    - [ ] Get approval
     - [ ] Merge this PR and [create a new release](https://github.com/primer/css/releases/new)
     - [ ] Update `github/github`
     - [ ] Tell the world (Slack, Twitter, Team post)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "15.0.0",
+  "version": "15.1.0",
   "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",

src/labels/counters.scss

@@ -17,7 +17,7 @@
   border-radius: 2em;
 
   &:empty {
-    visibility: hidden;
+    display: none;
   }
 
   .octicon {

src/labels/labels.scss

@@ -50,7 +50,7 @@
   // stylelint-disable-next-line primer/colors
   color: $yellow-900;
   // stylelint-disable-next-line primer/borders
-  border-color: $yellow-600;
+  border-color: $yellow-800;
 }
 
 .Label--orange {

src/markdown/tables.scss

@@ -4,7 +4,9 @@
   // Tables
   table {
     display: block;
-    width: 100%;
+    width: 100%; // keep for backwards compatibility
+    width: max-content;
+    max-width: 100%;
     overflow: auto;
 
     th {

src/navigation/tabnav.scss

@@ -7,12 +7,15 @@
 }
 
 .tabnav-tabs {
+  display: flex;
   // stylelint-disable-next-line primer/spacing
   margin-bottom: -1px;
+  overflow: auto;
 }
 
 .tabnav-tab {
   display: inline-block;
+  flex-shrink: 0;
   padding: $spacer-2 $spacer-3;
   font-size: $h5-size;
   // stylelint-disable-next-line primer/typography

src/progress/progress.scss

@@ -7,7 +7,7 @@
   // stylelint-disable-next-line primer/colors
   background-color: $gray-200;
   border-radius: $border-radius;
-  outline: 1px solid transparent; // Support Firfox custom colors
+  outline: 1px solid transparent; // Support Firefox custom colors
 }
 
 .Progress--large {
@@ -19,7 +19,7 @@
 }
 
 .Progress-item {
-  outline: 2px solid transparent; // Support Firfox custom colors
+  outline: 2px solid transparent; // Support Firefox custom colors
 }
 
 .Progress-item + .Progress-item {

src/utilities/colors.scss

@@ -34,6 +34,8 @@
 .bg-pink { background-color: $bg-pink !important; }
 /* Set the background to $bg-purple-light */
 .bg-purple-light     { background-color: $bg-purple-light !important; }
+/* Set the background to $bg-orange */
+.bg-orange { background-color: $bg-orange !important; }
 
 // Generate a foreground and background utility for every shade of every hue
 @each $hue, $shades in $hue-maps {