Merge branch 'release-10.0.0' into code_padding

modules/primer-base/lib/normalize.scss

@@ -89,13 +89,11 @@ template, /* 1 */
    ========================================================================== */
 
 /**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ * Remove the gray background on active links in IE 10.
  */
 
 a {
   background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
 }
 
 /**

modules/primer-buttons/README.md

@@ -42,41 +42,9 @@ status: Stable
 
 Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
 
-#### Buttons
+{:toc}
 
-```html
-<button class="m-1 btn" type="button">Close</button>
-<button class="m-1 btn btn-primary" type="button">Comment</button>
-<button class="m-1 btn btn-danger" type="button">Rename repository</button>
-<button class="m-1 btn btn-blue" type="button">Sign up for free</button>
-<button class="m-1 btn btn-purple" type="button">Try if for free</button>
-<br>
-<button class="m-1 btn hover" type="button">Close</button>
-<button class="m-1 btn btn-primary hover" type="button">Comment</button>
-<button class="m-1 btn btn-danger hover" type="button">Rename repository</button>
-<button class="m-1 btn btn-blue hover" type="button">Sign up for free</button>
-<button class="m-1 btn btn-purple hover" type="button">Try if for free</button>
-<br>
-<button class="m-1 btn focus" type="button">Close</button>
-<button class="m-1 btn btn-primary focus" type="button">Comment</button>
-<button class="m-1 btn btn-danger focus" type="button">Rename repository</button>
-<button class="m-1 btn btn-blue focus" type="button">Sign up for free</button>
-<button class="m-1 btn btn-purple focus" type="button">Try if for free</button>
-<br>
-<button class="m-1 btn selected" type="button">Close</button>
-<button class="m-1 btn btn-primary selected" type="button">Comment</button>
-<button class="m-1 btn btn-danger selected" type="button">Rename repository</button>
-<button class="m-1 btn btn-blue selected" type="button">Sign up for free</button>
-<button class="m-1 btn btn-purple selected" type="button">Try if for free</button>
-<br>
-<button class="m-1 btn disabled" type="button">Close</button>
-<button class="m-1 btn btn-primary disabled" type="button">Comment</button>
-<button class="m-1 btn btn-danger disabled" type="button">Rename repository</button>
-<button class="m-1 btn btn-blue disabled" type="button">Sign up for free</button>
-<button class="m-1 btn btn-purple disabled" type="button">Try if for free</button>
-```
-
-#### Default buttons
+## Default button
 
 Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site.
 
@@ -94,7 +62,7 @@ You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`.
 <button class="btn btn-sm" type="button">Small button</button>
 ```
 
-#### Primary
+## Primary button
 
 Primary buttons are green and are used to indicate the *primary* action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.
 
@@ -103,7 +71,7 @@ Primary buttons are green and are used to indicate the *primary* action on a pag
 <button class="btn btn-sm btn-primary" type="button">Small primary button</button>
 ```
 
-#### Danger
+## Danger button
 
 Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
 
@@ -112,7 +80,7 @@ Danger buttons are red. They help reiterate that the intended action is importan
 <button class="btn btn-sm btn-danger" type="button">Small danger button</button>
 ```
 
-#### Outline
+## Outline button
 
 Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
 
@@ -121,7 +89,7 @@ Outline buttons downplay an action as they appear like boxy links. Just add `.bt
 <button class="btn btn-sm btn-outline" type="button">Outline button</button>
 ```
 
-#### Large button
+## Large button
 Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections.
 
 [Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
@@ -146,7 +114,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
 
 ```
 
-#### Disabled state
+## Disabled state
 
 Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.
 
@@ -172,7 +140,7 @@ Similar styles are applied to primary, danger, and outline buttons:
 <a class="btn btn-outline disabled" href="#url" role="button">Disabled button</a>
 ```
 
-#### Block buttons
+## Block button
 
 Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.
 
@@ -181,7 +149,17 @@ Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, chang
 <p><button class="btn btn-sm btn-block" type="button">Small block button</button></p>
 ```
 
-#### With counts
+## Link button
+
+Create a button that looks like a link with `.btn-link`. Rather than using an `<a>` to trigger JS, this style on a `<button>` should be used for better accessibility.
+
+**The `.btn-link` class is not designed to be used with `.btn`; the overlapping styles are not compatible.**
+
+```html
+<p><button class="btn-link" type="button">Link button</button></p>
+```
+
+## 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.
 
@@ -221,7 +199,7 @@ You can also use the [counter](../../product/components/labels) component within
 </button>
 ```
 
-#### Button groups
+## Button groups
 
 Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
 
@@ -258,7 +236,7 @@ Add `.BtnGroup-form` to `<form>`s within `.BtnGroup`s for proper spacing and rou
 </div>
 ```
 
-#### Hidden text button
+## Hidden text button
 
 Use `.hidden-text-expander` to indicate and toggle hidden text.
 
@@ -271,7 +249,7 @@ Use `.hidden-text-expander` to indicate and toggle hidden text.
 You can also make the expander appear inline by adding `.inline`.
 
 
-#### Using button styles with the details summary element
+## Using button styles with the details summary element
 
 You can add `.btn` and `.btn-*` classes to any
 [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)

modules/primer-buttons/stories.js

@@ -65,3 +65,8 @@ storiesOf('Button', module)
       <button className="btn btn-large btn-outline-blue" type="button">Large button button</button>
     </div>
   ))
+  .add('btn-link', () => (
+      <div className='p-4 d-flex flex-justify-between'>
+        <button className='btn-link'>Button</button>
+      </div
+  ))

modules/primer-markdown/lib/lists.scss

@@ -45,6 +45,10 @@
     margin-bottom: 0;
   }
 
+  li {
+    word-wrap: break-all;
+  }
+
   li > p {
     margin-top: $spacer-3;
   }

modules/primer-marketing-utilities/README.md

@@ -33,7 +33,7 @@ $ npm run build
 
 ## Documentation
 
-
+You can read more about utilities in the [docs folder](./docs/)
 
 ## License
 

modules/primer-marketing-utilities/docs/borders.md

@@ -1,7 +1,6 @@
 ---
 title: Borders
 status: New release
-status_issue: https://github.com/github/design-systems/issues/325
 ---
 
 The following border utilities are meant to used in addition to those within primer-core.
@@ -17,3 +16,22 @@ Top, right, bottom, and left border utilities are can be used responsively to ad
   .border-top-0
 </div>
 ```
+
+## Border Colors
+
+### White border with alpha transparency
+
+Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](/borders/#border-colors).
+
+```html
+<div class="bg-gray-dark text-white p-3 mb-2">
+  <span class="border border-white-fade p-2">
+    .border-white-fade .bg-gray-dark
+  </span>
+</div>
+<div class="bg-blue text-white p-3">
+  <span class="border border-white-fade p-2">
+    .border-white-fade .bg-blue
+  </span>
+</div>
+```

modules/primer-marketing-utilities/docs/layout.md

@@ -0,0 +1,33 @@
+---
+title: Layout
+status: New release
+---
+
+Marketing layout utilities build on top of [primer-core utilities](/layout/#position), adding the option of responsive positioning.
+
+{:toc}
+
+## Responsive position
+
+Use responsive position utilities to adjust the position of an element at different breakpoints.
+
+```html
+<div class="position-relative p-6 bg-gray">
+  <div class="d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2">
+    .position-md-absolute
+  </div>
+</div>
+
+<div class="float-left border m-3" style="width:100px; height:100px;">
+  default
+</div>
+<div class="float-left position-lg-relative border m-3" style="width:100px; height:100px; top:12px; left:12px;">
+  .position-lg-relative
+</div>
+<div class="float-left border m-3" style="width:100px; height:100px;">
+  default
+</div>
+<div class="float-left border m-3" style="width:100px; height:100px;">
+  default
+</div>
+```

modules/primer-marketing-utilities/index.scss

@@ -2,3 +2,4 @@
 // utilities
 @import "./lib/filters.scss";
 @import "./lib/borders.scss";
+@import "./lib/layout.scss";

modules/primer-marketing-utilities/lib/borders.scss

@@ -15,3 +15,6 @@
     .border-#{$breakpoint}-left-0   { border-left: 0 !important; }
   }
 }
+
+/* Use with .border to turn the border rgba white 0.15 */
+.border-white-fade { border-color: $white-fade-15 !important; }

