Release 12.6.1

CHANGELOG.md

@@ -1,3 +1,50 @@
+# 12.6.1
+
+### :bug: Bug Fix
+- Remove non-ascii characters (en dashes?) from SCSS comments [#870](https://github.com/primer/css/pull/870)
+- Fix SideNav "jumping" in Safari [#868](https://github.com/primer/css/pull/868)
+
+### :nail_care: Polish
+- Improve Select Menu spacing [#844](https://github.com/primer/css/pull/844)
+
+### :memo: Documentation
+- Update colorable URL [#867](https://github.com/primer/css/pull/867)
+
+### :house: Internal
+- Update changelog for 12.6.0 [#866](https://github.com/primer/css/pull/866)
+
+### Committers
+- [@jonrohan](https://github.com/jonrohan)
+- [@kiendang](https://github.com/kiendang)
+- [@shawnbot](https://github.com/shawnbot)
+- [@shreve](https://github.com/shreve)
+- [@simurai](https://github.com/simurai)
+
+# 12.6.0
+
+### 🚀 Enhancements
+- Loading toast styles [#852](https://github.com/primer/css/pull/852)
+- Header component [#845](https://github.com/primer/css/pull/845)
+- Import `.octicon` CSS in the core bundle [#857](https://github.com/primer/css/pull/857)
+- Design update for blankslates [#861](https://github.com/primer/css/pull/861)
+- Don't let State labels wrap [#863](https://github.com/primer/css/pull/863)
+
+### 📝 Documentation
+- Fix some links in linting docs [#856](https://github.com/primer/css/pull/856)
+- Updates to the development docs [#855](https://github.com/primer/css/pull/855)
+- Generate bundle source READMEs from a template [#859](https://github.com/primer/css/pull/859)
+- Render Octicon Ruby helper in docs [#847](https://github.com/primer/css/pull/847)
+
+### 🏠 Internal
+- Add GitHub `styleguide.css` to Storybook [#849](https://github.com/primer/css/pull/849)
+
+### Committers
+- [@ashygee](https://github.com/ashygee)
+- [@emilybrick](https://github.com/emilybrick)
+- [@jonrohan](https://github.com/jonrohan)
+- [@shawnbot](https://github.com/shawnbot)
+- [@vdepizzol](https://github.com/vdepizzol)
+
 # 12.5.0
 
 ### :rocket: Enhancement

docs/content/components/select-menu.md

@@ -146,8 +146,32 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
           </svg>
           Selected state
         </button>
-        <button class="SelectMenu-item" role="menuitemcheckbox">Default state</button>
-        <button class="SelectMenu-item" role="menuitemcheckbox">Default state</button>
+        <button class="SelectMenu-item" role="menuitemcheckbox">
+          <!-- <%= octicon "check", class: "SelectMenu-icon" %> -->
+          <svg
+            width="12"
+            height="16"
+            viewBox="0 0 12 16"
+            class="octicon octicon-check SelectMenu-icon"
+            aria-hidden="true"
+          >
+            <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
+          </svg>
+          Default state
+        </button>
+        <button class="SelectMenu-item" role="menuitemcheckbox">
+          <!-- <%= octicon "check", class: "SelectMenu-icon" %> -->
+          <svg
+            width="12"
+            height="16"
+            viewBox="0 0 12 16"
+            class="octicon octicon-check SelectMenu-icon"
+            aria-hidden="true"
+          >
+            <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
+          </svg>
+          Default state
+        </button>
       </menu>
     </div>
   </div>
@@ -194,7 +218,7 @@ The list of items is arguably the most important subcomponent within the menu. B
           />
           With an avatar
         </button>
-        <button class="SelectMenu-item" role="menuitem">
+        <button class="SelectMenu-item flex-justify-between" role="menuitem">
           With a status icon
           <!-- <%= octicon "primitive-dot", class: "color-green-5 ml-2" %> -->
           <svg
@@ -207,13 +231,13 @@ The list of items is arguably the most important subcomponent within the menu. B
             <path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
           </svg>
         </button>
-        <button class="SelectMenu-item" role="menuitem">
+        <button class="SelectMenu-item d-block" role="menuitem">
           With a <span class="Label bg-blue" title="Label: label">label</span>
         </button>
         <button class="SelectMenu-item" role="menuitem">
           With a counter <span class="Counter bg-gray-2 ml-1">16</span>
         </button>
-        <button class="SelectMenu-item" role="menuitem">
+        <button class="SelectMenu-item d-block" role="menuitem">
           <h5>With a heading</h5>
           <span>and some longer description</span>
         </button>

docs/content/utilities/colors.mdx

@@ -21,7 +21,7 @@ Use color utilities to apply color to the background of elements, text, and bord
 
 ## Background colors
 
-Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](../principles/accessibility).
+Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
 
 ### Background utilities
 
@@ -39,7 +39,7 @@ Background colors are most commonly used for filling large blocks of content or
 
 ## Text colors
 
-Use text color utilities to set text or [Octicons](https://octicons.github.com) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](../principles/accessibility).
+Use text color utilities to set text or [Octicons](https://octicons.github.com) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
 
 These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. **⚠️ Any of the combinations with a warning icon must be used with caution**.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "12.6.0",
+  "version": "12.6.1",
   "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/navigation/sidenav.scss

@@ -32,10 +32,6 @@
     width: 3px;
     pointer-events: none;
     content: "";
-    background-color: $gray-300;
-    transition: transform 0.24s ease-in;
-    transform: scaleX(0);
-    transform-origin: center left;
   }
 }
 
@@ -50,8 +46,7 @@
 
   // Bar on the left
   &::before {
-    transition: transform 0.12s ease-out;
-    transform: scaleX(1);
+    background-color: $gray-300;
   }
 }
 
@@ -68,7 +63,6 @@
   // Bar on the left
   &::before {
     background-color: $orange-600;
-    transform: scaleX(1);
   }
 }
 

src/select-menu/select-menu.scss

@@ -103,7 +103,8 @@
   padding: $spacer-3;
 
   @include breakpoint(sm) {
-    padding: $spacer-2;
+    padding-top: $spacer-2;
+    padding-bottom: $spacer-2;
   }
 }
 
@@ -173,9 +174,10 @@
 // The interactive element used to make a selection
 
 .SelectMenu-item {
-  display: block;
+  display: flex;
+  align-items: center;
   width: 100%;
-  padding: $spacer-3 $spacer-5;
+  padding: $spacer-3;
   overflow: hidden;
   color: $text-gray;
   text-align: left;
@@ -199,9 +201,8 @@
 // The icon shown on the left of a list item. Typically a check icon.
 
 .SelectMenu-icon {
-  position: absolute;
-  height: 1.5em; // Mimics line-height to vertically center the icon
-  margin-left: -20px;
+  width: $spacer-3; // fixed width to make sure following content aligns
+  margin-right: $spacer-2;
   visibility: hidden;
   transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
   transform: scale(0);
@@ -296,10 +297,6 @@
   &:last-child {
     border-bottom: 0;
   }
-
-  @include breakpoint(sm) {
-    padding: $spacer-1 $spacer-2;
-  }
 }
 
 // Footer

src/support/mixins/typography.scss

@@ -40,7 +40,7 @@
 }
 
 // Responsive heading mixins
-// There are no responsive mixins for h4—h6 because they are small
+// There are no responsive mixins for h4-h6 because they are small
 // and don't need to be smaller on mobile.
 @mixin f1-responsive {
   font-size: $h1-size-mobile;

src/support/variables/typography.scss

@@ -2,7 +2,7 @@
 // stylelint-disable declaration-bang-space-before
 
 // Heading sizes - mobile
-// h4—h6 remain the same size on both mobile & desktop
+// h4-h6 remain the same size on both mobile & desktop
 $h00-size-mobile: 40px !default;
 $h0-size-mobile: 32px !default;
 $h1-size-mobile: 26px !default;