From 6e350f869f11eecc50042bf83bd97bd2b84e3b7d Mon Sep 17 00:00:00 2001 From: agisilaos Date: Thu, 19 Oct 2017 19:19:04 +0300 Subject: [PATCH 01/20] 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 9e13c395c57629c592c8592dc6fd86403264c701 Mon Sep 17 00:00:00 2001 From: agisilaos Date: Fri, 20 Oct 2017 00:51:18 +0300 Subject: [PATCH 02/20] 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 478f7642f7ad2ea6ba51e6f1032686fd2465f616 Mon Sep 17 00:00:00 2001 From: agisilaos Date: Fri, 20 Oct 2017 01:23:49 +0300 Subject: [PATCH 03/20] 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 ea3ed6094da044f44157d0e04b4af7823399a5bd Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Thu, 26 Oct 2017 15:31:29 -0500 Subject: [PATCH 04/20] 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 17d1a9f5268e83b226d8c9c8845c1239e92a5415 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 27 Oct 2017 10:14:00 -0500 Subject: [PATCH 05/20] 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 450030991e55d78f5b6a620e4f99ac2668b89358 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 27 Oct 2017 14:15:01 -0500 Subject: [PATCH 06/20] 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 a7a8a4fc2da3423a228ee77832f64b207bc2fe68 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 27 Oct 2017 14:42:38 -0500 Subject: [PATCH 07/20] 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 08/20] 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 13bf79720f05bca05b0e8920e8befc1f09bbb6b1 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Thu, 2 Nov 2017 16:42:51 -0500 Subject: [PATCH 09/20] make Popover positioning more flexible --- modules/primer-popover/lib/popover.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss index 3cea473b53..7ee6816680 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -1,13 +1,11 @@ .Popover { position: absolute; - right: 0; - left: 0; z-index: 100; } .Popover-message { position: relative; - max-width: 235px; + width: 235px; margin-right: auto; margin-left: auto; @@ -70,5 +68,8 @@ } .Popover-message--lg { - max-width: 330px; + + @include breakpoint(sm) { + min-width: 330px; + } } From d23ce981aa1883c30c6a03bfe97a7c102f0fc950 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 3 Nov 2017 11:18:45 -0500 Subject: [PATCH 10/20] Support for top, right, left, bottom caret orientations --- modules/primer-popover/README.md | 69 ++++++++++----- modules/primer-popover/lib/popover.scss | 109 +++++++++++++++++++++++- 2 files changed, 153 insertions(+), 25 deletions(-) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index ea61129c8a..c838648cb1 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -41,12 +41,13 @@ status: Experimental --> ### Basic example +Defaults to caret oriented top-center. -```html title="Center-aligned (default)" +```html title="Default (top-center)"
-
-
+
+

Popover heading

Message about this particular piece of UI.

@@ -55,13 +56,13 @@ status: Experimental
``` -### Right-aligned example +### Large example -```html title="Right-aligned" -
+```html title="Large" +
-
-
+
+

Popover heading

Message about this particular piece of UI.

@@ -70,13 +71,13 @@ status: Experimental
``` -### Left-aligned example +### Top-right-aligned example -```html title="Left-aligned" -
+```html title="Top-right" +
-
-
+
+

Popover heading

Message about this particular piece of UI.

@@ -85,20 +86,42 @@ status: Experimental
``` -### Large example +### Right-aligned example -```html title="Large" -
- -
-
-

Popover heading

-

Message about this particular piece of UI.

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

Popover heading

+

Message about this particular piece of UI.

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

Popover heading

+

Message about this particular piece of UI.

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

Popover heading

+

Message about this particular piece of UI.

