diff --git a/.storybook/lib/storiesFromMarkdown.js b/.storybook/lib/storiesFromMarkdown.js index 564600dfdb..081d42feca 100644 --- a/.storybook/lib/storiesFromMarkdown.js +++ b/.storybook/lib/storiesFromMarkdown.js @@ -19,17 +19,22 @@ const railsOcticonToReact = (html) => { return html } -const nodeToStory = (node, file) => { - const html = railsOcticonToReact(node.value) - const element = htmlParser.parse(html) +const parseBlockAttrs = (node, file) => { const pairs = node.lang.replace(/^html\s*/, '') const attrs = pairs.length ? parsePairs(pairs) : {} - const title = attrs.title || getPreviousHeading(node) || - `story @ ${file}:${node.position.start.line}` + attrs.title = attrs.title + || getPreviousHeading(node) + || `story @ ${file}:${node.position.start.line}` + node.block = attrs + return node +} + +const nodeToStory = (node, file) => { + const html = railsOcticonToReact(node.value) + const {title} = node.block return { title, - story: () => element, - attrs, + story: () => htmlParser.parse(html), html, file, node, @@ -44,14 +49,17 @@ const getPreviousHeading = node => { } export default req => { - return req.keys().reduce((stories, file) => { - const content = req(file) - const ast = parents(remark.parse(content)) - const path = file.replace(/^\.\//, '') - return stories.concat( - select(ast, 'code[lang^=html]') - .map(node => nodeToStory(node, path)) - .filter(({attrs}) => attrs.story !== "false") - ) - }, []) + return req.keys() + .filter(file => !file.match(/node_modules/)) + .reduce((stories, file) => { + const content = req(file) + const ast = parents(remark.parse(content)) + const path = file.replace(/^\.\//, '') + return stories.concat( + select(ast, 'code[lang^=html]') + .map(parseBlockAttrs) + .filter(({block}) => block.story !== "false") + .map(node => nodeToStory(node, path)) + ) + }, []) } diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 59c421d1d3..be4eb6596b 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,6 +1,6 @@ -const path = require("path"); +const path = require('path'); -const modulesPath = path.resolve(__dirname, "../modules") +const modulesPath = path.resolve(__dirname, '../modules') module.exports = (config, env) => { @@ -9,26 +9,34 @@ module.exports = (config, env) => { .filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin') } - config.module.rules.push( - { - test: /\.md$/, - use: "raw-loader", - }, + const rules = config.module.rules + + rules.forEach((rule, index) => { + if ('README.md'.match(rule.test)) { + // console.warn('replacing MD rule:', rule) + rules.splice(index, 1, { + test: /\.md$/, + loader: 'raw-loader', + }) + } + }) + + rules.push( { test: /\.scss$/, loaders: [ - "style-loader", - "css-loader", + 'style-loader', + 'css-loader', { - loader: "postcss-loader", + loader: 'postcss-loader', options: { config: { - path: require.resolve("./postcss.config.js"), + path: require.resolve('./postcss.config.js'), }, }, }, { - loader: "sass-loader", + loader: 'sass-loader', options: { includePaths: [ modulesPath, diff --git a/CHANGELOG.md b/CHANGELOG.md index 53b9c50b08..a20126ae5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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) #### :rocket: Enhancement diff --git a/README.md b/README.md index 5b07f7be6d..b3793fe480 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Then, you would import the module with: @import "primer-navigation/index.scss"; ``` -Or, while you're figuring out which modules you need, you can import them directly from the `primer` [`packages` directory](./packages) like so: +Or, while you're figuring out which modules you need, you can import them directly from the `primer` [`modules` directory](./modules) like so: ```scss @import "primer/modules/primer-navigation/index.css"; diff --git a/modules/primer-alerts/package.json b/modules/primer-alerts/package.json index 7f0335e4ca..f424ca7f13 100644 --- a/modules/primer-alerts/package.json +++ b/modules/primer-alerts/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.5", + "version": "1.5.6", "name": "primer-alerts", "description": "Flash messages, or alerts, inform users of successful or pending actions.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "alerts", diff --git a/modules/primer-avatars/package.json b/modules/primer-avatars/package.json index 29a3316b62..3ccb2f87c5 100644 --- a/modules/primer-avatars/package.json +++ b/modules/primer-avatars/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.2", + "version": "1.5.3", "name": "primer-avatars", "description": "Basic styles for user profile avatars.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "avatars", diff --git a/modules/primer-base/package.json b/modules/primer-base/package.json index 6da36b07ac..6de82e77b1 100644 --- a/modules/primer-base/package.json +++ b/modules/primer-base/package.json @@ -1,5 +1,5 @@ { - "version": "1.7.0", + "version": "1.7.1", "name": "primer-base", "description": "CSS to reset the browsers default styles", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "primer", diff --git a/modules/primer-blankslate/package.json b/modules/primer-blankslate/package.json index a37c35b24f..066a3602e4 100644 --- a/modules/primer-blankslate/package.json +++ b/modules/primer-blankslate/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.5", + "version": "1.4.6", "name": "primer-blankslate", "description": "Blankslates are for when there is a lack of content within a page or section.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "primer", diff --git a/modules/primer-box/README.md b/modules/primer-box/README.md index c8773cd473..6ddffdcb18 100644 --- a/modules/primer-box/README.md +++ b/modules/primer-box/README.md @@ -259,7 +259,7 @@ Use `Box--danger` to apply a red border to the outside of the box. This theme is ``` -`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
@@ -356,7 +356,7 @@ Use the `border-dashed` utility to apply a dashed border to a box. ## 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`. -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
@@ -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 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
@@ -561,7 +561,7 @@ You can put forms in boxes. Often form submission buttons are aligned to the bot
``` -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
@@ -582,7 +582,7 @@ When a box is all by itself centered on a page you can use [column widths](/grid
``` -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). diff --git a/modules/primer-box/package.json b/modules/primer-box/package.json index db1f980e71..276d243ca3 100644 --- a/modules/primer-box/package.json +++ b/modules/primer-box/package.json @@ -1,5 +1,5 @@ { - "version": "2.5.5", + "version": "2.5.6", "name": "primer-box", "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "primer", diff --git a/modules/primer-branch-name/package.json b/modules/primer-branch-name/package.json index 61db2aa086..d72c1d97ff 100644 --- a/modules/primer-branch-name/package.json +++ b/modules/primer-branch-name/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.3", + "version": "1.0.4", "name": "primer-branch-name", "description": "A nice, consistent way to display branch names.", "homepage": "http://primer.github.io/", @@ -29,7 +29,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "github", diff --git a/modules/primer-breadcrumb/package.json b/modules/primer-breadcrumb/package.json index 4bc4f20680..395a2cb61e 100644 --- a/modules/primer-breadcrumb/package.json +++ b/modules/primer-breadcrumb/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.1", + "version": "1.5.2", "name": "primer-breadcrumb", "description": "Breadcrumb navigation for pages with parents / grandparents.", "homepage": "http://primer.github.io/", @@ -29,7 +29,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "breadcrumb", diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md index 948843bae0..3ebbe61e36 100644 --- a/modules/primer-buttons/README.md +++ b/modules/primer-buttons/README.md @@ -175,7 +175,7 @@ You can easily append a count to a **small button**. Add the `.with-count` class
``` -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 title="Bottom" +
+
+

Popover heading

Message about this particular piece of UI.

+
``` -### Top-right-aligned example +### Bottom-right -```html title="Top-left" -
- -
-
+```html title="Bottom-right" +
+
+

Popover heading

Message about this particular piece of UI.

+
``` -### Right-aligned example +### Bottom-left -```html title="Right" -
-
+```html title="Bottom-left" +
+

Popover heading

Message about this particular piece of UI.

+ ``` -### Left-aligned example +### Left ```html title="Left" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` -### Bottom-aligned example +### Left-bottom -```html title="Bottom" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +```html title="Left-bottom" +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` -### Bottom-right-aligned example +### Left-top -```html title="Bottom-right" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +```html title="Left-top" +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` -### Bottom-left-aligned example +### Right -```html title="Bottom-left" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +```html title="Right" +
+
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+ +
+``` + +### Right-bottom + +```html title="Right-bottom" +
+
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+ +
+``` + +### Right-top + +```html title="Right-top" +
+
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+ +
+``` + +### Top-left + +```html title="Top-left" +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+
+``` + +### Top-right + +```html title="Top-right" +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss index f732ec7f11..228aff7590 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -108,7 +108,7 @@ } &::before { - margin-top: -9px; + margin-top: -($spacer-2 + 1); } &::after { @@ -164,11 +164,11 @@ } &::before { - bottom: $spacer-4; + bottom: $spacer-3; } &::after { - bottom: 21px; + bottom: $spacer-3 + 1; } } diff --git a/modules/primer-popover/package.json b/modules/primer-popover/package.json index 75ac1971c6..50fd97f9e2 100644 --- a/modules/primer-popover/package.json +++ b/modules/primer-popover/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.6", + "version": "0.1.0", "name": "primer-popover", "description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.", "homepage": "http://primer.github.io/", @@ -24,7 +24,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "peerDependencies": { "primer-box": ">=2.5.0" diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index 3fe659f6c4..243faa85ff 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -1,5 +1,5 @@ { - "version": "5.6.2", + "version": "5.6.3", "name": "primer-product", "description": "Primer's product modules", "homepage": "http://primer.github.io/", @@ -27,14 +27,14 @@ "lint": "../../script/lint-scss" }, "dependencies": { - "primer-alerts": "1.5.5", - "primer-avatars": "1.5.2", - "primer-blankslate": "1.4.5", - "primer-branch-name": "1.0.3", - "primer-labels": "1.5.5", - "primer-markdown": "3.7.5", - "primer-popover": "0.0.6", - "primer-subhead": "1.0.3", - "primer-support": "4.5.2" + "primer-alerts": "1.5.6", + "primer-avatars": "1.5.3", + "primer-blankslate": "1.4.6", + "primer-branch-name": "1.0.4", + "primer-labels": "1.5.6", + "primer-markdown": "3.7.6", + "primer-popover": "0.1.0", + "primer-subhead": "1.0.4", + "primer-support": "4.5.3" } } diff --git a/modules/primer-subhead/package.json b/modules/primer-subhead/package.json index d0f23c095e..a2b6d4e479 100644 --- a/modules/primer-subhead/package.json +++ b/modules/primer-subhead/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.3", + "version": "1.0.4", "name": "primer-subhead", "description": "The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.", "homepage": "http://primer.github.io/", @@ -24,7 +24,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "github", diff --git a/modules/primer-support/docs/breakpoints.md b/modules/primer-support/docs/breakpoints.md index 12f94a6bdc..96558bd056 100644 --- a/modules/primer-support/docs/breakpoints.md +++ b/modules/primer-support/docs/breakpoints.md @@ -19,7 +19,7 @@ We use abbreviations for each breakpoint to keep the class names concise. This a **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. -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 diff --git a/modules/primer-support/docs/spacing.md b/modules/primer-support/docs/spacing.md index bd18ea2cdd..aa0fd3326f 100644 --- a/modules/primer-support/docs/spacing.md +++ b/modules/primer-support/docs/spacing.md @@ -11,17 +11,17 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i | Variable | Scale | Value | | --- | --- | --- | -| $spacer-1 | 0 | 0 | +| $spacer-0 | 0 | 0 | | $spacer-1 | 1 | 4px | -| $spacer-1 | 2 | 8px | -| $spacer-1 | 3 | 16px | -| $spacer-1 | 4 | 24px | -| $spacer-1 | 5 | 32px | -| $spacer-1 | 6 | 40px | +| $spacer-2 | 2 | 8px | +| $spacer-3 | 3 | 16px | +| $spacer-4 | 4 | 24px | +| $spacer-5 | 5 | 32px | +| $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 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. diff --git a/modules/primer-support/docs/typography.md b/modules/primer-support/docs/typography.md index efa51762dc..c6ae83fed7 100644 --- a/modules/primer-support/docs/typography.md +++ b/modules/primer-support/docs/typography.md @@ -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. -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 | | --- | --- | --- | --- | --- | @@ -24,7 +24,7 @@ Font sizes are smaller on mobile and scale up at the `md` [breakpoint](#breakpoi | 5 | 14px | 14px | 17.5 | 21 | | 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 @@ -63,7 +63,7 @@ $lh-default: 1.5 !default; ``` ## 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: diff --git a/modules/primer-support/package.json b/modules/primer-support/package.json index 865b06ed0f..dd125b323a 100644 --- a/modules/primer-support/package.json +++ b/modules/primer-support/package.json @@ -1,5 +1,5 @@ { - "version": "4.5.2", + "version": "4.5.3", "name": "primer-support", "description": "Sass variables, mixins, and functions for use in our components.", "homepage": "http://primer.github.io/", diff --git a/modules/primer-table-object/package.json b/modules/primer-table-object/package.json index 6f8a6add28..6bc47ffc55 100644 --- a/modules/primer-table-object/package.json +++ b/modules/primer-table-object/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.5", + "version": "1.4.6", "name": "primer-table-object", "description": "A module for creating dynamically resizable elements that always sit on the same horizontal line.", "homepage": "http://primer.github.io/", @@ -29,7 +29,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "primer", diff --git a/modules/primer-tables/package.json b/modules/primer-tables/package.json index 3c45f58e82..7dd09c97cc 100644 --- a/modules/primer-tables/package.json +++ b/modules/primer-tables/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.5", + "version": "1.4.6", "name": "primer-tables", "description": "Styles to display tabular data for marketing websites at GitHub.", "homepage": "http://primer.github.io/", @@ -28,8 +28,8 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-marketing-support": "1.5.0", - "primer-support": "4.5.2" + "primer-marketing-support": "1.5.1", + "primer-support": "4.5.3" }, "keywords": [ "css", diff --git a/modules/primer-tooltips/package.json b/modules/primer-tooltips/package.json index eabdf41dc7..eb7e2a1611 100644 --- a/modules/primer-tooltips/package.json +++ b/modules/primer-tooltips/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.3", + "version": "1.5.4", "name": "primer-tooltips", "description": "Add tooltips built entirely in CSS to nearly any element.", "homepage": "http://primer.github.io/", @@ -29,7 +29,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "primer", diff --git a/modules/primer-truncate/package.json b/modules/primer-truncate/package.json index e95bb80cce..499e741bc8 100644 --- a/modules/primer-truncate/package.json +++ b/modules/primer-truncate/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.5", + "version": "1.4.6", "name": "primer-truncate", "description": "Shorten text with an ellipsis.", "homepage": "http://primer.github.io/", @@ -29,7 +29,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "primer", diff --git a/modules/primer-utilities/docs/colors.md b/modules/primer-utilities/docs/colors.md index d66842fb62..a7f7fa51cb 100644 --- a/modules/primer-utilities/docs/colors.md +++ b/modules/primer-utilities/docs/colors.md @@ -13,7 +13,7 @@ Use color utilities to apply color to the background of elements, text, and bord ## Background colors -Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/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 @@ -127,10 +127,20 @@ Background colors are most commonly used for filling large blocks of content or ## 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**. +### Text color inheritance + +You can set the color inheritance on an element by using the `text-inherit` class. + +```html +
+ This text is purple, including the link +
+``` + ### Text on white background ```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 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). diff --git a/modules/primer-utilities/docs/flexbox.md b/modules/primer-utilities/docs/flexbox.md index 653d57b7f0..4eb5d47acb 100644 --- a/modules/primer-utilities/docs/flexbox.md +++ b/modules/primer-utilities/docs/flexbox.md @@ -576,7 +576,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros ## 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` - `flex-[breakpoint]-[property]-[behavior]` for various flex properties diff --git a/modules/primer-utilities/docs/layout.md b/modules/primer-utilities/docs/layout.md index fd4aa35617..cb2082ddf9 100644 --- a/modules/primer-utilities/docs/layout.md +++ b/modules/primer-utilities/docs/layout.md @@ -31,7 +31,7 @@ Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-in
``` -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
@@ -45,7 +45,7 @@ There are known issues with using `display:table` and wrapping long strings, par ``` ### 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. @@ -97,7 +97,7 @@ Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
``` ### 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. diff --git a/modules/primer-utilities/docs/margin.md b/modules/primer-utilities/docs/margin.md index 7e8e61dde2..351d1bf859 100644 --- a/modules/primer-utilities/docs/margin.md +++ b/modules/primer-utilities/docs/margin.md @@ -3,7 +3,7 @@ title: Margin 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} @@ -103,7 +103,7 @@ Reset margins built into typography elements or other components with `m-0`, `mt ## 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
diff --git a/modules/primer-utilities/docs/padding.md b/modules/primer-utilities/docs/padding.md index 7395e25f5f..2d9968371c 100644 --- a/modules/primer-utilities/docs/padding.md +++ b/modules/primer-utilities/docs/padding.md @@ -3,7 +3,7 @@ title: Padding 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} @@ -85,7 +85,7 @@ Use directional utilities to apply padding to an individual side, or the X and Y ## Responsive padding -All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/core/support/breakpoints) using the following formula:
`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:
`p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. ```html
@@ -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`. -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
diff --git a/modules/primer-utilities/docs/typography.md b/modules/primer-utilities/docs/typography.md index eb82972693..8c22f13f92 100644 --- a/modules/primer-utilities/docs/typography.md +++ b/modules/primer-utilities/docs/typography.md @@ -3,11 +3,11 @@ title: Typography 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} -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 | | --- | --- | --- | --- | --- | @@ -93,6 +93,7 @@ Change the font weight, styles, and alignment with these utilities.

Emphasized

Small

Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.

+

Monospace

``` ## Text alignment diff --git a/modules/primer-utilities/lib/typography.scss b/modules/primer-utilities/lib/typography.scss index f580f5967a..72f3ba9bd8 100644 --- a/modules/primer-utilities/lib/typography.scss +++ b/modules/primer-utilities/lib/typography.scss @@ -214,3 +214,8 @@ .text-shadow-light { text-shadow: 0 1px 0 rgba($white, 0.5); } + +/* Set to monospace font */ +.text-mono { + font-family: $mono-font; +} diff --git a/modules/primer-utilities/package.json b/modules/primer-utilities/package.json index 692a156aa0..a6f8bd3599 100644 --- a/modules/primer-utilities/package.json +++ b/modules/primer-utilities/package.json @@ -1,5 +1,5 @@ { - "version": "4.9.0", + "version": "4.10.0", "name": "primer-utilities", "description": "Immutable, atomic CSS classes to rapidly build product", "homepage": "http://primer.github.io/", @@ -29,7 +29,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.2" + "primer-support": "4.5.3" }, "keywords": [ "primer", diff --git a/modules/primer-utilities/stories/Typography.js b/modules/primer-utilities/stories/Typography.js index d618511a9b..c29b9b053a 100644 --- a/modules/primer-utilities/stories/Typography.js +++ b/modules/primer-utilities/stories/Typography.js @@ -57,6 +57,7 @@ storiesOf('Typography utilities', module)

text-emphasized

text-small

lead

+

text-mono

)) .add('text alignment', () => ( diff --git a/modules/primer/package.json b/modules/primer/package.json index 3e6d90aaa8..7b550c387e 100644 --- a/modules/primer/package.json +++ b/modules/primer/package.json @@ -1,5 +1,5 @@ { - "version": "10.4.0", + "version": "10.5.0", "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.", "homepage": "http://primer.github.io/", @@ -28,36 +28,37 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-alerts": "1.5.5", - "primer-avatars": "1.5.2", - "primer-base": "1.7.0", - "primer-blankslate": "1.4.5", - "primer-box": "2.5.5", - "primer-branch-name": "1.0.3", - "primer-breadcrumb": "1.5.1", - "primer-buttons": "2.5.3", - "primer-core": "6.8.0", - "primer-forms": "2.1.0", - "primer-labels": "1.5.5", - "primer-layout": "1.4.5", - "primer-markdown": "3.7.5", - "primer-marketing": "6.2.0", - "primer-marketing-buttons": "1.0.4", - "primer-marketing-support": "1.5.0", - "primer-marketing-type": "1.4.5", - "primer-marketing-utilities": "1.6.1", - "primer-navigation": "1.5.3", - "primer-page-headers": "1.4.5", - "primer-page-sections": "1.4.5", - "primer-popover": "0.0.6", - "primer-product": "5.6.2", - "primer-subhead": "1.0.3", - "primer-support": "4.5.2", - "primer-table-object": "1.4.5", - "primer-tables": "1.4.5", - "primer-tooltips": "1.5.3", - "primer-truncate": "1.4.5", - "primer-utilities": "4.9.0" + "primer-alerts": "1.5.6", + "primer-avatars": "1.5.3", + "primer-base": "1.7.1", + "primer-blankslate": "1.4.6", + "primer-box": "2.5.6", + "primer-branch-name": "1.0.4", + "primer-breadcrumb": "1.5.2", + "primer-buttons": "2.5.4", + "primer-core": "6.9.0", + "primer-forms": "2.1.1", + "primer-labels": "1.5.6", + "primer-layout": "1.4.6", + "primer-markdown": "3.7.6", + "primer-marketing": "6.2.1", + "primer-marketing-buttons": "1.0.5", + "primer-marketing-support": "1.5.1", + "primer-marketing-type": "1.4.6", + "primer-marketing-utilities": "1.6.2", + "primer-navigation": "1.5.4", + "primer-page-headers": "1.4.6", + "primer-page-sections": "1.4.6", + "primer-pagination": "1.0.0", + "primer-popover": "0.1.0", + "primer-product": "5.6.3", + "primer-subhead": "1.0.4", + "primer-support": "4.5.3", + "primer-table-object": "1.4.6", + "primer-tables": "1.4.6", + "primer-tooltips": "1.5.4", + "primer-truncate": "1.4.6", + "primer-utilities": "4.10.0" }, "keywords": [ "primer", diff --git a/tools/generator-primer-module/package.json b/tools/generator-primer-module/package.json index 8aa61a3bec..6113db6857 100644 --- a/tools/generator-primer-module/package.json +++ b/tools/generator-primer-module/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.4", + "version": "1.0.5", "name": "generator-primer-module", "description": "Use this to create a new Primer modules!", "author": "GitHub, Inc.", @@ -17,7 +17,7 @@ }, "dependencies": { "chalk": "^2.1.0", - "primer-support": "4.5.2", + "primer-support": "4.5.3", "yeoman-generator": "^1.1.1" }, "keywords": [ diff --git a/tools/stylelint-config-primer/package.json b/tools/stylelint-config-primer/package.json index 738cd5f723..1c06c23da0 100644 --- a/tools/stylelint-config-primer/package.json +++ b/tools/stylelint-config-primer/package.json @@ -1,6 +1,6 @@ { "name": "stylelint-config-primer", - "version": "2.2.5", + "version": "2.2.6", "description": "Sharable stylelint config used by GitHub's CSS", "homepage": "http://primer.github.io/", "author": "GitHub, Inc.", @@ -19,7 +19,7 @@ "stylelint-no-unsupported-browser-features": "^1.0.0", "stylelint-order": "^0.4.4", "stylelint-scss": "^1.4.1", - "stylelint-selector-no-utility": "1.8.5" + "stylelint-selector-no-utility": "1.8.6" }, "devDependencies": { "eslint": "^3.19.0", diff --git a/tools/stylelint-selector-no-utility/package.json b/tools/stylelint-selector-no-utility/package.json index 19d0154544..bc439246bc 100644 --- a/tools/stylelint-selector-no-utility/package.json +++ b/tools/stylelint-selector-no-utility/package.json @@ -1,6 +1,6 @@ { "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", "main": "index.js", "scripts": { @@ -21,7 +21,7 @@ "license": "MIT", "repository": "https://github.com/primer/primer/tree/master/tools/stylelint-selector-no-utility", "dependencies": { - "primer-utilities": "4.9.0", + "primer-utilities": "4.10.0", "stylelint": "^7.13.0" }, "devDependencies": {