diff --git a/.storybook/config.js b/.storybook/config.js index c0195d32..7a05e1c3 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -2,9 +2,10 @@ import React from 'react' import { configure, addDecorator } from '@storybook/react' import { setOptions } from '@storybook/addon-options' import '../modules/primer/index.scss' +import { version } from '../modules/primer/package.json' setOptions({ - name: 'Primer', + name: `Primer v${version}`, url: 'http://primer.github.io/', showDownPanel: false, }) diff --git a/.storybook/lib/storiesFromMarkdown.js b/.storybook/lib/storiesFromMarkdown.js index 72348f2f..564600df 100644 --- a/.storybook/lib/storiesFromMarkdown.js +++ b/.storybook/lib/storiesFromMarkdown.js @@ -12,7 +12,7 @@ const htmlParser = new htmlToReact.Parser() const railsOcticonToReact = (html) => { // <%= octicon "tools" %> to - const octre = /<%= octicon ["']([a-z\-]+)["'][^%]*%>/gi + const octre = /<%= octicon[\(\s]["']([a-z\-]+)["'][^%]*%>/gi html = html.replace(octre, (match, name) => { return ReactDOMServer.renderToStaticMarkup() }) diff --git a/CHANGELOG.md b/CHANGELOG.md index 143ee70d..8e5a53d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,28 @@ +# 10.3.0 (2018-01-17) + +#### :rocket: Enhancement +* [#426](https://github.com/primer/primer/pull/426) Add em spacer variables. ([@broccolini](https://github.com/broccolini)) +* [#430](https://github.com/primer/primer/pull/430) Increase input font-size to 16px on mobile. ([@broccolini](https://github.com/broccolini)) + +#### :bug: Bug Fix +* [#416](https://github.com/primer/primer/pull/416) Point style field to build file in subhead component. ([@muan](https://github.com/muan)) +* [#424](https://github.com/primer/primer/pull/424) Add missing $spacer-12 in $marketingSpacers variable. ([@gladwearefriends](https://github.com/gladwearefriends)) + +#### :nail_care: Polish +* [#418](https://github.com/primer/primer/pull/418) Button color contrast improvements. ([@broccolini](https://github.com/broccolini)) + +#### :memo: Documentation +* [#427](https://github.com/primer/primer/pull/427) Adding stories from markdown for the other modules that didn't have any stories. ([@jonrohan](https://github.com/jonrohan)) + +#### :house: Internal +* [#420](https://github.com/primer/primer/pull/420) Update licenses to 2018 🎊. ([@jonrohan](https://github.com/jonrohan)) + +#### Committers: 4 +- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends)) +- Diana Mounter ([broccolini](https://github.com/broccolini)) +- Jon Rohan ([jonrohan](https://github.com/jonrohan)) +- [muan](https://github.com/muan) + # 10.2.0 (2017-12-11) #### :rocket: Enhancement diff --git a/LICENSE b/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-alerts/LICENSE b/modules/primer-alerts/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-alerts/LICENSE +++ b/modules/primer-alerts/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-alerts/lib/flash.scss b/modules/primer-alerts/lib/flash.scss index 6c20f64c..029c7fe2 100644 --- a/modules/primer-alerts/lib/flash.scss +++ b/modules/primer-alerts/lib/flash.scss @@ -73,7 +73,7 @@ } .warning { - padding: 0.5em; + padding: $em-spacer-5; margin-bottom: 0.8em; font-weight: $font-weight-bold; background-color: $yellow-100; diff --git a/modules/primer-alerts/package.json b/modules/primer-alerts/package.json index 766c5043..7f0335e4 100644 --- a/modules/primer-alerts/package.json +++ b/modules/primer-alerts/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.4", + "version": "1.5.5", "name": "primer-alerts", "description": "Flash messages, or alerts, inform users of successful or pending actions.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.1" + "primer-support": "4.5.2" }, "keywords": [ "alerts", diff --git a/modules/primer-avatars/LICENSE b/modules/primer-avatars/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-avatars/LICENSE +++ b/modules/primer-avatars/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-avatars/package.json b/modules/primer-avatars/package.json index da2e0c43..29a3316b 100644 --- a/modules/primer-avatars/package.json +++ b/modules/primer-avatars/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.1", + "version": "1.5.2", "name": "primer-avatars", "description": "Basic styles for user profile avatars.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.1" + "primer-support": "4.5.2" }, "keywords": [ "avatars", diff --git a/modules/primer-base/LICENSE b/modules/primer-base/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-base/LICENSE +++ b/modules/primer-base/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-base/package.json b/modules/primer-base/package.json index 182c6678..a45a57ce 100644 --- a/modules/primer-base/package.json +++ b/modules/primer-base/package.json @@ -1,5 +1,5 @@ { - "version": "1.6.2", + "version": "1.6.3", "name": "primer-base", "description": "CSS to reset the browsers default styles", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.1" + "primer-support": "4.5.2" }, "keywords": [ "primer", diff --git a/modules/primer-blankslate/LICENSE b/modules/primer-blankslate/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-blankslate/LICENSE +++ b/modules/primer-blankslate/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-blankslate/package.json b/modules/primer-blankslate/package.json index d30ea765..a37c35b2 100644 --- a/modules/primer-blankslate/package.json +++ b/modules/primer-blankslate/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.4", + "version": "1.4.5", "name": "primer-blankslate", "description": "Blankslates are for when there is a lack of content within a page or section.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.1" + "primer-support": "4.5.2" }, "keywords": [ "primer", diff --git a/modules/primer-box/LICENSE b/modules/primer-box/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-box/LICENSE +++ b/modules/primer-box/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-box/package.json b/modules/primer-box/package.json index 09bd3113..db1f980e 100644 --- a/modules/primer-box/package.json +++ b/modules/primer-box/package.json @@ -1,5 +1,5 @@ { - "version": "2.5.4", + "version": "2.5.5", "name": "primer-box", "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.1" + "primer-support": "4.5.2" }, "keywords": [ "primer", diff --git a/modules/primer-branch-name/LICENSE b/modules/primer-branch-name/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-branch-name/LICENSE +++ b/modules/primer-branch-name/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-branch-name/README.md b/modules/primer-branch-name/README.md index 49b26d44..539aeca4 100644 --- a/modules/primer-branch-name/README.md +++ b/modules/primer-branch-name/README.md @@ -42,16 +42,19 @@ status: Stable Branch names can be a link name or not: -```html +```html title="Branch name" a_new_feature_branch +``` + +```html title="Branch name with link" a_new_feature_branch ``` You may also include an octicon before the branch name text: -```html +```html title="Branch name with icon" - <%= octicon("git-branch") width:16 height:16 %> + <%= octicon("git-branch", width:16, height:16) %> a_new_feature_branch ``` diff --git a/modules/primer-branch-name/package.json b/modules/primer-branch-name/package.json index 32dba194..61db2aa0 100644 --- a/modules/primer-branch-name/package.json +++ b/modules/primer-branch-name/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.2", + "version": "1.0.3", "name": "primer-branch-name", "description": "A nice, consistent way to display branch names.", "homepage": "http://primer.github.io/", @@ -29,7 +29,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.5.1" + "primer-support": "4.5.2" }, "keywords": [ "github", diff --git a/modules/primer-branch-name/stories.js b/modules/primer-branch-name/stories.js new file mode 100644 index 00000000..8a87f8b9 --- /dev/null +++ b/modules/primer-branch-name/stories.js @@ -0,0 +1,10 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown' + +const stories = storiesOf('Branch Name', module) + +storiesFromMarkdown(require.context('.', true, /\.md$/)) + .forEach(({title, story}) => { + stories.add(title, story) + }) diff --git a/modules/primer-breadcrumb/LICENSE b/modules/primer-breadcrumb/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-breadcrumb/LICENSE +++ b/modules/primer-breadcrumb/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-breadcrumb/lib/breadcrumb.scss b/modules/primer-breadcrumb/lib/breadcrumb.scss index ed70dde6..1d2d78e0 100644 --- a/modules/primer-breadcrumb/lib/breadcrumb.scss +++ b/modules/primer-breadcrumb/lib/breadcrumb.scss @@ -5,8 +5,8 @@ list-style: none; &::after { - padding-right: 0.5em; - padding-left: 0.5em; + padding-right: $em-spacer-5; + padding-left: $em-spacer-5; color: $border-gray; content: "/"; } diff --git a/modules/primer-breadcrumb/package.json b/modules/primer-breadcrumb/package.json index a7378843..4bc4f206 100644 --- a/modules/primer-breadcrumb/package.json +++ b/modules/primer-breadcrumb/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.0", + "version": "1.5.1", "name": "primer-breadcrumb", "description": "Breadcrumb navigation for pages with parents / grandparents.", "homepage": "http://primer.github.io/", @@ -29,7 +29,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.5.1" + "primer-support": "4.5.2" }, "keywords": [ "breadcrumb", diff --git a/modules/primer-buttons/LICENSE b/modules/primer-buttons/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-buttons/LICENSE +++ b/modules/primer-buttons/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-buttons/lib/button.scss b/modules/primer-buttons/lib/button.scss index a0d32a59..cdfa9697 100644 --- a/modules/primer-buttons/lib/button.scss +++ b/modules/primer-buttons/lib/button.scss @@ -22,7 +22,7 @@ i { font-style: normal; font-weight: $font-weight-semibold; - opacity: 0.6; + opacity: 0.75; } .octicon { @@ -90,7 +90,7 @@ // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,

.btn-large { - padding: 0.75em 1.25em; + padding: $em-spacer-6 1.25em; font-size: inherit; border-radius: 6px; } diff --git a/modules/primer-buttons/package.json b/modules/primer-buttons/package.json index e00829e3..93b1abab 100644 --- a/modules/primer-buttons/package.json +++ b/modules/primer-buttons/package.json @@ -1,5 +1,5 @@ { - "version": "2.5.2", + "version": "2.5.3", "name": "primer-buttons", "description": "A collection of buttons used for primary and secondary actions.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.1" + "primer-support": "4.5.2" }, "keywords": [ "primer", diff --git a/modules/primer-core/LICENSE b/modules/primer-core/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-core/LICENSE +++ b/modules/primer-core/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-core/index.scss b/modules/primer-core/index.scss index 65637a51..339fa21e 100644 --- a/modules/primer-core/index.scss +++ b/modules/primer-core/index.scss @@ -2,7 +2,7 @@ * Primer-core * http://primer.github.io * - * Released under MIT license. Copyright (c) 2017 GitHub Inc. + * Released under MIT license. Copyright (c) 2018 GitHub Inc. */ // Primer master file diff --git a/modules/primer-core/package.json b/modules/primer-core/package.json index 647d170f..af277876 100644 --- a/modules/primer-core/package.json +++ b/modules/primer-core/package.json @@ -1,5 +1,5 @@ { - "version": "6.6.1", + "version": "6.7.0", "name": "primer-core", "description": "Primer's core modules", "homepage": "http://primer.github.io/", @@ -27,17 +27,17 @@ "lint": "../../script/lint-scss" }, "dependencies": { - "primer-base": "1.6.2", - "primer-box": "2.5.4", - "primer-breadcrumb": "1.5.0", - "primer-buttons": "2.5.2", - "primer-forms": "2.0.2", - "primer-layout": "1.4.4", - "primer-navigation": "1.5.2", - "primer-support": "4.5.1", - "primer-table-object": "1.4.4", - "primer-tooltips": "1.5.1", - "primer-truncate": "1.4.4", - "primer-utilities": "4.8.4" + "primer-base": "1.6.3", + "primer-box": "2.5.5", + "primer-breadcrumb": "1.5.1", + "primer-buttons": "2.5.3", + "primer-forms": "2.1.0", + "primer-layout": "1.4.5", + "primer-navigation": "1.5.3", + "primer-support": "4.5.2", + "primer-table-object": "1.4.5", + "primer-tooltips": "1.5.2", + "primer-truncate": "1.4.5", + "primer-utilities": "4.8.5" } } diff --git a/modules/primer-forms/LICENSE b/modules/primer-forms/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-forms/LICENSE +++ b/modules/primer-forms/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-forms/lib/form-control.scss b/modules/primer-forms/lib/form-control.scss index f2ae6a8f..f1e80635 100644 --- a/modules/primer-forms/lib/form-control.scss +++ b/modules/primer-forms/lib/form-control.scss @@ -19,7 +19,7 @@ label { .form-select { min-height: 34px; padding: 6px $spacer-2; - font-size: $body-font-size; + font-size: $h4-size; line-height: 20px; color: $text-gray-dark; vertical-align: middle; @@ -37,6 +37,11 @@ label { outline: none; box-shadow: $form-control-shadow, $btn-input-focus-shadow; } + + // Ensures inputs don't zoom on mobile but are body-font size on desktop + @include breakpoint(md) { + font-size: $body-font-size; + } } // Inputs with contrast for easy light gray backgrounds against white. diff --git a/modules/primer-forms/package.json b/modules/primer-forms/package.json index 8fc18425..8246d7c3 100644 --- a/modules/primer-forms/package.json +++ b/modules/primer-forms/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.2", + "version": "2.1.0", "name": "primer-forms", "description": "Style individual form controls and utilize common layouts.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.5.1" + "primer-support": "4.5.2" }, "keywords": [ "primer", diff --git a/modules/primer-labels/LICENSE b/modules/primer-labels/LICENSE index 61c8a4cf..71fbac5e 100644 --- a/modules/primer-labels/LICENSE +++ b/modules/primer-labels/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 GitHub Inc. +Copyright (c) 2018 GitHub Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/modules/primer-labels/README.md b/modules/primer-labels/README.md index 38412f76..52e711bc 100644 --- a/modules/primer-labels/README.md +++ b/modules/primer-labels/README.md @@ -54,13 +54,14 @@ GitHub also programmatically generates and applies a background color for labels The base `Label` style does not apply a background color, here's an example using the `bg-blue` utility to apply a blue background: -```html +```html title="Label" default label ``` **Note:** Be sure to include a title attribute on labels, it's helpful for people using screen-readers to differentiate a label from other text. I.e. without the title attribute, the following example would read as _"New select component design"_, rather than identifying `design` as a label. -```html +```html title="Label without title" + New select componentdesign ``` @@ -70,31 +71,31 @@ Labels come in a few different themes. Use a theme that helps communicate the co Use `Label--gray` to create a label with a light gray background and gray text. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or whe you want a label to feel less prominent compared with labels with stronger colors. -```html +```html title="Label theme gray" gray label ``` Use `Label--gray-darker` to create a label with a dark-gray background color. This label is also neutral in color, however, since it's background is darker it can stand out more compared to `Label--gray`. -```html +```html title="Label theme dark gray" dark gray label ``` Use `Label--orange` to communicate "warning". The orange background color is very close to red, so avoid using next to labels with a red background color since most people will find it hard to tell the difference. -```html +```html title="Label theme orange" orange label ``` Use `Label--outline` to create a label with gray text, a gray border, and a transparent background. The outline reduces the contrast of this label in combination with filled labels. Use this in contexts where you need it to stand out less than other labels and communicate a neutral message. -```html +```html title="Label outline" outlined label ``` Use `Label--outline-green` in combination with `Label--outline` to communicate a positive message. -```html +```html title="Label outline green" green outlined label ``` @@ -103,14 +104,14 @@ Use `Label--outline-green` in combination with `Label--outline` to communicate a Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. -```html +```html title="State" Default ``` ### State themes States come in a few variations that apply different colors. Use the state that best communicates the status or function. -```html +```html title="State themes" <%= octicon "git-pull-request" %> Open <%= octicon "git-pull-request" %> Closed <%= octicon "git-merge" %> Merged @@ -121,7 +122,7 @@ States come in a few variations that apply different colors. Use the state that ### Small states Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content. -```html +```html title="Small states" <%= octicon "issue-opened" %> Open <%= octicon "issue-closed" %> Closed ``` @@ -130,7 +131,7 @@ Use `State--small` for a state label with reduced padding a smaller font size. T Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text. -```html +```html title="Counter" 16 32 64 @@ -138,7 +139,7 @@ Use the `Counter` component to add a count to navigational elements and buttons. Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](../../core/components/navigation). -```html +```html title="Counter in tabs"