+ +
+
+``` + ## License diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss index 7ee6816680..2cf2e51ee7 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -33,7 +33,30 @@ } } -.Popover-message--right { +// Bottom-oriented carets +.Popover-message--bottom, +.Popover-message--bottom--right, +.Popover-message--bottom--left { + &::before, + &::after { + top: auto; + border-bottom-color: transparent; + } + + &::before { + bottom: -15px; + border-top-color: rgba(0, 0, 0, 0.15); + } + + &::after { + bottom: -13px; + border-top-color: $bg-white; + } +} + +// Top & Bottom: Right-oriented carets +.Popover-message--top--right, +.Popover-message--bottom--right { right: -9px; margin-right: 0; @@ -52,7 +75,9 @@ } } -.Popover-message--left { +// Top & Bottom: Left-oriented carets +.Popover-message--top--left, +.Popover-message--bottom--left { left: -9px; margin-left: 0; @@ -67,6 +92,86 @@ } } +// Right- & Left-oriented carets +.Popover-message--right, +.Popover-message--right--top, +.Popover-message--right--bottom, +.Popover-message--left, +.Popover-message--left--top, +.Popover-message--left--bottom { + &::before, + &::after { + top: 50%; + left: auto; + margin-left: 0; + border-bottom-color: transparent; + } + + &::before { + margin-top: -9px; + } + + &::after { + margin-top: -8px; + } +} + +// Right-oriented carets +.Popover-message--right, +.Popover-message--right--top, +.Popover-message--right--bottom { + &::before { + right: -15px; + border-left-color: rgba(0, 0, 0, 0.15); + } + + &::after { + right: -13px; + border-left-color: $bg-white; + } +} + +// Left-oriented carets +.Popover-message--left, +.Popover-message--left--top, +.Popover-message--left--bottom { + &::before { + left: -15px; + border-right-color: rgba(0, 0, 0, 0.15); + } + + &::after { + left: -13px; + border-right-color: $bg-white; + } +} + +// Right & Left: Top-oriented carets +.Popover-message--right--top, +.Popover-message--left--top { + &::before, + &::after { + top: 20px; + } +} + +// Right & Left: Bottom-oriented carets +.Popover-message--right--bottom, +.Popover-message--left--bottom { + &::before, + &::after { + top: auto; + } + + &::before { + bottom: 20px; + } + + &::after { + bottom: 21px; + } +} + .Popover-message--lg { @include breakpoint(sm) { From 529fdb6ee83eba38bee7fb0dd78c0ceff44d0dc2 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 3 Nov 2017 12:32:27 -0500 Subject: [PATCH 11/20] build error fix documentation for the ".Popover-message--bottom--right, .Popover-message--top--left, .Popover-message--bottom--left" selector(s) --- modules/primer-popover/README.md | 39 ++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index c838648cb1..5ca9a42e68 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -86,6 +86,21 @@ Defaults to caret oriented top-center.
``` +### Top-right-aligned example + +```html title="Top-left" +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+
+``` + ### Right-aligned example ```html title="Right" @@ -122,6 +137,30 @@ Defaults to caret oriented top-center.
``` +### Bottom-right-aligned example + +```html title="Bottom-right" +
+
+

Popover heading

+

Message about this particular piece of UI.

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

Popover heading

+

Message about this particular piece of UI.