modules/primer-marketing-utilities/lib/layout.scss

@@ -0,0 +1,15 @@
+// Layout utilities
+// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
+
+// Responsive position utilities
+
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    /* Set position to relative */
+    .position-#{$breakpoint}-relative { position: relative !important; }
+    /* Set position to absolute */
+    .position-#{$breakpoint}-absolute { position: absolute !important; }
+    /* Set position to fixed */
+    .position-#{$breakpoint}-fixed    { position: fixed !important; }
+  }
+}

modules/primer-marketing-utilities/stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Marketing Utilities', module)
+.add('Responsive borders', () => (
+  <div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
+))
+.add('border-white-fade', () => (
+<div className='bg-blue text-white p-3'>
+  <span className='border border-white-fade p-2'>
+    .border-white-fade
+  </span>
+</div>
+))
+.add('Responsive position', () => (
+  <div className='position-relative p-6 bg-gray'>
+    <div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
+      .position-md-absolute
+    </div>
+  </div>
+))

modules/primer-utilities/docs/animations.md

@@ -16,6 +16,13 @@ The `.anim-fade-in` class is used to fade in an element on the page. This will r
 <span class="anim-fade-in"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
 ```
 
+## Fade Out
+
+The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed.
+
+```html
+<span class="anim-fade-out"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
+
 ## Fade Up
 
 The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
