From 8a3a8a91d020f4efe71bab6f1183c987bd96e64d Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 13 Sep 2019 12:03:08 -0700 Subject: [PATCH 01/42] update development docs for new gatsby site --- DEVELOP.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/DEVELOP.md b/DEVELOP.md index 925466a840..09c77eddaa 100644 --- a/DEVELOP.md +++ b/DEVELOP.md @@ -36,18 +36,16 @@ The typical Primer workflow looks something like this: Run `npm install` to install the npm dependencies. ## Docs site -The Primer CSS docs are built with React using [Primer Components](https://primer.style/components) and automatically deployed on every push to this repo with [Now]. You can run the server locally with: +The Primer CSS docs are built with React using [Doctocat](https://primer.style/doctocat) and automatically deployed on every push to this repo with [Now]. You can run the server locally with: ```sh npm start ``` -Then visit http://localhost:3000/css to view the site. +Then visit http://localhost:8000 to view the site. -:rotating_light: **Warning:** Next.js has a [long-running issue](https://github.com/zeit/next.js/issues/1189) with trailing slashes in URLs. Avoid visiting `http://localhost:3000/` if possible, as this may cause your development server to fail in less-than-graceful ways. - -### The pages directory -The [pages directory](./pages/) contains all of the documentation files that map to URLs on the site. Because we host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css). +### The docs directory +The [docs directory](./docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder. ### URL tests From 599ecfd783ba37d7f9eb8204c3a6606cd2fc82b5 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 26 Sep 2019 12:31:28 -0700 Subject: [PATCH 02/42] Importing TimelineItem from .com and creating matching docs --- docs/content/components/timeline.md | 189 ++++++++++++++++++ .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 + src/timeline/README.md | 25 +++ src/timeline/index.scss | 1 + src/timeline/timeline-item.scss | 84 ++++++++ 5 files changed, 301 insertions(+) create mode 100644 docs/content/components/timeline.md create mode 100644 src/timeline/README.md create mode 100644 src/timeline/index.scss create mode 100644 src/timeline/timeline-item.scss diff --git a/docs/content/components/timeline.md b/docs/content/components/timeline.md new file mode 100644 index 0000000000..d8688c7986 --- /dev/null +++ b/docs/content/components/timeline.md @@ -0,0 +1,189 @@ +--- +title: Timeline +path: components/timeline +status: Experimental +status_issue: 'https://github.com/github/design-systems/issues/101' +source: '' +bundle: timeline +--- + +The `TimelineItem` component is used to display items on a vertical timeline, connected by `TimelineItem-badge` elements. + +```html live +
+
+ + +
+ +
+ Monalisa created one + hot potato + Just now +
+
+``` + +## TimelineItem-badge + +The default TimelineItem-badge color is dark text on a light grey background. + +```html live + +
+
+ + + +
+
+ Default badge color +
+
+``` + +### Adding color to TimelineItem-badge + +To have color variants, use the [color utilities]() on the badge. Be cautious with color choices. We typically use them in the timeline to give meaning to the event in context of the timeline. + +```html live + +
+
+ + + +
+
+ Red background used when closed events occur +
+
+
+
+ + + +
+
+ Green background when opened or passed events occur +
+
+
+
+ + + +
+
+ Purple background used when pull requests are merged +
+
+
+
+ + + +
+
+ Blue background to indicate new events below +
+
+``` + +## TimelineItem--condensed + +TimelineItem has a condensed variant that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits. + +```html live +
+
+ +
+
+ This is the message of a condensed TimelineItem +
+
+
+
+ +
+
+ This is the message of a condensed TimelineItem +
+
+``` + +## TimelineItem-avatar + +Sometimes you want to give ownership to an event by displaying an [Avatar]() of the author. To do this, you'll need to wrap the TimelineItem in a `
` and give it space for the avatar. `ml-6 pl-3` This is `40px`, the size of the image, and `16px` space for the gutter. + +```html live +
+
+
+ @octocat +
+ +
+ + +
+ +
+ Monalisa created one + hot potato + Just now +
+
+
+``` + +## TimelineItem-break + +To create a visual break in the timeline, use `TimelineItem-break`. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs. + +```html live +
+
+ + + +
+
+ Red background used when closed events occur +
+
+
+
+
+ + + +
+
+ Green background when opened or passed events occur +
+
+``` + +## Target TimelineItem + +```html live +
+ + + + + +
+ Monalisa created one + hot potato + Just now +
+
+``` \ No newline at end of file diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index c9f169d17b..0662978791 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -109,6 +109,8 @@ url: /components/select-menu-deprecated - title: Subhead url: /components/subhead + - title: Timeline + url: /components/timeline - title: Toasts url: /components/toasts - title: Tooltips diff --git a/src/timeline/README.md b/src/timeline/README.md new file mode 100644 index 0000000000..a8acbfa76c --- /dev/null +++ b/src/timeline/README.md @@ -0,0 +1,25 @@ +--- +bundle: "timeline" +generated: true +--- + +# Primer CSS: `timeline` bundle + +## Usage + +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: + +```scss +@import "@primer/css/timeline/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/timeline.css`. + +## License + +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + + +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/timeline/index.scss b/src/timeline/index.scss new file mode 100644 index 0000000000..fc899c24ac --- /dev/null +++ b/src/timeline/index.scss @@ -0,0 +1 @@ +@import "./timeline-item.scss"; diff --git a/src/timeline/timeline-item.scss b/src/timeline/timeline-item.scss new file mode 100644 index 0000000000..1dfd4410ae --- /dev/null +++ b/src/timeline/timeline-item.scss @@ -0,0 +1,84 @@ +.TimelineItem { + position: relative; + display: flex; + padding: $spacer-3 0; + margin-left: $spacer-3; + + // The Timeline + &::before { + position: absolute; + top: 0; + bottom: 0; + left: 0; + display: block; + width: 2px; + content: ""; + background-color: $gray-200; + } + + &:target .TimelineItem-badge { + border-color: $blue-400; + box-shadow: 0 0 0.2em $blue-200; + } +} + +.TimelineItem-badge { + position: relative; + z-index: 1; + display: flex; + width: $spacer-5; + height: $spacer-5; + margin-right: $spacer-2; + margin-left: -$spacer-3 + 1; + color: $gray-700; + align-items: center; + background-color: $gray-200; + border: 2px solid $white; + border-radius: 50%; + justify-content: center; + flex-shrink: 0; +} + +.TimelineItem-body { + max-width: 100%; + margin-top: $spacer-1; + color: $gray-700; + flex: auto; +} + +.TimelineItem-avatar { + position: absolute; + left: -($spacer-6 + $spacer-5); + z-index: 1; +} + +.TimelineItem-break { + position: relative; + z-index: 1; + height: $spacer-4; + margin: 0; + margin-bottom: -$spacer-3; + margin-left: -($spacer-6 + $spacer-3); + background-color: $white; + border: 0; + border-top: 4px solid $gray-200; +} + +.TimelineItem--condensed { + padding-top: $spacer-1; + padding-bottom: 0; + + // TimelineItem--condensed is often grouped. (commits) + &:last-child { + padding-bottom: $spacer-3; + } + + .TimelineItem-badge { + height: $spacer-3; + margin-top: $spacer-2; + margin-bottom: $spacer-2; + color: $gray-400; + background-color: $white; + border: 0; + } +} From 2133d45432d44a833b58468c70df0b7f98689539 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 26 Sep 2019 13:18:09 -0700 Subject: [PATCH 03/42] Including support files --- src/timeline/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/timeline/index.scss b/src/timeline/index.scss index fc899c24ac..1692410ca2 100644 --- a/src/timeline/index.scss +++ b/src/timeline/index.scss @@ -1 +1,2 @@ +@import "../support/index.scss"; @import "./timeline-item.scss"; From ef33df5d8996fabc59c77bb5b6ba6e0d7ad41fce Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 10 Oct 2019 12:24:35 -0600 Subject: [PATCH 04/42] Update src/timeline/timeline-item.scss --- src/timeline/timeline-item.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/timeline/timeline-item.scss b/src/timeline/timeline-item.scss index 1dfd4410ae..e1fa675ac1 100644 --- a/src/timeline/timeline-item.scss +++ b/src/timeline/timeline-item.scss @@ -40,6 +40,7 @@ } .TimelineItem-body { + min-width: 0; max-width: 100%; margin-top: $spacer-1; color: $gray-700; From cb4f7d2e287e0f9c5b86379cefcf1e15f6bd4854 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 11 Oct 2019 14:02:03 +0900 Subject: [PATCH 05/42] Convert to html example --- docs/content/components/box-overlay.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/content/components/box-overlay.md b/docs/content/components/box-overlay.md index c7003a1c85..d76ddffd82 100644 --- a/docs/content/components/box-overlay.md +++ b/docs/content/components/box-overlay.md @@ -14,13 +14,15 @@ Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Bo **Note:** `position: fixed` has been disabled in this example -```erb +```html live +
Open dialog