+ +
+
+``` + ## License From 4c6e9f00a7dd8fd04588ea4edcb722456e0a833f Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Fri, 3 Nov 2017 13:12:32 -0500 Subject: [PATCH 12/20] Addresses @broccolini's feedback --- modules/primer-popover/README.md | 2 +- modules/primer-popover/lib/popover.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index 5ca9a42e68..93cffbb930 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -1,4 +1,4 @@ -# Primer CSS / Popover +# 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) diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss index 2cf2e51ee7..077a725e4e 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -21,14 +21,14 @@ &::before { top: -15px; margin-left: -9px; - border: 8px solid transparent; + border: $spacer-2 $border-style transparent; border-bottom-color: rgba(0, 0, 0, 0.15); } &::after { top: -13px; margin-left: -8px; - border: 7px solid transparent; + border: 7px $border-style transparent; border-bottom-color: $bg-white; } } From dc3ab873a1c58ae4c1b8bd8bccef28e2af3ba3cf Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Mon, 6 Nov 2017 14:48:00 -0600 Subject: [PATCH 13/20] Tweak caret alignment --- modules/primer-popover/lib/popover.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss index 077a725e4e..22e682b8a7 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -19,14 +19,14 @@ } &::before { - top: -15px; + top: -16px; margin-left: -9px; border: $spacer-2 $border-style transparent; border-bottom-color: rgba(0, 0, 0, 0.15); } &::after { - top: -13px; + top: -14px; margin-left: -8px; border: 7px $border-style transparent; border-bottom-color: $bg-white; @@ -44,12 +44,12 @@ } &::before { - bottom: -15px; + bottom: -16px; border-top-color: rgba(0, 0, 0, 0.15); } &::after { - bottom: -13px; + bottom: -14px; border-top-color: $bg-white; } } @@ -121,12 +121,12 @@ .Popover-message--right--top, .Popover-message--right--bottom { &::before { - right: -15px; + right: -16px; border-left-color: rgba(0, 0, 0, 0.15); } &::after { - right: -13px; + right: -14px; border-left-color: $bg-white; } } @@ -136,12 +136,12 @@ .Popover-message--left--top, .Popover-message--left--bottom { &::before { - left: -15px; + left: -16px; border-right-color: rgba(0, 0, 0, 0.15); } &::after { - left: -13px; + left: -14px; border-right-color: $bg-white; } } From d4e6313f93cb39ef0b0fbdf8a45119675fa921a5 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Mon, 6 Nov 2017 17:29:54 -0600 Subject: [PATCH 14/20] Reconciling documentation differences from Style Guide --- modules/primer-popover/README.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index 93cffbb930..78dacae39c 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -40,6 +40,36 @@ title: Popover status: Experimental --> +Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience. They consist of: + +- The block element, `.Popover`, which simply positions its content absolutely atop other body content. +- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual "caret." + +In the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message. + +The `Popover-message` element also supports several modifiers, most of which position the caret differently: + +- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered. +- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered. +- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered. +- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered. + +Each of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like: + +- `.Popover-message--top--right` +- `.Popover-message--right--top` +- `.Popover-message--bottom--left` +- `.Popover-message--left--bottom` + +Lastly, there is an added `.Popover-message--lg` modifer, which Assumes a slightly wider popover message. + +### Notes + +The samples below include optional markup, like: +- An outermost container that establishes stacking context (e.g. `position-relative`). +- A choice piece of user interface (a button, in this case) to relate the popover to. +- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested "Got it!" button. + ### Basic example Defaults to caret oriented top-center. From 6ae4002484b0b4d89764896e7430dea71e62c9e8 Mon Sep 17 00:00:00 2001 From: Brandon Rosage Date: Mon, 6 Nov 2017 17:48:47 -0600 Subject: [PATCH 15/20] Addresses @broccolini's feedback --- modules/primer-popover/README.md | 4 ++-- modules/primer-popover/lib/popover.scss | 26 ++++++++++++------------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index 78dacae39c..77d398b733 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -61,7 +61,7 @@ Each of these modifiers also support a syntax for adjusting the positioning the - `.Popover-message--bottom--left` - `.Popover-message--left--bottom` -Lastly, there is an added `.Popover-message--lg` modifer, which Assumes a slightly wider popover message. +Lastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px. ### Notes @@ -92,7 +92,7 @@ Defaults to caret oriented top-center.
-
+

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 22e682b8a7..57543e8ace 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -5,7 +5,7 @@ .Popover-message { position: relative; - width: 235px; + width: 232px; margin-right: auto; margin-left: auto; @@ -22,7 +22,7 @@ top: -16px; margin-left: -9px; border: $spacer-2 $border-style transparent; - border-bottom-color: rgba(0, 0, 0, 0.15); + border-bottom-color: $border-black-fade; } &::after { @@ -44,8 +44,8 @@ } &::before { - bottom: -16px; - border-top-color: rgba(0, 0, 0, 0.15); + bottom: -$spacer-3; + border-top-color: $border-black-fade; } &::after { @@ -83,7 +83,7 @@ &::before, &::after { - left: 20px; + left: $spacer-4; margin-left: 0; } @@ -121,8 +121,8 @@ .Popover-message--right--top, .Popover-message--right--bottom { &::before { - right: -16px; - border-left-color: rgba(0, 0, 0, 0.15); + right: -$spacer-3; + border-left-color: $border-black-fade; } &::after { @@ -136,8 +136,8 @@ .Popover-message--left--top, .Popover-message--left--bottom { &::before { - left: -16px; - border-right-color: rgba(0, 0, 0, 0.15); + left: -$spacer-3; + border-right-color: $border-black-fade; } &::after { @@ -151,7 +151,7 @@ .Popover-message--left--top { &::before, &::after { - top: 20px; + top: $spacer-4; } } @@ -164,7 +164,7 @@ } &::before { - bottom: 20px; + bottom: $spacer-4; } &::after { @@ -172,9 +172,9 @@ } } -.Popover-message--lg { +.Popover-message--large { @include breakpoint(sm) { - min-width: 330px; + min-width: 320px; } } From ee5015047668cbf809400481b0cd9f54535b1902 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Tue, 7 Nov 2017 16:51:16 -0500 Subject: [PATCH 16/20] add peer dependency for Box component --- modules/primer-popover/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/modules/primer-popover/package.json b/modules/primer-popover/package.json index 42d94bc46a..76557d4f69 100644 --- a/modules/primer-popover/package.json +++ b/modules/primer-popover/package.json @@ -25,6 +25,9 @@ "dependencies": { "primer-support": "4.4.1" }, + "peerDependencies": { + "primer-box": "2.5.1" + }, "keywords": [ "github", "primer" From dac94645c63b9466477c863d5f68bb5e611d680d Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Tue, 7 Nov 2017 16:52:48 -0500 Subject: [PATCH 17/20] add toc --- modules/primer-popover/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index 77d398b733..3c34eaf701 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -40,7 +40,11 @@ title: Popover status: Experimental --> -Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience. They consist of: +Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience. + +{:toc} + +Popover's consist of: - The block element, `.Popover`, which simply positions its content absolutely atop other body content. - The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual "caret." From 15d89f38ee8207e703cf6aed299b6445c879b748 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Tue, 7 Nov 2017 16:54:24 -0500 Subject: [PATCH 18/20] missed a couple of spacers --- 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 57543e8ace..aacd04d154 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -19,7 +19,7 @@ } &::before { - top: -16px; + top: -$spacer-3; margin-left: -9px; border: $spacer-2 $border-style transparent; border-bottom-color: $border-black-fade; @@ -27,7 +27,7 @@ &::after { top: -14px; - margin-left: -8px; + margin-left: -$spacer-2; border: 7px $border-style transparent; border-bottom-color: $bg-white; } From f7a9309ff7473ad9c986bf6dfec9e289aefbc5c5 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Tue, 7 Nov 2017 17:19:06 -0500 Subject: [PATCH 19/20] missed a comma --- modules/primer-product/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index a7d87e8c2b..7e43b3948a 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -32,7 +32,7 @@ "primer-branch-name": "0.0.1", "primer-labels": "1.5.1", "primer-markdown": "3.7.1", - "primer-popover": "0.0.1" + "primer-popover": "0.0.1", "primer-subhead": "0.0.1", "primer-support": "4.4.1" } From 4938e89155749b48ba3193c45bec3eaeedf9d656 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Tue, 7 Nov 2017 17:45:11 -0500 Subject: [PATCH 20/20] update year on license --- modules/primer-popover/LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-popover/LICENSE b/modules/primer-popover/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/modules/primer-popover/LICENSE +++ b/modules/primer-popover/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