Skip to content

Commit 17d1a9f

Browse files
brandonrosagebrandonrosage
committed
Stable CSS-only 'Popover' component
1 parent ea3ed60 commit 17d1a9f

File tree

9 files changed

+138
-60
lines changed

9 files changed

+138
-60
lines changed

‎modules/primer-css/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@
5353
"primer-tables": "1.4.1",
5454
"primer-tooltips": "1.4.1",
5555
"primer-truncate": "1.4.1",
56-
"primer-utilities": "4.8.1"
56+
"primer-utilities": "4.8.1",
57+
"primer-popover": "0.0.1"
5758
},
5859
"keywords": [
5960
"primer",

‎modules/primer-popover/.npmignore‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎modules/primer-popover/LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2017 GitHub Inc.
3+
Copyright (c) 2016 GitHub Inc.
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎modules/primer-popover/README.md‎

Lines changed: 84 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,111 @@
1-
# Primer CSS Breadcrumb Navigation
1+
# Primer CSS / Popover
22

33
[![npm version](http://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)
44
[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css)
55

66
> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.
77
8-
This repository is a module of the full [primer-css][primer] repository.
8+
This repository is a module of the full [primer-css][primer-css] repository.
9+
10+
## Install
11+
12+
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.
13+
14+
```
15+
$ npm install --save primer-popover
16+
```
17+
18+
## Usage
19+
20+
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.
21+
22+
```scss
23+
@import "primer-popover/index.scss";
24+
```
25+
26+
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._
27+
28+
## Build
29+
30+
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:
31+
32+
```
33+
$ npm run build
34+
```
935

1036
## Documentation
1137

1238
<!-- %docs
1339
title: Popover
14-
status: Unstable
40+
status: Experimental
1541
-->
1642

17-
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:
43+
### Basic example
44+
45+
```html title="Center-aligned"
46+
<div class="position-relative text-center">
47+
<button class="btn btn-primary">UI</button>
48+
<div class="position-absolute right-0 left-0 text-left">
49+
<div class="Popover p-4 mt-2 mx-auto Box box-shadow-large">
50+
<h4 class="mb-2">Popover heading</h4>
51+
<p>Message about this particular piece of UI.</p>
52+
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
53+
</div>
54+
</div>
55+
</div>
56+
```
57+
58+
### Right-aligned example
1859

19-
- Are many levels deep on a site
20-
- Do not have a section-level navigation
21-
- May need the ability to quickly go back to the previous (parent) page
60+
```html title="Right-aligned"
61+
<div class="position-relative text-right">
62+
<button class="btn btn-primary">UI</button>
63+
<div class="position-absolute right-0 left-0 text-left">
64+
<div class="Popover Popover--right p-4 mt-2 Box box-shadow-large">
65+
<h4 class="mb-2">Popover heading</h4>
66+
<p>Message about this particular piece of UI.</p>
67+
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
68+
</div>
69+
</div>
70+
</div>
71+
```
2272

23-
#### Usage
73+
### Left-aligned example
2474

25-
```html title="Popover"
26-
<div class="Popover top-right position-absolute right-0 js-notice p-4 Box">
27-
<h4 class="mb-2">Popover heading</h4>
28-
<p>Message about this particular piece of UI.</p>
29-
<button type="submit" class="js-notice-dismiss btn btn-outline mt-2 text-bold">Got it!</button>
75+
```html title="Left-aligned"
76+
<div class="position-relative">
77+
<button class="btn btn-primary">UI</button>
78+
<div class="position-absolute right-0 left-0 text-left">
79+
<div class="Popover Popover--left p-4 mt-2 Box box-shadow-large">
80+
<h4 class="mb-2">Popover heading</h4>
81+
<p>Message about this particular piece of UI.</p>
82+
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
83+
</div>
84+
</div>
3085
</div>
3186
```
3287

88+
### Large example
89+
90+
```html title="Large"
91+
<div class="position-relative text-center">
92+
<button class="btn btn-primary">UI</button>
93+
<div class="position-absolute right-0 left-0 text-left">
94+
<div class="Popover Popover--lg p-4 mt-2 mx-auto Box box-shadow-large">
95+
<h4 class="mb-2">Popover heading</h4>
96+
<p>Message about this particular piece of UI.</p>
97+
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
98+
</div>
99+
</div>
100+
</div>
101+
```
33102
<!-- %enddocs -->
34103

35104
## License
36105

37-
MIT &copy; [GitHub](https://github.com/)
106+
[MIT](./LICENSE) &copy; [GitHub](https://github.com/)
38107

39-
[primer]: https://github.com/primer/primer
40-
[primer-support]: https://github.com/primer/primer-support
41-
[support]: https://github.com/primer/primer-support
108+
[primer-css]: https://github.com/primer/primer
42109
[docs]: http://primercss.io/
43110
[npm]: https://www.npmjs.com/
44111
[install-npm]: https://docs.npmjs.com/getting-started/installing-node

‎modules/primer-popover/index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
// support files
22
@import "primer-support/index.scss";
3-
@import "primer-marketing-support/index.scss";
43
@import "./lib/popover.scss";

‎modules/primer-popover/lib/popover.scss‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,68 @@
11
.Popover {
2-
left: 50%;
2+
position: relative;
33
z-index: 20;
4-
width: 235px;
5-
margin-top: 30px;
6-
margin-left: -118px;
7-
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
4+
max-width: 235px;
5+
margin-right: auto;
6+
margin-left: auto;
87

98
// Carets
109
&::before,
1110
&::after {
1211
position: absolute;
12+
left: 50%;
1313
display: inline-block;
1414
content: "";
1515
}
1616

1717
&::before {
1818
top: -16px;
19-
right: 109px;
20-
left: auto;
19+
margin-left: -9px;
2120
border: 8px solid transparent;
2221
border-bottom-color: rgba(0, 0, 0, 0.15);
2322
}
2423

2524
&::after {
2625
top: -14px;
27-
right: 110px;
28-
left: auto;
26+
margin-left: -8px;
2927
border: 7px solid transparent;
3028
border-bottom-color: $bg-white;
3129
}
30+
}
3231

33-
&.top-right {
32+
.Popover--right {
33+
right: -9px;
34+
margin-right: 0;
35+
36+
&::before,
37+
&::after {
3438
left: auto;
35-
width: 330px;
36-
margin-top: 45px;
39+
margin-left: 0;
40+
}
3741

38-
&::before {
39-
right: 20px;
40-
}
42+
&::before {
43+
right: 20px;
44+
}
4145

42-
&::after {
43-
right: 21px;
44-
}
46+
&::after {
47+
right: 21px;
4548
}
4649
}
50+
51+
.Popover--left {
52+
left: -9px;
53+
margin-left: 0;
54+
55+
&::before,
56+
&::after {
57+
left: 20px;
58+
margin-left: 0;
59+
}
60+
61+
&::after {
62+
left: 21px;
63+
}
64+
}
65+
66+
.Popover--lg {
67+
max-width: 330px;
68+
}

‎modules/primer-popover/package.json‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
11
{
2-
"version": "1.4.1",
3-
"name": "primer-popver",
2+
"version": "0.0.1",
3+
"name": "primer-popover",
44
"description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.",
55
"homepage": "http://primercss.io/",
6-
"author": "GitHub, Inc.",
7-
"license": "MIT",
8-
"style": "build/build.css",
9-
"main": "build/index.js",
106
"primer": {
11-
"category": "marketing",
7+
"category": "product",
128
"module_type": "components"
139
},
14-
"files": [
15-
"index.scss",
16-
"lib",
17-
"build"
18-
],
10+
"author": "GitHub, Inc.",
11+
"license": "MIT",
12+
"style": "index.scss",
13+
"main": "build/index.js",
1914
"repository": "https://github.com/primer/primer-css/tree/master/modules/primer-popover",
2015
"bugs": {
2116
"url": "https://github.com/primer/primer-css/issues"
@@ -28,16 +23,10 @@
2823
"test": "../../script/npm-run-all build lint test-docs"
2924
},
3025
"dependencies": {
31-
"primer-marketing-support": "1.3.1",
3226
"primer-support": "4.4.1"
3327
},
3428
"keywords": [
35-
"popover",
36-
"css",
3729
"github",
38-
"navigation",
39-
"primer",
40-
"primercss",
41-
"style"
30+
"primer"
4231
]
4332
}

‎modules/primer-product/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@
1919
@import "primer-blankslate/index.scss";
2020
@import "primer-labels/index.scss";
2121
@import "primer-markdown/index.scss";
22+
@import "primer-popover/index.scss";

‎modules/primer-product/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"primer-blankslate": "1.4.1",
3232
"primer-labels": "1.5.1",
3333
"primer-markdown": "3.7.1",
34-
"primer-support": "4.4.1"
34+
"primer-support": "4.4.1",
35+
"primer-popover": "0.0.1"
3536
}
3637
}

0 commit comments

Comments
 (0)