Merge branch 'dev' into fix-spacing-docs

.github/CONTRIBUTING.md

@@ -6,8 +6,6 @@
 
 Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
 
-Before you do, would you mind reading [this license agreement](CLA.md)? If you open a PR, we'll assume you agree to it. If you have any hesitation or disagreement, please do open a PR still, but note your concerns as well.
-
 ## Using the issue tracker
 
 The issue tracker is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions:
@@ -28,7 +26,7 @@ Guidelines for bug reports:
 
 2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository.
 
-3. **Isolate the problem** — ideally create a [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) and a live example.
+3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example.
 
 A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs.
 
@@ -59,7 +57,7 @@ Good pull requests—patches, improvements, new features—are a fantastic help.
 
 ### Updating Primer modules
 
-Anyone can open a pull request on Primer. You do not need to work at GitHub or be a member of the org to open a pull request. 
+Anyone can open a pull request on Primer. You do not need to work at GitHub or be a member of the org to open a pull request.
 
 1. Fork and clone [this repository](https://github.com/primer/primer).
 2. Configure and install the dependencies: `npm install`

.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))
+      )
+    }, [])
 }

.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,

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 10.4.0 (2018-03-14)
+
+#### :rocket: Enhancement
+* [#456](https://github.com/primer/primer/pull/456) Adding height-fit utility class. ([@jonrohan](https://github.com/jonrohan))
+
+#### :memo: Documentation
+* [#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: 3
+- Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos))
+- Jon Rohan ([jonrohan](https://github.com/jonrohan))
+- [muan](https://github.com/muan)
+
 # 10.3.0 (2018-01-17)
 
 #### :rocket: Enhancement

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";

modules/primer-base/lib/base.scss

@@ -73,6 +73,6 @@ details {
 
   &:not([open]) {
     // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) { display: none; }
+    > *:not(summary) { display: none !important; }
   }
 }

modules/primer-base/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.3",
+  "version": "1.7.0",
   "name": "primer-base",
   "description": "CSS to reset the browsers default styles",
   "homepage": "http://primer.github.io/",

modules/primer-core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.7.0",
+  "version": "6.8.0",
   "name": "primer-core",
   "description": "Primer's core modules",
   "homepage": "http://primer.github.io/",
@@ -27,7 +27,7 @@
     "lint": "../../script/lint-scss"
   },
   "dependencies": {
-    "primer-base": "1.6.3",
+    "primer-base": "1.7.0",
     "primer-box": "2.5.5",
     "primer-breadcrumb": "1.5.1",
     "primer-buttons": "2.5.3",
@@ -36,8 +36,8 @@
     "primer-navigation": "1.5.3",
     "primer-support": "4.5.2",
     "primer-table-object": "1.4.5",
-    "primer-tooltips": "1.5.2",
+    "primer-tooltips": "1.5.3",
     "primer-truncate": "1.4.5",
-    "primer-utilities": "4.8.5"
+    "primer-utilities": "4.9.0"
   }
 }

modules/primer-tooltips/lib/tooltips.scss

@@ -311,3 +311,4 @@
     border-left-color: $background-color;
   }
 }
+@warn "the colorizeTooltip mixin will be deprecated in version 11.";

modules/primer-tooltips/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.2",
+  "version": "1.5.3",
   "name": "primer-tooltips",
   "description": "Add tooltips built entirely in CSS to nearly any element.",
   "homepage": "http://primer.github.io/",

modules/primer-utilities/docs/layout.md

@@ -156,6 +156,16 @@ Use `.width-full` to set width to 100%.
 </div>
 ```
 
+Use `.height-fit` to set max-height 100%.
+
+```html
+<div class="one-fourth column" style="height: 100px; overflow: auto;">
+  <div class="p-3 height-fit border">
+    Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
+  </div>
+</div>
+```
+
 Use `.height-full` to set height to 100%.
 
 ```html

modules/primer-utilities/lib/layout.scss

@@ -76,6 +76,8 @@
 .width-fit   { max-width: 100% !important; }
 /* Set the width to 100% */
 .width-full  { width: 100% !important; }
+/* Max height 100% */
+.height-fit  { max-height: 100% !important; }
 /* Set the height to 100% */
 .height-full { height: 100% !important; }
 

modules/primer-utilities/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.8.5",
+  "version": "4.9.0",
   "name": "primer-utilities",
   "description": "Immutable, atomic CSS classes to rapidly build product",
   "homepage": "http://primer.github.io/",

modules/primer/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "10.3.0",
+  "version": "10.4.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/",
@@ -30,13 +30,13 @@
   "dependencies": {
     "primer-alerts": "1.5.5",
     "primer-avatars": "1.5.2",
-    "primer-base": "1.6.3",
+    "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.7.0",
+    "primer-core": "6.8.0",
     "primer-forms": "2.1.0",
     "primer-labels": "1.5.5",
     "primer-layout": "1.4.5",
@@ -55,9 +55,9 @@
     "primer-support": "4.5.2",
     "primer-table-object": "1.4.5",
     "primer-tables": "1.4.5",
-    "primer-tooltips": "1.5.2",
+    "primer-tooltips": "1.5.3",
     "primer-truncate": "1.4.5",
-    "primer-utilities": "4.8.5"
+    "primer-utilities": "4.9.0"
   },
   "keywords": [
     "primer",

tools/stylelint-config-primer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-config-primer",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "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.4"
+    "stylelint-selector-no-utility": "1.8.5"
   },
   "devDependencies": {
     "eslint": "^3.19.0",

tools/stylelint-selector-no-utility/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-selector-no-utility",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "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.8.5",
+    "primer-utilities": "4.9.0",
     "stylelint": "^7.13.0"
   },
   "devDependencies": {