primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-29 17:12:27 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' into fix-storybook

Browse Source
This commit is contained in:
Shawn Allen 2018-05-11 11:59:31 -07:00 committed by GitHub
commit 1a0637f05f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
64 changed files with 444 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
CHANGELOG.md
View File

@ -1,3 +1,30 @@
# 10.5.0
#### :rocket: Enhancement
* [#487](https://github.com/primer/primer/pull/487) Import Pagination Component. ([@emplums](https://github.com/emplums))
* [#474](https://github.com/primer/primer/pull/474) Add text-mono utility class. ([@emplums](https://github.com/emplums))
* [#456](https://github.com/primer/primer/pull/456) Adding height-fit utility class. ([@jonrohan](https://github.com/jonrohan))
#### :bug: Bug Fix
* [#465](https://github.com/primer/primer/pull/465) Fix Popover--right-bottom caret positioning. ([@shawnbot](https://github.com/shawnbot))
* [#458](https://github.com/primer/primer/pull/458) Fix broken pointer from packages to modules. ([@tysongach](https://github.com/tysongach))
#### :memo: Documentation
* [#486](https://github.com/primer/primer/pull/486) Documenting the text-inheritance color utility. ([@jonrohan](https://github.com/jonrohan))
* [#481](https://github.com/primer/primer/pull/481) Styleguide Polish. ([@emplums](https://github.com/emplums))
* [#464](https://github.com/primer/primer/pull/464) Fix markdown stories. ([@shawnbot](https://github.com/shawnbot))
* [#455](https://github.com/primer/primer/pull/455) Add colorizeTooltip deprecation warning. ([@jonrohan](https://github.com/jonrohan))
* [#452](https://github.com/primer/primer/pull/452) Update dead links in CONTRIBUTING.md. ([@agisilaos](https://github.com/agisilaos))
#### Committers: 7
- Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos))
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
- Emily ([emplums](https://github.com/emplums))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Tyson Gach ([tysongach](https://github.com/tysongach))
- [muan](https://github.com/muan)
# 10.4.0 (2018-03-14) # 10.4.0 (2018-03-14)
#### :rocket: Enhancement #### :rocket: Enhancement

4
modules/primer-alerts/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.5.5", "version": "1.5.6",
"name": "primer-alerts", "name": "primer-alerts",
"description": "Flash messages, or alerts, inform users of successful or pending actions.", "description": "Flash messages, or alerts, inform users of successful or pending actions.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -31,7 +31,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"alerts", "alerts",

4
modules/primer-avatars/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.5.2", "version": "1.5.3",
"name": "primer-avatars", "name": "primer-avatars",
"description": "Basic styles for user profile avatars.", "description": "Basic styles for user profile avatars.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,7 +28,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"avatars", "avatars",

4
modules/primer-base/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.7.0", "version": "1.7.1",
"name": "primer-base", "name": "primer-base",
"description": "CSS to reset the browsers default styles", "description": "CSS to reset the browsers default styles",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -32,7 +32,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

4
modules/primer-blankslate/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.4.5", "version": "1.4.6",
"name": "primer-blankslate", "name": "primer-blankslate",
"description": "Blankslates are for when there is a lack of content within a page or section.", "description": "Blankslates are for when there is a lack of content within a page or section.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,7 +28,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

10
modules/primer-box/README.md
View File

@ -259,7 +259,7 @@ Use `Box--danger` to apply a red border to the outside of the box. This theme is
</div> </div>
``` ```
`Box-danger` is often paired with a red heading. See the [subhead](/styleguide/css/styles/product/components/subhead) docs for more information. `Box-danger` is often paired with a red heading. See the [subhead](../subhead) docs for more information.
```html ```html
<div class="Subhead border-bottom-0"> <div class="Subhead border-bottom-0">
@ -356,7 +356,7 @@ Use the `border-dashed` utility to apply a dashed border to a box.
## Boxes with flash alerts ## Boxes with flash alerts
Use `flash-full` for flash alert inside a box to remove the rounded corners. Place the flash alert above the `Box-body` and underneath the `Box-header`. Use `flash-full` for flash alert inside a box to remove the rounded corners. Place the flash alert above the `Box-body` and underneath the `Box-header`.
Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](/alerts) for more information. Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](../alerts) for more information.
```html ```html
<div class="Box"> <div class="Box">
@ -455,7 +455,7 @@ Use `Counter--gray-dark` for a counter with a dark gray background and white tex
## Form elements and buttons in boxes ## Form elements and buttons in boxes
To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples: To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples:
Use [flexbox utilities](../utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right. Use [flexbox utilities](../../utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
```html ```html
<div class="Box Box--condensed"> <div class="Box Box--condensed">
@ -561,7 +561,7 @@ You can put forms in boxes. Often form submission buttons are aligned to the bot
</div> </div>
``` ```
When a box is all by itself centered on a page you can use [column widths](/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../utilities/typography) instead of the built in box title styles. When a box is all by itself centered on a page you can use [column widths](../../objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../../utilities/typography) instead of the built in box title styles.
```html ```html
<div class="Box Box--spacious col-6 mx-auto text-center"> <div class="Box Box--spacious col-6 mx-auto text-center">
@ -582,7 +582,7 @@ When a box is all by itself centered on a page you can use [column widths](/grid
</div> </div>
``` ```
Box patterns can also be made with, and modified with [border utilities](../utilities/borders). Box patterns can also be made with, and modified with [border utilities](../../utilities/borders).
<!-- %enddocs --> <!-- %enddocs -->

4
modules/primer-box/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "2.5.5", "version": "2.5.6",
"name": "primer-box", "name": "primer-box",
"description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.", "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,7 +28,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

4
modules/primer-branch-name/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.0.3", "version": "1.0.4",
"name": "primer-branch-name", "name": "primer-branch-name",
"description": "A nice, consistent way to display branch names.", "description": "A nice, consistent way to display branch names.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint test-docs" "test": "../../script/npm-run-all build lint test-docs"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"github", "github",

4
modules/primer-breadcrumb/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.5.1", "version": "1.5.2",
"name": "primer-breadcrumb", "name": "primer-breadcrumb",
"description": "Breadcrumb navigation for pages with parents / grandparents.", "description": "Breadcrumb navigation for pages with parents / grandparents.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint test-docs" "test": "../../script/npm-run-all build lint test-docs"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"breadcrumb", "breadcrumb",

2
modules/primer-buttons/README.md
View File

@ -175,7 +175,7 @@ You can easily append a count to a **small button**. Add the `.with-count` class
</div> </div>
``` ```
You can also use the [counter](../../product/components/labels) component within buttons: You can also use the [counter](../labels#counters) component within buttons:
```html ```html
<button class="btn" type="button"> <button class="btn" type="button">

4
modules/primer-buttons/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "2.5.3", "version": "2.5.4",
"name": "primer-buttons", "name": "primer-buttons",
"description": "A collection of buttons used for primary and secondary actions.", "description": "A collection of buttons used for primary and secondary actions.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,7 +28,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

1
modules/primer-core/index.scss
View File

@ -22,6 +22,7 @@
@import "primer-forms/index.scss"; @import "primer-forms/index.scss";
@import "primer-layout/index.scss"; @import "primer-layout/index.scss";
@import "primer-navigation/index.scss"; @import "primer-navigation/index.scss";
@import "primer-pagination/index.scss";
@import "primer-tooltips/index.scss"; @import "primer-tooltips/index.scss";
@import "primer-truncate/index.scss"; @import "primer-truncate/index.scss";

27
modules/primer-core/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "6.8.0", "version": "6.9.0",
"name": "primer-core", "name": "primer-core",
"description": "Primer's core modules", "description": "Primer's core modules",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -27,17 +27,18 @@
"lint": "../../script/lint-scss" "lint": "../../script/lint-scss"
}, },
"dependencies": { "dependencies": {
"primer-base": "1.7.0", "primer-base": "1.7.1",
"primer-box": "2.5.5", "primer-box": "2.5.6",
"primer-breadcrumb": "1.5.1", "primer-breadcrumb": "1.5.2",
"primer-buttons": "2.5.3", "primer-buttons": "2.5.4",
"primer-forms": "2.1.0", "primer-forms": "2.1.1",
"primer-layout": "1.4.5", "primer-layout": "1.4.6",
"primer-navigation": "1.5.3", "primer-navigation": "1.5.4",
"primer-support": "4.5.2", "primer-pagination": "1.0.0",
"primer-table-object": "1.4.5", "primer-support": "4.5.3",
"primer-tooltips": "1.5.3", "primer-table-object": "1.4.6",
"primer-truncate": "1.4.5", "primer-tooltips": "1.5.4",
"primer-utilities": "4.9.0" "primer-truncate": "1.4.6",
"primer-utilities": "4.10.0"
} }
} }

2
modules/primer-forms/README.md
View File

@ -176,7 +176,7 @@ Primer adds light `height` and `vertical-align` styles to `<select>`s for all br
##### Small ##### Small
Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons). Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).
```html ```html
<select class="form-select select-sm" aria-label="Preference"> <select class="form-select select-sm" aria-label="Preference">

4
modules/primer-forms/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "2.1.0", "version": "2.1.1",
"name": "primer-forms", "name": "primer-forms",
"description": "Style individual form controls and utilize common layouts.", "description": "Style individual form controls and utilize common layouts.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,7 +28,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

4
modules/primer-labels/README.md
View File

@ -137,7 +137,7 @@ Use the `Counter` component to add a count to navigational elements and buttons.
<span class="Counter Counter--gray-light">64</span> <span class="Counter Counter--gray-light">64</span>
``` ```
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](../../core/components/navigation). Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](../navigation).
```html title="Counter in tabs" ```html title="Counter in tabs"
<div class="tabnav"> <div class="tabnav">
@ -148,7 +148,7 @@ Use the `Counter` in navigation to indicate the number of items without the user
</div> </div>
``` ```
Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](../../core/components/box). Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](../box).
```html title="Counter in Box headers" ```html title="Counter in Box headers"
<div class="Box"> <div class="Box">

4
modules/primer-labels/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.5.5", "version": "1.5.6",
"name": "primer-labels", "name": "primer-labels",
"description": "Labels add metatdata or indicate status of items and navigational elements.", "description": "Labels add metatdata or indicate status of items and navigational elements.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,7 +28,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

2
modules/primer-layout/README.md
View File

@ -115,7 +115,7 @@ In practice, your columns will look like the example below.
##### Centered ##### Centered
Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class. Columns can be centered by adding `.centered` to the `.column` class.
```html title="Grid centered" ```html title="Grid centered"
<div class="columns"> <div class="columns">

8
modules/primer-layout/docs/grid.md
View File

@ -98,7 +98,7 @@ Column widths can be used with any other block or inline-block elements to add p
## Offset columns ## Offset columns
Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](/styleguide/css/modules/grid#responsive-grids). Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](../grid#responsive-grids).
```html title="Offset columns" ```html title="Offset columns"
<div class="clearfix"> <div class="clearfix">
@ -188,7 +188,7 @@ You can use column widths and other utilities on elements such as lists to creat
## Display table grids ## Display table grids
Using [display table utilities](/styleguide/css/utilities/layout#display) with columns gives you some alternative layout options. Using [display table utilities](../../utilities/layout#display) with columns gives you some alternative layout options.
A useful example is being able to keep the height of the container equal across a row when the length of content may differ. A useful example is being able to keep the height of the container equal across a row when the length of content may differ.
@ -205,7 +205,7 @@ A useful example is being able to keep the height of the container equal across
</div> </div>
</div> </div>
``` ```
You can also create an alternative [media object](/styleguide/css/utilities/layout#the-media-object) layout with `.display-table` and column widths. You can also create an alternative [media object](../../utilities/layout#the-media-object) layout with `.display-table` and column widths.
```html title="Table grid alternative" ```html title="Table grid alternative"
<div class="d-table col-12"> <div class="d-table col-12">
@ -238,7 +238,7 @@ Note that table cells will fill the width of their container even when the total
## Flexbox grids ## Flexbox grids
You can use [flex utilities](/styleguide/css/utilities/flexbox) on the container and columns to create a flexbox grid. You can use [flex utilities](../../utilities/flexbox) on the container and columns to create a flexbox grid.
This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts. This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts.

4
modules/primer-layout/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.4.5", "version": "1.4.6",
"name": "primer-layout", "name": "primer-layout",
"description": "Containers, rows, and columns for creating page layout.", "description": "Containers, rows, and columns for creating page layout.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

4
modules/primer-markdown/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "3.7.5", "version": "3.7.6",
"name": "primer-markdown", "name": "primer-markdown",
"description": "GitHub stylesheets for rendering markdown.", "description": "GitHub stylesheets for rendering markdown.",
"homepage": "https://github.com/primer/primer-markdown", "homepage": "https://github.com/primer/primer-markdown",
@ -28,7 +28,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"github", "github",

4
modules/primer-marketing-buttons/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.0.4", "version": "1.0.5",
"name": "primer-marketing-buttons", "name": "primer-marketing-buttons",
"description": "Buttons for marketing websites at GitHub", "description": "Buttons for marketing websites at GitHub",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint test-docs" "test": "../../script/npm-run-all build lint test-docs"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"peerDependencies": { "peerDependencies": {
"primer-buttons": ">=2.5.0" "primer-buttons": ">=2.5.0"

2
modules/primer-marketing-support/README.md
View File

@ -48,7 +48,7 @@ Starting where the `primer-core` spacing scale ends at spacer 6, the marketing s
| 11 | 112 | | 11 | 112 |
| 12 | 128 | | 12 | 128 |
See [primer-marketing-utilities](../primer-marketing-utilities) for related spacing utilities. See [primer-marketing-support](../../support/marketing-variables/) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../../utilities/marketing-margin) and [padding](../../utilities/marketing-padding).
<!-- %enddocs --> <!-- %enddocs -->

2
modules/primer-marketing-support/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.5.0", "version": "1.5.1",
"name": "primer-marketing-support", "name": "primer-marketing-support",
"description": "Sass variables, mixins, and functions for use in our components.", "description": "Sass variables, mixins, and functions for use in our components.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",

6
modules/primer-marketing-type/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.4.5", "version": "1.4.6",
"name": "primer-marketing-type", "name": "primer-marketing-type",
"description": "Typography for marketing websites at GitHub", "description": "Typography for marketing websites at GitHub",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -29,8 +29,8 @@
"test": "../../script/npm-run-all build lint test-docs" "test": "../../script/npm-run-all build lint test-docs"
}, },
"dependencies": { "dependencies": {
"primer-marketing-support": "1.5.0", "primer-marketing-support": "1.5.1",
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"css", "css",

2
modules/primer-marketing-utilities/docs/borders.md
View File

@ -21,7 +21,7 @@ Top, right, bottom, and left border utilities are can be used responsively to ad
### White border with alpha transparency ### 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). 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 ```html
<div class="bg-gray-dark text-white p-3 mb-2"> <div class="bg-gray-dark text-white p-3 mb-2">

2
modules/primer-marketing-utilities/docs/layout.md
View File

@ -3,7 +3,7 @@ title: Layout
status: New release status: New release
--- ---
Marketing layout utilities build on top of [primer-core utilities](/layout/#position), adding the option of responsive positioning. Marketing layout utilities build on top of [primer-core utilities](../../utilities/layout/#position), adding the option of responsive positioning.
{:toc} {:toc}

5
modules/primer-marketing-utilities/docs/margin.md
View File

@ -4,7 +4,8 @@ status: New release
status_issue: https://github.com/github/design-systems/issues/378 status_issue: https://github.com/github/design-systems/issues/378
--- ---
Marketing margin utilities extend [core margin utilities](../../primer-marketing-support/docs/spacing) across the y-axis only. The [marketing scale](../../primer-marketing-support) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12. Marketing margin utilities extend [core margin utilities](../../support/spacing) across the y-axis only. The [marketing scale](../../support/marketing-variables/#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
## Y-axis margin utilities ## Y-axis margin utilities
@ -24,7 +25,7 @@ Use marketing margin utilities to apply margin to top, bottom, or both y-axis of
## Responsive y-axis margin utilities ## Responsive y-axis margin utilities
All marketing margin utilities can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. All marketing margin utilities can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
```html ```html
<div class="d-inline-block margin-orange"> <div class="d-inline-block margin-orange">

4
modules/primer-marketing-utilities/docs/padding.md
View File

@ -4,7 +4,7 @@ status: New release
status_issue: https://github.com/github/design-systems/issues/378 status_issue: https://github.com/github/design-systems/issues/378
--- ---
Marketing padding utilities extend [core margin utilities](../../primer-marketing-support/docs/spacing) across the y-axis only. The [marketing scale](../../primer-marketing-support) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12. Marketing padding utilities extend [core margin utilities](../../support/spacing) across the y-axis only. The [marketing scale](../../support/marketing-variables/#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
## Y-axis padding utilities ## Y-axis padding utilities
@ -24,7 +24,7 @@ Use marketing padding utilities to apply padding to top, bottom, or both y-axis
## Responsive y-axis padding utilities ## Responsive y-axis padding utilities
All marketing padding utilities can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. All marketing padding utilities can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
```html ```html
<div class="d-inline-block margin-orange"> <div class="d-inline-block margin-orange">

6
modules/primer-marketing-utilities/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.6.1", "version": "1.6.2",
"name": "primer-marketing-utilities", "name": "primer-marketing-utilities",
"description": "Marketing specific immutable, atomic CSS classes", "description": "Marketing specific immutable, atomic CSS classes",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -33,8 +33,8 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-marketing-support": "1.5.0", "primer-marketing-support": "1.5.1",
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

18
modules/primer-marketing/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "6.2.0", "version": "6.2.1",
"name": "primer-marketing", "name": "primer-marketing",
"description": "Primer marketing packages", "description": "Primer marketing packages",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -27,13 +27,13 @@
"lint": "../../script/lint-scss" "lint": "../../script/lint-scss"
}, },
"dependencies": { "dependencies": {
"primer-marketing-buttons": "1.0.4", "primer-marketing-buttons": "1.0.5",
"primer-marketing-support": "1.5.0", "primer-marketing-support": "1.5.1",
"primer-marketing-type": "1.4.5", "primer-marketing-type": "1.4.6",
"primer-marketing-utilities": "1.6.1", "primer-marketing-utilities": "1.6.2",
"primer-page-headers": "1.4.5", "primer-page-headers": "1.4.6",
"primer-page-sections": "1.4.5", "primer-page-sections": "1.4.6",
"primer-support": "4.5.2", "primer-support": "4.5.3",
"primer-tables": "1.4.5" "primer-tables": "1.4.6"
} }
} }

4
modules/primer-navigation/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.5.3", "version": "1.5.4",
"name": "primer-navigation", "name": "primer-navigation",
"description": "Singular purpose and flexible navigation elements.", "description": "Singular purpose and flexible navigation elements.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,7 +28,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

6
modules/primer-page-headers/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.4.5", "version": "1.4.6",
"name": "primer-page-headers", "name": "primer-page-headers",
"description": "Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.", "description": "Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,8 +28,8 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-marketing-support": "1.5.0", "primer-marketing-support": "1.5.1",
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"css", "css",

6
modules/primer-page-sections/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.4.5", "version": "1.4.6",
"name": "primer-page-sections", "name": "primer-page-sections",
"description": "Styles to create distinct sections of marketing pages at GitHub.", "description": "Styles to create distinct sections of marketing pages at GitHub.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,8 +28,8 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-marketing-support": "1.5.0", "primer-marketing-support": "1.5.1",
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"css", "css",

21
modules/primer-pagination/LICENSE Normal file
View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2018 GitHub Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

88
modules/primer-pagination/README.md Normal file
View File

@ -0,0 +1,88 @@
# Primer Pagination
[![npm version](https://img.shields.io/npm/v/primer-pagination.svg)](https://www.npmjs.org/package/primer-pagination)
[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
> Pagination component for applying button styles to a connected set of links that go to related pages
This repository is a module of the full [primer][primer] repository.
## Install
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-pagination` with this command.
```
$ npm install --save primer-pagination
```
## Usage
The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
```scss
@import "primer-pagination/index.scss";
```
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
## Build
For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
```
$ npm run build
```
## Documentation
<!-- %docs
title: Pagination
status: New Release
-->
Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
{:toc}
## Previous/next pagination
You can make a very simple pagination container with just the Previous and Next buttons. Add the class `disabled` to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
```html
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page disabled">Previous</span>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
</div>
</nav>
```
## Numbered pagination
For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.
To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the class `disabled` to the Previous button if you're on the first page. Apply the class `current` to the current numbered page.
As always, make sure to include the appropriate `aria` attributes to make the element accessible.
- Add `aria-label="Pagination"` to the the `paginate-container` element.
- Add `aria-current="true"` to the current page marker.
- Add `aria-label="Page X"` to each anchor link.
```html
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page disabled">Previous</span>
<em class="current selected" aria-current="true">1</em>
<a href="#url" aria-label="Page 2">2</a>
<a href="#url" aria-label="Page 3">3</a>
<span class="gap">…</span>
<a href="#url" aria-label="Page 8">8</a>
<a href="#url" aria-label="Page 9">9</a>
<a href="#url" aria-label="Page 10">10</a>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
</div>
</nav>
```
<!-- %enddocs -->

3
modules/primer-pagination/index.scss Normal file
View File

@ -0,0 +1,3 @@
// support files
@import "primer-support/index.scss";
@import "./lib/pagination.scss";

74
modules/primer-pagination/lib/pagination.scss Normal file
View File

@ -0,0 +1,74 @@
// Needs refactoring
// stylelint-disable selector-max-type
.pagination {
@include clearfix;
a,
span,
em {
position: relative;
float: left;
padding: 7px 12px;
margin-left: -1px;
font-size: 13px;
font-style: normal;
font-weight: $font-weight-bold;
color: $text-blue;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
background: $bg-white; // Reset default gradient backgrounds and colors
border: $border-width $border-style $border-gray;
&:first-child {
margin-left: 0;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
&:last-child {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
// Bring any button into forefront for proper borders given negative margin below
&:hover,
&:focus {
z-index: 2;
text-decoration: none;
background-color: darken($gray-100, 2%);
border-color: $border-gray;
}
}
.selected { z-index: 3; }
.current,
.current:hover {
z-index: 3;
color: $text-white;
background-color: $bg-blue;
border-color: $border-blue;
}
.gap,
.disabled,
.gap:hover,
.disabled:hover {
color: $gray-300;
cursor: default;
background-color: $bg-gray-light;
}
}
// Unified centered pagination across the site
.paginate-container {
margin-top: 20px;
margin-bottom: 15px;
text-align: center;
.pagination {
display: inline-block;
}
}

33
modules/primer-pagination/package.json Normal file
View File

@ -0,0 +1,33 @@
{
"version": "1.0.0",
"name": "primer-pagination",
"description": "Pagination component for applying button styles to a connected set of links that go to related pages",
"homepage": "http://primer.github.io/",
"primer": {
"category": "product",
"module_type": "components"
},
"author": "GitHub, Inc.",
"license": "MIT",
"style": "index.scss",
"sass": "index.scss",
"main": "build/index.js",
"repository": "https://github.com/primer/primer/tree/master/modules/primer-pagination",
"bugs": {
"url": "https://github.com/primer/primer/issues"
},
"scripts": {
"test-docs": "../../script/test-docs",
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
},
"dependencies": {
"primer-support": "4.5.3"
},
"keywords": [
"github",
"primer"
]
}

10
modules/primer-pagination/stories.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
const stories = storiesOf('Pagination', module)
storiesFromMarkdown(require.context('.', true, /\.md$/))
.forEach(({title, story}) => {
stories.add(title, story)
})

4
modules/primer-popover/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "0.0.6", "version": "0.1.0",
"name": "primer-popover", "name": "primer-popover",
"description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.", "description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -24,7 +24,7 @@
"test": "../../script/npm-run-all build lint test-docs" "test": "../../script/npm-run-all build lint test-docs"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"peerDependencies": { "peerDependencies": {
"primer-box": ">=2.5.0" "primer-box": ">=2.5.0"

20
modules/primer-product/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "5.6.2", "version": "5.6.3",
"name": "primer-product", "name": "primer-product",
"description": "Primer's product modules", "description": "Primer's product modules",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -27,14 +27,14 @@
"lint": "../../script/lint-scss" "lint": "../../script/lint-scss"
}, },
"dependencies": { "dependencies": {
"primer-alerts": "1.5.5", "primer-alerts": "1.5.6",
"primer-avatars": "1.5.2", "primer-avatars": "1.5.3",
"primer-blankslate": "1.4.5", "primer-blankslate": "1.4.6",
"primer-branch-name": "1.0.3", "primer-branch-name": "1.0.4",
"primer-labels": "1.5.5", "primer-labels": "1.5.6",
"primer-markdown": "3.7.5", "primer-markdown": "3.7.6",
"primer-popover": "0.0.6", "primer-popover": "0.1.0",
"primer-subhead": "1.0.3", "primer-subhead": "1.0.4",
"primer-support": "4.5.2" "primer-support": "4.5.3"
} }
} }

4
modules/primer-subhead/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.0.3", "version": "1.0.4",
"name": "primer-subhead", "name": "primer-subhead",
"description": "The Subhead is a simple header with a bottom border. It&#39;s designed to be used on settings and configuration pages.", "description": "The Subhead is a simple header with a bottom border. It&#39;s designed to be used on settings and configuration pages.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -24,7 +24,7 @@
"test": "../../script/npm-run-all build lint test-docs" "test": "../../script/npm-run-all build lint test-docs"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"github", "github",

2
modules/primer-support/docs/breakpoints.md
View File

@ -19,7 +19,7 @@ We use abbreviations for each breakpoint to keep the class names concise. This a
<small>**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized.</small> <small>**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized.</small>
Responsive styles are available for [margin](./utilities/margin#responsive-margin), [padding](./utilities/padding#responsive-padding), [layout](./utilities/layout), [flexbox](.utilities/flexbox#responsive-flex-utilities), and the [grid](./objects/grid#responsive-grids) system. Responsive styles are available for [margin](../../utilities/margin/#responsive-margins), [padding](../../utilities/padding#responsive-padding), [layout](../../utilities/layout), [flexbox](../../utilities/flexbox#responsive-flex-utilities), and the [grid](../../objects/grid#responsive-grids) system.
## Breakpoint variables ## Breakpoint variables

4
modules/primer-support/docs/spacing.md
View File

@ -19,9 +19,9 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
| $spacer-5 | 5 | 32px | | $spacer-5 | 5 | 32px |
| $spacer-6 | 6 | 40px | | $spacer-6 | 6 | 40px |
These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities. These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](../../utilities/margin) and [padding](../../utilities/padding) utilities.
See [primer-marketing-support](../primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../primer-marketing-utilities/docs/margin.md) and [padding](../primer-marketing-utilities/docs/padding.md). See [primer-marketing-support](../../support/marketing-variables/) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../../utilities/marketing-margin) and [padding](../../utilities/marketing-padding).
## Em-based spacing ## Em-based spacing
Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers. Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers.

6
modules/primer-support/docs/typography.md
View File

@ -11,7 +11,7 @@ source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/
The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible. The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
Font sizes are smaller on mobile and scale up at the `md` [breakpoint](#breakpoints) to be larger on desktop. Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./../breakpoints) to be larger on desktop.
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height | | Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
@ -24,7 +24,7 @@ Font sizes are smaller on mobile and scale up at the `md` [breakpoint](#breakpoi
| 5 | 14px | 14px | 17.5 | 21 | | 5 | 14px | 14px | 17.5 | 21 |
| 6 | 12px | 12px | 15 | 18 | | 6 | 12px | 12px | 15 | 18 |
The typography scale is used to create [typography utilities](./utilities/typography). The typography scale is used to create [typography utilities](../../utilities/typography).
## Typography variables ## Typography variables
@ -63,7 +63,7 @@ $lh-default: 1.5 !default;
``` ```
## Typography Mixins ## Typography Mixins
Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](./utilities/typography#heading-utilities) which requires no additional CSS. Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](../../utilities/typography/#heading-utilities). which requires no additional CSS.
Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example: Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:

2
modules/primer-support/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "4.5.2", "version": "4.5.3",
"name": "primer-support", "name": "primer-support",
"description": "Sass variables, mixins, and functions for use in our components.", "description": "Sass variables, mixins, and functions for use in our components.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",

4
modules/primer-table-object/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.4.5", "version": "1.4.6",
"name": "primer-table-object", "name": "primer-table-object",
"description": "A module for creating dynamically resizable elements that always sit on the same horizontal line.", "description": "A module for creating dynamically resizable elements that always sit on the same horizontal line.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint test-docs" "test": "../../script/npm-run-all build lint test-docs"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

6
modules/primer-tables/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.4.5", "version": "1.4.6",
"name": "primer-tables", "name": "primer-tables",
"description": "Styles to display tabular data for marketing websites at GitHub.", "description": "Styles to display tabular data for marketing websites at GitHub.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,8 +28,8 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-marketing-support": "1.5.0", "primer-marketing-support": "1.5.1",
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"css", "css",

4
modules/primer-tooltips/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.5.3", "version": "1.5.4",
"name": "primer-tooltips", "name": "primer-tooltips",
"description": "Add tooltips built entirely in CSS to nearly any element.", "description": "Add tooltips built entirely in CSS to nearly any element.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint test-docs" "test": "../../script/npm-run-all build lint test-docs"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

4
modules/primer-truncate/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.4.5", "version": "1.4.6",
"name": "primer-truncate", "name": "primer-truncate",
"description": "Shorten text with an ellipsis.", "description": "Shorten text with an ellipsis.",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint test-docs" "test": "../../script/npm-run-all build lint test-docs"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

16
modules/primer-utilities/docs/colors.md
View File

@ -13,7 +13,7 @@ Use color utilities to apply color to the background of elements, text, and bord
## Background colors ## 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](/styleguide/css/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](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/primer/principles/accessibility).
### Gray ### Gray
@ -127,10 +127,20 @@ Background colors are most commonly used for filling large blocks of content or
## Text colors ## Text colors
Use text color utilities to set text or [octicons](/styleguide/css/styles/core/components/octicons) 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](/styleguide/css/principles/accessibility). Use text color utilities to set text or [octicons](/styleguide/css/styles/core/components/octicons) 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](/primer/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**. 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**.
### Text color inheritance
You can set the color inheritance on an element by using the `text-inherit` class.
```html
<div class="text-purple">
This text is purple, <a href="#" class="text-inherit">including the link</a>
</div>
```
### Text on white background ### Text on white background
```html ```html
@ -229,4 +239,4 @@ Use `link-hover-blue` to make any text color used with links to turn blue on hov
## Border colors ## Border colors
Border colors are documented on the [border utilities page](/styleguide/css/styles/core/utilities/borders#border-width-style-and-color-utilities). Border colors are documented on the [border utilities page](../..//utilities/borders#border-width-style-and-color-utilities).

2
modules/primer-utilities/docs/flexbox.md
View File

@ -576,7 +576,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros
## Responsive flex utilities ## Responsive flex utilities
All flexbox utilities can be adjust per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formulas: All flexbox utilities can be adjust per [breakpoint](../../objects/grid#breakpoints) using the following formulas:
- `d-[breakpoint]-[property]` for `display` - `d-[breakpoint]-[property]` for `display`
- `flex-[breakpoint]-[property]-[behavior]` for various flex properties - `flex-[breakpoint]-[property]-[behavior]` for various flex properties

6
modules/primer-utilities/docs/layout.md
View File

@ -31,7 +31,7 @@ Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-in
</div> </div>
``` ```
There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](/styleguide/css/modules/grid#column-widths). There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](../../objects/grid#column-widths).
```html ```html
<div class="d-table table-fixed width-full"> <div class="d-table table-fixed width-full">
@ -45,7 +45,7 @@ There are known issues with using `display:table` and wrapping long strings, par
``` ```
### Responsive display ### Responsive display
A selection of display utilities are able to be applied or changed per [breakpoint](/styleguide/css/modules/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up. A selection of display utilities are able to be applied or changed per [breakpoint](../../objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
In the following example, the `ul` element switches from `display: block` on mobile to `display: inline-block` at the `md` breakpoint, while the list items remain inline. In the following example, the `ul` element switches from `display: block` on mobile to `display: inline-block` at the `md` breakpoint, while the list items remain inline.
@ -97,7 +97,7 @@ Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
</div> </div>
``` ```
### Responsive floats ### Responsive floats
Float utilities can be applied or changed per [breakpoint](/styleguide/css/modules/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint. Float utilities can be applied or changed per [breakpoint](../../objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
Each responsive float utility is applied to the specified breakpoint and up, using the following formula: `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear. Each responsive float utility is applied to the specified breakpoint and up, using the following formula: `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear.

4
modules/primer-utilities/docs/margin.md
View File

@ -3,7 +3,7 @@ title: Margin
status: Stable status: Stable
--- ---
Margin utilities are based on a global [spacing scale](/styleguide/css/styles/core/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles. Margin utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
{:toc} {:toc}
@ -103,7 +103,7 @@ Reset margins built into typography elements or other components with `m-0`, `mt
## Responsive margins ## Responsive margins
All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
```html ```html
<div class="d-inline-block margin-orange"> <div class="d-inline-block margin-orange">

6
modules/primer-utilities/docs/padding.md
View File

@ -3,7 +3,7 @@ title: Padding
status: Stable status: Stable
--- ---
Padding utilities are based on a global [spacing scale](/styleguide/css/styles/core/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles. Padding utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
{:toc} {:toc}
@ -85,7 +85,7 @@ Use directional utilities to apply padding to an individual side, or the X and Y
## Responsive padding ## Responsive padding
All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/core/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. All padding utilities can be adjusted per [breakpoint](../../support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
```html ```html
<div class="px-sm-2 px-lg-4 d-inline-block padding-green"> <div class="px-sm-2 px-lg-4 d-inline-block padding-green">
@ -99,7 +99,7 @@ All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/co
`.p-responsive` is a padding class that adds padding on the left and right sides of an element. On small screens, it gives the element padding of `$spacer-3`, on mid-sized screens it gives the element padding of `$spacer-6`, and on large screens, it gives the element padding of `$spacer-3`. `.p-responsive` is a padding class that adds padding on the left and right sides of an element. On small screens, it gives the element padding of `$spacer-3`, on mid-sized screens it gives the element padding of `$spacer-6`, and on large screens, it gives the element padding of `$spacer-3`.
It is intended to be used with [container styles](/styleguide/css/styles/core/objects/grid#containers) It is intended to be used with [container styles](../../objects/grid#containers)
```html ```html
<div class="container-lg p-responsive"> <div class="container-lg p-responsive">

5
modules/primer-utilities/docs/typography.md
View File

@ -3,11 +3,11 @@ title: Typography
status: Stable status: Stable
--- ---
Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/styleguide/css/styles/core/support/typography#typography-variables) that you can use in components or custom CSS. Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/primer/support/typography/#typography-variables) that you can use in components or custom CSS.
{:toc} {:toc}
Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/styleguide/css/styles/core/support/breakpoints) to be larger on desktop. Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/primer/support/breakpoints) to be larger on desktop.
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height | | Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
@ -93,6 +93,7 @@ Change the font weight, styles, and alignment with these utilities.
<p class="text-emphasized">Emphasized</p> <p class="text-emphasized">Emphasized</p>
<p class="text-small">Small</p> <p class="text-small">Small</p>
<p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p> <p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
<p class="text-mono">Monospace</p>
``` ```
## Text alignment ## Text alignment

5
modules/primer-utilities/lib/typography.scss
View File

@ -214,3 +214,8 @@
.text-shadow-light { .text-shadow-light {
text-shadow: 0 1px 0 rgba($white, 0.5); text-shadow: 0 1px 0 rgba($white, 0.5);
} }
/* Set to monospace font */
.text-mono {
font-family: $mono-font;
}

4
modules/primer-utilities/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "4.9.0", "version": "4.10.0",
"name": "primer-utilities", "name": "primer-utilities",
"description": "Immutable, atomic CSS classes to rapidly build product", "description": "Immutable, atomic CSS classes to rapidly build product",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-support": "4.5.2" "primer-support": "4.5.3"
}, },
"keywords": [ "keywords": [
"primer", "primer",

1
modules/primer-utilities/stories/Typography.js
View File

@ -57,6 +57,7 @@ storiesOf('Typography utilities', module)
<p className='text-emphasized'>text-emphasized</p> <p className='text-emphasized'>text-emphasized</p>
<p className='text-small'>text-small</p> <p className='text-small'>text-small</p>
<p className='lead'>lead</p> <p className='lead'>lead</p>
<p className='text-mono'>text-mono</p>
</div> </div>
)) ))
.add('text alignment', () => ( .add('text alignment', () => (

63
modules/primer/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "10.4.0", "version": "10.5.0",
"name": "primer", "name": "primer",
"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.", "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": "http://primer.github.io/", "homepage": "http://primer.github.io/",
@ -28,36 +28,37 @@
"test": "../../script/npm-run-all build lint" "test": "../../script/npm-run-all build lint"
}, },
"dependencies": { "dependencies": {
"primer-alerts": "1.5.5", "primer-alerts": "1.5.6",
"primer-avatars": "1.5.2", "primer-avatars": "1.5.3",
"primer-base": "1.7.0", "primer-base": "1.7.1",
"primer-blankslate": "1.4.5", "primer-blankslate": "1.4.6",
"primer-box": "2.5.5", "primer-box": "2.5.6",
"primer-branch-name": "1.0.3", "primer-branch-name": "1.0.4",
"primer-breadcrumb": "1.5.1", "primer-breadcrumb": "1.5.2",
"primer-buttons": "2.5.3", "primer-buttons": "2.5.4",
"primer-core": "6.8.0", "primer-core": "6.9.0",
"primer-forms": "2.1.0", "primer-forms": "2.1.1",
"primer-labels": "1.5.5", "primer-labels": "1.5.6",
"primer-layout": "1.4.5", "primer-layout": "1.4.6",
"primer-markdown": "3.7.5", "primer-markdown": "3.7.6",
"primer-marketing": "6.2.0", "primer-marketing": "6.2.1",
"primer-marketing-buttons": "1.0.4", "primer-marketing-buttons": "1.0.5",
"primer-marketing-support": "1.5.0", "primer-marketing-support": "1.5.1",
"primer-marketing-type": "1.4.5", "primer-marketing-type": "1.4.6",
"primer-marketing-utilities": "1.6.1", "primer-marketing-utilities": "1.6.2",
"primer-navigation": "1.5.3", "primer-navigation": "1.5.4",
"primer-page-headers": "1.4.5", "primer-page-headers": "1.4.6",
"primer-page-sections": "1.4.5", "primer-page-sections": "1.4.6",
"primer-popover": "0.0.6", "primer-pagination": "1.0.0",
"primer-product": "5.6.2", "primer-popover": "0.1.0",
"primer-subhead": "1.0.3", "primer-product": "5.6.3",
"primer-support": "4.5.2", "primer-subhead": "1.0.4",
"primer-table-object": "1.4.5", "primer-support": "4.5.3",
"primer-tables": "1.4.5", "primer-table-object": "1.4.6",
"primer-tooltips": "1.5.3", "primer-tables": "1.4.6",
"primer-truncate": "1.4.5", "primer-tooltips": "1.5.4",
"primer-utilities": "4.9.0" "primer-truncate": "1.4.6",
"primer-utilities": "4.10.0"
}, },
"keywords": [ "keywords": [
"primer", "primer",

4
tools/generator-primer-module/package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.0.4", "version": "1.0.5",
"name": "generator-primer-module", "name": "generator-primer-module",
"description": "Use this to create a new Primer modules!", "description": "Use this to create a new Primer modules!",
"author": "GitHub, Inc.", "author": "GitHub, Inc.",
@ -17,7 +17,7 @@
}, },
"dependencies": { "dependencies": {
"chalk": "^2.1.0", "chalk": "^2.1.0",
"primer-support": "4.5.2", "primer-support": "4.5.3",
"yeoman-generator": "^1.1.1" "yeoman-generator": "^1.1.1"
}, },
"keywords": [ "keywords": [

4
tools/stylelint-config-primer/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "stylelint-config-primer", "name": "stylelint-config-primer",
"version": "2.2.5", "version": "2.2.6",
"description": "Sharable stylelint config used by GitHub's CSS", "description": "Sharable stylelint config used by GitHub's CSS",
"homepage": "http://primer.github.io/", "homepage": "http://primer.github.io/",
"author": "GitHub, Inc.", "author": "GitHub, Inc.",
@ -19,7 +19,7 @@
"stylelint-no-unsupported-browser-features": "^1.0.0", "stylelint-no-unsupported-browser-features": "^1.0.0",
"stylelint-order": "^0.4.4", "stylelint-order": "^0.4.4",
"stylelint-scss": "^1.4.1", "stylelint-scss": "^1.4.1",
"stylelint-selector-no-utility": "1.8.5" "stylelint-selector-no-utility": "1.8.6"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^3.19.0", "eslint": "^3.19.0",

4
tools/stylelint-selector-no-utility/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "stylelint-selector-no-utility", "name": "stylelint-selector-no-utility",
"version": "1.8.5", "version": "1.8.6",
"description": "Stylelint rule that doesn't allow the styling of utility classes in CSS", "description": "Stylelint rule that doesn't allow the styling of utility classes in CSS",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
@ -21,7 +21,7 @@
"license": "MIT", "license": "MIT",
"repository": "https://github.com/primer/primer/tree/master/tools/stylelint-selector-no-utility", "repository": "https://github.com/primer/primer/tree/master/tools/stylelint-selector-no-utility",
"dependencies": { "dependencies": {
"primer-utilities": "4.9.0", "primer-utilities": "4.10.0",
"stylelint": "^7.13.0" "stylelint": "^7.13.0"
}, },
"devDependencies": { "devDependencies": {