Box title

From 28f22d41772fb374b1d1b4800a1667af0224bc30 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 11 Oct 2019 15:35:26 +0900 Subject: [PATCH 06/42] Fix example styling --- docs/content/components/box-overlay.md | 4 ++++ .../gatsby-theme-doctocat/components/live-preview-wrapper.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/content/components/box-overlay.md b/docs/content/components/box-overlay.md index d76ddffd82..57d8930063 100644 --- a/docs/content/components/box-overlay.md +++ b/docs/content/components/box-overlay.md @@ -52,6 +52,10 @@ Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Bo
+ + + + ``` In github.com there is a shared dialog partial. You will only have to pass in the modal content: diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js index 33f2294d04..afc74449af 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js @@ -7,7 +7,7 @@ function LivePreviewWrapper({children}) { -
{children}
+
{children}
) } From 84e391ae6b963c5b8cbc5493686ff6783dba6ebb Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 11 Oct 2019 15:42:47 +0900 Subject: [PATCH 07/42] Remove note --- docs/content/components/box-overlay.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/content/components/box-overlay.md b/docs/content/components/box-overlay.md index 57d8930063..10fe58bff9 100644 --- a/docs/content/components/box-overlay.md +++ b/docs/content/components/box-overlay.md @@ -12,8 +12,6 @@ Use the `Box--overlay` with the `
` and [``](https://git Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide. -**Note:** `position: fixed` has been disabled in this example - ```html live
From 331f25b60db5c7586ff07b2a9c7df8b3d8e05ef2 Mon Sep 17 00:00:00 2001 From: Mohamed ELIDRISSI <45264848+MohamedElidrissi@users.noreply.github.com> Date: Mon, 14 Oct 2019 16:39:20 +0100 Subject: [PATCH 08/42] Fix broken links to typography utilities --- docs/content/support/typography.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/support/typography.md b/docs/content/support/typography.md index 337bbf4057..4e2ee81b7a 100644 --- a/docs/content/support/typography.md +++ b/docs/content/support/typography.md @@ -24,7 +24,7 @@ Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./breakpo | 5 | 14px | 14px | 17.5 | 21 | | 6 | 12px | 12px | 15 | 18 | -The typography scale is used to create [typography utilities](/css/utilities/typography). +The typography scale is used to create [typography utilities](/utilities/typography). ## Typography variables @@ -67,7 +67,7 @@ $lh-default: 1.5 !default; ## Typography Mixins -Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/css/utilities/typography#heading-utilities). which requires no additional CSS. +Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/utilities/typography#heading-utilities). which requires no additional CSS. Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example: From 3560f36dc9f478ca632b73429bf195309b7b1788 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 14 Oct 2019 16:23:48 -0700 Subject: [PATCH 09/42] add [role=tab][aria-selected=true] to .UnderlineNav-item.selected --- src/navigation/underline-nav.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss index 4c948781f2..fd7347cf9d 100644 --- a/src/navigation/underline-nav.scss +++ b/src/navigation/underline-nav.scss @@ -31,7 +31,8 @@ } } - &.selected { + &[role=tab][aria-selected=true], + &.selected { // TODO@14.0.0: remove &.selected font-weight: $font-weight-bold; color: $text-gray-dark; border-bottom-color: $orange-600; From 74426abfda1d45338a31095983c7cdc263afb25d Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 21 Oct 2019 13:31:43 +0900 Subject: [PATCH 10/42] Add `diffstat` styles from dotcom --- src/labels/diffstat.scss | 36 ++++++++++++++++++++++++++++++++++++ src/labels/index.scss | 1 + 2 files changed, 37 insertions(+) create mode 100644 src/labels/diffstat.scss diff --git a/src/labels/diffstat.scss b/src/labels/diffstat.scss new file mode 100644 index 0000000000..fc63dbcfdf --- /dev/null +++ b/src/labels/diffstat.scss @@ -0,0 +1,36 @@ +// diffstat +// +// Green/red blocks showing additions and deletions + +.diffstat { + font-size: $h6-size; + font-weight: $font-weight-bold; + color: $text-gray; + white-space: nowrap; + cursor: default; +} + +.diffstat-block-deleted, +.diffstat-block-added, +.diffstat-block-neutral { + display: inline-block; + width: $spacer-2; + height: $spacer-2; + // stylelint-disable-next-line primer/variables + margin-left: 1px; +} + +.diffstat-block-deleted { + // stylelint-disable-next-line primer/variables + background-color: $red-600; +} + +.diffstat-block-added { + // stylelint-disable-next-line primer/variables + background-color: darken($green-400, 5%); +} + +.diffstat-block-neutral { + // stylelint-disable-next-line primer/variables + background-color: $gray-300; +} diff --git a/src/labels/index.scss b/src/labels/index.scss index a86ded9b52..d89f2639f0 100644 --- a/src/labels/index.scss +++ b/src/labels/index.scss @@ -2,3 +2,4 @@ @import "./labels.scss"; @import "./states.scss"; @import "./counters.scss"; +@import "./diffstat.scss"; From 147ed5e43fb8be7d18f15be497956bd534afd7c7 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 21 Oct 2019 13:35:10 +0900 Subject: [PATCH 11/42] Add documentation --- docs/content/components/labels.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index dcaec7b292..4711e31bd6 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -155,3 +155,26 @@ Counters can also be used in `Box` headers to indicate the number of items in a ``` + +## Diffstat + +Diffstats show how many deletions or additions a diff has. It's typically a row of 5 blocks that get colored with green or red. + +```html live + + 6 + + +``` + +Use the `text-green` and `text-red` utilities to add addtitional information about the size of the diff. + +```html live + + +7 + −2 + + + + +``` From 36334a1833de45d1939203c7d22ff1d5b431b40c Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 21 Oct 2019 15:52:13 +0900 Subject: [PATCH 12/42] Lint --- src/labels/diffstat.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/labels/diffstat.scss b/src/labels/diffstat.scss index fc63dbcfdf..2341a79377 100644 --- a/src/labels/diffstat.scss +++ b/src/labels/diffstat.scss @@ -16,21 +16,17 @@ display: inline-block; width: $spacer-2; height: $spacer-2; - // stylelint-disable-next-line primer/variables margin-left: 1px; } .diffstat-block-deleted { - // stylelint-disable-next-line primer/variables background-color: $red-600; } .diffstat-block-added { - // stylelint-disable-next-line primer/variables - background-color: darken($green-400, 5%); + background-color: $green-400; } .diffstat-block-neutral { - // stylelint-disable-next-line primer/variables background-color: $gray-300; } From c9ba9174bf3bde01b02464a03d533ef188d4903c Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 21 Oct 2019 16:47:34 +0900 Subject: [PATCH 13/42] Wait to update the "added" color --- src/labels/diffstat.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/labels/diffstat.scss b/src/labels/diffstat.scss index 2341a79377..6c7e541373 100644 --- a/src/labels/diffstat.scss +++ b/src/labels/diffstat.scss @@ -24,7 +24,7 @@ } .diffstat-block-added { - background-color: $green-400; + background-color: darken($green-400, 5%); } .diffstat-block-neutral { From 95c6a02a23c65fb2f3264370690c5f8147a5a237 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 22 Oct 2019 22:14:40 +0900 Subject: [PATCH 14/42] Add IssueLabel from dotcom --- src/labels/index.scss | 1 + src/labels/issue-labels.scss | 45 ++++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 src/labels/issue-labels.scss diff --git a/src/labels/index.scss b/src/labels/index.scss index a86ded9b52..b34fed10c3 100644 --- a/src/labels/index.scss +++ b/src/labels/index.scss @@ -1,4 +1,5 @@ @import "../support/index.scss"; +@import "./issue-labels.scss"; @import "./labels.scss"; @import "./states.scss"; @import "./counters.scss"; diff --git a/src/labels/issue-labels.scss b/src/labels/issue-labels.scss new file mode 100644 index 0000000000..9f7816ca51 --- /dev/null +++ b/src/labels/issue-labels.scss @@ -0,0 +1,45 @@ +// Issue Labels + +.IssueLabel { + height: 20px; + // stylelint-disable-next-line primer/variables + padding: 0.15em $spacer-1; + font-size: $h6-size; + font-weight: $font-weight-bold; + // stylelint-disable-next-line primer/variables + line-height: 15px; + // stylelint-disable-next-line primer/variables + border-radius: 2px; + // stylelint-disable-next-line primer/variables + box-shadow: inset 0 -1px 0 rgba($black, 0.12); + + .g-emoji { + position: relative; + top: -0.05em; + display: inline-block; + font-size: 1em; + line-height: $lh-condensed-ultra; + } + + &:hover { + text-decoration: none; + } +} + +.IssueLabel--big { + padding: $spacer-1 $spacer-2; + font-size: $h5-size; + font-weight: $font-weight-bold; + border-radius: $border-radius; + transition: opacity 0.2s linear; + + .g-emoji { + display: inline-block; + // stylelint-disable-next-line primer/variables + margin-top: -1px; + } + + &:hover { + opacity: 0.85; + } +} From 6cfb61f8d9279ff55edfa9d4fb5dc1351208acea Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 22 Oct 2019 22:14:59 +0900 Subject: [PATCH 15/42] Add documentation --- docs/content/components/labels.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index dcaec7b292..b63aa4d765 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -62,6 +62,25 @@ Use `Label--outline-green` in combination with `Label--outline` to communicate a green outlined label ``` +## Issue Labels + +Issue Labels are used for adding labels to issues and pull requests. They also come with emoji support. + +```html live +good first issue +bug 🐛 +help wanted +``` + +If an Issue Label needs to be bigger, add the `.IssueLabel--big` modifier. + +```html live +good first issue +bug 🐛 +help wanted +``` + + ## States Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. From 9a9483b0f7edc94a3ca8dd8947aa9a735a646071 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 22 Oct 2019 22:24:32 +0900 Subject: [PATCH 16/42] Remove disables --- src/labels/issue-labels.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/labels/issue-labels.scss b/src/labels/issue-labels.scss index 9f7816ca51..b0491cce0c 100644 --- a/src/labels/issue-labels.scss +++ b/src/labels/issue-labels.scss @@ -2,15 +2,11 @@ .IssueLabel { height: 20px; - // stylelint-disable-next-line primer/variables padding: 0.15em $spacer-1; font-size: $h6-size; font-weight: $font-weight-bold; - // stylelint-disable-next-line primer/variables line-height: 15px; - // stylelint-disable-next-line primer/variables border-radius: 2px; - // stylelint-disable-next-line primer/variables box-shadow: inset 0 -1px 0 rgba($black, 0.12); .g-emoji { @@ -35,7 +31,6 @@ .g-emoji { display: inline-block; - // stylelint-disable-next-line primer/variables margin-top: -1px; } From 8b9b7cbb6fe3922233aeeba14813feb0a2874f26 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 22 Oct 2019 11:44:37 -0700 Subject: [PATCH 17/42] add .UnderlineNav-item[aria-current] to selected state --- src/navigation/underline-nav.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss index fd7347cf9d..952b270cce 100644 --- a/src/navigation/underline-nav.scss +++ b/src/navigation/underline-nav.scss @@ -31,8 +31,9 @@ } } + &.selected, // TODO@14.0.0: remove &.selected &[role=tab][aria-selected=true], - &.selected { // TODO@14.0.0: remove &.selected + &[aria-current]:not([aria-current=false]) { font-weight: $font-weight-bold; color: $text-gray-dark; border-bottom-color: $orange-600; From a87823b0f0633ecf919f13881fca0bfa313d167a Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 22 Oct 2019 11:50:03 -0700 Subject: [PATCH 18/42] npm version minor --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0be1b9c600..6dda84c32d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@primer/css", - "version": "13.1.0", + "version": "13.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 10ef44b58a..91ef5693fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/css", - "version": "13.1.0", + "version": "13.2.0", "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.", "homepage": "https://primer.style/css", "author": "GitHub, Inc.", From b8a0078527b5b99a7479a0270f09fac1b9d76fbf Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 18 Oct 2019 16:20:38 -0700 Subject: [PATCH 19/42] add chroma-js, postcss-import, postcss-value-parser --- package-lock.json | 93 +++++++++++++++++++++++++++++++++++++++++++++-- package.json | 3 ++ 2 files changed, 93 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6dda84c32d..79cc8d0b54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1566,6 +1566,14 @@ "postcss-modules-values": "^2.0.0", "postcss-value-parser": "^3.3.0", "schema-utils": "^1.0.0" + }, + "dependencies": { + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + } } }, "fs-extra": { @@ -2897,6 +2905,14 @@ "num2fraction": "^1.2.2", "postcss": "^7.0.14", "postcss-value-parser": "^3.3.1" + }, + "dependencies": { + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + } } }, "aws-sign2": { @@ -4164,6 +4180,12 @@ "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "dev": true }, + "chroma-js": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.0.6.tgz", + "integrity": "sha512-IiiClbBRkRwuXNl6impq5ssEhUGpmWvc5zzImZbDUWLWcFbj6ZbtsdZEx6sIXMKes7azgYaUpnmsY1T8BL6PqQ==", + "dev": true + }, "chrome-trace-event": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz", @@ -4836,6 +4858,12 @@ "postcss": "^6.0.1" } }, + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -5008,6 +5036,14 @@ "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", "postcss-value-parser": "^3.3.0" + }, + "dependencies": { + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + } } }, "css-tokenize": { @@ -11371,6 +11407,26 @@ "htmlparser2": "^3.10.0" } }, + "postcss-import": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz", + "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==", + "dev": true, + "requires": { + "postcss": "^7.0.1", + "postcss-value-parser": "^3.2.3", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "dependencies": { + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + } + } + }, "postcss-jsx": { "version": "0.36.3", "resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.36.3.tgz", @@ -11513,6 +11569,14 @@ "postcss": "^7.0.6", "postcss-selector-parser": "^6.0.0", "postcss-value-parser": "^3.3.1" + }, + "dependencies": { + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + } } }, "postcss-modules-scope": { @@ -11650,9 +11714,9 @@ "dev": true }, "postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz", + "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==", "dev": true }, "prelude-ls": { @@ -12456,6 +12520,23 @@ "integrity": "sha512-m7KWzOTLaibqBD6iw1dRNGX07kt1gW2hjImky+nLYBR/+FFe68xJYdYgPF6sMkLYBHLApJRczIBPhP/z5y63yQ==", "dev": true }, + "read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=", + "dev": true, + "requires": { + "pify": "^2.3.0" + }, + "dependencies": { + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + } + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -14492,6 +14573,12 @@ "uniq": "^1.0.1" } }, + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index 91ef5693fc..88e867ed0f 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@storybook/addon-viewport": "5.0.11", "@storybook/react": "5.0.11", "autoprefixer": "9.4.7", + "chroma-js": "^2.0.6", "code-blocks": "^1.1.0", "colorette": "^1.1.0", "css-loader": "1.0.0", @@ -62,10 +63,12 @@ "node-fetch": "2.4.0", "npm-run-all": "4.1.5", "postcss": "7.0.14", + "postcss-import": "^12.0.1", "postcss-load-config": "2.0.0", "postcss-loader": "^2.0.6", "postcss-node-sass": "2.1.8", "postcss-scss": "2.0.0", + "postcss-value-parser": "^4.0.2", "prop-types": "^15.6.2", "semver": "5.7.1", "style-loader": "^0.18.2", From 7f0cca8c4d91dc20555db4b1061f7d5c8ffd7898 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 18 Oct 2019 16:20:56 -0700 Subject: [PATCH 20/42] add script/analyze-variables.js --- script/analyze-variables.js | 121 ++++++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100755 script/analyze-variables.js diff --git a/script/analyze-variables.js b/script/analyze-variables.js new file mode 100755 index 0000000000..a7a6b205a8 --- /dev/null +++ b/script/analyze-variables.js @@ -0,0 +1,121 @@ +#!/usr/bin/env node +const globby = require('globby') +const postcss = require('postcss') +const atImport = require('postcss-import') +const syntax = require('postcss-scss') +const valueParser = require('postcss-value-parser') +const {readFile} = require('fs-extra') + +if (module.parent) { + module.exports = analyzeVariables +} else { + const args = process.argv.slice(2) + const file = args.length ? args.shift() : 'src/support/index.scss' + analyzeVariables(file).then(data => console.log(JSON.stringify(data, null, 2))) +} + +function analyzeVariables(file) { + const variables = {} + + const processor = postcss([ + atImport({path: 'src'}), + variablePlugin(variables), + require('postcss-node-sass')({includePaths: ['src/support/variables']}) + ]) + + return readFile(file, 'utf8') + .then(css => processor.process(css, {from: file, map: false, syntax})) + .then(({root, css}) => { + root.walkRules(':root', container => { + container.walkDecls(decl => { + const {prop, value} = decl + const actualProp = `$${prop.replace(/^--/, '')}` + const entry = variables[actualProp] + if (last(entry.values) !== value) { + entry.values.push(value) + } + variables[actualProp] = Object.assign( + { + computed: value + }, + entry, + {refs: []} + ) + }) + }) + + for (const [prop, entry] of Object.entries(variables)) { + for (const value of entry.values) { + if (variables[value]) { + variables[value].refs.push(prop) + } + } + } + + // sort it alphabetically by key + return sortObject(variables, ([ak, av], [bk, bv]) => av.refs.length || ak.localeCompare(bk)) + }) +} + +function variablePlugin(variables) { + return postcss.plugin('analyze-variables', (options = {}) => { + const {cwd = process.cwd()} = options + return (root, result) => { + const decls = new Map() + + root.walkDecls(/^\$/, decl => { + const {prop, value} = decl + if (decl.parent === root && !decl.value.startsWith('(')) { + decl.value = decl.value.replace(/ *\!default$/, '') + decls.set(prop, decl) + } + }) + + for (const [prop, decl] of decls.entries()) { + const {nodes} = valueParser(decl.value) + const values = [valueParser.stringify(nodes)] + while (nodes.some(node => decls.has(node.value))) { + for (const node of nodes) { + let {value} = node + if (decls.has(value)) { + node.value = decls.get(node.value).value + } + } + values.push(valueParser.stringify(nodes)) + } + + const {source} = decl + variables[prop] = { + values, + source: { + path: source.input.file.replace(`${cwd}/`, ''), + line: source.start.line + } + } + } + + const container = postcss.rule({selector: ':root'}) + for (const [prop, decl] of decls.entries()) { + container.append( + postcss.decl({ + prop: `--${prop.substr(1)}`, + value: `#{${decl.value}}` + }) + ) + } + root.append(container) + } + }) +} + +function sortObject(obj, cmp) { + const out = {} + for (const [key, value] of Object.entries(obj).sort(cmp)) { + out[key] = value + } + return out +} + +function last(list) { + return list[list.length - 1] +} From 771a9f333e887191c9f67d0d0fd645c4ad2561b4 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 18 Oct 2019 16:21:14 -0700 Subject: [PATCH 21/42] output variable analysis to meta/variables.json in dist --- script/dist.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/script/dist.js b/script/dist.js index 8a4bd14c72..ebf318a80a 100755 --- a/script/dist.js +++ b/script/dist.js @@ -69,6 +69,7 @@ remove(outDir) const meta = {bundles} return writeFile(join(outDir, 'meta.json'), JSON.stringify(meta, null, 2), encoding) }) + .then(writeVariableData) .then(writeDeprecationData) }) .catch(error => { @@ -102,3 +103,10 @@ function writeDeprecationData() { } return writeFile(join(outDir, 'deprecations.json'), JSON.stringify(data, null, 2)) } + +function writeVariableData() { + const analyzeVariables = require('./analyze-variables') + return analyzeVariables('src/support/index.scss').then(data => + writeFile(join(outDir, 'variables.json'), JSON.stringify(data, null, 2)) + ) +} From ce034c23bfc89d189a2a5f43da8d7fc02403f541 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 18 Oct 2019 16:28:01 -0700 Subject: [PATCH 22/42] remove chroma-js from top-level package.json --- docs/package-lock.json | 6 +++--- docs/package.json | 2 +- package-lock.json | 6 ------ package.json | 1 - 4 files changed, 4 insertions(+), 11 deletions(-) diff --git a/docs/package-lock.json b/docs/package-lock.json index 1d39b07de6..924bdfe68e 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -4050,9 +4050,9 @@ "integrity": "sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A==" }, "chroma-js": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.0.4.tgz", - "integrity": "sha512-gk71qOrSdBTLbsd0DIUO3QjZL8tTvMwpG1EoXYScy7rI4rcO4EyYH6zGuvCgUDumKumqg0pt6Ua+vWnMJsTYhw==" + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.0.6.tgz", + "integrity": "sha512-IiiClbBRkRwuXNl6impq5ssEhUGpmWvc5zzImZbDUWLWcFbj6ZbtsdZEx6sIXMKes7azgYaUpnmsY1T8BL6PqQ==" }, "chrome-trace-event": { "version": "1.0.2", diff --git a/docs/package.json b/docs/package.json index 00c6bc2e75..08a1bf57df 100644 --- a/docs/package.json +++ b/docs/package.json @@ -18,7 +18,7 @@ "@primer/octicons-react": "^9.1.1", "@svgr/webpack": "^4.3.2", "autoprefixer": "^9.6.1", - "chroma-js": "^2.0.4", + "chroma-js": "^2.0.6", "gatsby": "^2.10.4", "gatsby-plugin-google-analytics": "^2.1.7", "gatsby-plugin-sass": "^2.1.0", diff --git a/package-lock.json b/package-lock.json index 79cc8d0b54..7f144566c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4180,12 +4180,6 @@ "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "dev": true }, - "chroma-js": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.0.6.tgz", - "integrity": "sha512-IiiClbBRkRwuXNl6impq5ssEhUGpmWvc5zzImZbDUWLWcFbj6ZbtsdZEx6sIXMKes7azgYaUpnmsY1T8BL6PqQ==", - "dev": true - }, "chrome-trace-event": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz", diff --git a/package.json b/package.json index 88e867ed0f..83042779de 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "@storybook/addon-viewport": "5.0.11", "@storybook/react": "5.0.11", "autoprefixer": "9.4.7", - "chroma-js": "^2.0.6", "code-blocks": "^1.1.0", "colorette": "^1.1.0", "css-loader": "1.0.0", From 99c223e13ae3bd63577e43eae38b69d7dd7b3738 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 22 Oct 2019 15:50:09 -0700 Subject: [PATCH 23/42] lint --- script/analyze-variables.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/script/analyze-variables.js b/script/analyze-variables.js index a7a6b205a8..d66e938abb 100755 --- a/script/analyze-variables.js +++ b/script/analyze-variables.js @@ -1,5 +1,4 @@ #!/usr/bin/env node -const globby = require('globby') const postcss = require('postcss') const atImport = require('postcss-import') const syntax = require('postcss-scss') @@ -25,7 +24,7 @@ function analyzeVariables(file) { return readFile(file, 'utf8') .then(css => processor.process(css, {from: file, map: false, syntax})) - .then(({root, css}) => { + .then(({root}) => { root.walkRules(':root', container => { container.walkDecls(decl => { const {prop, value} = decl @@ -53,20 +52,20 @@ function analyzeVariables(file) { } // sort it alphabetically by key - return sortObject(variables, ([ak, av], [bk, bv]) => av.refs.length || ak.localeCompare(bk)) + return sortObject(variables, ([ak], [bk]) => ak.localeCompare(bk)) }) } function variablePlugin(variables) { return postcss.plugin('analyze-variables', (options = {}) => { const {cwd = process.cwd()} = options - return (root, result) => { + return root => { const decls = new Map() root.walkDecls(/^\$/, decl => { const {prop, value} = decl - if (decl.parent === root && !decl.value.startsWith('(')) { - decl.value = decl.value.replace(/ *\!default$/, '') + if (decl.parent === root && !value.startsWith('(')) { + decl.value = value.replace(/ *!default$/, '') decls.set(prop, decl) } }) @@ -76,9 +75,9 @@ function variablePlugin(variables) { const values = [valueParser.stringify(nodes)] while (nodes.some(node => decls.has(node.value))) { for (const node of nodes) { - let {value} = node + const {value} = node if (decls.has(value)) { - node.value = decls.get(node.value).value + node.value = decls.get(value).value } } values.push(valueParser.stringify(nodes)) From d65b411ee1ed39e837e545029b2abb9b9899dc18 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 23 Oct 2019 09:26:01 +0900 Subject: [PATCH 24/42] Update src/labels/diffstat.scss Co-Authored-By: Shawn Allen --- src/labels/diffstat.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/labels/diffstat.scss b/src/labels/diffstat.scss index 6c7e541373..9bdf1e6bae 100644 --- a/src/labels/diffstat.scss +++ b/src/labels/diffstat.scss @@ -24,7 +24,7 @@ } .diffstat-block-added { - background-color: darken($green-400, 5%); + background-color: $bg-diffstat-added; } .diffstat-block-neutral { From ff8e78f9a419c90602344f748827eb091ade5127 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 23 Oct 2019 09:28:17 +0900 Subject: [PATCH 25/42] Use aliases for the colors --- src/labels/diffstat.scss | 4 ++-- src/support/variables/misc.scss | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/labels/diffstat.scss b/src/labels/diffstat.scss index 9bdf1e6bae..40384863a2 100644 --- a/src/labels/diffstat.scss +++ b/src/labels/diffstat.scss @@ -20,7 +20,7 @@ } .diffstat-block-deleted { - background-color: $red-600; + background-color: $bg-diffstat-deleted; } .diffstat-block-added { @@ -28,5 +28,5 @@ } .diffstat-block-neutral { - background-color: $gray-300; + background-color: $bg-diffstat-neutral; } diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss index 4741b0f6cd..cd82fc51fc 100644 --- a/src/support/variables/misc.scss +++ b/src/support/variables/misc.scss @@ -37,3 +37,8 @@ $max_tab_size: 12; $form-control-shadow: inset 0 1px 2px rgba($black, 0.075); $btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3); $btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15; + +// diffstat +$bg-diffstat-added: darken($green-400, 5%); +$bg-diffstat-deleted: $red-600; +$bg-diffstat-neutral: $gray-300; From 74d04956caf68ff5160f61d0003e05118e434f11 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 23 Oct 2019 13:30:46 +0900 Subject: [PATCH 26/42] Import timeline bundle into product --- src/product/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/product/index.scss b/src/product/index.scss index c3a721a612..0c982326fd 100644 --- a/src/product/index.scss +++ b/src/product/index.scss @@ -26,4 +26,5 @@ @import "../progress/index.scss"; @import "../select-menu/index.scss"; @import "../subhead/index.scss"; +@import "../timeline/index.scss"; @import "../toasts/index.scss" From 08fe118c758c095ce2825a223308f9d3aa96f9ce Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 14 Oct 2019 16:24:34 -0700 Subject: [PATCH 27/42] add TODO(version) tests --- lib/stylelint-todo.js | 34 ++++++++++++++++++++++++++++++++++ script/test-todos.js | 25 +++++++++++++++++++++++++ stylelint.config.js | 6 +++++- 3 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 lib/stylelint-todo.js create mode 100755 script/test-todos.js diff --git a/lib/stylelint-todo.js b/lib/stylelint-todo.js new file mode 100644 index 0000000000..25669ce01c --- /dev/null +++ b/lib/stylelint-todo.js @@ -0,0 +1,34 @@ +const semver = require('semver') +const stylelint = require('stylelint') + +const ruleName = 'primer-css/TODO' +const pattern = /\bTODO@([^:]+):\s+(.+)$/ + +const messages = stylelint.utils.ruleMessages(ruleName, { + rejected: message => message +}) + +module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => { + const {currentVersion} = options + if (!currentVersion) { + console.warn(`No "currentVersion" supplied to ${ruleName}; bailing`) + return () => null + } + + let match + return (root, result) => { + root.walkComments(node => { + if ((match = node.text.match(pattern))) { + const [substr, todoVersion, message] = match + if (semver.lte(todoVersion, currentVersion)) { + stylelint.utils.report({ + message: messages.rejected(`Unresolved TODO comment: "${message}" (expected to be resolved in "${todoVersion}")`), + node, + result, + ruleName + }) + } + } + }) + } +}) diff --git a/script/test-todos.js b/script/test-todos.js new file mode 100755 index 0000000000..2106a1878c --- /dev/null +++ b/script/test-todos.js @@ -0,0 +1,25 @@ +#!/usr/bin/env node +const stylelint = require('stylelint') +const {red} = require('colorette') + +const ruleName = 'primer-css/TODO' +const cwd = process.cwd() + +stylelint + .lint({files: 'src/**/*.scss'}) + .then(data => { + let fail = false + for (const {source, warnings} of data.results) { + if (warnings.some(w => w.rule === ruleName)) { + console.warn('\n' + source.substr(cwd.length + 1)) + } + for (const warning of warnings) { + if (warning.rule === ruleName) { + console.warn(`${red('✖')} ${warning.text}`) + fail = true + } + } + } + + process.exit(fail ? 1 : 0) + }) diff --git a/stylelint.config.js b/stylelint.config.js index 2ee89ebdfe..0b48eb1e78 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -1,7 +1,11 @@ +const currentVersion = process.env.PRIMER_VERSION || require('./package.json').version + module.exports = { extends: ['stylelint-config-primer'], + plugins: ['./lib/stylelint-todo'], syntax: 'scss', rules: { - 'primer/no-override': false + 'primer/no-override': false, + 'primer-css/TODO': [true, {currentVersion, severity: 'error'}] } } From ceb67a351cac31adca799348da4f1bbfa1b9ede5 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 14 Oct 2019 16:31:51 -0700 Subject: [PATCH 28/42] chore: lint --- lib/stylelint-todo.js | 6 +++++- script/test-todos.js | 29 ++++++++++++++--------------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/lib/stylelint-todo.js b/lib/stylelint-todo.js index 25669ce01c..1340538578 100644 --- a/lib/stylelint-todo.js +++ b/lib/stylelint-todo.js @@ -11,6 +11,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, { module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => { const {currentVersion} = options if (!currentVersion) { + // eslint-disable-next-line no-console console.warn(`No "currentVersion" supplied to ${ruleName}; bailing`) return () => null } @@ -19,10 +20,13 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => { return (root, result) => { root.walkComments(node => { if ((match = node.text.match(pattern))) { + // eslint-disable-next-line no-unused-vars const [substr, todoVersion, message] = match if (semver.lte(todoVersion, currentVersion)) { stylelint.utils.report({ - message: messages.rejected(`Unresolved TODO comment: "${message}" (expected to be resolved in "${todoVersion}")`), + message: messages.rejected( + `Unresolved TODO comment: "${message}" (expected to be resolved in "${todoVersion}")` + ), node, result, ruleName diff --git a/script/test-todos.js b/script/test-todos.js index 2106a1878c..d26b5f3559 100755 --- a/script/test-todos.js +++ b/script/test-todos.js @@ -5,21 +5,20 @@ const {red} = require('colorette') const ruleName = 'primer-css/TODO' const cwd = process.cwd() -stylelint - .lint({files: 'src/**/*.scss'}) - .then(data => { - let fail = false - for (const {source, warnings} of data.results) { - if (warnings.some(w => w.rule === ruleName)) { - console.warn('\n' + source.substr(cwd.length + 1)) - } - for (const warning of warnings) { - if (warning.rule === ruleName) { - console.warn(`${red('✖')} ${warning.text}`) - fail = true - } +stylelint.lint({files: 'src/**/*.scss'}).then(data => { + let fail = false + for (const {source, warnings} of data.results) { + if (warnings.some(w => w.rule === ruleName)) { + // eslint-disable-next-line prefer-template + console.warn('\n' + source.substr(cwd.length + 1)) + } + for (const warning of warnings) { + if (warning.rule === ruleName) { + console.warn(`${red('✖')} ${warning.text}`) + fail = true } } + } - process.exit(fail ? 1 : 0) - }) + process.exit(fail ? 1 : 0) +}) From 976ad8acaaf13d1df5d3e704c06a0d93f81c32f4 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 22 Oct 2019 11:47:58 -0700 Subject: [PATCH 29/42] delete script/test-todos.js (managed via stylelint) --- script/test-todos.js | 24 ------------------------ 1 file changed, 24 deletions(-) delete mode 100755 script/test-todos.js diff --git a/script/test-todos.js b/script/test-todos.js deleted file mode 100755 index d26b5f3559..0000000000 --- a/script/test-todos.js +++ /dev/null @@ -1,24 +0,0 @@ -#!/usr/bin/env node -const stylelint = require('stylelint') -const {red} = require('colorette') - -const ruleName = 'primer-css/TODO' -const cwd = process.cwd() - -stylelint.lint({files: 'src/**/*.scss'}).then(data => { - let fail = false - for (const {source, warnings} of data.results) { - if (warnings.some(w => w.rule === ruleName)) { - // eslint-disable-next-line prefer-template - console.warn('\n' + source.substr(cwd.length + 1)) - } - for (const warning of warnings) { - if (warning.rule === ruleName) { - console.warn(`${red('✖')} ${warning.text}`) - fail = true - } - } - } - - process.exit(fail ? 1 : 0) -}) From 6013909199c972b677257862298da27ef9dade6a Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 24 Oct 2019 11:29:06 +0900 Subject: [PATCH 30/42] Move .details-reset Plus update the docs --- docs/content/components/buttons.md | 18 -------------- docs/content/utilities/details.md | 38 ++++++++++++++++++++++++++---- src/buttons/button.scss | 9 ------- src/utilities/details.scss | 9 +++++++ 4 files changed, 43 insertions(+), 31 deletions(-) diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md index 8975f8571d..b3e5432ebc 100644 --- a/docs/content/components/buttons.md +++ b/docs/content/components/buttons.md @@ -207,21 +207,3 @@ Use `.hidden-text-expander` to indicate and toggle hidden text. ``` You can also make the expander appear inline by adding `.inline`. - -## Using button styles with the details summary element - -You can add `.btn` and `.btn-*` classes to any -[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) -element so that it gains the appearance of a button, and -selected/active styles when the parent -[`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) -element is open. - -```html live -
- Toggle the content -