@@ -55,3 +62,13 @@ The `.anim-pulse` class will pulse an element infinitely.
 ```html
 <%= octicon("mark-github", :class => "anim-pulse") %>
 ```
+
+## Hover animation
+
+The `.hover-grow` class will increase the scale of the element upon hover.
+
+```html
+<div class="Box hover-grow p-4">
+  <%= octicon("mark-github", :height => 32) %>
+</div>
+```

modules/primer-utilities/docs/borders.md

@@ -109,7 +109,7 @@ Use `border-dashed` to give an element a dashed border.
 
 ## Rounded corners
 
-Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px.
+Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
 
 ```html
 <div class="Box rounded-0 mb-2">
@@ -118,7 +118,10 @@ Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1`
 <div class="border rounded-1 mb-2">
   .rounded-1
 </div>
-<div class="border rounded-2">
+<div class="border rounded-2 mb-2">
   .rounded-2
 </div>
+<div class="border circle p-3" style="width: 100px; height: 100px;">
+  .circle
+</div>
 ```

modules/primer-utilities/docs/margin.md

@@ -31,7 +31,7 @@ Since margin utilities have many variations and will be used in many places, we
 
 _**Note:** The blue in the examples represents the element, and the orange represents the margin_
 
-## Uniform spacing
+## Uniform margins
 
 Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6.
 
@@ -59,7 +59,7 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
 </div>
 ```
 
-## Directional spacing
+## Directional margins
 
 Use directional utilities to apply margin to an individual side, or the X and Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 0-6.
 

modules/primer-utilities/docs/padding.md

@@ -30,7 +30,7 @@ Since padding utilities have many variations and will be used in many places, we
 
 _**Note:** The blue in the examples below represents the element, and the green represents the padding._
 
-## Uniform spacing
+## Uniform padding
 
 Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6.
 
@@ -58,7 +58,7 @@ Use uniform spacing utilities to apply equal padding to all sides of an element.
 </div>
 ```
 
-## Directional spacing
+## Directional padding
 
 Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6.