Merge pull request #1120 from primer/release-15.0.0

Primer CSS 15.0.0

CHANGELOG.md

@@ -1,3 +1,31 @@
+## 15.0.0
+
+### :rocket: Enhancements
+- [#1116](https://github.com/primer/css/pull/1116) Improve accessibility
+- [#1083](https://github.com/primer/css/pull/1083) Make sure autocomplete resets button styles
+- [#1074](https://github.com/primer/css/pull/1074) Update pagination
+- [#1071](https://github.com/primer/css/pull/1071) Update flash alert
+- [#1064](https://github.com/primer/css/pull/1064) Update SelectMenu
+- [#1040](https://github.com/primer/css/pull/1040) Update box-shadow and borders
+- [#1038](https://github.com/primer/css/pull/1038) Update navigation
+- [#1034](https://github.com/primer/css/pull/1034) Update labels
+- [#1029](https://github.com/primer/css/pull/1029) Update inputs
+- [#1027](https://github.com/primer/css/pull/1027) Update buttons
+- [#1022](https://github.com/primer/css/pull/1022) Update border radius
+
+### :nail_care: Polish
+- [#1109](https://github.com/primer/css/pull/1109) Polish 9
+- [#1090](https://github.com/primer/css/pull/1090) Polish 8
+- [#1077](https://github.com/primer/css/pull/1077) Polish 7
+- [#1055](https://github.com/primer/css/pull/1055) Polish 3
+- [#1047](https://github.com/primer/css/pull/1047) Polish 2
+- [#1045](https://github.com/primer/css/pull/1045) Polish 1
+- [#1041](https://github.com/primer/css/pull/1041) Polish
+
+### Committers
+- [@muan](https://github.com/muan)
+- [@simurai](https://github.com/simurai)
+
 ## 14.4.0
 
 ### :rocket: Enhancements

deprecations.js

@@ -4,6 +4,38 @@
  * array and a "message" string.
  */
 const versionDeprecations = {
+  '15.0.0': [
+    {
+      selectors: [
+        '.btn-outline:active .Counter',
+        '.btn-outline.selected .Counter',
+        '.btn-outline[aria-selected=true] .Counter',
+        '.tabnav .Counter',
+        '.SideNav-item:hover::before',
+        '.SideNav-item:focus::before',
+        '.UnderlineNav-item:hover .UnderlineNav-octicon',
+        '.UnderlineNav-item:focus .UnderlineNav-octicon',
+        '.UnderlineNav--right .UnderlineNav-item',
+        '.pagination::before',
+        '.pagination::after',
+        '.pagination a:first-child',
+        '.pagination span:first-child',
+        '.pagination em:first-child',
+        '.pagination a:last-child',
+        '.pagination span:last-child',
+        '.pagination em:last-child',
+        '.pagination .selected',
+        '.IssueLabel--big .g-emoji',
+        '.IssueLabel--big:hover',
+        '.SelectMenu-item[aria-checked="true"]',
+        '.SelectMenu-item[aria-checked="true"] .SelectMenu-icon--check',
+        '.SelectMenu-tab:not([aria-checked="true"]):hover',
+        '.SelectMenu-tab:not([aria-checked="true"]):active',
+        '.SelectMenu-tab:not([aria-selected="true"]):hover'
+      ],
+      message: `This selector is not available in Primer CSS 15.0.0. Please refer to the documentation.`
+    }
+  ],
   '14.4.0': [
     {
       selectors: [

docs/content/components/avatars.md

@@ -15,15 +15,30 @@ Add `.avatar` to any `<img>` element to make it an avatar. This resets some key
 Be sure to set `width` and `height` attributes for maximum browser performance.
 
 ```html live
-<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72" />
+<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
 ```
 
 ### Small avatars
 
-We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
+We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
 
 ```html live
-<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" />
+<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" />
+```
+
+### Avatar sizes
+
+Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only suppurted for the `20px` avatar size.
+
+```html live
+<img class="avatar avatar-1 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=32" />
+<img class="avatar avatar-2 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" />
+<img class="avatar avatar-3 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=48" />
+<img class="avatar avatar-4 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=56" />
+<img class="avatar avatar-5 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" />
+<img class="avatar avatar-6 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=80" />
+<img class="avatar avatar-7 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
+<img class="avatar avatar-8 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=128" />
 ```
 
 ### Parent-child avatars

docs/content/components/buttons.md

@@ -147,7 +147,7 @@ Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an
   <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
 </button>
 
-<button class="btn-octicon" type="button" aria-label="Trashcan icon">
+<button class="btn-octicon" type="button" aria-label="Kebab icon">
   <!-- <%= octicon "kebab-horizontal" %> -->
   <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
 </button>
@@ -166,6 +166,42 @@ When using the `octicon-x` icon for a close button, add `.close-button` to remov
 </button>
 ```
 
+## Button with icons
+
+Icons can be added to any button.
+
+```html live
+<button class="btn mr-2" type="button">
+  <!-- <%= octicon "search" %> -->
+  <svg class="octicon octicon-search" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"></path></svg>
+  <span>Find file</span>
+</button>
+
+<button class="btn btn-primary mr-2" type="button">
+  <!-- <%= octicon "cloud-download" %> -->
+  <svg class="octicon octicon-cloud-download" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z"></path></svg>
+  <span>Clone</span>
+  <span class="dropdown-caret"></span>
+</button>
+
+<button class="btn btn-danger mr-2" type="button">
+  <!-- <%= octicon "trashcan" %> -->
+  <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
+  <span>Delete</span>
+</button>
+
+<button class="btn btn-outline mr-2" type="button">
+  <!-- <%= octicon "device-desktop" %> -->
+  <svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
+  <span>Open in Desktop</span>
+</button>
+
+<button class="btn" type="button" aria-label="Pencil icon">
+  <!-- <%= octicon "pencil" %> -->
+  <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
+</button>
+```
+
 ## Button with counts
 
 You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button.

docs/content/components/forms.md

@@ -22,8 +22,9 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
 ```html live
 <p>
   <button class="btn" type="button">Button</button>
-  <button class="btn select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
+  <button class="btn" type="button" aria-expanded="false" aria-haspopup="true">
     Select menu
+    <span class="dropdown-caret">
   </button>
   <input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description" />
   <input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA" />
@@ -35,8 +36,9 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
 
 <p>
   <button class="btn btn-sm" type="button">Small button</button>
-  <button class="btn btn-sm select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
+  <button class="btn btn-sm" type="button" aria-expanded="false" aria-haspopup="true">
     Select menu
+    <span class="dropdown-caret">
   </button>
   <input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description" />
   <select class="form-select select-sm" aria-label="Important decision">
@@ -74,12 +76,17 @@ Textual form controls have a white background by default. You can change this to
 ```html live
 <form>
   <input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
-  <input
-    class="form-control input-contrast"
-    type="text"
-    placeholder="Input with contrast"
-    aria-label="Input with contrast"
-  />
+  <input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast" />
+</form>
+```
+
+#### Disabled state
+
+Add the `disabled` attribute to make a `.form-control` appear disabled.
+
+```html live
+<form>
+  <input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input" disabled />
 </form>
 ```
 
@@ -168,15 +175,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
   <option>Battlestar Galactica</option>
 </select>
 
-<select class="form-select select-sm" aria-label="Preference">
-  <option>Choose an option</option>
-  <option>Git</option>
-  <option>Subversion</option>
-  <option>Social Coding</option>
-  <option>Beets</option>
-  <option>Bears</option>
-  <option>Battlestar Galactica</option>
-</select>
+<button class="btn btn-sm ml-1"> Small button</button>
 ```
 
 #### Form groups