- This content will be toggled. -

-
-``` diff --git a/docs/content/utilities/details.md b/docs/content/utilities/details.md index 0fb139cf77..300b944bbf 100644 --- a/docs/content/utilities/details.md +++ b/docs/content/utilities/details.md @@ -8,8 +8,6 @@ bundle: utilities Details classes are created to enhance the native behaviors of `
`. - - ## Fullscreen click area Use `.details-overlay` to expand the click area of `` to cover the full screen, so user can click anywhere on a page to close `
`. @@ -17,7 +15,7 @@ Use `.details-overlay` to expand the click area of `` to cover the full ```html live
More -
Hidden text
+
Hidden text
``` @@ -28,6 +26,38 @@ Use `.details-overlay-dark` darken the click area overlay. Useful for modals. ```html live
More -
Hidden text
+
Hidden text
+
+``` + +## Custom caret + +Use `.details-reset` to remove the default caret (that little triangle on the left). You then can add the `.dropdown-caret` on the right of the text. + +```html live +
+ More +
Hidden text
+
+``` + +## Using button styles with the details summary element + +You can add `.btn` and `.btn-*` classes to any +[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) +element so that it gains the appearance of a button, and +selected/active styles when the parent +[`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) +element is open. + +```html live +
+ More +
Hidden text
+
+ +
+ More +
Hidden text
``` diff --git a/src/buttons/button.scss b/src/buttons/button.scss index d572b29a85..5b6e8af7e9 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -200,12 +200,3 @@ } } } - -.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; } -} diff --git a/src/utilities/details.scss b/src/utilities/details.scss index b94cb813e6..bb3a617af5 100644 --- a/src/utilities/details.scss +++ b/src/utilities/details.scss @@ -17,3 +17,12 @@ z-index: 99; background: $black-fade-50; } + +.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 4de965062f0bde9022ed09221330a4dc7d51385a Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 24 Oct 2019 11:52:18 +0900 Subject: [PATCH 31/42] Fix spacing between buttons --- docs/content/components/buttons.md | 54 ++++++++++++++---------------- 1 file changed, 25 insertions(+), 29 deletions(-) diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md index b3e5432ebc..fc20cf2379 100644 --- a/docs/content/components/buttons.md +++ b/docs/content/components/buttons.md @@ -15,13 +15,15 @@ Use the standard—yet classy—`.btn` for form actions and primary page actions When using a ` Link button + +Link button ``` You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`. ```html live - + + ``` ## Primary button @@ -29,7 +31,7 @@ You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`. Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`. ```html live - + ``` @@ -38,7 +40,7 @@ Primary buttons are green and are used to indicate the _primary_ action on a pag Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`. ```html live - + ``` @@ -47,7 +49,7 @@ Danger buttons are red. They help reiterate that the intended action is importan Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go. ```html live - + ``` @@ -58,19 +60,17 @@ Use `.btn-large` to increase the padding and border radius of a button. This is [Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size. ```html live -

- Large link button - -

+ +Large link button ``` Use `.btn-large` with a type scale utility to transform the text to a bigger size. ```html live -

+

+ Large link button - -

+
``` ## Disabled state @@ -78,24 +78,24 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz Disable ` + Disabled button ``` Similar styles are applied to primary, danger, and outline buttons: ```html live - + Disabled button ``` ```html live - + Disabled button ``` ```html live - + Disabled button ``` @@ -104,8 +104,8 @@ Similar styles are applied to primary, danger, and outline buttons: Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text. ```html live -

-

+ + ``` ## Link button @@ -138,24 +138,20 @@ You can easily append a count to a **small button**. Add the `.with-count` class You can also use the [counter](./labels#counters) component within buttons: ```html live - - - ``` From efbed684eee5a24648b4043ccc358d03646d4e04 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 24 Oct 2019 12:57:56 +0900 Subject: [PATCH 32/42] Move some of the exotic buttons to /misc --- src/buttons/button.scss | 69 ---------------------------------------- src/buttons/index.scss | 1 + src/buttons/misc.scss | 70 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+), 69 deletions(-) create mode 100644 src/buttons/misc.scss diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 5b6e8af7e9..f97fec66ae 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -94,75 +94,6 @@ border-radius: 6px; } -// Hidden text button -// -// Use `.hidden-text-expander` to indicate and expand hidden text. -.hidden-text-expander { - display: block; - - &.inline { - position: relative; - top: -1px; - display: inline-block; - margin-left: 5px; - line-height: 0; - } -} - -.hidden-text-expander a, -.ellipsis-expander { - display: inline-block; - height: 12px; - padding: 0 5px 5px; - font-size: $font-size-small; - font-weight: $font-weight-bold; - line-height: 6px; - color: $gray-700; - text-decoration: none; - vertical-align: middle; - background: lighten($gray-300, 5%); - border: 0; - border-radius: 1px; - - &:hover { - text-decoration: none; - background-color: darken($gray-300, 4%); - } - - &:active { - color: $text-white; - background-color: $blue-400; - } -} - -// Social count bubble -// -// A container that is used for social bubbles counts. -.social-count { - float: left; - padding: 3px 10px; - font-size: $font-size-small; - font-weight: $font-weight-bold; - line-height: 20px; - color: $text-gray-dark; - vertical-align: middle; - background-color: $bg-white; - border: 1px solid transparentize($black, 0.8); // match with .btn - border-left: 0; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - - &:hover, - &:active { - text-decoration: none; - } - - &:hover { - color: $text-blue; - cursor: pointer; - } -} - // Full-width button // // These buttons expand to the full width of their parent container diff --git a/src/buttons/index.scss b/src/buttons/index.scss index 9dd95e7df8..fcb71f35f6 100644 --- a/src/buttons/index.scss +++ b/src/buttons/index.scss @@ -1,3 +1,4 @@ @import "../support/index.scss"; @import "./button.scss"; @import "./button-group.scss"; +@import "./misc.scss"; diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss new file mode 100644 index 0000000000..40f7a30d76 --- /dev/null +++ b/src/buttons/misc.scss @@ -0,0 +1,70 @@ +// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors + +// Hidden text button +// +// Use `.hidden-text-expander` to indicate and expand hidden text. +.hidden-text-expander { + display: block; + + &.inline { + position: relative; + top: -1px; + display: inline-block; + margin-left: 5px; + line-height: 0; + } +} + +.hidden-text-expander a, +.ellipsis-expander { + display: inline-block; + height: 12px; + padding: 0 5px 5px; + font-size: $font-size-small; + font-weight: $font-weight-bold; + line-height: 6px; + color: $gray-700; + text-decoration: none; + vertical-align: middle; + background: lighten($gray-300, 5%); + border: 0; + border-radius: 1px; + + &:hover { + text-decoration: none; + background-color: darken($gray-300, 4%); + } + + &:active { + color: $text-white; + background-color: $blue-400; + } +} + +// Social count bubble +// +// A container that is used for social bubbles counts. +.social-count { + float: left; + padding: 3px 10px; + font-size: $font-size-small; + font-weight: $font-weight-bold; + line-height: 20px; + color: $text-gray-dark; + vertical-align: middle; + background-color: $bg-white; + border: 1px solid transparentize($black, 0.8); // match with .btn + border-left: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + + &:hover, + &:active { + text-decoration: none; + } + + &:hover { + color: $text-blue; + cursor: pointer; + } +} From f61a7267330db8418d2f28061ec9fb20ed6899ad Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 24 Oct 2019 13:24:36 +0900 Subject: [PATCH 33/42] Remove

--- docs/content/components/buttons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md index fc20cf2379..5252a306df 100644 --- a/docs/content/components/buttons.md +++ b/docs/content/components/buttons.md @@ -115,7 +115,7 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `< **The `.btn-link` class is not designed to be used with `.btn`; the overlapping styles are not compatible.** ```html live -

+ ``` ## Button with counts From 0e55872a45f02bd62a8a074c7dad3d72914e18aa Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 24 Oct 2019 13:25:29 +0900 Subject: [PATCH 34/42] Add .close-button Unchanged from dotcom --- docs/content/components/buttons.md | 11 +++++++++++ src/buttons/misc.scss | 8 ++++++++ 2 files changed, 19 insertions(+) diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md index 5252a306df..e1909e4999 100644 --- a/docs/content/components/buttons.md +++ b/docs/content/components/buttons.md @@ -118,6 +118,17 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `< ``` +## Close button + +When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles. + +```html live + +``` + ## Button with counts You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button. diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 40f7a30d76..bb64ea9777 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -1,5 +1,13 @@ // stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors +// A button with an X to close stuff +.close-button { + padding: 0; + background: transparent; + border: 0; + outline: none; +} + // Hidden text button // // Use `.hidden-text-expander` to indicate and expand hidden text. From db6d65c570a2644d911042b6dd0516d956555dbf Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 24 Oct 2019 13:40:54 +0900 Subject: [PATCH 35/42] Add invisible button Unchanged from dotcom --- docs/content/components/buttons.md | 9 +++++++++ src/buttons/button.scss | 24 ++++++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md index e1909e4999..ae122e0204 100644 --- a/docs/content/components/buttons.md +++ b/docs/content/components/buttons.md @@ -118,6 +118,15 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `< ``` +## Invisible button + +When you want a link, but you want it padded and line heighted like a button best for "cancel" actions on forms. + +```html live + + +``` + ## Close button When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles. diff --git a/src/buttons/button.scss b/src/buttons/button.scss index f97fec66ae..09ce751876 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -131,3 +131,27 @@ } } } + +// Invisible button +// +// Typically used as a "cancel" button next to a .btn +.btn-invisible { + color: $text-blue; + background-color: $bg-white; // Reset default gradient backgrounds and colors + background-image: none; + border: 0; + + // stylelint-disable-next-line primer/no-override + &:hover, + &:active, + &:focus, + &.selected, + &.zeroclipboard-is-hover, + &.zeroclipboard-is-active { + color: $text-blue; + background: none; + outline: none; + // stylelint-disable-next-line primer/variables + box-shadow: none; + } +} From d34dd03de0bb12dd9b49ac411786db394a068010 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 24 Oct 2019 15:32:53 +0900 Subject: [PATCH 36/42] Add Octicon button Unchanged from dotcom --- docs/content/components/buttons.md | 28 +++++++++++++++++++++++++ src/buttons/button.scss | 33 ++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+) diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md index ae122e0204..34f4d38ab0 100644 --- a/docs/content/components/buttons.md +++ b/docs/content/components/buttons.md @@ -127,6 +127,34 @@ When you want a link, but you want it padded and line heighted like a button bes ``` +## Octicon button + +Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover. + +```html live + + + + + + + +``` + + + ## Close button When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles. diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 09ce751876..c54024fd97 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -155,3 +155,36 @@ box-shadow: none; } } + +// Octicon button +// +// Icon-only buttons +.btn-octicon { + display: inline-block; + // stylelint-disable-next-line primer/variables + padding: 5px; + // stylelint-disable-next-line primer/variables + margin-left: 5px; + line-height: $lh-condensed-ultra; + color: $text-gray; + vertical-align: middle; + // For `