From 2cf338e94871c64c7d6b85c4f71754309942003e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sat, 5 Aug 2017 15:18:00 -0400 Subject: [PATCH 001/191] Do not suppress opacity transition for tooltipped-no-delay As far as I understand (the git history is not too easy to follow on this repo :/), when `tooltipped-no-delay` was added, there were no animations/transitions on the tooltip. This commit removes the delay, so that the transition starts immediately, instead of suppressing the transition entirely. It effectively makes the 2 variants differ by only the initial delay (like the name suggests). --- modules/primer-tooltips/lib/tooltips.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 84aa51c628..1c56165563 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -71,8 +71,7 @@ .tooltipped-no-delay:focus { &::before, &::after { - opacity: 1; - animation: none; + animation-delay: 0s; } } From 7f3553ad3b3b616dd138cbfcb5f0470bbc062ceb Mon Sep 17 00:00:00 2001 From: Anton Sotkov Date: Sun, 13 Aug 2017 19:09:56 +0300 Subject: [PATCH 002/191] remove -webkit-text-decoration-skip override --- modules/primer-base/lib/normalize.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/modules/primer-base/lib/normalize.scss b/modules/primer-base/lib/normalize.scss index bca298e757..8152aa3aed 100644 --- a/modules/primer-base/lib/normalize.scss +++ b/modules/primer-base/lib/normalize.scss @@ -89,13 +89,11 @@ template, /* 1 */ ========================================================================== */ /** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + * Remove the gray background on active links in IE 10. */ a { background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ } /** From 4d603c9ea51126c8c9a50116dc698413ca8ccb3d Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 11 Sep 2017 14:28:47 -0700 Subject: [PATCH 003/191] initial import of branch-name component --- modules/primer-branch-name/LICENSE | 21 +++++++ modules/primer-branch-name/README.md | 55 +++++++++++++++++++ modules/primer-branch-name/index.scss | 3 + .../primer-branch-name/lib/branch-name.scss | 1 + modules/primer-branch-name/package.json | 32 +++++++++++ modules/primer-css/package.json | 3 +- modules/primer-product/package.json | 3 +- 7 files changed, 116 insertions(+), 2 deletions(-) create mode 100644 modules/primer-branch-name/LICENSE create mode 100644 modules/primer-branch-name/README.md create mode 100644 modules/primer-branch-name/index.scss create mode 100644 modules/primer-branch-name/lib/branch-name.scss create mode 100644 modules/primer-branch-name/package.json diff --git a/modules/primer-branch-name/LICENSE b/modules/primer-branch-name/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/modules/primer-branch-name/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/modules/primer-branch-name/README.md b/modules/primer-branch-name/README.md new file mode 100644 index 0000000000..1fecf3e341 --- /dev/null +++ b/modules/primer-branch-name/README.md @@ -0,0 +1,55 @@ +# Primer CSS / Branch Name + +[![npm version](http://img.shields.io/npm/v/primer-branch-name.svg)](https://www.npmjs.org/package/primer-branch-name) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> A nice, consistent way to display branch names. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-branch-name` with this command. + +``` +$ npm install --save primer-branch-name +``` + +## 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-branch-name/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 + + + +TODO: Write some documentation here. + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/modules/primer-branch-name/index.scss b/modules/primer-branch-name/index.scss new file mode 100644 index 0000000000..d893139c4e --- /dev/null +++ b/modules/primer-branch-name/index.scss @@ -0,0 +1,3 @@ +// support files +@import "primer-support/index.scss"; +@import "./lib/branch-name.scss"; diff --git a/modules/primer-branch-name/lib/branch-name.scss b/modules/primer-branch-name/lib/branch-name.scss new file mode 100644 index 0000000000..8034abe200 --- /dev/null +++ b/modules/primer-branch-name/lib/branch-name.scss @@ -0,0 +1 @@ +// SCSS goes here diff --git a/modules/primer-branch-name/package.json b/modules/primer-branch-name/package.json new file mode 100644 index 0000000000..cae108a9b6 --- /dev/null +++ b/modules/primer-branch-name/package.json @@ -0,0 +1,32 @@ +{ + "version": "0.0.1", + "name": "primer-branch-name", + "description": "A nice, consistent way to display branch names.", + "homepage": "http://primercss.io/", + "primer": { + "category": "product", + "module_type": "components" + }, + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-branch-name", + "bugs": { + "url": "https://github.com/primer/primer-css/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.3.0" + }, + "keywords": [ + "github", + "primer" + ] +} diff --git a/modules/primer-css/package.json b/modules/primer-css/package.json index 8a9fa3c401..427a00339d 100644 --- a/modules/primer-css/package.json +++ b/modules/primer-css/package.json @@ -54,7 +54,8 @@ "primer-tables": "1.3.0", "primer-tooltips": "1.3.0", "primer-truncate": "1.3.0", - "primer-utilities": "4.6.0" + "primer-utilities": "4.6.0", + "primer-branch-name": "0.0.1" }, "keywords": [ "primer", diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index 827e79a08d..7a1b05daac 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -32,6 +32,7 @@ "primer-dropdown": "0.1.0", "primer-labels": "1.4.0", "primer-markdown": "3.6.0", - "primer-support": "4.3.0" + "primer-support": "4.3.0", + "primer-branch-name": "0.0.1" } } From 7a7222893a14f9c75371c6a51649eb827022d693 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 11 Sep 2017 15:48:20 -0700 Subject: [PATCH 004/191] clean up doc tests --- tests/modules/test-document-styles.js | 29 +++++++++++++++------------ 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/tests/modules/test-document-styles.js b/tests/modules/test-document-styles.js index d28fc9e030..d081c22886 100644 --- a/tests/modules/test-document-styles.js +++ b/tests/modules/test-document-styles.js @@ -1,9 +1,11 @@ const test = require("ava") -const css = require(process.env.PWD) +const css = require(process.cwd()) const fs = require("fs") const glob = require("glob") -var selectors, classnames = null +let selectors +let classnames + const classRegex = /class="([^"]+)"/ig // Find unique selectors from the cssstats selector list @@ -11,7 +13,8 @@ function uniqueSelectors(s) { s = s.map(s => { // split multi-selectors into last class used .foo .bar .baz return s.split(" ").pop() - }).filter(s => { + }) + .filter(s => { // remove any selector that aren't just regular classnames eg. ::hover [type] return s.match(/^\.[a-z\-_]+$/ig) }) @@ -22,37 +25,37 @@ function uniqueSelectors(s) { // From the given glob sources array, read the files and return found classnames function documentedClassnames(sources) { - var cn = [] - sources.forEach( f => { - glob.sync(f).forEach( g => { + const classes = [] + sources.forEach(f => { + glob.sync(f).forEach(g => { var match = null // While we match a classRegex in the source while ((match = classRegex.exec(fs.readFileSync(g, "utf8"))) != null) { // Get the matched classnames "..." and split by space into classes - cn = cn.concat(match[1].split(" ")) + classes.push(...match[1].split(" ")) } }) }) // return only the unique classnames - return [...new Set(cn)] + return Array.from(new Set(classes)) } // Before all the tests get the selectors and classnames test.before(t => { selectors = uniqueSelectors(css.cssstats.selectors.values) classnames = documentedClassnames([ - 'docs/*.md', - 'README.md' + "docs/*.md", + "README.md" ]) }) test("Every selector class is documented", t => { - var undocumented = [] - selectors.forEach( selector => { - if (!classnames.includes(selector.replace(".", ""))) { + const undocumented = [] + selectors.forEach(selector => { + if (!classnames.includes(selector.replace(/^\./, ""))) { undocumented.push(selector) } }) From aac48253606157721d877e92c9cb5aff8c4927b4 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 11 Sep 2017 15:48:36 -0700 Subject: [PATCH 005/191] add branch-name SCSS and readme --- modules/primer-branch-name/README.md | 20 +++++++++++++++--- .../primer-branch-name/lib/branch-name.scss | 21 ++++++++++++++++++- 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/modules/primer-branch-name/README.md b/modules/primer-branch-name/README.md index 1fecf3e341..261e3924b7 100644 --- a/modules/primer-branch-name/README.md +++ b/modules/primer-branch-name/README.md @@ -36,11 +36,25 @@ $ npm run build ## Documentation -TODO: Write some documentation here. +Branch names can be a link name or not: + +```html +a_new_feature_branch +a_new_feature_branch +``` + +You may also include an octicon before the branch name text: + +```html + + <%= octicon("git-branch") width:16 height:16 %> + a_new_feature_branch + +``` diff --git a/modules/primer-branch-name/lib/branch-name.scss b/modules/primer-branch-name/lib/branch-name.scss index 8034abe200..f86ff604bf 100644 --- a/modules/primer-branch-name/lib/branch-name.scss +++ b/modules/primer-branch-name/lib/branch-name.scss @@ -1 +1,20 @@ -// SCSS goes here +// A nice way to display branch names inside the UI. Can be a link or not. +// stylelint-disable selector-max-type +.branch-name { + display: inline-block; + padding: 2px 6px; + font: 12px $mono-font; + color: rgba($black, 0.6); + background-color: lighten($blue-100, 3%); + border-radius: 3px; + + .octicon { + margin: 1px -2px 0 0; + color: desaturate($blue-300, 70%); + } +} + +// When a branch name is a link +// stylelint-disable selector-no-qualifying-type +a.branch-name { color: $text-blue; } +// stylelint-enable selector-no-qualifying-type From a1d8caef8503bf31f078a69643e7a6fd43685b7c Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 11 Sep 2017 15:58:49 -0700 Subject: [PATCH 006/191] treat ERB helpers as class name providers This adds a regex for documentation that essentially assumes ERB helpers like `<%= octicon("x") %>` will generate an element with the `octicon` class. cc @jonrohan --- tests/modules/test-document-styles.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/tests/modules/test-document-styles.js b/tests/modules/test-document-styles.js index d081c22886..89dc436736 100644 --- a/tests/modules/test-document-styles.js +++ b/tests/modules/test-document-styles.js @@ -6,7 +6,12 @@ const glob = require("glob") let selectors let classnames -const classRegex = /class="([^"]+)"/ig +const classPatterns = [ + // HTML class attributes + /class="([^"]+)"/ig, + // assume that ERB helpers generate an element with the same class + /<%= (\w+)\b/g, +] // Find unique selectors from the cssstats selector list function uniqueSelectors(s) { @@ -26,15 +31,20 @@ function uniqueSelectors(s) { // From the given glob sources array, read the files and return found classnames function documentedClassnames(sources) { const classes = [] - sources.forEach(f => { - glob.sync(f).forEach(g => { - var match = null + const files = sources.reduce((acc, pattern) => { + return acc.concat(glob.sync(pattern)) + }, []) - // While we match a classRegex in the source - while ((match = classRegex.exec(fs.readFileSync(g, "utf8"))) != null) { + files.forEach(file => { + let match = null + const content = fs.readFileSync(file, "utf8") - // Get the matched classnames "..." and split by space into classes - classes.push(...match[1].split(" ")) + classPatterns.forEach(pattern => { + // match each pattern against the source + while (match = pattern.exec(content)) { + // get the matched classnames and split by whitespace into classes + const klasses = match[1].trim().split(/\s+/) + classes.push(...klasses) } }) }) From 6498a0f1b2cf603a82979538b015274d92228eab Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 11 Sep 2017 16:50:31 -0700 Subject: [PATCH 007/191] import subhead component (product) --- modules/primer-css/package.json | 3 +- modules/primer-product/package.json | 3 +- modules/primer-subhead/LICENSE | 21 ++++ modules/primer-subhead/README.md | 124 ++++++++++++++++++++++++ modules/primer-subhead/index.scss | 3 + modules/primer-subhead/lib/subhead.scss | 39 ++++++++ modules/primer-subhead/package.json | 32 ++++++ 7 files changed, 223 insertions(+), 2 deletions(-) create mode 100644 modules/primer-subhead/LICENSE create mode 100644 modules/primer-subhead/README.md create mode 100644 modules/primer-subhead/index.scss create mode 100644 modules/primer-subhead/lib/subhead.scss create mode 100644 modules/primer-subhead/package.json diff --git a/modules/primer-css/package.json b/modules/primer-css/package.json index 8a9fa3c401..28752cbc72 100644 --- a/modules/primer-css/package.json +++ b/modules/primer-css/package.json @@ -54,7 +54,8 @@ "primer-tables": "1.3.0", "primer-tooltips": "1.3.0", "primer-truncate": "1.3.0", - "primer-utilities": "4.6.0" + "primer-utilities": "4.6.0", + "primer-subhead": "0.0.1" }, "keywords": [ "primer", diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index 827e79a08d..301e17156e 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -32,6 +32,7 @@ "primer-dropdown": "0.1.0", "primer-labels": "1.4.0", "primer-markdown": "3.6.0", - "primer-support": "4.3.0" + "primer-support": "4.3.0", + "primer-subhead": "0.0.1" } } diff --git a/modules/primer-subhead/LICENSE b/modules/primer-subhead/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/modules/primer-subhead/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/modules/primer-subhead/README.md b/modules/primer-subhead/README.md new file mode 100644 index 0000000000..b4d7b31a4c --- /dev/null +++ b/modules/primer-subhead/README.md @@ -0,0 +1,124 @@ +# Primer CSS / Subhead + +[![npm version](http://img.shields.io/npm/v/primer-subhead.svg)](https://www.npmjs.org/package/primer-subhead) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-subhead` with this command. + +``` +$ npm install --save primer-subhead +``` + +## 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-subhead/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 + + + +The basic Subhead consists of a `.Subhead` container, which has a light gray bottom border. Use `.Subhead-heading` for the heading itself. It's an `

` sized heading with normal font-weight. + +Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels. + +```html +
+
Plain subhead
+
+``` + +To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for separating sections on a settings page. + +```html +
+
Spacious subhead
+
+``` + +You can add a one line description to the subhead with `.Subhead-description`. + +```html +
+
Subhead with description
+
The subhead is a subdued header style with a light bottom border.
+
+``` + +For longer descriptions, it is recommended that you use a paragraph below the Subhead. + +```html +
+
Plain subhead
+
+

+ This is a longer description that is sitting below the Subheader. It's much longer than a description that could sit comfortably in the Subhead. It might even have bold text. Click to learn more. +

+``` + +You can add a button or something to the right of `.Subhead-heading` with the `.Subhead-actions` element. + +```html +
+
Subhead with button
+
Action
+
+ +
+
Subhead with link
+
Learn more
+
+``` + +Use all the elements together to create a Subhead with actions and a description. + +```html +
+
Subhead with actions and description
+
Action
+
The subhead is a subdued header style with a light bottom border.
+
+``` + +Use the `.Subhead-heading--danger` modifier to make the text bold and red. This is useful for warning users. + +```html +
+
Danger zone
+
+``` + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/modules/primer-subhead/index.scss b/modules/primer-subhead/index.scss new file mode 100644 index 0000000000..233be9b432 --- /dev/null +++ b/modules/primer-subhead/index.scss @@ -0,0 +1,3 @@ +// support files +@import "primer-support/index.scss"; +@import "./lib/subhead.scss"; diff --git a/modules/primer-subhead/lib/subhead.scss b/modules/primer-subhead/lib/subhead.scss new file mode 100644 index 0000000000..11b37ea216 --- /dev/null +++ b/modules/primer-subhead/lib/subhead.scss @@ -0,0 +1,39 @@ +// Subhead styles +.Subhead { + display: flex; + padding-bottom: $spacer-2; + margin-bottom: $spacer-3; + border-bottom: $border; + flex-flow: row wrap; +} + +// Modifier class to give a lot of breathing room between sections of content. +.Subhead--spacious { + margin-top: $spacer-6; +} + +//

sized heading with normal font weight +.Subhead-heading { + font-size: $h2-size; + font-weight: normal; + flex: 1 1 auto; +} + +// Make the text bold and red for dangerous content +.Subhead-heading--danger { + font-weight: $font-weight-bold; + color: $text-red; +} + +// One-liner of supporting text +.Subhead-description { + font-size: $body-font-size; + color: $text-gray; + flex: 1 100%; +} + +// Add 1 or 2 buttons to the right of the heading +.Subhead-actions { + align-self: center; + justify-content: flex-end; +} diff --git a/modules/primer-subhead/package.json b/modules/primer-subhead/package.json new file mode 100644 index 0000000000..129728df1f --- /dev/null +++ b/modules/primer-subhead/package.json @@ -0,0 +1,32 @@ +{ + "version": "0.0.1", + "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://primercss.io/", + "primer": { + "category": "product", + "module_type": "components" + }, + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-subhead", + "bugs": { + "url": "https://github.com/primer/primer-css/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.3.0" + }, + "keywords": [ + "github", + "primer" + ] +} From 71dc6f08ba0da9f3f1dd348d383103158b2f45fe Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 11 Sep 2017 17:14:44 -0700 Subject: [PATCH 008/191] import input-group SCSS --- modules/primer-forms/index.scss | 1 + modules/primer-forms/lib/input-group.scss | 51 +++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 modules/primer-forms/lib/input-group.scss diff --git a/modules/primer-forms/index.scss b/modules/primer-forms/index.scss index 540674802d..89a2247f81 100644 --- a/modules/primer-forms/index.scss +++ b/modules/primer-forms/index.scss @@ -3,3 +3,4 @@ @import "./lib/form-select.scss"; @import "./lib/form-group.scss"; @import "./lib/form-validation.scss"; +@import "./lib/input-group.scss"; diff --git a/modules/primer-forms/lib/input-group.scss b/modules/primer-forms/lib/input-group.scss new file mode 100644 index 0000000000..df49498735 --- /dev/null +++ b/modules/primer-forms/lib/input-group.scss @@ -0,0 +1,51 @@ +.input-group { + display: table; + + .form-control { + position: relative; + width: 100%; + + &:focus { + z-index: 2; + } + + + .btn { + margin-left: 0; + } + } + + // For when you want the input group to behave like inline-block. + &.inline { + display: inline-table; + } +} + +.input-group .form-control, +.input-group-button { + display: table-cell; +} + +.input-group-button { + width: 1%; + vertical-align: middle; // Match the inputs +} + +.input-group .form-control:first-child, +.input-group-button:first-child .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group-button:first-child .btn { + margin-right: -1px; +} + +.input-group .form-control:last-child, +.input-group-button:last-child .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-group-button:last-child .btn { + margin-left: -1px; +} From fc09b75551f153296fcd3f34f06bd2e8fb8382ec Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 12:06:30 -0700 Subject: [PATCH 009/191] stub out input group stories --- modules/primer-forms/stories/index.js | 276 ++++++++++--------- modules/primer-forms/stories/input-groups.js | 7 + 2 files changed, 147 insertions(+), 136 deletions(-) create mode 100644 modules/primer-forms/stories/input-groups.js diff --git a/modules/primer-forms/stories/index.js b/modules/primer-forms/stories/index.js index 9234217e04..a08e4d9cde 100644 --- a/modules/primer-forms/stories/index.js +++ b/modules/primer-forms/stories/index.js @@ -1,145 +1,149 @@ import React from 'react' import { storiesOf } from '@storybook/react' +// sub-stories +import inputGroups from './input-groups' + storiesOf('Forms', module) -.add('form-control', () => ( -
- -
-)) -.add('input-lg', () => ( -
- -
-)) -.add('input-sm', () => ( -
- -
-)) -.add('input-block', () => ( -
- -
-)) -.add('input-monospace', () => ( -
- -
-)) -.add('form-select', () => ( -
- -
-)) -.add('select-sm', () => ( -
- -
-)) -.add('radio', () => ( -
- -
-)) -.add('checkbox', () => ( -
- -
-)) -.add('textarea', () => ( -
- -
-)) -.add('form-actions', () => ( -
- - -
-)) -.add('label highlight', () => ( -
+ .add('form-control', () => ( +
+ +
+ )) + .add('input-lg', () => ( +
+ +
+ )) + .add('input-sm', () => ( +
+ +
+ )) + .add('input-block', () => ( +
+ +
+ )) + .add('input-monospace', () => ( +
+ +
+ )) + .add('form-select', () => ( +
+ +
+ )) + .add('select-sm', () => ( +
+ +
+ )) + .add('radio', () => ( +
+ +
+ )) + .add('checkbox', () => ( +
+ +
+ )) + .add('textarea', () => ( +
+ +
+ )) + .add('form-actions', () => ( +
+ + +
+ )) + .add('label highlight', () => ( +
+
+
+ +
+
+
+ )) + .add('form-checkbox-details', () => ( +
+ +
+ )) + .add('formgroup', () => (
-
- -
-
-
-)) -.add('form-checkbox-details', () => ( -
- -
-)) -.add('formgroup', () => ( -
-
-
-
-
- -
-
-
- -
-
+
+
+
+
-
-
-
- -
-
-
-)) -.add('form validation', () => ( -
-
-
-
-
-
This example input has an error.
+
+
+
+ +
-
-
-
-
-
This example input has a warning.
+ +
+
+
+ +
-
-)) + )) + .add('form validation', () => ( +
+
+
+
+
+
This example input has an error.
+
+
+
+
+
+
This example input has a warning.
+
+
+
+ )) + .add('input groups', inputGroups) diff --git a/modules/primer-forms/stories/input-groups.js b/modules/primer-forms/stories/input-groups.js new file mode 100644 index 0000000000..3026603992 --- /dev/null +++ b/modules/primer-forms/stories/input-groups.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default () => ( +
+

HI THERE

+
+) From 8c62991077f130552f6cd28833d04be15f53f218 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 13:09:56 -0700 Subject: [PATCH 010/191] export Octicon react element --- .storybook/Octicon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/Octicon.js b/.storybook/Octicon.js index 5af481abf6..59951b82ff 100644 --- a/.storybook/Octicon.js +++ b/.storybook/Octicon.js @@ -3,7 +3,7 @@ import {storiesOf} from '@storybook/react' import octicons from 'octicons' import SVGInline from 'react-svg-inline' -const Octicon = (props) => { +export const Octicon = (props) => { const {name} = props if (name in octicons) { return From 9d703e08ac567e38ca2c22c48669f6496128bdc0 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 13:10:15 -0700 Subject: [PATCH 011/191] add copy to clipboard input group story --- modules/primer-forms/stories/input-groups.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/modules/primer-forms/stories/input-groups.js b/modules/primer-forms/stories/input-groups.js index 3026603992..cfa49d3aa0 100644 --- a/modules/primer-forms/stories/input-groups.js +++ b/modules/primer-forms/stories/input-groups.js @@ -1,7 +1,20 @@ import React from 'react' +import {Octicon} from '../../../.storybook/Octicon' export default () => ( -
-

HI THERE

-
+
+
+ + + + +
+
) From 15a4016baae8646d3909c6a06fe8df392fe85fe8 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 13:19:26 -0700 Subject: [PATCH 012/191] add forms decorator to wrap w/
--- modules/primer-forms/stories/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/modules/primer-forms/stories/index.js b/modules/primer-forms/stories/index.js index a08e4d9cde..39118903f0 100644 --- a/modules/primer-forms/stories/index.js +++ b/modules/primer-forms/stories/index.js @@ -5,6 +5,9 @@ import { storiesOf } from '@storybook/react' import inputGroups from './input-groups' storiesOf('Forms', module) + .addDecorator(story => ( +
{story()}
+ )) .add('form-control', () => (
From 470662f103ef24759c7a48629965776a46a84b7f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 13:19:47 -0700 Subject: [PATCH 013/191] nix form.p-4 --- modules/primer-forms/stories/input-groups.js | 28 +++++++++----------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/modules/primer-forms/stories/input-groups.js b/modules/primer-forms/stories/input-groups.js index cfa49d3aa0..0a8a3e1c03 100644 --- a/modules/primer-forms/stories/input-groups.js +++ b/modules/primer-forms/stories/input-groups.js @@ -2,19 +2,17 @@ import React from 'react' import {Octicon} from '../../../.storybook/Octicon' export default () => ( -
-
- - - - -
-
+
+ + + + +
) From 82b92d4bf1a893c3d3bfd826415f9f3e5c6d7c9b Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 14:05:42 -0700 Subject: [PATCH 014/191] wrap everything in div.p-4 --- .storybook/config.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/.storybook/config.js b/.storybook/config.js index 32418d6f97..33b827897d 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,4 +1,5 @@ -import { configure } from '@storybook/react' +import React from 'react' +import { configure, addDecorator } from '@storybook/react' import { setOptions } from '@storybook/addon-options' import '../modules/primer-css/index.scss' @@ -8,6 +9,12 @@ setOptions({ showDownPanel: false, }) +addDecorator(story => ( +
+ {story()} +
+)) + const contexts = [ require.context('.', true, /\.js$/), require.context('../modules', true, /stories.*\.js$/), From 6e807ef887981712d8060852fb54c40a4b6da835 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 14:07:13 -0700 Subject: [PATCH 015/191] rename input-groups -> input-group --- modules/primer-forms/stories/index.js | 8 +++++--- .../stories/{input-groups.js => input-group.js} | 0 2 files changed, 5 insertions(+), 3 deletions(-) rename modules/primer-forms/stories/{input-groups.js => input-group.js} (100%) diff --git a/modules/primer-forms/stories/index.js b/modules/primer-forms/stories/index.js index 39118903f0..443e0fe70a 100644 --- a/modules/primer-forms/stories/index.js +++ b/modules/primer-forms/stories/index.js @@ -2,17 +2,20 @@ import React from 'react' import { storiesOf } from '@storybook/react' // sub-stories -import inputGroups from './input-groups' +import inputGroup from './input-group' storiesOf('Forms', module) .addDecorator(story => ( -
{story()}
+
+ {story()} +
)) .add('form-control', () => (
)) + .add('input-group', inputGroup) .add('input-lg', () => (
@@ -149,4 +152,3 @@ storiesOf('Forms', module)
)) - .add('input groups', inputGroups) diff --git a/modules/primer-forms/stories/input-groups.js b/modules/primer-forms/stories/input-group.js similarity index 100% rename from modules/primer-forms/stories/input-groups.js rename to modules/primer-forms/stories/input-group.js From 270bd6298fe37590a4fe4f267d105c46a606e79f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 14:07:51 -0700 Subject: [PATCH 016/191] remove unnecessary
and
wrappers --- modules/primer-alerts/stories/Flash.js | 40 +++------ modules/primer-breadcrumb/stories.js | 16 ++-- modules/primer-buttons/stories.js | 12 +-- modules/primer-forms/stories/index.js | 114 ++++++++++--------------- 4 files changed, 71 insertions(+), 111 deletions(-) diff --git a/modules/primer-alerts/stories/Flash.js b/modules/primer-alerts/stories/Flash.js index ebada81739..d3f6156d29 100644 --- a/modules/primer-alerts/stories/Flash.js +++ b/modules/primer-alerts/stories/Flash.js @@ -3,47 +3,35 @@ import { storiesOf } from '@storybook/react' storiesOf('Flash alerts', module) .add('flash', () => ( -
-
- flash -
+
+ flash
)) .add('flash-warn', () => ( -
-
- flash-warn -
+
+ flash-warn
)) .add('flash-error', () => ( -
-
- flash-error -
+
+ flash-error
)) .add('flash-success', () => ( -
-
- flash-success -
+
+ flash-success
)) .add('flash with action button', () => ( -
-
- - Flash message with action here. -
+
+ + Flash message with action here.
)) .add('flash-full', () => ( -
-
-
- Full width flash message. -
+
+
+ Full width flash message.
)) diff --git a/modules/primer-breadcrumb/stories.js b/modules/primer-breadcrumb/stories.js index fd4089f506..595be005e8 100644 --- a/modules/primer-breadcrumb/stories.js +++ b/modules/primer-breadcrumb/stories.js @@ -3,13 +3,11 @@ import { storiesOf } from '@storybook/react' storiesOf('Breadcrumb', module) .add('breadcrumb', () => ( -
- -
+ )) diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js index ad3db07991..9c457f9c89 100644 --- a/modules/primer-buttons/stories.js +++ b/modules/primer-buttons/stories.js @@ -6,7 +6,7 @@ storiesOf('Button', module) )) .add('btn-primary', () => ( -
+
@@ -15,7 +15,7 @@ storiesOf('Button', module)
)) .add('btn-secondary', () => ( -
+
@@ -24,7 +24,7 @@ storiesOf('Button', module)
)) .add('btn-danger', () => ( -
+
@@ -33,7 +33,7 @@ storiesOf('Button', module)
)) .add('btn-outline', () => ( -
+
@@ -42,7 +42,7 @@ storiesOf('Button', module)
)) .add('btn-blue', () => ( -
+
@@ -51,7 +51,7 @@ storiesOf('Button', module)
)) .add('btn-purple', () => ( -
+
diff --git a/modules/primer-forms/stories/index.js b/modules/primer-forms/stories/index.js index 443e0fe70a..6295ffaf41 100644 --- a/modules/primer-forms/stories/index.js +++ b/modules/primer-forms/stories/index.js @@ -11,68 +11,48 @@ storiesOf('Forms', module) )) .add('form-control', () => ( -
- -
+ + )) + .add('input-block', () => ( + )) .add('input-group', inputGroup) .add('input-lg', () => ( -
- -
+ )) .add('input-sm', () => ( -
- -
- )) - .add('input-block', () => ( -
- -
+ )) .add('input-monospace', () => ( -
- -
+ )) .add('form-select', () => ( -
- -
+ )) .add('select-sm', () => ( -
- -
+ )) .add('radio', () => ( -
- -
+ )) .add('checkbox', () => ( -
- -
+ )) .add('textarea', () => ( -
- -
+ )) .add('form-actions', () => (
@@ -81,15 +61,11 @@ storiesOf('Forms', module)
)) .add('label highlight', () => ( -
-
-
- -
-
+
+
)) .add('form-checkbox-details', () => ( @@ -105,8 +81,8 @@ storiesOf('Forms', module)
)) - .add('formgroup', () => ( -
+ .add('form-group', () => ( +
@@ -133,22 +109,20 @@ storiesOf('Forms', module)
- +
)) .add('form validation', () => (
-
-
-
-
-
This example input has an error.
-
-
-
-
-
-
This example input has a warning.
-
-
+
+
+
+
This example input has an error.
+
+
+
+
+
+
This example input has a warning.
+
)) From a11cdd01a94a58ef3480ebb2f5431a49dee3eddc Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 22 Sep 2017 15:43:44 -0700 Subject: [PATCH 017/191] add per-module RC bump script --- script/bump-rc | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100755 script/bump-rc diff --git a/script/bump-rc b/script/bump-rc new file mode 100755 index 0000000000..6ccb863430 --- /dev/null +++ b/script/bump-rc @@ -0,0 +1,42 @@ +#!/bin/bash +set -e + +package="$1" +npm_tag=rc +semver=$(npm bin)/semver + +pushd modules/$package > /dev/null + +# get the version we're publishing as a release candidate +local_version=$(jq -r .version package.json) +if [[ $local_version =~ "-" ]]; then + echo "❌ Found pre-release version: $package@$local_version; bailing!" + exit 1 +else + echo "Local version: $package@$local_version" +fi + +# find the *greatest* published prerelease +rc_prefix="$local_version-rc" +rc_version=$( + npm info "$package@$npm_tag" --json \ + | jq -r '.versions[]' \ + | grep "^${rc_prefix/./\.}" \ + | sort -r \ + | head -1 +) +# if there isn't one, use the current local version +if [[ "$rc_version" == "" ]]; then + rc_version=$local_version +fi + +echo "RC version: $rc_version" + +# increment by the tagged prerelease id +next_version=$( + $semver --increment prerelease --preid="$npm_tag" "$rc_version" +) + +echo "next RC version: $rc_version" +npm version --no-git "$next_version" +popd > /dev/null From 58f6a8fb4e885b55f3215d02b0fae460bf15433f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 22 Sep 2017 16:02:38 -0700 Subject: [PATCH 018/191] nicer output --- script/bump-rc | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/script/bump-rc b/script/bump-rc index 6ccb863430..83d237160a 100755 --- a/script/bump-rc +++ b/script/bump-rc @@ -5,15 +5,17 @@ package="$1" npm_tag=rc semver=$(npm bin)/semver +bold=$(tput bold) +normal=$(tput sgr0) + pushd modules/$package > /dev/null # get the version we're publishing as a release candidate local_version=$(jq -r .version package.json) +echo "Bumping $package@${local_version}" if [[ $local_version =~ "-" ]]; then echo "❌ Found pre-release version: $package@$local_version; bailing!" exit 1 -else - echo "Local version: $package@$local_version" fi # find the *greatest* published prerelease @@ -27,16 +29,17 @@ rc_version=$( ) # if there isn't one, use the current local version if [[ "$rc_version" == "" ]]; then + echo " 🤷‍♀️ no published RC; using ${bold}${local_version}${normal}" rc_version=$local_version +else + echo " 📰 published RC: ${bold}${rc_version}${normal}" fi -echo "RC version: $rc_version" - # increment by the tagged prerelease id next_version=$( - $semver --increment prerelease --preid="$npm_tag" "$rc_version" + $semver -i prerelease --preid $npm_tag "$rc_version" ) -echo "next RC version: $rc_version" -npm version --no-git "$next_version" +bumped=$(npm version --no-git "$next_version") +echo " ➡️ ${bold}${bumped}${normal}" popd > /dev/null From 91565886f4bf5ed7ef9032137873200c4df79253 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 22 Sep 2017 16:02:48 -0700 Subject: [PATCH 019/191] use bump-rc script for each module --- script/release-candidate | 45 +++------------------------------------- 1 file changed, 3 insertions(+), 42 deletions(-) diff --git a/script/release-candidate b/script/release-candidate index b6570f21f8..f894ba39c9 100755 --- a/script/release-candidate +++ b/script/release-candidate @@ -3,34 +3,6 @@ set -e echo "👌 Publishing release candidate..." package=primer-css -npm_tag=rc - -# get the version we're publishing as a release candidate -local_version=$(jq -r .version modules/$package/package.json) -if [[ $local_version =~ "-" ]]; then - echo "❌ Found pre-release version: $package@$local_version; bailing!" - exit 1 -else - echo "🏔 Local version: $package@$local_version" -fi - -# get the version most recently published to the rc dist-tag -rc_version=$(npm info $package@$npm_tag version) -echo "📦 Published version for $package@$npm_tag: $rc_version" -rc_release=${rc_version%-*} -if [[ $local_version != $rc_release ]]; then - rc_version=$local_version -fi - -# determine the -next_version=$( - $(npm bin)/semver --increment prerelease --preid $npm_tag $rc_version -) -echo "🤜 Next version: $package@$next_version" - -# strip the pre-release version, yielding just major.minor.patch -pre_version=${next_version:${#local_version}} -echo " Prerelease suffix: '$pre_version'" # if this is the same version, we need to bump the prerelease # for all of the modules using the same prerelease identifier @@ -38,23 +10,12 @@ echo "Updating all module versions in place..." echo module_dirs=modules/primer-* for module_dir in $module_dirs; do - pushd $module_dir > /dev/null module=$(basename $module_dir) - - # determine the local version (in git) - module_version=$(jq -r .version package.json) - # strip the rc version, just in case - module_version=${module_version%-*} - module_next_version="$module_version$pre_version" - - echo "$module@$module_version => $module_next_version" - # "upgrade" to the most recent RC version so that - # `npm version prerelease` can increment automatically - npm version --no-git --quiet "$module_next_version" - - popd > /dev/null + $(dirname $0)/bump-rc $module done +exit + # publish all the things! $(dirname $0)/notify pending From fe7aa58863f9e64f56b07dbd94d9b936d2c9e2e5 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 25 Sep 2017 14:55:46 -0500 Subject: [PATCH 020/191] don't exit form script/release-candidate --- script/release-candidate | 2 -- 1 file changed, 2 deletions(-) diff --git a/script/release-candidate b/script/release-candidate index f894ba39c9..cbbde5eeba 100755 --- a/script/release-candidate +++ b/script/release-candidate @@ -14,8 +14,6 @@ for module_dir in $module_dirs; do $(dirname $0)/bump-rc $module done -exit - # publish all the things! $(dirname $0)/notify pending From f1aec7517553d13cb15f87e32510b093fd9964ee Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 25 Sep 2017 15:04:25 -0500 Subject: [PATCH 021/191] fix the publish tag --- script/release-candidate | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script/release-candidate b/script/release-candidate index cbbde5eeba..dc9b5b4833 100755 --- a/script/release-candidate +++ b/script/release-candidate @@ -2,7 +2,7 @@ set -e echo "👌 Publishing release candidate..." -package=primer-css +npm_tag=rc # if this is the same version, we need to bump the prerelease # for all of the modules using the same prerelease identifier From 3f0f6295d6d32f50a94abf49d284d40ad97ca00e Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 26 Sep 2017 11:14:57 -0500 Subject: [PATCH 022/191] match all modules :facepalm: --- script/release-candidate | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script/release-candidate b/script/release-candidate index dc9b5b4833..ce7f80b659 100755 --- a/script/release-candidate +++ b/script/release-candidate @@ -8,7 +8,7 @@ npm_tag=rc # for all of the modules using the same prerelease identifier echo "Updating all module versions in place..." echo -module_dirs=modules/primer-* +module_dirs=modules/*primer* for module_dir in $module_dirs; do module=$(basename $module_dir) $(dirname $0)/bump-rc $module From 4d419bbfd05a262fd73d718b9e816e7d811ca35e Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 26 Sep 2017 11:40:59 -0500 Subject: [PATCH 023/191] semver is dumb --- script/bump-rc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script/bump-rc b/script/bump-rc index 83d237160a..4cbf10667a 100755 --- a/script/bump-rc +++ b/script/bump-rc @@ -30,7 +30,7 @@ rc_version=$( # if there isn't one, use the current local version if [[ "$rc_version" == "" ]]; then echo " 🤷‍♀️ no published RC; using ${bold}${local_version}${normal}" - rc_version=$local_version + rc_version="$local_version-rc.0" else echo " 📰 published RC: ${bold}${rc_version}${normal}" fi From bd3e1879792f83e36066e94439273effebc8d57f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 26 Sep 2017 11:44:46 -0500 Subject: [PATCH 024/191] actually add branch-name to product --- modules/primer-product/index.scss | 1 + modules/primer-product/package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/modules/primer-product/index.scss b/modules/primer-product/index.scss index 9ea42b7295..621ef5f825 100644 --- a/modules/primer-product/index.scss +++ b/modules/primer-product/index.scss @@ -17,6 +17,7 @@ @import "primer-alerts/index.scss"; @import "primer-avatars/index.scss"; @import "primer-blankslate/index.scss"; +@import "primer-branch-name/index.scss"; @import "primer-dropdown/index.scss"; @import "primer-labels/index.scss"; @import "primer-markdown/index.scss"; diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index ef9615d4b8..d6d9bab647 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -29,6 +29,7 @@ "primer-alerts": "1.4.0", "primer-avatars": "1.3.0", "primer-blankslate": "1.3.0", + "primer-branch-name": "0.0.1", "primer-dropdown": "0.1.0", "primer-labels": "1.4.0", "primer-markdown": "3.6.0", From a466d91a465051b778a3f5d4f48d9f1b584e3ab4 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 26 Sep 2017 11:49:32 -0500 Subject: [PATCH 025/191] alphanumeric semver sorting is dumb; just get the last one --- script/bump-rc | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/script/bump-rc b/script/bump-rc index 4cbf10667a..d5dca2f2cb 100755 --- a/script/bump-rc +++ b/script/bump-rc @@ -24,8 +24,7 @@ rc_version=$( npm info "$package@$npm_tag" --json \ | jq -r '.versions[]' \ | grep "^${rc_prefix/./\.}" \ - | sort -r \ - | head -1 + | tail -1 ) # if there isn't one, use the current local version if [[ "$rc_version" == "" ]]; then From 5b4759e8a62b1a6f8387faae28c20009b89ef6e1 Mon Sep 17 00:00:00 2001 From: liz abinante! Date: Thu, 5 Oct 2017 12:35:54 -0700 Subject: [PATCH 026/191] change li break to handle safari user stylesheet bug --- modules/primer-markdown/lib/lists.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/modules/primer-markdown/lib/lists.scss b/modules/primer-markdown/lib/lists.scss index b4510bd9ae..1a09ffcdfb 100644 --- a/modules/primer-markdown/lib/lists.scss +++ b/modules/primer-markdown/lib/lists.scss @@ -45,6 +45,10 @@ margin-bottom: 0; } + li { + word-wrap: break-all; + } + li > p { margin-top: $spacer-3; } From fa1ab245afab9fcdd860582b0453ecd2b31e8066 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 5 Oct 2017 13:48:50 -0700 Subject: [PATCH 027/191] Removing before after padding hack --- modules/primer-markdown/lib/code.scss | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/modules/primer-markdown/lib/code.scss b/modules/primer-markdown/lib/code.scss index f703f9236d..437d0eab49 100644 --- a/modules/primer-markdown/lib/code.scss +++ b/modules/primer-markdown/lib/code.scss @@ -3,19 +3,11 @@ // Inline code snippets code, tt { - padding: 0; - padding-top: 0.2em; - padding-bottom: 0.2em; + padding: 0.2em; margin: 0; font-size: 85%; background-color: rgba($black, 0.05); - border-radius: 3px; // don't add padding, gives scrollbars - - &::before, - &::after { - letter-spacing: -0.2em; // this creates padding - content: "\00a0"; - } + border-radius: 3px; br { display: none; } } From 6626240e7ffc0d371943853c0c32c7c86ddbd2e3 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 5 Oct 2017 15:18:11 -0700 Subject: [PATCH 028/191] adding markdown story to storybook --- .storybook/preview-head.html | 1 - modules/primer-markdown/lib/code.scss | 7 +------ modules/primer-markdown/stories.js | 18 ++++++++++++++++++ 3 files changed, 19 insertions(+), 7 deletions(-) create mode 100644 modules/primer-markdown/stories.js diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 03d0c82b2d..8283d59a14 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,2 +1 @@ - diff --git a/modules/primer-markdown/lib/code.scss b/modules/primer-markdown/lib/code.scss index 437d0eab49..e9b2403331 100644 --- a/modules/primer-markdown/lib/code.scss +++ b/modules/primer-markdown/lib/code.scss @@ -3,7 +3,7 @@ // Inline code snippets code, tt { - padding: 0.2em; + padding: 0.2em 0.4em; margin: 0; font-size: 85%; background-color: rgba($black, 0.05); @@ -59,10 +59,5 @@ word-wrap: normal; background-color: transparent; border: 0; - - &::before, - &::after { - content: normal; - } } } diff --git a/modules/primer-markdown/stories.js b/modules/primer-markdown/stories.js new file mode 100644 index 0000000000..926c4a26ab --- /dev/null +++ b/modules/primer-markdown/stories.js @@ -0,0 +1,18 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +storiesOf('Markdown', module) + .add('code', () => ( +
+

+ This is inline code block. This code block has a <br>
in it. When a code block has a long sentence in it, it should wrap the page to a new line. Some people like to see the world burn and put reallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstrings in the code blocks. +

+
+ )) + .add('pre', () => ( +
+ 
+        Really long pre blocks should scroll horizontally when the words are longer than the parent container
+
+
+ )) From 8145e90a694820dd7d92a32161cb13e2b67a4d06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mu-An=20=E2=9C=8C=EF=B8=8F=20Chiou?= Date: Mon, 16 Oct 2017 16:43:42 +0800 Subject: [PATCH 029/191] Add details reset rules to primer --- modules/primer-base/lib/base.scss | 9 +++++++++ modules/primer-buttons/lib/button.scss | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/modules/primer-base/lib/base.scss b/modules/primer-base/lib/base.scss index 88213a74aa..8c1bba0458 100644 --- a/modules/primer-base/lib/base.scss +++ b/modules/primer-base/lib/base.scss @@ -65,3 +65,12 @@ th { button { cursor: pointer; } + +details { + summary { cursor: pointer; } + + &:not([open]) { + // Set details content hidden by default for browsers that don't do this + > *:not(summary) { display: none; } + } +} diff --git a/modules/primer-buttons/lib/button.scss b/modules/primer-buttons/lib/button.scss index d31cd625e3..a0d32a596f 100644 --- a/modules/primer-buttons/lib/button.scss +++ b/modules/primer-buttons/lib/button.scss @@ -202,3 +202,12 @@ } } } + +.details-reset { + // Remove marker added by the display: list-item browser default + > summary { list-style: none; } + // Remove marker added by details polyfill + > summary::before { display: none; } + // Remove marker added by Chrome + > summary::-webkit-details-marker { display: none; } +} From 6e350f869f11eecc50042bf83bd97bd2b84e3b7d Mon Sep 17 00:00:00 2001 From: agisilaos Date: Thu, 19 Oct 2017 19:19:04 +0300 Subject: [PATCH 030/191] Added `Fixes #` into the PR template --- .github/pull_request_template.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 97f6af521b..c23be7e8e3 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,6 +2,8 @@ ↑ Next, briefly describe your proposal in the title. +Fixes: # + Finally, tell us more about the change here, in the description. /cc @primer/ds-core From 1c9fbfa178ccbe76608e2ebd82ae1895f9e0fa4c Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 11:27:33 -0500 Subject: [PATCH 031/191] New reponsive layout/position utils --- modules/primer-marketing-utilities/lib/layout.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 modules/primer-marketing-utilities/lib/layout.scss diff --git a/modules/primer-marketing-utilities/lib/layout.scss b/modules/primer-marketing-utilities/lib/layout.scss new file mode 100644 index 0000000000..c6d983c6bf --- /dev/null +++ b/modules/primer-marketing-utilities/lib/layout.scss @@ -0,0 +1,13 @@ +// Layout utilities +// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before + +// Responsive position utilities + +@each $breakpoint in map-keys($breakpoints) { + @include breakpoint($breakpoint) { + /* Set position to relative */ + .position-#{$breakpoint}-relative { position: relative !important; } + /* Set position to absolute */ + .position-#{$breakpoint}-absolute { position: absolute !important; } + } +} From 93170a2db5d6fd871394700fe790b70dd385e558 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 12:05:17 -0500 Subject: [PATCH 032/191] Docs for responsive positioning --- .../primer-marketing-utilities/docs/layout.md | 21 +++++++++++++++++++ .../lib/layout.scss | 2 ++ 2 files changed, 23 insertions(+) create mode 100644 modules/primer-marketing-utilities/docs/layout.md diff --git a/modules/primer-marketing-utilities/docs/layout.md b/modules/primer-marketing-utilities/docs/layout.md new file mode 100644 index 0000000000..53b5b5e27d --- /dev/null +++ b/modules/primer-marketing-utilities/docs/layout.md @@ -0,0 +1,21 @@ +--- +title: Layout +status: New release +status_issue: https://github.com/github/design-systems/issues/325 +--- + +The following layout utilities are meant to used in addition to those within primer-core. + +{:toc} + +## Responsive position + +These position utilities behave the same way as the positioning utilities in primer-core, however they include responsive states so that they can be used at specific viewport widths. + +```html +
+
+ Mashed potatoes +
+
+``` diff --git a/modules/primer-marketing-utilities/lib/layout.scss b/modules/primer-marketing-utilities/lib/layout.scss index c6d983c6bf..e2a24923b1 100644 --- a/modules/primer-marketing-utilities/lib/layout.scss +++ b/modules/primer-marketing-utilities/lib/layout.scss @@ -9,5 +9,7 @@ .position-#{$breakpoint}-relative { position: relative !important; } /* Set position to absolute */ .position-#{$breakpoint}-absolute { position: absolute !important; } + /* Set position to fixed */ + .position-#{$breakpoint}-fixed { position: fixed !important; } } } From 62f552c82443d5774df9f7102bfd697667e3becf Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 12:06:56 -0500 Subject: [PATCH 033/191] border-white fade css --- modules/primer-marketing-utilities/lib/borders.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/modules/primer-marketing-utilities/lib/borders.scss b/modules/primer-marketing-utilities/lib/borders.scss index 12ed39167a..7236851e8b 100644 --- a/modules/primer-marketing-utilities/lib/borders.scss +++ b/modules/primer-marketing-utilities/lib/borders.scss @@ -15,3 +15,8 @@ .border-#{$breakpoint}-left-0 { border-left: 0 !important; } } } + +/* Use with .border to turn the border rgba white 0.15 */ +.border-white-fade { + border-color: $white-fade-15 !important; +} From 57075a29ed0dbef5996d5c6b30b96f6f6a1d6d58 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 12:07:03 -0500 Subject: [PATCH 034/191] border-white-fade docs --- .../primer-marketing-utilities/docs/borders.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/modules/primer-marketing-utilities/docs/borders.md b/modules/primer-marketing-utilities/docs/borders.md index 4f50741df1..dd71860b71 100644 --- a/modules/primer-marketing-utilities/docs/borders.md +++ b/modules/primer-marketing-utilities/docs/borders.md @@ -17,3 +17,18 @@ Top, right, bottom, and left border utilities are can be used responsively to ad .border-top-0
``` + +## Border Colors + +### White border with alpha transparency + +In addition to `.border-black-fade` which is in primer-core, primer-marketing includes `.border-white-fade`. This adds a rgba 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. + +```html +
+ .border-white-fade .bg-gray-dark +
+
+ .border-white-fade .bg-blue +
+``` From 12bd248ea9197aedfbe3db74c645726cdb21178f Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 12:08:39 -0500 Subject: [PATCH 035/191] hover grow css --- modules/primer-utilities/lib/animations.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/modules/primer-utilities/lib/animations.scss b/modules/primer-utilities/lib/animations.scss index ef751cc884..d6031558d1 100644 --- a/modules/primer-utilities/lib/animations.scss +++ b/modules/primer-utilities/lib/animations.scss @@ -151,3 +151,13 @@ transform: scale3d(1, 1, 1); } } + +/* Increase scale of an element on hover */ + +.hover-grow { + transition: transform 0.3s; + + &:hover { + transform: scale(1.025); + } +} From c18b8d0838a3d7bd6d9a0d41e9aa7ee1dcf1b027 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 12:10:29 -0500 Subject: [PATCH 036/191] hover grow docs --- modules/primer-utilities/docs/animations.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/modules/primer-utilities/docs/animations.md b/modules/primer-utilities/docs/animations.md index 8ee6b0d970..11b7337199 100644 --- a/modules/primer-utilities/docs/animations.md +++ b/modules/primer-utilities/docs/animations.md @@ -55,3 +55,13 @@ The `.anim-pulse` class will pulse an element infinitely. ```html <%= octicon("mark-github", :class => "anim-pulse") %> ``` + +## Hover animation + +The `.hover-grow` class will increase the scale of the element upon hover. + +```html +
+ <%= octicon("mark-github"), :height => 32 %> +
+``` From aee148332e4f431e7c62f585c5880aea9c807c8f Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 12:13:39 -0500 Subject: [PATCH 037/191] Add fade out css --- modules/primer-utilities/lib/animations.scss | 25 ++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/modules/primer-utilities/lib/animations.scss b/modules/primer-utilities/lib/animations.scss index d6031558d1..8ee730be7e 100644 --- a/modules/primer-utilities/lib/animations.scss +++ b/modules/primer-utilities/lib/animations.scss @@ -1,7 +1,7 @@ // This file contains reusable animations for github. // stylelint-disable primer/selector-no-utility -// Fade in -// A class to fade in an element on the page. + +/* Fade in an element */ .anim-fade-in { animation-name: fade-in; animation-duration: 1s; @@ -22,6 +22,27 @@ } } +/* Fade out an element */ +.anim-fade-out { + animation-name: fade-out; + animation-duration: 1s; + animation-timing-function: ease-out; + + &.fast { + animation-duration: 0.3s; + } +} + +@keyframes fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + /* Fade in and slide up an element */ .anim-fade-up { opacity: 0; From 3d47e863052b6ab7a9aca6136888827c166a03ef Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 12:16:02 -0500 Subject: [PATCH 038/191] Add fade out docs --- modules/primer-utilities/docs/animations.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/modules/primer-utilities/docs/animations.md b/modules/primer-utilities/docs/animations.md index 11b7337199..164ed84d35 100644 --- a/modules/primer-utilities/docs/animations.md +++ b/modules/primer-utilities/docs/animations.md @@ -16,6 +16,13 @@ The `.anim-fade-in` class is used to fade in an element on the page. This will r <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub! ``` +## Fade Out + +The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed. + +```html +<%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub! + ## Fade Up The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page. From 2530d4ce804ecbdbea24cd860e1852580762607b Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 15:07:41 -0500 Subject: [PATCH 039/191] Add circle class --- modules/primer-utilities/docs/borders.md | 5 ++++- modules/primer-utilities/lib/borders.scss | 2 ++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/modules/primer-utilities/docs/borders.md b/modules/primer-utilities/docs/borders.md index b20eff9e9e..e27e300bce 100644 --- a/modules/primer-utilities/docs/borders.md +++ b/modules/primer-utilities/docs/borders.md @@ -109,7 +109,7 @@ Use `border-dashed` to give an element a dashed border. ## Rounded corners -Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. +Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles. ```html
@@ -121,4 +121,7 @@ Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1`
.rounded-2
+
+ .circle +
``` diff --git a/modules/primer-utilities/lib/borders.scss b/modules/primer-utilities/lib/borders.scss index ead6f66acf..ec68185f04 100644 --- a/modules/primer-utilities/lib/borders.scss +++ b/modules/primer-utilities/lib/borders.scss @@ -61,3 +61,5 @@ .rounded-1 { border-radius: $border-radius !important; } /* Add a 2x border-radius to all corners */ .rounded-2 { border-radius: $border-radius * 2 !important; } +/* Add a 50% border-radius to make something into a circle */ +.circle { border-radius: 50% !important; } From 17542a2ee8ec9d93de10f2c138b2023ae44332b1 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 16:50:47 -0500 Subject: [PATCH 040/191] Add utilities and marketing utilities to storybook --- modules/primer-marketing-utilities/stories.js | 10 ++++++++++ modules/primer-utilities/stories.js | 10 ++++++++++ 2 files changed, 20 insertions(+) create mode 100644 modules/primer-marketing-utilities/stories.js create mode 100644 modules/primer-utilities/stories.js diff --git a/modules/primer-marketing-utilities/stories.js b/modules/primer-marketing-utilities/stories.js new file mode 100644 index 0000000000..bf8b0db1ff --- /dev/null +++ b/modules/primer-marketing-utilities/stories.js @@ -0,0 +1,10 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown' + +const stories = storiesOf('Marketing Utilities', module) + +storiesFromMarkdown(require.context('.', true, /\.md$/)) + .forEach(({title, story}) => { + stories.add(title, story) + }) diff --git a/modules/primer-utilities/stories.js b/modules/primer-utilities/stories.js new file mode 100644 index 0000000000..4c4d0f9a43 --- /dev/null +++ b/modules/primer-utilities/stories.js @@ -0,0 +1,10 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown' + +const stories = storiesOf('Utilities', module) + +storiesFromMarkdown(require.context('.', true, /\.md$/)) + .forEach(({title, story}) => { + stories.add(title, story) + }) From 4c713a9ca8b254715d67c14295e5992598438fc5 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 16:51:03 -0500 Subject: [PATCH 041/191] Rename headings to fix storybook errors --- modules/primer-utilities/docs/margin.md | 4 ++-- modules/primer-utilities/docs/padding.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/primer-utilities/docs/margin.md b/modules/primer-utilities/docs/margin.md index ed1447a205..7e8e61dde2 100644 --- a/modules/primer-utilities/docs/margin.md +++ b/modules/primer-utilities/docs/margin.md @@ -31,7 +31,7 @@ Since margin utilities have many variations and will be used in many places, we _**Note:** The blue in the examples represents the element, and the orange represents the margin_ -## Uniform spacing +## Uniform margins Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6. @@ -59,7 +59,7 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
``` -## Directional spacing +## Directional margins Use directional utilities to apply margin to an individual side, or the X and Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 0-6. diff --git a/modules/primer-utilities/docs/padding.md b/modules/primer-utilities/docs/padding.md index 94289f01db..7395e25f5f 100644 --- a/modules/primer-utilities/docs/padding.md +++ b/modules/primer-utilities/docs/padding.md @@ -30,7 +30,7 @@ Since padding utilities have many variations and will be used in many places, we _**Note:** The blue in the examples below represents the element, and the green represents the padding._ -## Uniform spacing +## Uniform padding Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6. @@ -58,7 +58,7 @@ Use uniform spacing utilities to apply equal padding to all sides of an element.
``` -## Directional spacing +## Directional padding Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6. From 9e13c395c57629c592c8592dc6fd86403264c701 Mon Sep 17 00:00:00 2001 From: agisilaos Date: Fri, 20 Oct 2017 00:51:18 +0300 Subject: [PATCH 042/191] Make a checklist out of the 3 sentences Also fixed the naming of the `Fixes: #` with the help of @shawnbot. --- .github/pull_request_template.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c23be7e8e3..06c38d4cd4 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,9 +1,9 @@ -↖ First, change the base branch from "master" to "dev". +- [ ] First, change the base branch from "master" to "dev". -↑ Next, briefly describe your proposal in the title. +- [ ] Next, briefly describe your proposal in the title. + +- [ ] Fixes: # (type an issue number after the # if applicable) -Fixes: # - Finally, tell us more about the change here, in the description. /cc @primer/ds-core From abc2175b4dfc6f532c7a0e014a1919fb4843108f Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 16:54:39 -0500 Subject: [PATCH 043/191] oops, put the ) in the right spot --- modules/primer-utilities/docs/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-utilities/docs/animations.md b/modules/primer-utilities/docs/animations.md index 164ed84d35..004465ed80 100644 --- a/modules/primer-utilities/docs/animations.md +++ b/modules/primer-utilities/docs/animations.md @@ -69,6 +69,6 @@ The `.hover-grow` class will increase the scale of the element upon hover. ```html
- <%= octicon("mark-github"), :height => 32 %> + <%= octicon("mark-github", :height => 32) %>
``` From cbae32d4dc1c799b7468b8aaf29ad71b6392ef9a Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 17:02:12 -0500 Subject: [PATCH 044/191] fix border examples --- modules/primer-marketing-utilities/docs/borders.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/modules/primer-marketing-utilities/docs/borders.md b/modules/primer-marketing-utilities/docs/borders.md index dd71860b71..22123d43c7 100644 --- a/modules/primer-marketing-utilities/docs/borders.md +++ b/modules/primer-marketing-utilities/docs/borders.md @@ -25,10 +25,14 @@ Top, right, bottom, and left border utilities are can be used responsively to ad In addition to `.border-black-fade` which is in primer-core, primer-marketing includes `.border-white-fade`. This adds a rgba 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. ```html -
- .border-white-fade .bg-gray-dark +
+ + .border-white-fade .bg-gray-dark +
-
- .border-white-fade .bg-blue +
+ + .border-white-fade .bg-blue +
``` From c814e56794b61ac0d0d07c4eaf8e9621cbeb3c6b Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 17:02:31 -0500 Subject: [PATCH 045/191] show more examples of positioning in docs --- .../primer-marketing-utilities/docs/layout.md | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/modules/primer-marketing-utilities/docs/layout.md b/modules/primer-marketing-utilities/docs/layout.md index 53b5b5e27d..03f2353e65 100644 --- a/modules/primer-marketing-utilities/docs/layout.md +++ b/modules/primer-marketing-utilities/docs/layout.md @@ -13,9 +13,22 @@ The following layout utilities are meant to used in addition to those within pri These position utilities behave the same way as the positioning utilities in primer-core, however they include responsive states so that they can be used at specific viewport widths. ```html -
-
- Mashed potatoes +
+
+ .position-md-absolute
+ +
+ default +
+
+ .position-lg-relative +
+
+ default +
+
+ default +
``` From 9060f34f7b059f7d298a288c198935045008a10e Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Thu, 19 Oct 2017 17:02:57 -0500 Subject: [PATCH 046/191] include scss (might need that) & add margin to make example look better --- modules/primer-marketing-utilities/index.scss | 1 + modules/primer-utilities/docs/borders.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/primer-marketing-utilities/index.scss b/modules/primer-marketing-utilities/index.scss index e605a72bcd..67a7d638fb 100644 --- a/modules/primer-marketing-utilities/index.scss +++ b/modules/primer-marketing-utilities/index.scss @@ -2,3 +2,4 @@ // utilities @import "./lib/filters.scss"; @import "./lib/borders.scss"; +@import "./lib/layout.scss"; diff --git a/modules/primer-utilities/docs/borders.md b/modules/primer-utilities/docs/borders.md index e27e300bce..7723be2e0c 100644 --- a/modules/primer-utilities/docs/borders.md +++ b/modules/primer-utilities/docs/borders.md @@ -118,7 +118,7 @@ Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1`
.rounded-1
-
+
.rounded-2
From 478f7642f7ad2ea6ba51e6f1032686fd2465f616 Mon Sep 17 00:00:00 2001 From: agisilaos Date: Fri, 20 Oct 2017 01:23:49 +0300 Subject: [PATCH 047/191] Added a space between the # and the ( --- .github/pull_request_template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 06c38d4cd4..42f3183180 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,7 +2,7 @@ - [ ] Next, briefly describe your proposal in the title. -- [ ] Fixes: # (type an issue number after the # if applicable) +- [ ] Fixes: # (type an issue number after the # if applicable) Finally, tell us more about the change here, in the description. From ce1a6f8ab8f85fa49d1650dd6a374004d89a1dba Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Fri, 20 Oct 2017 16:25:30 -0700 Subject: [PATCH 048/191] Add underline nav styles and import file --- modules/primer-navigation/index.scss | 1 + .../primer-navigation/lib/underline-nav.scss | 73 +++++++++++++++++++ 2 files changed, 74 insertions(+) create mode 100644 modules/primer-navigation/lib/underline-nav.scss diff --git a/modules/primer-navigation/index.scss b/modules/primer-navigation/index.scss index 7f9db61939..0d4ed3dcd1 100644 --- a/modules/primer-navigation/index.scss +++ b/modules/primer-navigation/index.scss @@ -4,3 +4,4 @@ @import "./lib/tabnav.scss"; @import "./lib/filter-list.scss"; @import "./lib/subnav.scss"; +@import "./lib/underline-nav.scss"; diff --git a/modules/primer-navigation/lib/underline-nav.scss b/modules/primer-navigation/lib/underline-nav.scss new file mode 100644 index 0000000000..7ab9ae3755 --- /dev/null +++ b/modules/primer-navigation/lib/underline-nav.scss @@ -0,0 +1,73 @@ +.UnderlineNav { + display: flex; + justify-content: space-between; + border-bottom: 1px solid $gray-200; +} + +.UnderlineNav-items { + display: flex; + margin-bottom: -1px; +} + +.UnderlineNav-item { + padding: $spacer-3 $spacer-2; + margin-right: $spacer-3; + font-size: $body-font-size; + text-align: center; + line-height: $lh-default; + color: $text-gray; + border-bottom: 2px solid transparent; + + .Counter { + margin-left: $spacer-1; + } + + .octicon { + margin-right: $spacer-1; + color: $gray-400; + } + + &:hover, + &:focus { + color: $text-gray-dark; + text-decoration: none; + border-bottom-color: $gray-300; + transition: 0.2s ease; + + .octicon { + color: $gray-500; + } + } + + &.selected { + color: $text-gray-dark; + border-bottom-color: $orange-600; + font-weight: $font-weight-bold; + + .octicon { + color: $gray-500; + } + } +} + +.UnderlineNav--right { + justify-content: flex-end; + + .UnderlineNav-item { + margin-right: 0; + margin-left: $spacer-3; + } +} + +.UnderlineNav-actions { + align-self: center; +} + +.UnderlineNav--full { + display: block; + + .container-lg { + display: flex; + justify-content: space-between; + } +} From 67fe320a958ee9b620ae518cc0a4012c25d3d402 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Fri, 20 Oct 2017 16:25:43 -0700 Subject: [PATCH 049/191] Add octicon styles to prototype --- .storybook/preview-head.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 03d0c82b2d..d52d3fd95e 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,2 +1,8 @@ - + From 346992a5e419a52ce1ec84a5f07e2ee953a736e0 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Fri, 20 Oct 2017 16:25:52 -0700 Subject: [PATCH 050/191] Add prototyping cases --- modules/primer-navigation/stories.js | 209 +++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 modules/primer-navigation/stories.js diff --git a/modules/primer-navigation/stories.js b/modules/primer-navigation/stories.js new file mode 100644 index 0000000000..ac8fba426d --- /dev/null +++ b/modules/primer-navigation/stories.js @@ -0,0 +1,209 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +storiesOf('Navigation', module) + .add('UnderlineNav', () => ( + + )) + .add('UnderlineNav--right', () => ( + + )) + .add('UnderlineNav with Counter', () => ( + + )) + .add('UnderlineNav with octicon', () => ( + + )) + .add('UnderlineNav with container', () => ( + + )) + .add('UnderlineNav with action', () => ( + + )) From ca5a104d3a914d3f1c1b89c49c1e998700ad7813 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Fri, 20 Oct 2017 16:25:57 -0700 Subject: [PATCH 051/191] Add docs --- modules/primer-navigation/README.md | 80 +++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/modules/primer-navigation/README.md b/modules/primer-navigation/README.md index 6f951d310d..f0a030a2ae 100644 --- a/modules/primer-navigation/README.md +++ b/modules/primer-navigation/README.md @@ -244,6 +244,86 @@ You can also use a `subnav-search-context` to display search help in a select me
``` + +## Underline navigation + +`.UnderlineNav` is navigation that is typically used at the top of a page as the main page navigation. + +```html + + +``` + +You can right align the navigation. + +```html + +``` + + +The navigation will work with added counters and/or octicons + +```html + +``` + +Use `.UnderlineNav--full` to use a container within the components + +```html + +``` + +Use `.UnderlineNav-actions` to use another element alongside the underline nav + +```html + +``` ## License From 936a8fe83e8a9b4762fea00c033b3a3a82775d51 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Mon, 23 Oct 2017 15:47:34 -0700 Subject: [PATCH 052/191] Move underline nav section in docs --- modules/primer-navigation/README.md | 158 ++++++++++++++-------------- 1 file changed, 80 insertions(+), 78 deletions(-) diff --git a/modules/primer-navigation/README.md b/modules/primer-navigation/README.md index f0a030a2ae..c0e71a057b 100644 --- a/modules/primer-navigation/README.md +++ b/modules/primer-navigation/README.md @@ -93,6 +93,86 @@ You can also add optional headings to a menu. Feel free to use nearly any semant ``` +## Underline nav + +`.UnderlineNav` is navigation that is typically used at the top of a page as the main page navigation. + +```html + + +``` + +You can right align the navigation. + +```html + +``` + + +The navigation will work with added counters and/or octicons + +```html + +``` + +Use `.UnderlineNav--full` to use a container within the components + +```html + +``` + +Use `.UnderlineNav-actions` to use another element alongside the underline nav + +```html + +``` + ## Tabnav @@ -245,85 +325,7 @@ You can also use a `subnav-search-context` to display search help in a select me
``` -## Underline navigation - -`.UnderlineNav` is navigation that is typically used at the top of a page as the main page navigation. - -```html - - -``` - -You can right align the navigation. - -```html - -``` - - -The navigation will work with added counters and/or octicons - -```html - -``` - -Use `.UnderlineNav--full` to use a container within the components -```html - -``` - -Use `.UnderlineNav-actions` to use another element alongside the underline nav - -```html - -``` ## License From fcfb2eabf124c29edea830fdcfd2b02308b87af5 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 6 Sep 2017 12:13:00 -0700 Subject: [PATCH 053/191] Moving primer-breadcrumbs to core --- modules/primer-breadcrumb/index.scss | 1 - modules/primer-breadcrumb/package.json | 3 +-- modules/primer-core/index.scss | 1 + modules/primer-core/package.json | 1 + modules/primer-marketing/index.scss | 1 - modules/primer-marketing/package.json | 1 - 6 files changed, 3 insertions(+), 5 deletions(-) diff --git a/modules/primer-breadcrumb/index.scss b/modules/primer-breadcrumb/index.scss index 2ddf84da7b..308f48cde6 100644 --- a/modules/primer-breadcrumb/index.scss +++ b/modules/primer-breadcrumb/index.scss @@ -1,4 +1,3 @@ // support files @import "primer-support/index.scss"; -@import "primer-marketing-support/index.scss"; @import "./lib/breadcrumb.scss"; diff --git a/modules/primer-breadcrumb/package.json b/modules/primer-breadcrumb/package.json index b038e54bd3..1f630f6027 100644 --- a/modules/primer-breadcrumb/package.json +++ b/modules/primer-breadcrumb/package.json @@ -8,7 +8,7 @@ "style": "build/build.css", "main": "build/index.js", "primer": { - "category": "marketing", + "category": "core", "module_type": "components" }, "files": [ @@ -28,7 +28,6 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-marketing-support": "1.3.1", "primer-support": "4.4.1" }, "keywords": [ diff --git a/modules/primer-core/index.scss b/modules/primer-core/index.scss index 0ede55963e..b032019ca7 100644 --- a/modules/primer-core/index.scss +++ b/modules/primer-core/index.scss @@ -16,6 +16,7 @@ // Core modules @import "primer-base/index.scss"; @import "primer-box/index.scss"; +@import "primer-breadcrumb/index.scss"; @import "primer-buttons/index.scss"; @import "primer-table-object/index.scss"; @import "primer-forms/index.scss"; diff --git a/modules/primer-core/package.json b/modules/primer-core/package.json index dee09d013c..f951cf73a2 100644 --- a/modules/primer-core/package.json +++ b/modules/primer-core/package.json @@ -28,6 +28,7 @@ "dependencies": { "primer-base": "1.5.1", "primer-box": "2.5.1", + "primer-breadcrumb": "1.3.0", "primer-buttons": "2.4.1", "primer-forms": "1.4.1", "primer-layout": "1.4.1", diff --git a/modules/primer-marketing/index.scss b/modules/primer-marketing/index.scss index e211414969..d7bbc638c4 100755 --- a/modules/primer-marketing/index.scss +++ b/modules/primer-marketing/index.scss @@ -16,7 +16,6 @@ // marketing specific css modules @import "primer-marketing-type/index.scss"; -@import "primer-breadcrumb/index.scss"; @import "primer-cards/index.scss"; @import "primer-page-headers/index.scss"; @import "primer-page-sections/index.scss"; diff --git a/modules/primer-marketing/package.json b/modules/primer-marketing/package.json index 14de49244a..be567c94c5 100644 --- a/modules/primer-marketing/package.json +++ b/modules/primer-marketing/package.json @@ -26,7 +26,6 @@ "lint": "../../script/lint-scss" }, "dependencies": { - "primer-breadcrumb": "1.4.1", "primer-cards": "0.5.1", "primer-marketing-support": "1.3.1", "primer-marketing-type": "1.4.1", From 08380611364d80cbdf6203683be25f64582d3a89 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 13:26:23 -0700 Subject: [PATCH 054/191] add primer-dropdown@1.0.0 to primer-css deps --- modules/primer-dropdown/package.json | 39 ++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 modules/primer-dropdown/package.json diff --git a/modules/primer-dropdown/package.json b/modules/primer-dropdown/package.json new file mode 100644 index 0000000000..81aee52055 --- /dev/null +++ b/modules/primer-dropdown/package.json @@ -0,0 +1,39 @@ +{ + "version": "1.0.0", + "name": "primer-dropdown", + "description": "A lightweight context menu for navigation and actions.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "primer": { + "category": "core", + "module_type": "components" + }, + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-dropdown", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "test-docs": "ava --verbose ../../tests/modules/test-*.js", + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "lint": "stylelint **/*.scss -s scss", + "test": "npm-run-all -s build lint test-docs" + }, + "dependencies": { + "primer-support": "4.3.0" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss" + ] +} From 9b9d73b3da950043fac109340ca3e97149c96998 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 13:31:47 -0700 Subject: [PATCH 055/191] add primer-support --- modules/primer-dropdown/lib/dropdown.scss | 264 ++++++++++++++++++++++ 1 file changed, 264 insertions(+) create mode 100644 modules/primer-dropdown/lib/dropdown.scss diff --git a/modules/primer-dropdown/lib/dropdown.scss b/modules/primer-dropdown/lib/dropdown.scss new file mode 100644 index 0000000000..5e3534190d --- /dev/null +++ b/modules/primer-dropdown/lib/dropdown.scss @@ -0,0 +1,264 @@ +// TODO add some docs here + +@import "primer-support/index.scss"; + +.dropdown { + position: relative; + + &.active { + .dropdown-menu-content { + display: block; + pointer-events: all; + } + } +} + +.dropdown-caret { + display: inline-block; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + border: 4px solid; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; +} + +// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which +// way the menu should render from the element triggering it. +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 100; + width: 160px; + padding-top: 5px; + padding-bottom: 5px; + margin-top: 2px; + list-style: none; + background-color: $bg-white; + background-clip: padding-box; + border: 1px solid $black-fade-15; + border-radius: 4px; + box-shadow: 0 3px 12px $black-fade-15; + + &::before, + &::after { + position: absolute; + display: inline-block; + content: ""; + } + + &::before { + border: 8px solid transparent; + border-bottom-color: $black-fade-15; + } + + &::after { + border: 7px solid transparent; + border-bottom-color: $white; + } + + // stylelint-disable-next-line selector-max-type + > ul { + list-style: none; + } +} + +.dropdown-menu-no-overflow { + width: auto; + + .dropdown-item { + padding: 4px 15px; + overflow: visible; + text-overflow: inherit; + } +} + +// Dropdown items (can be links or buttons) +.dropdown-item { + display: block; + padding: 4px 10px 4px 15px; + overflow: hidden; + color: $text-gray-dark; + text-overflow: ellipsis; + white-space: nowrap; + + &:hover, + &.zeroclipboard-is-hover { + color: $text-white; + text-decoration: none; + background-color: $bg-blue; + + > .octicon { + color: inherit; + opacity: 1; + } + } + + &.btn-link { + width: 100%; + text-align: left; + } +} + +.dropdown-signout { + width: 100%; + text-align: left; + background: none; + border: 0; +} + +.dropdown-divider { + height: 1px; + margin: 8px 1px; + background-color: $gray-200; +} + +.dropdown-header { + padding: 4px 15px; + font-size: 12px; + color: $text-gray; +} + +.dropdown-menu-content { + display: none; + + // stylelint-disable primer/selector-no-utility + &.anim-scale-in { + position: relative; + z-index: 100; + pointer-events: none; + } +} + +// Directional classes +// +// Move the menu and the caret attached to it. Requires at least one of these on +// the `.dropdown-menu` element. + +.dropdown-menu-w { + top: 0; + right: 100%; + left: auto; + width: auto; + margin-top: 0; + margin-right: 10px; + + &::before { + top: 10px; + right: -16px; + left: auto; + border-color: transparent; + border-left-color: $black-fade-15; + } + + &::after { + top: 11px; + right: -14px; + left: auto; + border-color: transparent; + border-left-color: $white; + } +} + +.dropdown-menu-e { + top: 0; + left: 100%; + width: auto; + margin-top: 0; + margin-left: 10px; + + &::before { + top: 10px; + left: -16px; + border-color: transparent; + border-right-color: $black-fade-15; + } + + &::after { + top: 11px; + left: -14px; + border-color: transparent; + border-right-color: $white; + } +} + +.dropdown-menu-ne { + top: auto; + bottom: 100%; + left: 0; + margin-bottom: 3px; + + &::before, + &::after { + top: auto; + right: auto; + } + + &::before { + bottom: -8px; + left: 9px; + border-top: 8px solid $black-fade-15; + border-right: 8px solid transparent; + border-bottom: 0; + border-left: 8px solid transparent; + } + + &::after { + bottom: -7px; + left: 10px; + border-top: 7px solid $white; + border-right: 7px solid transparent; + border-bottom: 0; + border-left: 7px solid transparent; + } +} + +.dropdown-menu-s { + right: 50%; + left: auto; + transform: translateX(50%); + + &::before { + top: -16px; + right: 50%; + transform: translateX(50%); + } + + &::after { + top: -14px; + right: 50%; + transform: translateX(50%); + } +} + +.dropdown-menu-sw { + right: 0; + left: auto; + + &::before { + top: -16px; + right: 9px; + left: auto; + } + + &::after { + top: -14px; + right: 10px; + left: auto; + } +} + +.dropdown-menu-se { + &::before { + top: -16px; + left: 9px; + } + + &::after { + top: -14px; + left: 10px; + } +} From 1f699de57b58cb0379e5cf0ba1cb489cbaca0046 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 15:22:54 -0700 Subject: [PATCH 056/191] migrate dropdown docs to README --- modules/primer-dropdown/README.md | 255 ++++++++++++++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 modules/primer-dropdown/README.md diff --git a/modules/primer-dropdown/README.md b/modules/primer-dropdown/README.md new file mode 100644 index 0000000000..a088e5c871 --- /dev/null +++ b/modules/primer-dropdown/README.md @@ -0,0 +1,255 @@ +# Primer CSS table object + +[![npm version](http://img.shields.io/npm/v/primer-dropdown.svg)](https://www.npmjs.org/package/primer-dropdown) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it’s cross browser friendly back to at least IE9. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-dropdown` with this command. + +``` +$ npm install --save primer-dropdown +``` + +## 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-dropdown/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, a 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 + + + +Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu. + +{:toc} + +## Basic examples + +Dropdowns should be trigged by a ` + +
+ +
+
+``` + +Using a button customized with additional utilities: + + +```html +
+ + +
+ +
+
+``` + +## Options + +### Alignment + +Align the direction of dropdown menus and their arrows with modifier classes. + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +### Dividers + +```html +
+ + +
+ +
+
+``` + +### Headers + +```html +
+ + +
+
+
+ Dropdown header +
+ +
+
+
+``` + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ From 1ba86ce3761392e4ab424f84bda16362e8ede9da Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 15:26:12 -0700 Subject: [PATCH 057/191] update dropdown README --- modules/primer-dropdown/README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/modules/primer-dropdown/README.md b/modules/primer-dropdown/README.md index a088e5c871..64737502a3 100644 --- a/modules/primer-dropdown/README.md +++ b/modules/primer-dropdown/README.md @@ -1,9 +1,9 @@ -# Primer CSS table object +# Primer CSS dropdown [![npm version](http://img.shields.io/npm/v/primer-dropdown.svg)](https://www.npmjs.org/package/primer-dropdown) [![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) -> Table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it’s cross browser friendly back to at least IE9. +> Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu. This repository is a module of the full [primer-css][primer-css] repository. @@ -41,8 +41,6 @@ status: Stable source: https://github.com/github/github/blob/master/app/assets/stylesheets/components/dropdown.scss --> -Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu. - {:toc} ## Basic examples From 2cb0c5bd76a2458ff2859112b0705b35a6b04632 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 15:51:38 -0700 Subject: [PATCH 058/191] add dropdown-menu-no-overflow and dropdown-signout docs --- modules/primer-dropdown/README.md | 50 +++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/modules/primer-dropdown/README.md b/modules/primer-dropdown/README.md index 64737502a3..8bb683fb43 100644 --- a/modules/primer-dropdown/README.md +++ b/modules/primer-dropdown/README.md @@ -240,6 +240,56 @@ Align the direction of dropdown menus and their arrows with modifier classes.
``` +### No overflow + +```html +
+ +
+ +
+
+``` + +### Sign out button + +```html +
+ + +
+``` + ## License From f97d178055e3a5542e0e3add3f00580759213276 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 15:51:48 -0700 Subject: [PATCH 059/191] nix unnecessary link ref --- modules/primer-dropdown/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-dropdown/README.md b/modules/primer-dropdown/README.md index 8bb683fb43..cfb46ef958 100644 --- a/modules/primer-dropdown/README.md +++ b/modules/primer-dropdown/README.md @@ -9,7 +9,7 @@ This repository is a module of the full [primer-css][primer-css] repository. ## Install -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-dropdown` with this command. +This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-dropdown` with this command. ``` $ npm install --save primer-dropdown From 24f18b7014c945ae2507aaea552398f129dd3f99 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 15:52:22 -0700 Subject: [PATCH 060/191] nix github source url --- modules/primer-dropdown/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/primer-dropdown/README.md b/modules/primer-dropdown/README.md index cfb46ef958..edd68da5a2 100644 --- a/modules/primer-dropdown/README.md +++ b/modules/primer-dropdown/README.md @@ -38,7 +38,6 @@ $ npm run build {:toc} From 51ca5c9888039e221f7222aa1ffc10af195a608f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 16:00:29 -0700 Subject: [PATCH 061/191] add dropdown to primer-product From 96c01529c2113cec00b9edab588a11b5e31bab16 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 16:03:54 -0700 Subject: [PATCH 062/191] move primer-support import to index.scss --- modules/primer-dropdown/index.scss | 2 ++ modules/primer-dropdown/lib/dropdown.scss | 2 -- 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 modules/primer-dropdown/index.scss diff --git a/modules/primer-dropdown/index.scss b/modules/primer-dropdown/index.scss new file mode 100644 index 0000000000..513f094b6d --- /dev/null +++ b/modules/primer-dropdown/index.scss @@ -0,0 +1,2 @@ +@import "primer-support/index.scss"; +@import "./lib/dropdown.scss"; diff --git a/modules/primer-dropdown/lib/dropdown.scss b/modules/primer-dropdown/lib/dropdown.scss index 5e3534190d..ebad8a464a 100644 --- a/modules/primer-dropdown/lib/dropdown.scss +++ b/modules/primer-dropdown/lib/dropdown.scss @@ -1,7 +1,5 @@ // TODO add some docs here -@import "primer-support/index.scss"; - .dropdown { position: relative; From 6f06e248f4eed46bd524494bb12c41dab8461f44 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 16:07:09 -0700 Subject: [PATCH 063/191] update primer.category to "product" --- modules/primer-dropdown/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-dropdown/package.json b/modules/primer-dropdown/package.json index 81aee52055..ab829724f1 100644 --- a/modules/primer-dropdown/package.json +++ b/modules/primer-dropdown/package.json @@ -8,7 +8,7 @@ "style": "index.scss", "main": "build/index.js", "primer": { - "category": "core", + "category": "product", "module_type": "components" }, "files": [ From 344e19aff1899689735accef8b0b2edef71a3711 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 16:16:25 -0700 Subject: [PATCH 064/191] move intro paragraph to docs section --- modules/primer-dropdown/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-dropdown/README.md b/modules/primer-dropdown/README.md index edd68da5a2..b1d9220877 100644 --- a/modules/primer-dropdown/README.md +++ b/modules/primer-dropdown/README.md @@ -3,8 +3,6 @@ [![npm version](http://img.shields.io/npm/v/primer-dropdown.svg)](https://www.npmjs.org/package/primer-dropdown) [![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) -> Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu. - This repository is a module of the full [primer-css][primer-css] repository. ## Install @@ -40,6 +38,8 @@ title: Dropdown status: Stable --> +Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu. + {:toc} ## Basic examples From 4b4d6d76daa24040ed7142f3e4e61f2491cf174b Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 16:47:25 -0700 Subject: [PATCH 065/191] clean up new dropdown examples --- modules/primer-dropdown/README.md | 52 ++++++++++++++++++------------- 1 file changed, 30 insertions(+), 22 deletions(-) diff --git a/modules/primer-dropdown/README.md b/modules/primer-dropdown/README.md index b1d9220877..4acee18992 100644 --- a/modules/primer-dropdown/README.md +++ b/modules/primer-dropdown/README.md @@ -241,18 +241,21 @@ Align the direction of dropdown menus and their arrows with modifier classes. ### No overflow +Use `dropdown-menu-no-overflow` modifier class to set the width of the dropdown +to `auto` and prevent hidden overflows on item contents and text. + ```html -
-
@@ -262,30 +265,35 @@ Align the direction of dropdown menus and their arrows with modifier classes. ### Sign out button +Use ` - +
``` From b15d80f4e8dfc32ca348f91d83a6a0ad932c0d58 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 30 Aug 2017 16:52:18 -0700 Subject: [PATCH 066/191] whitespace consistency --- modules/primer-dropdown/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/primer-dropdown/README.md b/modules/primer-dropdown/README.md index 4acee18992..e47d135b25 100644 --- a/modules/primer-dropdown/README.md +++ b/modules/primer-dropdown/README.md @@ -250,6 +250,7 @@ to `auto` and prevent hidden overflows on item contents and text. 1 member selected… +
    @@ -273,6 +274,7 @@ and display it as a link. +
    • From d9a5ab4c9da7a074f6479f700246006aeb43f301 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 31 Aug 2017 09:52:28 -0700 Subject: [PATCH 067/191] update copyright year to 2017 --- modules/primer-branch-name/LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-branch-name/LICENSE b/modules/primer-branch-name/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/modules/primer-branch-name/LICENSE +++ b/modules/primer-branch-name/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2016 GitHub Inc. +Copyright (c) 2017 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 From cb66b171dc942a7508ab1778c1e0e38273d281da Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 31 Aug 2017 10:05:54 -0700 Subject: [PATCH 068/191] primer-dropdown 1.0.0 -> 0.1.0 --- modules/primer-dropdown/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-dropdown/package.json b/modules/primer-dropdown/package.json index ab829724f1..bbafcffa5f 100644 --- a/modules/primer-dropdown/package.json +++ b/modules/primer-dropdown/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.0", + "version": "0.1.0", "name": "primer-dropdown", "description": "A lightweight context menu for navigation and actions.", "homepage": "http://primercss.io/", From 6e89e95fd79ff28efc0f3d0cb58b7613d8ff79d1 Mon Sep 17 00:00:00 2001 From: agisilaos Date: Fri, 20 Oct 2017 00:51:18 +0300 Subject: [PATCH 069/191] Make a checklist out of the 3 sentences Also fixed the naming of the `Fixes: #` with the help of @shawnbot. --- .github/pull_request_template.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 97f6af521b..06c38d4cd4 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,6 +1,8 @@ -↖ First, change the base branch from "master" to "dev". +- [ ] First, change the base branch from "master" to "dev". -↑ Next, briefly describe your proposal in the title. +- [ ] Next, briefly describe your proposal in the title. + +- [ ] Fixes: # (type an issue number after the # if applicable) Finally, tell us more about the change here, in the description. From d6bcb2bb089fe2090dbd24cf26c734fc6ffc09d6 Mon Sep 17 00:00:00 2001 From: agisilaos Date: Fri, 20 Oct 2017 01:23:49 +0300 Subject: [PATCH 070/191] Added a space between the # and the ( --- .github/pull_request_template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 06c38d4cd4..42f3183180 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,7 +2,7 @@ - [ ] Next, briefly describe your proposal in the title. -- [ ] Fixes: # (type an issue number after the # if applicable) +- [ ] Fixes: # (type an issue number after the # if applicable) Finally, tell us more about the change here, in the description. From 0771124bca6e73e46f4c6f9404d39a314a188c6f Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 24 Oct 2017 21:32:22 -0700 Subject: [PATCH 071/191] Fix versions to current versions --- modules/primer-branch-name/package.json | 2 +- modules/primer-core/package.json | 2 +- modules/primer-dropdown/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/primer-branch-name/package.json b/modules/primer-branch-name/package.json index cae108a9b6..cf922745a3 100644 --- a/modules/primer-branch-name/package.json +++ b/modules/primer-branch-name/package.json @@ -23,7 +23,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.3.0" + "primer-support": "4.4.1" }, "keywords": [ "github", diff --git a/modules/primer-core/package.json b/modules/primer-core/package.json index f951cf73a2..1cd9799913 100644 --- a/modules/primer-core/package.json +++ b/modules/primer-core/package.json @@ -28,7 +28,7 @@ "dependencies": { "primer-base": "1.5.1", "primer-box": "2.5.1", - "primer-breadcrumb": "1.3.0", + "primer-breadcrumb": "1.4.1", "primer-buttons": "2.4.1", "primer-forms": "1.4.1", "primer-layout": "1.4.1", diff --git a/modules/primer-dropdown/package.json b/modules/primer-dropdown/package.json index bbafcffa5f..f5060cc01f 100644 --- a/modules/primer-dropdown/package.json +++ b/modules/primer-dropdown/package.json @@ -28,7 +28,7 @@ "test": "npm-run-all -s build lint test-docs" }, "dependencies": { - "primer-support": "4.3.0" + "primer-support": "4.4.1" }, "keywords": [ "primer", From 4b5d81005e9eeb87111baf2be55486058683a6a5 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 25 Oct 2017 12:07:14 -0700 Subject: [PATCH 072/191] Removing primer-cards module --- CHANGELOG.md | 5 +++ modules/primer-cards/.npmignore | 2 - modules/primer-cards/LICENSE | 21 --------- modules/primer-cards/README.md | 62 --------------------------- modules/primer-cards/index.scss | 6 --- modules/primer-cards/lib/cards.scss | 6 --- modules/primer-cards/package.json | 41 ------------------ modules/primer-css/package.json | 1 - modules/primer-marketing/index.scss | 1 - modules/primer-marketing/package.json | 1 - 10 files changed, 5 insertions(+), 141 deletions(-) delete mode 100644 modules/primer-cards/.npmignore delete mode 100644 modules/primer-cards/LICENSE delete mode 100644 modules/primer-cards/README.md delete mode 100644 modules/primer-cards/index.scss delete mode 100644 modules/primer-cards/lib/cards.scss delete mode 100644 modules/primer-cards/package.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 47319c6bb5..241877f757 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +# 10.0.0 + +### Removed +- Removing `primer-cards` module. + # 9.6.0 ### Added diff --git a/modules/primer-cards/.npmignore b/modules/primer-cards/.npmignore deleted file mode 100644 index dd51a98b42..0000000000 --- a/modules/primer-cards/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -*.yml -.github diff --git a/modules/primer-cards/LICENSE b/modules/primer-cards/LICENSE deleted file mode 100644 index 61c8a4cffb..0000000000 --- a/modules/primer-cards/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2017 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. diff --git a/modules/primer-cards/README.md b/modules/primer-cards/README.md deleted file mode 100644 index 556c91a311..0000000000 --- a/modules/primer-cards/README.md +++ /dev/null @@ -1,62 +0,0 @@ - -# Primer Marketing CSS Cards -[![npm version](http://img.shields.io/npm/v/primer-cards.svg)](https://www.npmjs.org/package/primer-cards) -[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) - -# ⚠️ The primer-cards module is being deprecated in the next major version. Use primer-box instead. - - - -> Card-like containers to group semantically related content together on marketing websites at GitHub. - -This repository is a module of the full [primer-css][primer] repository. - -## Documentation - - - -Documentation & refactor coming very soon - - - - -## Install - -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-cards` with this command. - -``` -$ npm install --save primer-cards -``` - -## 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-cards/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, a npm script is included that will output a css version to `build/build.css` - -``` -$ npm run build -``` - -## License - -MIT © [GitHub](https://github.com/) - -[primer]: https://github.com/primer/primer -[primer-support]: https://github.com/primer/primer-support -[support]: https://github.com/primer/primer-support -[docs]: http://primercss.io/ -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ diff --git a/modules/primer-cards/index.scss b/modules/primer-cards/index.scss deleted file mode 100644 index a43ab0f603..0000000000 --- a/modules/primer-cards/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -// support files -@warn "primer-cards: The primer-cards module is being deprecated in the next major version. Use primer-box instead."; - -@import "primer-support/index.scss"; -@import "primer-marketing-support/index.scss"; -@import "./lib/cards.scss"; diff --git a/modules/primer-cards/lib/cards.scss b/modules/primer-cards/lib/cards.scss deleted file mode 100644 index 269be5629a..0000000000 --- a/modules/primer-cards/lib/cards.scss +++ /dev/null @@ -1,6 +0,0 @@ -.card { - background-color: $white; - border: $border; - border-radius: 6px; - box-shadow: $box-shadow; -} diff --git a/modules/primer-cards/package.json b/modules/primer-cards/package.json deleted file mode 100644 index 7abcf0b078..0000000000 --- a/modules/primer-cards/package.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "version": "0.5.1", - "name": "primer-cards", - "description": "Card-like containers to group semantically related content together on marketing websites at GitHub.", - "homepage": "http://primercss.io/", - "author": "GitHub, Inc.", - "license": "MIT", - "style": "build/build.css", - "main": "build/index.js", - "primer": { - "category": "marketing", - "module_type": "components" - }, - "files": [ - "index.scss", - "lib", - "build" - ], - "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-cards", - "bugs": { - "url": "https://github.com/primer/primer-css/issues" - }, - "scripts": { - "build": "../../script/npm-run primer-module-build index.scss", - "prepare": "npm run build", - "lint": "../../script/lint-scss", - "test": "../../script/npm-run-all build lint" - }, - "dependencies": { - "primer-marketing-support": "1.3.1", - "primer-support": "4.4.1" - }, - "keywords": [ - "cards", - "css", - "github", - "primer", - "primercss", - "style" - ] -} diff --git a/modules/primer-css/package.json b/modules/primer-css/package.json index 379c4f8bfd..eeeb2919aa 100644 --- a/modules/primer-css/package.json +++ b/modules/primer-css/package.json @@ -35,7 +35,6 @@ "primer-branch-name": "0.0.1", "primer-breadcrumb": "1.4.1", "primer-buttons": "2.4.1", - "primer-cards": "0.5.1", "primer-core": "6.4.1", "primer-dropdown": "0.1.0", "primer-forms": "1.4.1", diff --git a/modules/primer-marketing/index.scss b/modules/primer-marketing/index.scss index d7bbc638c4..e288c93242 100755 --- a/modules/primer-marketing/index.scss +++ b/modules/primer-marketing/index.scss @@ -16,7 +16,6 @@ // marketing specific css modules @import "primer-marketing-type/index.scss"; -@import "primer-cards/index.scss"; @import "primer-page-headers/index.scss"; @import "primer-page-sections/index.scss"; @import "primer-tables/index.scss"; diff --git a/modules/primer-marketing/package.json b/modules/primer-marketing/package.json index be567c94c5..3829928ac2 100644 --- a/modules/primer-marketing/package.json +++ b/modules/primer-marketing/package.json @@ -26,7 +26,6 @@ "lint": "../../script/lint-scss" }, "dependencies": { - "primer-cards": "0.5.1", "primer-marketing-support": "1.3.1", "primer-marketing-type": "1.4.1", "primer-marketing-utilities": "1.4.1", From 4a8f0bbb08d6a89d42b1de1a7babdc485ad74465 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 25 Oct 2017 13:11:21 -0700 Subject: [PATCH 073/191] Removing .form-cards styles --- CHANGELOG.md | 1 + modules/primer-forms/lib/form-validation.scss | 59 ------------------- 2 files changed, 1 insertion(+), 59 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 241877f757..2dd54264fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ### Removed - Removing `primer-cards` module. +- Removing `.form-cards` styles. # 9.6.0 diff --git a/modules/primer-forms/lib/form-validation.scss b/modules/primer-forms/lib/form-validation.scss index fe3fe8c986..f2a64d1646 100644 --- a/modules/primer-forms/lib/form-validation.scss +++ b/modules/primer-forms/lib/form-validation.scss @@ -47,65 +47,6 @@ dl.form-group > dd { } } -// Credit cards -// -// A selector for credit cards. Shows all credit cards we have available and -// dims the non-selected ones. - -@warn "primer-forms: The credit cards component is being deprecated in next major version."; - -.form-cards { - height: 31px; - margin: 0 0 15px; - - .card { - float: left; - width: 47px; - height: 31px; - text-indent: -9999px; - background-image: url("/images/modules/pricing/credit-cards-@1x.png"); - background-position: 0 0; - opacity: 0.6; - - &.visa { background-position: 0 0; } - - &.amex { background-position: -50px 0; } - - &.mastercard { background-position: -100px 0; } - - &.discover { background-position: -150px 0; } - - &.jcb { background-position: -200px 0; } - - &.dinersclub { background-position: -250px 0; } - - &.enabled { opacity: 1; } - - &.disabled { opacity: 0.2; } - } - - > .cards { - margin: 0; - - > li { - float: left; - margin: 0 $spacer-1 0 0; - list-style-type: none; - - &.text { - line-height: 31px; - } - } - } -} - -@include retina-media-query { - .form-cards > .cards .card { - background-image: url("/images/modules/pricing/credit-cards-@2x.png"); - background-size: 300px 31px; - } -} - // Inline verification // This overrides primer's inline form stuff .status-indicator { From ea3ed6094da044f44157d0e04b4af7823399a5bd Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Thu, 26 Oct 2017 15:31:29 -0500 Subject: [PATCH 074/191] Init .Popover --- modules/primer-popover/.npmignore | 2 ++ modules/primer-popover/LICENSE | 21 +++++++++++ modules/primer-popover/README.md | 45 ++++++++++++++++++++++++ modules/primer-popover/index.scss | 4 +++ modules/primer-popover/lib/popover.scss | 46 +++++++++++++++++++++++++ modules/primer-popover/package.json | 43 +++++++++++++++++++++++ modules/primer-popover/stories.js | 10 ++++++ 7 files changed, 171 insertions(+) create mode 100644 modules/primer-popover/.npmignore create mode 100644 modules/primer-popover/LICENSE create mode 100644 modules/primer-popover/README.md create mode 100644 modules/primer-popover/index.scss create mode 100644 modules/primer-popover/lib/popover.scss create mode 100644 modules/primer-popover/package.json create mode 100644 modules/primer-popover/stories.js diff --git a/modules/primer-popover/.npmignore b/modules/primer-popover/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/modules/primer-popover/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/modules/primer-popover/LICENSE b/modules/primer-popover/LICENSE new file mode 100644 index 0000000000..61c8a4cffb --- /dev/null +++ b/modules/primer-popover/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2017 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. diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md new file mode 100644 index 0000000000..8d79ef4291 --- /dev/null +++ b/modules/primer-popover/README.md @@ -0,0 +1,45 @@ +# Primer CSS Breadcrumb Navigation + +[![npm version](http://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page. + +This repository is a module of the full [primer-css][primer] repository. + +## Documentation + + + +Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that: + +- Are many levels deep on a site +- Do not have a section-level navigation +- May need the ability to quickly go back to the previous (parent) page + +#### Usage + +```html title="Popover" +
      +

      Popover heading

      +

      Message about this particular piece of UI.

      + +
      +``` + + + +## License + +MIT © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[primer-support]: https://github.com/primer/primer-support +[support]: https://github.com/primer/primer-support +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/modules/primer-popover/index.scss b/modules/primer-popover/index.scss new file mode 100644 index 0000000000..084f504995 --- /dev/null +++ b/modules/primer-popover/index.scss @@ -0,0 +1,4 @@ +// support files +@import "primer-support/index.scss"; +@import "primer-marketing-support/index.scss"; +@import "./lib/popover.scss"; diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss new file mode 100644 index 0000000000..9b5b84303b --- /dev/null +++ b/modules/primer-popover/lib/popover.scss @@ -0,0 +1,46 @@ +.Popover { + left: 50%; + z-index: 20; + width: 235px; + margin-top: 30px; + margin-left: -118px; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); + + // Carets + &::before, + &::after { + position: absolute; + display: inline-block; + content: ""; + } + + &::before { + top: -16px; + right: 109px; + left: auto; + border: 8px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.15); + } + + &::after { + top: -14px; + right: 110px; + left: auto; + border: 7px solid transparent; + border-bottom-color: $bg-white; + } + + &.top-right { + left: auto; + width: 330px; + margin-top: 45px; + + &::before { + right: 20px; + } + + &::after { + right: 21px; + } + } +} diff --git a/modules/primer-popover/package.json b/modules/primer-popover/package.json new file mode 100644 index 0000000000..dcb963c719 --- /dev/null +++ b/modules/primer-popover/package.json @@ -0,0 +1,43 @@ +{ + "version": "1.4.1", + "name": "primer-popver", + "description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "main": "build/index.js", + "primer": { + "category": "marketing", + "module_type": "components" + }, + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-popover", + "bugs": { + "url": "https://github.com/primer/primer-css/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-marketing-support": "1.3.1", + "primer-support": "4.4.1" + }, + "keywords": [ + "popover", + "css", + "github", + "navigation", + "primer", + "primercss", + "style" + ] +} diff --git a/modules/primer-popover/stories.js b/modules/primer-popover/stories.js new file mode 100644 index 0000000000..abf78092b0 --- /dev/null +++ b/modules/primer-popover/stories.js @@ -0,0 +1,10 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown' + +const stories = storiesOf('Popover', module) + +storiesFromMarkdown(require.context('.', true, /\.md$/)) + .forEach(({title, story}) => { + stories.add(title, story) + }) From dbec2aea9c18cd10a5e8690ac02313c25487bdf0 Mon Sep 17 00:00:00 2001 From: Jason Etcovitch Date: Fri, 27 Oct 2017 09:57:43 -0400 Subject: [PATCH 075/191] Add reset properties to .btn-link --- modules/primer-buttons/lib/button.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/primer-buttons/lib/button.scss b/modules/primer-buttons/lib/button.scss index d31cd625e3..2a8ef0c3e7 100644 --- a/modules/primer-buttons/lib/button.scss +++ b/modules/primer-buttons/lib/button.scss @@ -181,12 +181,14 @@ display: inline-block; padding: 0; font-size: inherit; + font-weight: $font-weight-normal; color: $text-blue; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; background-color: transparent; + background-image: none; border: 0; appearance: none; // Corrects inability to style clickable `input` types in iOS. From 99a8337f1952d7b9e240185dc6baa2db73e92821 Mon Sep 17 00:00:00 2001 From: Jason Etcovitch Date: Fri, 27 Oct 2017 10:04:29 -0400 Subject: [PATCH 076/191] Add btn-link story --- modules/primer-buttons/stories.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js index ad3db07991..c9a32517d6 100644 --- a/modules/primer-buttons/stories.js +++ b/modules/primer-buttons/stories.js @@ -59,3 +59,12 @@ storiesOf('Button', module)
    )) + .add('btn-link', () => ( +
    + + + + + +
    + )) From 295ff78ccf351db4f16053745eb0bdddd5373eb9 Mon Sep 17 00:00:00 2001 From: Jason Etcovitch Date: Fri, 27 Oct 2017 10:11:00 -0400 Subject: [PATCH 077/191] Remove btn states from story --- modules/primer-buttons/stories.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js index c9a32517d6..46742328a6 100644 --- a/modules/primer-buttons/stories.js +++ b/modules/primer-buttons/stories.js @@ -62,9 +62,5 @@ storiesOf('Button', module) .add('btn-link', () => (
    - - - -
    )) From 17d1a9f5268e83b226d8c9c8845c1239e92a5415 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 27 Oct 2017 10:14:00 -0500 Subject: [PATCH 078/191] Stable CSS-only 'Popover' component --- modules/primer-css/package.json | 3 +- modules/primer-popover/.npmignore | 2 - modules/primer-popover/LICENSE | 2 +- modules/primer-popover/README.md | 101 ++++++++++++++++++++---- modules/primer-popover/index.scss | 1 - modules/primer-popover/lib/popover.scss | 58 +++++++++----- modules/primer-popover/package.json | 27 ++----- modules/primer-product/index.scss | 1 + modules/primer-product/package.json | 3 +- 9 files changed, 138 insertions(+), 60 deletions(-) delete mode 100644 modules/primer-popover/.npmignore diff --git a/modules/primer-css/package.json b/modules/primer-css/package.json index d76570c08c..e31e2ac82e 100644 --- a/modules/primer-css/package.json +++ b/modules/primer-css/package.json @@ -53,7 +53,8 @@ "primer-tables": "1.4.1", "primer-tooltips": "1.4.1", "primer-truncate": "1.4.1", - "primer-utilities": "4.8.1" + "primer-utilities": "4.8.1", + "primer-popover": "0.0.1" }, "keywords": [ "primer", diff --git a/modules/primer-popover/.npmignore b/modules/primer-popover/.npmignore deleted file mode 100644 index dd51a98b42..0000000000 --- a/modules/primer-popover/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -*.yml -.github diff --git a/modules/primer-popover/LICENSE b/modules/primer-popover/LICENSE index 61c8a4cffb..5715c13693 100644 --- a/modules/primer-popover/LICENSE +++ b/modules/primer-popover/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2016 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 diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index 8d79ef4291..c91ea03cb5 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -1,44 +1,111 @@ -# Primer CSS Breadcrumb Navigation +# Primer CSS / Popover [![npm version](http://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover) [![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > Popover for suggesting, guiding, and bringing attention to specific UI elements on a page. -This repository is a module of the full [primer-css][primer] repository. +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command. + +``` +$ npm install --save primer-popover +``` + +## 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-popover/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 -Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that: +### Basic example + +```html title="Center-aligned" +
    + +
    +
    +

    Popover heading

    +

    Message about this particular piece of UI.

    + +
    +
    +
    +``` + +### Right-aligned example -- Are many levels deep on a site -- Do not have a section-level navigation -- May need the ability to quickly go back to the previous (parent) page +```html title="Right-aligned" +
    + +
    +
    +

    Popover heading

    +

    Message about this particular piece of UI.

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

    Popover heading

    -

    Message about this particular piece of UI.

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

    Popover heading

    +

    Message about this particular piece of UI.

    + +
    +
    ``` +### Large example + +```html title="Large" +
    + +
    +
    +

    Popover heading

    +

    Message about this particular piece of UI.

    + +
    +
    +
    +``` ## License -MIT © [GitHub](https://github.com/) +[MIT](./LICENSE) © [GitHub](https://github.com/) -[primer]: https://github.com/primer/primer -[primer-support]: https://github.com/primer/primer-support -[support]: https://github.com/primer/primer-support +[primer-css]: https://github.com/primer/primer [docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node diff --git a/modules/primer-popover/index.scss b/modules/primer-popover/index.scss index 084f504995..9187af06d8 100644 --- a/modules/primer-popover/index.scss +++ b/modules/primer-popover/index.scss @@ -1,4 +1,3 @@ // support files @import "primer-support/index.scss"; -@import "primer-marketing-support/index.scss"; @import "./lib/popover.scss"; diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss index 9b5b84303b..b4fc715ded 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -1,46 +1,68 @@ .Popover { - left: 50%; + position: relative; z-index: 20; - width: 235px; - margin-top: 30px; - margin-left: -118px; - box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); + max-width: 235px; + margin-right: auto; + margin-left: auto; // Carets &::before, &::after { position: absolute; + left: 50%; display: inline-block; content: ""; } &::before { top: -16px; - right: 109px; - left: auto; + margin-left: -9px; border: 8px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.15); } &::after { top: -14px; - right: 110px; - left: auto; + margin-left: -8px; border: 7px solid transparent; border-bottom-color: $bg-white; } +} - &.top-right { +.Popover--right { + right: -9px; + margin-right: 0; + + &::before, + &::after { left: auto; - width: 330px; - margin-top: 45px; + margin-left: 0; + } - &::before { - right: 20px; - } + &::before { + right: 20px; + } - &::after { - right: 21px; - } + &::after { + right: 21px; } } + +.Popover--left { + left: -9px; + margin-left: 0; + + &::before, + &::after { + left: 20px; + margin-left: 0; + } + + &::after { + left: 21px; + } +} + +.Popover--lg { + max-width: 330px; +} diff --git a/modules/primer-popover/package.json b/modules/primer-popover/package.json index dcb963c719..42d94bc46a 100644 --- a/modules/primer-popover/package.json +++ b/modules/primer-popover/package.json @@ -1,21 +1,16 @@ { - "version": "1.4.1", - "name": "primer-popver", + "version": "0.0.1", + "name": "primer-popover", "description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.", "homepage": "http://primercss.io/", - "author": "GitHub, Inc.", - "license": "MIT", - "style": "build/build.css", - "main": "build/index.js", "primer": { - "category": "marketing", + "category": "product", "module_type": "components" }, - "files": [ - "index.scss", - "lib", - "build" - ], + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-popover", "bugs": { "url": "https://github.com/primer/primer-css/issues" @@ -28,16 +23,10 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-marketing-support": "1.3.1", "primer-support": "4.4.1" }, "keywords": [ - "popover", - "css", "github", - "navigation", - "primer", - "primercss", - "style" + "primer" ] } diff --git a/modules/primer-product/index.scss b/modules/primer-product/index.scss index 1b9b84c30c..868b347af0 100644 --- a/modules/primer-product/index.scss +++ b/modules/primer-product/index.scss @@ -19,3 +19,4 @@ @import "primer-blankslate/index.scss"; @import "primer-labels/index.scss"; @import "primer-markdown/index.scss"; +@import "primer-popover/index.scss"; diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index 83358d9e26..b69d70a65b 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -31,6 +31,7 @@ "primer-blankslate": "1.4.1", "primer-labels": "1.5.1", "primer-markdown": "3.7.1", - "primer-support": "4.4.1" + "primer-support": "4.4.1", + "primer-popover": "0.0.1" } } From a6a10fb50253894cafd52ae17e7818d0099f275c Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 08:56:40 -0700 Subject: [PATCH 079/191] Updating year and changelog --- CHANGELOG.md | 5 +++++ modules/primer-subhead/LICENSE | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 47319c6bb5..58edc77647 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +# 10.0.0 + +### Added +- New module `primer-subhead`. The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages. + # 9.6.0 ### Added diff --git a/modules/primer-subhead/LICENSE b/modules/primer-subhead/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/modules/primer-subhead/LICENSE +++ b/modules/primer-subhead/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2016 GitHub Inc. +Copyright (c) 2017 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 From bc0bea4e3e9d9b4ad472331358cbd8bad181c8c2 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 08:58:33 -0700 Subject: [PATCH 080/191] Importing subhead in product --- modules/primer-product/index.scss | 1 + modules/primer-subhead/package.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/primer-product/index.scss b/modules/primer-product/index.scss index 621ef5f825..acddbdb0f1 100644 --- a/modules/primer-product/index.scss +++ b/modules/primer-product/index.scss @@ -21,3 +21,4 @@ @import "primer-dropdown/index.scss"; @import "primer-labels/index.scss"; @import "primer-markdown/index.scss"; +@import "primer-subhead/index.scss"; diff --git a/modules/primer-subhead/package.json b/modules/primer-subhead/package.json index 129728df1f..f33aa5ac8e 100644 --- a/modules/primer-subhead/package.json +++ b/modules/primer-subhead/package.json @@ -23,7 +23,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.3.0" + "primer-support": "4.4.1" }, "keywords": [ "github", From 80515ee3a855ef9514ecba3d5069f0c2c981f3d4 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 09:33:52 -0700 Subject: [PATCH 081/191] Revert these changes to focus on input groups only --- modules/primer-alerts/stories/Flash.js | 40 +++++++++++++++++--------- modules/primer-breadcrumb/stories.js | 2 +- modules/primer-buttons/stories.js | 12 ++++---- 3 files changed, 33 insertions(+), 21 deletions(-) diff --git a/modules/primer-alerts/stories/Flash.js b/modules/primer-alerts/stories/Flash.js index d3f6156d29..ebada81739 100644 --- a/modules/primer-alerts/stories/Flash.js +++ b/modules/primer-alerts/stories/Flash.js @@ -3,35 +3,47 @@ import { storiesOf } from '@storybook/react' storiesOf('Flash alerts', module) .add('flash', () => ( -
    - flash +
    +
    + flash +
    )) .add('flash-warn', () => ( -
    - flash-warn +
    +
    + flash-warn +
    )) .add('flash-error', () => ( -
    - flash-error +
    +
    + flash-error +
    )) .add('flash-success', () => ( -
    - flash-success +
    +
    + flash-success +
    )) .add('flash with action button', () => ( -
    - - Flash message with action here. +
    +
    + + Flash message with action here. +
    )) .add('flash-full', () => ( -
    -
    - Full width flash message. +
    +
    +
    + Full width flash message. +
    )) diff --git a/modules/primer-breadcrumb/stories.js b/modules/primer-breadcrumb/stories.js index 2190c00078..7aa244a4f4 100644 --- a/modules/primer-breadcrumb/stories.js +++ b/modules/primer-breadcrumb/stories.js @@ -7,4 +7,4 @@ const stories = storiesOf('Breadcrumb', module) storiesFromMarkdown(require.context('.', true, /\.md$/)) .forEach(({title, story}) => { stories.add(title, story) - }) \ No newline at end of file + }) diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js index 9c457f9c89..ad3db07991 100644 --- a/modules/primer-buttons/stories.js +++ b/modules/primer-buttons/stories.js @@ -6,7 +6,7 @@ storiesOf('Button', module) )) .add('btn-primary', () => ( -
    +
    @@ -15,7 +15,7 @@ storiesOf('Button', module)
    )) .add('btn-secondary', () => ( -
    +
    @@ -24,7 +24,7 @@ storiesOf('Button', module)
    )) .add('btn-danger', () => ( -
    +
    @@ -33,7 +33,7 @@ storiesOf('Button', module)
    )) .add('btn-outline', () => ( -
    +
    @@ -42,7 +42,7 @@ storiesOf('Button', module)
    )) .add('btn-blue', () => ( -
    +
    @@ -51,7 +51,7 @@ storiesOf('Button', module)
    )) .add('btn-purple', () => ( -
    +
    From 5d9fb5be26036e94c790b0d2f5014c5bd112dcee Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 10:05:04 -0700 Subject: [PATCH 082/191] Remove react inline svg and import octicons css --- .storybook/Octicon.js | 4 ++-- .storybook/preview-head.html | 2 +- package.json | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.storybook/Octicon.js b/.storybook/Octicon.js index e4df4cf396..339c56b1cd 100644 --- a/.storybook/Octicon.js +++ b/.storybook/Octicon.js @@ -1,12 +1,12 @@ import React from 'react' import {storiesOf} from '@storybook/react' import octicons from 'octicons' -import SVGInline from 'react-svg-inline' export const Octicon = (props) => { const {name} = props if (name in octicons) { - return + const svg = octicons[name].toSVG(props) + return } else { throw new Error(`No such octicon: "${name}"!`) } diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 03d0c82b2d..de95a89c1b 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,2 +1,2 @@ - + diff --git a/package.json b/package.json index 291d9947b3..be728a7c1c 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,6 @@ "raw-loader": "^0.5.1", "react": "^15.6.1", "react-dom": "^15.6.1", - "react-svg-inline": "^2.0.0", "registry-url": "^3.1.0", "remark": "^8.0.0", "sass-loader": "^6.0.6", From 34355d1e39de497543a9b1e1e80b3eb6e5fcb424 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 10:14:04 -0700 Subject: [PATCH 083/191] Updating changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f25b77306..5bc37a386e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ### Added - New module `primer-subhead`. The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages. +- Importing `.input-group` into `primer-forms` module. ### Removed - Removing `primer-cards` module. From 4df2cf43f82fad062e75de3a1becb30e4fcae4a4 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 11:25:09 -0700 Subject: [PATCH 084/191] Adding a test to check for the current year in the license and source header --- LICENSE | 2 +- modules/primer-core/index.scss | 2 +- modules/primer-css/index.scss | 2 +- modules/primer-marketing/index.scss | 2 +- modules/primer-product/index.scss | 2 +- package.json | 3 +- script/test-docs | 2 +- tests/test-for-current-year.js | 31 +++++++++++++++++++ .../app/templates/LICENSE | 2 +- tools/stylelint-config-primer/LICENSE | 2 +- tools/stylelint-selector-no-utility/LICENSE | 2 +- 11 files changed, 42 insertions(+), 10 deletions(-) create mode 100644 tests/test-for-current-year.js diff --git a/LICENSE b/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2016 GitHub Inc. +Copyright (c) 2017 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 diff --git a/modules/primer-core/index.scss b/modules/primer-core/index.scss index b032019ca7..855188bacd 100644 --- a/modules/primer-core/index.scss +++ b/modules/primer-core/index.scss @@ -2,7 +2,7 @@ * Primer-core * http://primercss.io * - * Released under MIT license. Copyright 2015 GitHub, Inc. + * Released under MIT license. Copyright (c) 2017 GitHub Inc. */ // Primer master file diff --git a/modules/primer-css/index.scss b/modules/primer-css/index.scss index d317a11163..5adfaa7536 100644 --- a/modules/primer-css/index.scss +++ b/modules/primer-css/index.scss @@ -2,7 +2,7 @@ * Primer * http://primercss.io * - * Released under MIT license. Copyright 2015 GitHub, Inc. + * Released under MIT license. Copyright (c) 2017 GitHub Inc. */ // Primer master file diff --git a/modules/primer-marketing/index.scss b/modules/primer-marketing/index.scss index e288c93242..93c2d0b4ab 100755 --- a/modules/primer-marketing/index.scss +++ b/modules/primer-marketing/index.scss @@ -2,7 +2,7 @@ * Primer-marketing * http://primercss.io * - * Released under MIT license. Copyright 2015 GitHub, Inc. + * Released under MIT license. Copyright (c) 2017 GitHub Inc. */ // Primer master file diff --git a/modules/primer-product/index.scss b/modules/primer-product/index.scss index acddbdb0f1..ef581818a2 100644 --- a/modules/primer-product/index.scss +++ b/modules/primer-product/index.scss @@ -2,7 +2,7 @@ * Primer-product * http://primercss.io * - * Released under MIT license. Copyright 2015 GitHub, Inc. + * Released under MIT license. Copyright (c) 2017 GitHub Inc. */ // Primer master file diff --git a/package.json b/package.json index be728a7c1c..0ba93cdb68 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "release": "script/release", "bump": "lerna publish --exact --skip-npm --since \"v$(npm info primer-css version)\"", "new-module": "script/new-module", - "test": "lerna run test" + "test": "npm run test-all-modules && lerna run test", + "test-all-modules": "ava --verbose tests/test-*.js" }, "devDependencies": { "@storybook/addon-options": "^3.2.6", diff --git a/script/test-docs b/script/test-docs index 955fe9880d..81c18e4624 100755 --- a/script/test-docs +++ b/script/test-docs @@ -1,3 +1,3 @@ #!/bin/bash set -e -$(dirname $0)/npm-run ava --verbose $(dirname $0)/../tests/modules/test-*.js +$(dirname $0)/npm-run ava --verbose $(dirname $0)/../tests/modules/test-document-styles.js diff --git a/tests/test-for-current-year.js b/tests/test-for-current-year.js new file mode 100644 index 0000000000..b20394b49c --- /dev/null +++ b/tests/test-for-current-year.js @@ -0,0 +1,31 @@ +const test = require("ava") +const fs = require("fs-extra") +const globby = require("globby") + +const year = (new Date()).getFullYear() + +test(`LICENSE files have the current year ${year}`, t => { + return globby(["**/LICENSE", "!**/node_modules/**/LICENSE"]) + .then(paths => { + t.plan(paths.length) + return paths.map(path => { + const license = fs.readFileSync(path, "utf8") + return t.regex(license, new RegExp(`Copyright \\(c\\) ${year} GitHub Inc\\.`), `The license "${path}" does not include the current year ${year}`) + }) + }) +}) + +test(`Source header copyrights have the current year ${year}`, t => { + return globby(["**/*.css", "**/*.scss", "!**/node_modules/**", "!**/build/**"]) + .then(paths => { + t.plan(paths.length) + return paths.map(path => { + const source = fs.readFileSync(path, "utf8") + if (source.match(/Copyright \(c\)/)) { + return t.regex(source, new RegExp(`Copyright \\(c\\) ${year} GitHub Inc\\.`), `The source's header "${path}" does not include the current year ${year}`) + } else { + return t.true(true) + } + }) + }) +}) diff --git a/tools/generator-primer-module/app/templates/LICENSE b/tools/generator-primer-module/app/templates/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/tools/generator-primer-module/app/templates/LICENSE +++ b/tools/generator-primer-module/app/templates/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2016 GitHub Inc. +Copyright (c) 2017 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 diff --git a/tools/stylelint-config-primer/LICENSE b/tools/stylelint-config-primer/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/tools/stylelint-config-primer/LICENSE +++ b/tools/stylelint-config-primer/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2016 GitHub Inc. +Copyright (c) 2017 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 diff --git a/tools/stylelint-selector-no-utility/LICENSE b/tools/stylelint-selector-no-utility/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/tools/stylelint-selector-no-utility/LICENSE +++ b/tools/stylelint-selector-no-utility/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2016 GitHub Inc. +Copyright (c) 2017 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 From de420d9bb79eb180fe5ec4a4b88e7ecb70cbc46a Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 11:28:00 -0700 Subject: [PATCH 085/191] abstracting out year regex --- tests/test-for-current-year.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/tests/test-for-current-year.js b/tests/test-for-current-year.js index b20394b49c..8d678007c3 100644 --- a/tests/test-for-current-year.js +++ b/tests/test-for-current-year.js @@ -3,6 +3,7 @@ const fs = require("fs-extra") const globby = require("globby") const year = (new Date()).getFullYear() +const yearRegex = new RegExp(`Copyright \\(c\\) ${year} GitHub Inc\\.`) test(`LICENSE files have the current year ${year}`, t => { return globby(["**/LICENSE", "!**/node_modules/**/LICENSE"]) @@ -10,7 +11,7 @@ test(`LICENSE files have the current year ${year}`, t => { t.plan(paths.length) return paths.map(path => { const license = fs.readFileSync(path, "utf8") - return t.regex(license, new RegExp(`Copyright \\(c\\) ${year} GitHub Inc\\.`), `The license "${path}" does not include the current year ${year}`) + return t.regex(license, yearRegex, `The license "${path}" does not include the current year ${year}`) }) }) }) @@ -22,7 +23,7 @@ test(`Source header copyrights have the current year ${year}`, t => { return paths.map(path => { const source = fs.readFileSync(path, "utf8") if (source.match(/Copyright \(c\)/)) { - return t.regex(source, new RegExp(`Copyright \\(c\\) ${year} GitHub Inc\\.`), `The source's header "${path}" does not include the current year ${year}`) + return t.regex(source, yearRegex, `The source's header "${path}" does not include the current year ${year}`) } else { return t.true(true) } From 50313f1cf97cdddeffe94842839d5b8016c02459 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 12:08:55 -0700 Subject: [PATCH 086/191] Updating changelog --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5bc37a386e..90c95b7b40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,11 +3,16 @@ ### Added - New module `primer-subhead`. The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages. - Importing `.input-group` into `primer-forms` module. +- New module `primer-branch-name` "A nice, consistent way to display branch names." +- New module `primer-dropdown` "A lightweight context menu for navigation and actions." ### Removed - Removing `primer-cards` module. - Removing `.form-cards` styles. +### Changes +- Moving `primer-breadcrumb` from `primer-marketing` to `primer-core` + # 9.6.0 ### Added From 450030991e55d78f5b6a620e4f99ac2668b89358 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 27 Oct 2017 14:15:01 -0500 Subject: [PATCH 087/191] Refactored to include `.Popover-message` --- modules/primer-popover/README.md | 16 ++++++++-------- modules/primer-popover/lib/popover.scss | 14 ++++++++++---- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index c91ea03cb5..0273411315 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -45,8 +45,8 @@ status: Experimental ```html title="Center-aligned"
    -
    -
    +
    +

    Popover heading

    Message about this particular piece of UI.

    @@ -60,8 +60,8 @@ status: Experimental ```html title="Right-aligned"
    -
    -
    +
    +

    Popover heading

    Message about this particular piece of UI.

    @@ -75,8 +75,8 @@ status: Experimental ```html title="Left-aligned"
    -
    -
    +
    +

    Popover heading

    Message about this particular piece of UI.

    @@ -90,8 +90,8 @@ status: Experimental ```html title="Large"
    -
    -
    +
    +

    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 b4fc715ded..22a8b94dbd 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -1,6 +1,12 @@ .Popover { + position: absolute; + right: 0; + left: 0; + z-index: 100; +} + +.Popover-message { position: relative; - z-index: 20; max-width: 235px; margin-right: auto; margin-left: auto; @@ -29,7 +35,7 @@ } } -.Popover--right { +.Popover-message--right { right: -9px; margin-right: 0; @@ -48,7 +54,7 @@ } } -.Popover--left { +.Popover-message--left { left: -9px; margin-left: 0; @@ -63,6 +69,6 @@ } } -.Popover--lg { +.Popover-message--lg { max-width: 330px; } From 36565dc1712babd5c577c2541e2e39389e00cf4f Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 12:27:11 -0700 Subject: [PATCH 088/191] Linting fixes --- modules/primer-navigation/lib/underline-nav.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-navigation/lib/underline-nav.scss b/modules/primer-navigation/lib/underline-nav.scss index 7ab9ae3755..331b95f997 100644 --- a/modules/primer-navigation/lib/underline-nav.scss +++ b/modules/primer-navigation/lib/underline-nav.scss @@ -13,9 +13,9 @@ padding: $spacer-3 $spacer-2; margin-right: $spacer-3; font-size: $body-font-size; - text-align: center; line-height: $lh-default; color: $text-gray; + text-align: center; border-bottom: 2px solid transparent; .Counter { @@ -40,9 +40,9 @@ } &.selected { + font-weight: $font-weight-bold; color: $text-gray-dark; border-bottom-color: $orange-600; - font-weight: $font-weight-bold; .octicon { color: $gray-500; From a7a8a4fc2da3423a228ee77832f64b207bc2fe68 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 27 Oct 2017 14:42:38 -0500 Subject: [PATCH 089/191] STorybook menu naming revision --- modules/primer-popover/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index 0273411315..ea61129c8a 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -42,7 +42,7 @@ status: Experimental ### Basic example -```html title="Center-aligned" +```html title="Center-aligned (default)"
    From 760ceb19a0d0469bb7456da2d3208037e022a6d6 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 27 Oct 2017 14:52:19 -0500 Subject: [PATCH 090/191] Tweak caret alignment to overlap border. --- modules/primer-popover/lib/popover.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss index 22a8b94dbd..3cea473b53 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -21,14 +21,14 @@ } &::before { - top: -16px; + top: -15px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.15); } &::after { - top: -14px; + top: -13px; margin-left: -8px; border: 7px solid transparent; border-bottom-color: $bg-white; From f6dde1e1da6d841237561316229224e3a6c52d62 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 17:12:50 -0700 Subject: [PATCH 091/191] Using storiesfrommarkdown --- .storybook/lib/storiesFromMarkdown.js | 18 ++- modules/primer-navigation/README.md | 72 +++++---- modules/primer-navigation/stories.js | 211 +------------------------- 3 files changed, 64 insertions(+), 237 deletions(-) diff --git a/.storybook/lib/storiesFromMarkdown.js b/.storybook/lib/storiesFromMarkdown.js index 440ddb67f2..513e431f99 100644 --- a/.storybook/lib/storiesFromMarkdown.js +++ b/.storybook/lib/storiesFromMarkdown.js @@ -4,11 +4,27 @@ import select from 'unist-util-select' import findBefore from 'unist-util-find-before' import htmlToReact from 'html-to-react' import parsePairs from 'parse-pairs' +import React from 'react' +import ReactDOMServer from 'react-dom/server' +import {Octicon} from '../Octicon' const htmlParser = new htmlToReact.Parser() +const railsOcticonToReact = (html) => { + // <%= octicon "tools" %> to + const octre = /<%= octicon ["']([a-z\-]+)["'] %>/gi + html = html.replace(octre, (match, name) => { + return ReactDOMServer.renderToStaticMarkup() + }) + return html +} + +const isValidNode = () => { + return true; +} + const nodeToStory = (node, file) => { - const html = node.value + let html = railsOcticonToReact(node.value) const element = htmlParser.parse(html) const pairs = node.lang.replace(/^html\s*/, '') const attrs = pairs.length ? parsePairs(pairs) : {} diff --git a/modules/primer-navigation/README.md b/modules/primer-navigation/README.md index c0e71a057b..2bbb057c3a 100644 --- a/modules/primer-navigation/README.md +++ b/modules/primer-navigation/README.md @@ -48,7 +48,7 @@ Primer comes with several navigation components. Some were designed with singula The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`. -```html +```html title="Menu"