mirror of
https://github.com/primer/css.git
synced 2024-11-26 12:14:22 +03:00
wip
This commit is contained in:
Cole Bemis
parent
371213f5b2
commit
09a172b6b3
2
.gitignore
vendored
2
.gitignore
vendored
@ -9,3 +9,5 @@ _site
|
|||||||
dist/
|
dist/
|
||||||
node_modules/
|
node_modules/
|
||||||
searchIndex.js
|
searchIndex.js
|
||||||
|
.cache/
|
||||||
|
public/
|
||||||
|
|||||||
13
gatsby-docs/gatsby-config.js
Normal file
13
gatsby-docs/gatsby-config.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
{
|
||||||
|
resolve: '@primer/gatsby-theme-doctocat',
|
||||||
|
options: {
|
||||||
|
repoRootPath: path.resolve(process.cwd(), '..')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'gatsby-plugin-sass'
|
||||||
|
]
|
||||||
|
}
|
||||||
16313
gatsby-docs/package-lock.json
generated
Normal file
16313
gatsby-docs/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
gatsby-docs/package.json
Normal file
31
gatsby-docs/package.json
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "docs",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"develop": "gatsby develop",
|
||||||
|
"build": "gatsby build",
|
||||||
|
"now-build": "npm run build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@primer/components": "^13.2.0",
|
||||||
|
"@primer/css": "^12.4.1",
|
||||||
|
"@primer/gatsby-theme-doctocat": "0.0.0-b1e53bd",
|
||||||
|
"@primer/octicons-react": "^9.1.1",
|
||||||
|
"css-loader": "^3.1.0",
|
||||||
|
"gatsby": "^2.10.4",
|
||||||
|
"gatsby-plugin-sass": "^2.1.0",
|
||||||
|
"node-sass": "^4.12.0",
|
||||||
|
"preval.macro": "^3.0.0",
|
||||||
|
"raw-loader": "^3.1.0",
|
||||||
|
"raw.macro": "^0.3.0",
|
||||||
|
"react": "^16.8.6",
|
||||||
|
"react-dom": "^16.8.6",
|
||||||
|
"react-frame-component": "^4.1.1",
|
||||||
|
"react-measure": "^2.3.0",
|
||||||
|
"react-shadow": "^17.1.1",
|
||||||
|
"sass-loader": "^7.1.0",
|
||||||
|
"style-loader": "^0.23.1"
|
||||||
|
},
|
||||||
|
"repository": "primer/css"
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react'
|
||||||
|
// TODO: explain this
|
||||||
|
import primerStyles from '!!raw-loader!sass-loader!../../../../../src/index.scss'
|
||||||
|
|
||||||
|
function LivePreviewWrapper({children}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<style>{primerStyles}</style>
|
||||||
|
<link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
|
||||||
|
<div className="p-3">{children}</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LivePreviewWrapper
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import Octicon, {getIconByName} from '@primer/octicons-react'
|
||||||
|
import {StyledOcticon} from '@primer/components'
|
||||||
|
export default {Octicon, StyledOcticon, getIconByName}
|
||||||
29
gatsby-docs/src/@primer/gatsby-theme-doctocat/nav.yml
Normal file
29
gatsby-docs/src/@primer/gatsby-theme-doctocat/nav.yml
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
- title: Getting started
|
||||||
|
url: /getting-started
|
||||||
|
- title: Components
|
||||||
|
url: /components
|
||||||
|
items:
|
||||||
|
- title: Alerts
|
||||||
|
url: /components/alerts
|
||||||
|
- title: Avatars
|
||||||
|
url: /components/avatars
|
||||||
|
- title: Blankslate
|
||||||
|
url: /components/blankslate
|
||||||
|
- title: Box
|
||||||
|
url: /components/box
|
||||||
|
- title: Boxed groups
|
||||||
|
url: /components/boxed-groups
|
||||||
|
- title: Branch name
|
||||||
|
url: /components/branch-name
|
||||||
|
- title: Breadcrumb
|
||||||
|
url: /components/breadcrumb
|
||||||
|
- title: Buttons
|
||||||
|
url: /components/buttons
|
||||||
|
- title: Dropdown
|
||||||
|
url: /components/dropdown
|
||||||
|
- title: Flash banner
|
||||||
|
url: /components/flash-banner
|
||||||
|
- title: Forms
|
||||||
|
url: /components/forms
|
||||||
|
- title: Labels
|
||||||
|
url: /components/labels
|
||||||
21
gatsby-docs/src/components/hero.js
Normal file
21
gatsby-docs/src/components/hero.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import {Box, Heading, Text} from '@primer/components'
|
||||||
|
import {Container} from '@primer/gatsby-theme-doctocat'
|
||||||
|
import React from 'react'
|
||||||
|
import {version} from '../../../package.json'
|
||||||
|
|
||||||
|
function Hero() {
|
||||||
|
return (
|
||||||
|
<Box bg="black" py={4}>
|
||||||
|
<Container>
|
||||||
|
<Heading color="blue.4" fontSize={7} m={0}>
|
||||||
|
Primer CSS
|
||||||
|
</Heading>
|
||||||
|
<Text as="p" m={0} color="blue.2" fontSize={2}>
|
||||||
|
v{version}
|
||||||
|
</Text>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Hero
|
||||||
112
gatsby-docs/src/pages/components/alerts.md
Normal file
112
gatsby-docs/src/pages/components/alerts.md
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
---
|
||||||
|
title: Alerts
|
||||||
|
path: components/alerts
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/alerts'
|
||||||
|
bundle: alerts
|
||||||
|
---
|
||||||
|
|
||||||
|
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.
|
||||||
|
|
||||||
|
## Default
|
||||||
|
|
||||||
|
Flash messages start off looking decently neutral—they're just light blue rounded rectangles.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="flash">
|
||||||
|
Flash message goes here.
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can put multiple paragraphs of text in a flash message—the last paragraph's bottom `margin` will be automatically override.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="flash">
|
||||||
|
<p>
|
||||||
|
This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more
|
||||||
|
text, it'll eventually wrap to a new line.
|
||||||
|
</p>
|
||||||
|
<p>And this is another paragraph.</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Should the need arise, you can quickly space out your flash message from surrounding content with a `.flash-messages` wrapper. _Note the extra top and bottom margin in the example below._
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="flash-messages">
|
||||||
|
<div class="flash">
|
||||||
|
Flash message goes here.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Variations
|
||||||
|
|
||||||
|
Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="flash flash-warn">
|
||||||
|
Flash message goes here.
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="flash flash-error">
|
||||||
|
Flash message goes here.
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="flash flash-success">
|
||||||
|
Flash message goes here.
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## With icon
|
||||||
|
|
||||||
|
Add an icon to the left of the flash message to give it some funky fresh attention.
|
||||||
|
|
||||||
|
```jsx live
|
||||||
|
<div class="flash">
|
||||||
|
{/* <%= octicon "alert" %> */}
|
||||||
|
<StyledOcticon icon={getIconByName('alert')} mr={2} />
|
||||||
|
Flash message with an icon goes here.
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## With dismiss
|
||||||
|
|
||||||
|
Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.
|
||||||
|
|
||||||
|
```jsx live
|
||||||
|
<div class="flash">
|
||||||
|
<button class="flash-close js-flash-close" type="button">
|
||||||
|
{/* <%= octicon "x", :"aria-label" => "Close" %> */}
|
||||||
|
<Octicon icon={getIconByName('x')} aria-label="Close" />
|
||||||
|
</button>
|
||||||
|
Dismissable flash message goes here.
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## With action button
|
||||||
|
|
||||||
|
A flash message with an action button.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="flash">
|
||||||
|
<button type="submit" class="btn btn-sm primary flash-action">Complete action</button>
|
||||||
|
Flash message with action here.
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Full width flash
|
||||||
|
|
||||||
|
A flash message that is full width and removes border and border radius.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="flash flash-full">
|
||||||
|
<div class="container">
|
||||||
|
Full width flash message.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
239
gatsby-docs/src/pages/components/avatars.md
Normal file
239
gatsby-docs/src/pages/components/avatars.md
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
---
|
||||||
|
title: Avatars
|
||||||
|
path: components/avatars
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/avatars'
|
||||||
|
bundle: avatars
|
||||||
|
---
|
||||||
|
|
||||||
|
Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
|
||||||
|
|
||||||
|
## Basic example
|
||||||
|
|
||||||
|
Add `.avatar` to any `<img>` element to make it an avatar. This resets some key styles for alignment, address a Firefox image placeholder bug, and rounds the corners.
|
||||||
|
|
||||||
|
Be sure to set `width` and `height` attributes for maximum browser performance.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Small avatars
|
||||||
|
|
||||||
|
We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Parent-child avatars
|
||||||
|
|
||||||
|
When you need a larger parent avatar, and a smaller child one, overlaid slightly, use the parent-child classes.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="avatar-parent-child d-inline-flex">
|
||||||
|
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
|
||||||
|
<img class="avatar avatar-child" alt="josh" src="https://github.com/josh.png?v=3&s=40" width="20" height="20" />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Avatar stack
|
||||||
|
|
||||||
|
Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="AvatarStack AvatarStack--three-plus">
|
||||||
|
<div
|
||||||
|
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
|
||||||
|
aria-label="octocat, octocat, and octocat"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Based on the number of avatars in the stack, add these modifier classes:
|
||||||
|
|
||||||
|
- `AvatarStack--two` for 2 avatars.
|
||||||
|
- `AvatarStack--three-plus` for 3 or more avatars.
|
||||||
|
|
||||||
|
If you have more than three avatars, add a div with the classes `avatar avatar-more` as the third avatar in the stack, as such:
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="AvatarStack AvatarStack--three-plus">
|
||||||
|
<div
|
||||||
|
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
|
||||||
|
aria-label="octocat, octocat, octocat, octocat, and octocat"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
<div class="avatar avatar-more"></div>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="AvatarStack AvatarStack--two">
|
||||||
|
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat and octocat">
|
||||||
|
<a href="#" class="avatar">
|
||||||
|
<img
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="avatar">
|
||||||
|
<img
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
|
||||||
|
<div
|
||||||
|
class="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1"
|
||||||
|
aria-label="octocat, octocat, and octocat"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
height="20"
|
||||||
|
alt="@octocat"
|
||||||
|
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Circle Badge
|
||||||
|
|
||||||
|
`.CircleBadge` allows for the display of badge-like icons or logos. They are used mostly with Octicons or partner integration icons.
|
||||||
|
|
||||||
|
`.CircleBadge` should have an `aria-label`, `title` (for a link), or an `alt` (for child `img` elements) attribute specified if there is no text-based alternative to describe it. If there is a text-based alternative or the icon has no semantic value, `aria-hidden="true"` or an empty `alt` attribute may be used.
|
||||||
|
|
||||||
|
### Small
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<a class="CircleBadge CircleBadge--small float-left mr-2" href="#small" title="Travis CI">
|
||||||
|
<img src="https://github.com/travis-ci.png" class="CircleBadge-icon" alt="">
|
||||||
|
</a>
|
||||||
|
<a class="CircleBadge CircleBadge--small bg-yellow" title="Zap this!" href="#small">
|
||||||
|
<%= octicon "zap", :class => "CircleBadge-icon text-white" %>
|
||||||
|
</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Medium
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="CircleBadge CircleBadge--medium bg-gray-dark">
|
||||||
|
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Large
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="CircleBadge CircleBadge--large">
|
||||||
|
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Dashed connection
|
||||||
|
|
||||||
|
For specific cases where two badges or more need to be shown as related or connected (such as integrations or specific product workflows), a `DashedConnection` class was created. Use utility classes to ensure badges are spaced correctly.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="DashedConnection">
|
||||||
|
<ul class="d-flex list-style-none flex-justify-between" aria-label="A sample GitHub workflow">
|
||||||
|
<li class="CircleBadge CircleBadge--small" aria-label="GitHub">
|
||||||
|
<%= octicon "mark-github", :class => "width-full height-full" %>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="CircleBadge CircleBadge--small" aria-label="Slack">
|
||||||
|
<img src="https://github.com/slackhq.png" alt="" class="CircleBadge-icon">
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="CircleBadge CircleBadge--small" aria-label="Travis CI">
|
||||||
|
<img src="https://github.com/travis-ci.png" alt="" class="CircleBadge-icon">
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
96
gatsby-docs/src/pages/components/blankslate.md
Normal file
96
gatsby-docs/src/pages/components/blankslate.md
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
---
|
||||||
|
title: Blankslate
|
||||||
|
path: components/blankslate
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/blankslate'
|
||||||
|
bundle: blankslate
|
||||||
|
---
|
||||||
|
|
||||||
|
Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there. Be sure to provide an action to add content as well.
|
||||||
|
|
||||||
|
#### Basic example
|
||||||
|
|
||||||
|
Wrap some content in the outer `.blankslate` wrapper to give it the blankslate appearance.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="blankslate">
|
||||||
|
<h3>This is a blank slate</h3>
|
||||||
|
<p>Use it to provide information when no dynamic content exists.</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### With Octicons
|
||||||
|
|
||||||
|
When it helps the message, include (relevant) icons in your blank slate. Add `.blankslate-icon` to any `.mega-octicon`s as the first elements in the blankslate, like so.
|
||||||
|
|
||||||
|
```jsx live
|
||||||
|
<div class="blankslate">
|
||||||
|
{/* <%= octicon "git-commit", :height => 32, :class => "blankslate-icon" %> */}
|
||||||
|
<StyledOcticon icon={getIconByName('git-commit')} size={32} class="blankslate-icon" />
|
||||||
|
{/* <%= octicon "tag", :height => 32, :class => "blankslate-icon" %> */}
|
||||||
|
<StyledOcticon icon={getIconByName('tag')} size={32} class="blankslate-icon" />
|
||||||
|
{/* <%= octicon "git-branch", :height => 32, :class => "blankslate-icon" %> */}
|
||||||
|
<StyledOcticon icon={getIconByName('git-branch')} size={32} class="blankslate-icon" />
|
||||||
|
<h3>This is a blank slate</h3>
|
||||||
|
<p>Use it to provide information when no dynamic content exists.</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Variations
|
||||||
|
|
||||||
|
Add an additional optional class to the `.blankslate` to change its appearance.
|
||||||
|
|
||||||
|
##### Narrow
|
||||||
|
|
||||||
|
Narrows the blankslate container to not occupy the entire available width.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="blankslate blankslate-narrow">
|
||||||
|
<h3>This is a blank slate</h3>
|
||||||
|
<p>Use it to provide information when no dynamic content exists.</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Capped
|
||||||
|
|
||||||
|
Removes the `border-radius` on the top corners.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="blankslate blankslate-capped">
|
||||||
|
<h3>This is a blank slate</h3>
|
||||||
|
<p>Use it to provide information when no dynamic content exists.</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Spacious
|
||||||
|
|
||||||
|
Significantly increases the vertical padding.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="blankslate blankslate-spacious">
|
||||||
|
<h3>This is a blank slate</h3>
|
||||||
|
<p>Use it to provide information when no dynamic content exists.</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Large
|
||||||
|
|
||||||
|
Increases the size of the text in the blankslate
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="blankslate blankslate-large">
|
||||||
|
<h3>This is a blank slate</h3>
|
||||||
|
<p>Use it to provide information when no dynamic content exists.</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### No background
|
||||||
|
|
||||||
|
Removes the `background-color` and `border`.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="blankslate blankslate-clean-background">
|
||||||
|
<h3>This is a blank slate</h3>
|
||||||
|
<p>Use it to provide information when no dynamic content exists.</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
562
gatsby-docs/src/pages/components/box.md
Normal file
562
gatsby-docs/src/pages/components/box.md
Normal file
@ -0,0 +1,562 @@
|
|||||||
|
---
|
||||||
|
title: Box
|
||||||
|
path: components/box
|
||||||
|
status_issue: 'https://github.com/github/design-systems/issues/198'
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/box'
|
||||||
|
bundle: box
|
||||||
|
---
|
||||||
|
|
||||||
|
The `.Box` component can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.
|
||||||
|
|
||||||
|
## Box
|
||||||
|
|
||||||
|
A `.Box` is a container with a a white background, a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
This is a box.
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Box elements
|
||||||
|
|
||||||
|
Box elements include `Box-header`, `Box-body`, and `Box-footer`. These elements include borders and consistent padding. Optionally, you can include use `Box-title` which applies a bold font-weight the heading.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header">
|
||||||
|
<h3 class="Box-title">
|
||||||
|
Box title
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
<div class="Box-footer">
|
||||||
|
Box footer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Box row
|
||||||
|
|
||||||
|
Use `Box-row` to add rows with borders and maintain the same padding. Box rows have a lighter border to give contrast between the header and footer.
|
||||||
|
|
||||||
|
**Note:** Box rows have some reliance on markup structure in order to target the first and last rows, therefore using an unordered list is recommended. See [box row markup structure](#box-row-markup-structure) for more information.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<ul>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row one
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row two
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row three
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row four
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Rows can be used with or without `Box-header`, `Box-footer`, or `Box-body`.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header">
|
||||||
|
Box header
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
<strong>Box body</strong>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row one
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row two
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row three
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row four
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="Box-footer">
|
||||||
|
Box footer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Box row markup structure
|
||||||
|
|
||||||
|
Box rows have some reliance on markup structure in order to target the first and last rows. Box rows are given a top border that is lighter in color than other box elements so the first row is targeted to apply a darker border color. An inner border-radius is applied to the first and last rows that that row corners don't poke outside the `Box`, this can be particularly noticeable when using a highlight on box rows.
|
||||||
|
|
||||||
|
Using an unordered list is recommended in order to target the first and last rows, however, if you need to use a `<div>` for your rows, you may want to place your rows inside a parent `<div>` so that the first and last rows are styled appropriately.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header">
|
||||||
|
Box header
|
||||||
|
</div>
|
||||||
|
{/* This wrapping div ensures the first and last rows can be targeted for styling. */}
|
||||||
|
<div>
|
||||||
|
<div class="Box-row">Box row using a div</div>
|
||||||
|
<div class="Box-row">Box row using a div</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Box padding density
|
||||||
|
|
||||||
|
You can changed the padding density of the box component.
|
||||||
|
|
||||||
|
Use `Box--condensed` to apply a more condensed line-height and reduce the padding on the Y axis.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box Box--condensed">
|
||||||
|
<div class="Box-header">
|
||||||
|
<h3 class="Box-title">
|
||||||
|
Box title
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row one
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row two
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="Box-footer">
|
||||||
|
Box footer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `Box--spacious` to increase padding and increase the title font size.
|
||||||
|
|
||||||
|
You may want to increase the overall font size to work with the larger padding, in this example the default body font size is increased to 16px using the `f4` typography utility.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box Box--spacious f4">
|
||||||
|
<div class="Box-header">
|
||||||
|
<h3 class="Box-title">
|
||||||
|
Box title
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row one
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row two
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="Box-footer">
|
||||||
|
Box footer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Blue box theme
|
||||||
|
|
||||||
|
Use `Box--blue` to style the box borders and box header in blue.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box Box--blue">
|
||||||
|
<div class="Box-header">
|
||||||
|
Box header
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row one
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row two
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="Box-footer">
|
||||||
|
Box footer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Blue box header theme
|
||||||
|
|
||||||
|
Use `Box-header--blue` to add to change the header border and background to blue.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header Box-header--blue">
|
||||||
|
<h3 class="Box-title">Box with blue header</h3>
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Box danger theme
|
||||||
|
|
||||||
|
Use `Box--danger` to apply a red border to the outside of the box. This theme is helpful for communicating destructive actions.
|
||||||
|
|
||||||
|
**Note:** `Box-danger` only works with either `Box-row`'s or `Box-body`.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box Box--danger">
|
||||||
|
<div class="Box-row">
|
||||||
|
Row one
|
||||||
|
</div>
|
||||||
|
<div class="Box-row">
|
||||||
|
Row two
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
`Box-danger` is often paired with a red heading. See the [subhead](./subhead) docs for more information.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<div class="Subhead border-bottom-0">
|
||||||
|
<h2 class="Subhead-heading Subhead-heading--danger">Danger zone</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Box Box--danger">
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Row themes
|
||||||
|
|
||||||
|
You can change the background color for individual rows, or change the color on hover or navigation focus.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-row Box-row--gray">
|
||||||
|
.Box-row--gray
|
||||||
|
</div>
|
||||||
|
<div class="Box-row Box-row--hover-gray">
|
||||||
|
.Box-row--hover-gray
|
||||||
|
</div>
|
||||||
|
<div class="Box-row Box-row--yellow">
|
||||||
|
.Box-row--yellow
|
||||||
|
</div>
|
||||||
|
<div class="Box-row Box-row--hover-blue">
|
||||||
|
.Box-row--hover-blue
|
||||||
|
</div>
|
||||||
|
<div class="Box-row Box-row--blue">
|
||||||
|
.Box-row--blue
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `Box-row--focus-gray` or `Box-row--focus-blue` when using along-side `navigation-focus` if you want to highlight rows when using keyboard commands.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-row Box-row--focus-gray navigation-focus">
|
||||||
|
.Box-row--focus-gray and .navigation-focus
|
||||||
|
</div>
|
||||||
|
<div class="Box-row Box-row--focus-gray">
|
||||||
|
.Box-row--focus-gray
|
||||||
|
</div>
|
||||||
|
<div class="Box-row Box-row--focus-blue navigation-focus">
|
||||||
|
.Box-row--focus-blue and .navigation-focus
|
||||||
|
</div>
|
||||||
|
<div class="Box-row Box-row--focus-blue">
|
||||||
|
.Box-row--focus-blue
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Box row unread
|
||||||
|
|
||||||
|
Use `.Box-row-unread` to apply a blue vertical line highlight for indicating a row contains unread items.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-row">
|
||||||
|
Box row
|
||||||
|
</div>
|
||||||
|
<div class="Box-row Box-row--unread">
|
||||||
|
Box row unread
|
||||||
|
</div>
|
||||||
|
<div class="Box-row">
|
||||||
|
Box row
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Box row link
|
||||||
|
|
||||||
|
Use .`Box-row-link` when you want a link to appear dark gray and blue on hover on desktop, and remain a blue link on mobile. This is useful to indicate links on mobile without having hover styles.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-row">
|
||||||
|
<a class="Box-row-link" href="#box-row-link">Box row link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Dashed border
|
||||||
|
|
||||||
|
Use the `border-dashed` utility to apply a dashed border to a box.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box border-dashed p-2">
|
||||||
|
A box with a dashed border
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Boxes with flash alerts
|
||||||
|
|
||||||
|
Use `flash-full` for flash alert inside a box to remove the rounded corners. Place the flash alert above the `Box-body` and underneath the `Box-header`.
|
||||||
|
|
||||||
|
Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](./alerts) for more information.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header">
|
||||||
|
Box header
|
||||||
|
</div>
|
||||||
|
<div class="flash flash-full">
|
||||||
|
<button class="flash-close js-flash-close"><%= octicon "x" %></button>
|
||||||
|
Flash message with close button.
|
||||||
|
</div>
|
||||||
|
<div class="flash flash-full flash-success">
|
||||||
|
<%= octicon("check") %> Flash success with an icon.
|
||||||
|
</div>
|
||||||
|
<div class="flash flash-full flash-warn">
|
||||||
|
<%= octicon("alert") %> Flash warning with an icon.
|
||||||
|
</div>
|
||||||
|
<div class="flash flash-full flash-error">
|
||||||
|
Flash error inside a Box.
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Boxes with icons
|
||||||
|
|
||||||
|
Use `Box-btn-octicon` with `btn-octicon` when you want the icon to maintain the same padding as other box elements. This selector offsets margin to ensure it lines up on the left and right sides of the box so you may need to add padding neighboring elements.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-body">
|
||||||
|
<span class="pr-2">Box body</span>
|
||||||
|
<button href="#" class="Box-btn-octicon btn-octicon"><%= octicon "pencil" %></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
It's common to want to float icons to the far left or right and stop the `Box-title`from wrapping underneath. To do this you'll need to create a media object with utilities. Add `clearfix` to the surrounding div (this could be the header, body, or rows), add `overflow-hidden` to the title (or other text element), and float the icons as desired.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header clearfix">
|
||||||
|
<button href="#" class="Box-btn-octicon btn-octicon float-right"><%= octicon "x" %></button>
|
||||||
|
<h3 class="Box-title overflow-hidden pr-3">A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right</h3>
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-row clearfix">
|
||||||
|
<button href="#" class="Box-btn-octicon btn-octicon float-left"><%= octicon "check" %></button>
|
||||||
|
<p class="overflow-hidden pl-3">A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Box headers with counters
|
||||||
|
|
||||||
|
Use a counter with a background that works against the contrast of the box header. The default counter colors do not stand out well against the header background so we suggest using one of the following styles:
|
||||||
|
|
||||||
|
Use `Counter--gray` for a counter with a gray background and dark gray text.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header">
|
||||||
|
<h3 class="Box-title">
|
||||||
|
Box title
|
||||||
|
<span class="Counter Counter--gray">12</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `Counter--gray-dark` for a counter with a dark gray background and white text.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header">
|
||||||
|
<h3 class="Box-title">
|
||||||
|
Box title
|
||||||
|
<span class="Counter Counter--gray-dark">12</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Form elements and buttons in boxes
|
||||||
|
|
||||||
|
To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples:
|
||||||
|
|
||||||
|
Use [flexbox utilities](/css/utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box Box--condensed">
|
||||||
|
<div class="Box-header d-flex flex-items-center">
|
||||||
|
<h3 class="Box-title overflow-hidden flex-auto">
|
||||||
|
Box title
|
||||||
|
</h3>
|
||||||
|
<button class="btn btn-primary btn-sm">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
A similar approach can be used for buttons with multiple lines of text within a row.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-row d-flex flex-items-center">
|
||||||
|
<div class="flex-auto">
|
||||||
|
<strong>Row title</strong>
|
||||||
|
<div class="text-small text-gray-light">
|
||||||
|
Description
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary" name="button">View</button>
|
||||||
|
</div>
|
||||||
|
<div class="Box-row d-flex flex-items-center">
|
||||||
|
<div class="flex-auto">
|
||||||
|
<strong>Row title</strong>
|
||||||
|
<div class="text-small text-gray-light">
|
||||||
|
Description
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary" name="button">View</button>
|
||||||
|
</div>
|
||||||
|
<div class="Box-row d-flex flex-items-center">
|
||||||
|
<div class="flex-auto">
|
||||||
|
<strong>Row title</strong>
|
||||||
|
<div class="text-small text-gray-light">
|
||||||
|
Description
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary" name="button">View</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Using flexbox along with form, button, and link styles, you can create more complex box headers for things like bulk actions and sorting.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header d-flex flex-items-center">
|
||||||
|
<form class="flex-auto">
|
||||||
|
<label>
|
||||||
|
<input class="mr-1" type="checkbox" />
|
||||||
|
Check it
|
||||||
|
</label>
|
||||||
|
</form>
|
||||||
|
<button class="btn-link select-menu-button muted-link">
|
||||||
|
Select menu
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="Box-body">
|
||||||
|
Box body
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can put forms in boxes. Often form submission buttons are aligned to the bottom right of the form which you can do with `text-right` instead of using floats.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header">
|
||||||
|
<h3 class="Box-title">
|
||||||
|
Example form title
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<form>
|
||||||
|
<div class="Box-body">
|
||||||
|
<dl class="form-group">
|
||||||
|
<dt><label>Example label</label></dt>
|
||||||
|
<dd><input class="form-control" type="text" /></dd>
|
||||||
|
</dl>
|
||||||
|
<div class="form-checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" checked="checked" />
|
||||||
|
Yes please
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Box-footer text-right">
|
||||||
|
<button class="btn btn-secondary mr-1">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary">
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
When a box is all by itself centered on a page you can use [column widths](/css/objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](/css/utilities/typography) instead of the built in box title styles.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="Box Box--spacious col-6 mx-auto text-center">
|
||||||
|
<form>
|
||||||
|
<div class="Box-body">
|
||||||
|
<h3 class="f1-light">
|
||||||
|
Example form
|
||||||
|
</h3>
|
||||||
|
<dl class="form-group mb-4">
|
||||||
|
<dt><label>Example label</label></dt>
|
||||||
|
<dd><input class="form-control" type="text" /></dd>
|
||||||
|
</dl>
|
||||||
|
<button class="btn btn-primary btn-block">
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Box patterns can also be made with, and modified with [border utilities](/css/utilities/borders).
|
||||||
49
gatsby-docs/src/pages/components/boxed-groups.md
Normal file
49
gatsby-docs/src/pages/components/boxed-groups.md
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
---
|
||||||
|
title: Boxed groups
|
||||||
|
path: components/boxed-group
|
||||||
|
status: Deprecated
|
||||||
|
source: 'https://github.com/github/github/blob/master/app/assets/stylesheets/components/boxed-groups.scss'
|
||||||
|
symbols:
|
||||||
|
[
|
||||||
|
BtnGroup,
|
||||||
|
Counter,
|
||||||
|
ajax-error-message,
|
||||||
|
approved,
|
||||||
|
avatar,
|
||||||
|
bleed-flush,
|
||||||
|
boxed-action,
|
||||||
|
boxed-group,
|
||||||
|
boxed-group-action,
|
||||||
|
boxed-group-breadcrumb,
|
||||||
|
boxed-group-inner,
|
||||||
|
boxed-group-list,
|
||||||
|
boxed-group-standalone,
|
||||||
|
boxed-group-table,
|
||||||
|
boxed-group-warning,
|
||||||
|
btn-sm,
|
||||||
|
compact,
|
||||||
|
compact-options,
|
||||||
|
condensed,
|
||||||
|
dangerzone,
|
||||||
|
dashboard-sidebar,
|
||||||
|
field-with-errors,
|
||||||
|
flush,
|
||||||
|
heading,
|
||||||
|
help,
|
||||||
|
inline-error,
|
||||||
|
markdown-body,
|
||||||
|
octicon,
|
||||||
|
octicon-alert,
|
||||||
|
one-half,
|
||||||
|
rejected,
|
||||||
|
seamless,
|
||||||
|
selected,
|
||||||
|
spinner,
|
||||||
|
standalone,
|
||||||
|
tabnav,
|
||||||
|
tabnav-tab,
|
||||||
|
visible,
|
||||||
|
]
|
||||||
|
---
|
||||||
|
|
||||||
|
The `boxed-group` styles have been deprecated. Please use the [Box component](/components/box) instead.
|
||||||
27
gatsby-docs/src/pages/components/branch-name.md
Normal file
27
gatsby-docs/src/pages/components/branch-name.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
---
|
||||||
|
title: Branch name
|
||||||
|
path: components/branch-name
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/branch-name'
|
||||||
|
bundle: branch-name
|
||||||
|
---
|
||||||
|
|
||||||
|
Branch names can be a link name or not:
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<span class="branch-name">a_new_feature_branch</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<a href="#url" class="branch-name">a_new_feature_branch</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
You may also include an octicon before the branch name text:
|
||||||
|
|
||||||
|
```jsx live
|
||||||
|
<span class="branch-name">
|
||||||
|
{/* <%= octicon("git-branch", width:16, height:16) %> */}
|
||||||
|
<StyledOcticon icon={getIconByName('git-branch')} mr={1} />
|
||||||
|
a_new_feature_branch
|
||||||
|
</span>
|
||||||
|
```
|
||||||
25
gatsby-docs/src/pages/components/breadcrumb.md
Normal file
25
gatsby-docs/src/pages/components/breadcrumb.md
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
title: Breadcrumbs
|
||||||
|
path: components/breadcrumb
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/breadcrumb'
|
||||||
|
bundle: breadcrumb
|
||||||
|
---
|
||||||
|
|
||||||
|
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 live
|
||||||
|
<nav aria-label="Breadcrumb">
|
||||||
|
<ol>
|
||||||
|
<li class="breadcrumb-item text-small"><a href="https://github.com/business">Business</a></li>
|
||||||
|
<li class="breadcrumb-item text-small"><a href="https://github.com/business/customers">Customers</a></li>
|
||||||
|
<li class="breadcrumb-item breadcrumb-item-selected text-small text-gray" aria-current="page">MailChimp</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
252
gatsby-docs/src/pages/components/buttons.md
Normal file
252
gatsby-docs/src/pages/components/buttons.md
Normal file
@ -0,0 +1,252 @@
|
|||||||
|
---
|
||||||
|
title: Buttons
|
||||||
|
path: components/buttons
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/buttons'
|
||||||
|
bundle: buttons
|
||||||
|
---
|
||||||
|
|
||||||
|
Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
|
||||||
|
|
||||||
|
## Default button
|
||||||
|
|
||||||
|
Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site.
|
||||||
|
|
||||||
|
When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<button class="btn" type="button">Button button</button>
|
||||||
|
<a class="btn" href="#url" role="button">Link button</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<button class="btn" type="button">Button</button>
|
||||||
|
<button class="btn btn-sm" type="button">Small button</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Primary button
|
||||||
|
|
||||||
|
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
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-primary" type="button">Primary button</button>
|
||||||
|
<button class="btn btn-sm btn-primary" type="button">Small primary button</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Danger button
|
||||||
|
|
||||||
|
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
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-danger" type="button">Danger button</button>
|
||||||
|
<button class="btn btn-sm btn-danger" type="button">Small danger button</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Outline button
|
||||||
|
|
||||||
|
Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-outline" type="button">Outline button</button>
|
||||||
|
<button class="btn btn-sm btn-outline" type="button">Outline button</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Large button
|
||||||
|
|
||||||
|
Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections.
|
||||||
|
|
||||||
|
[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
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
|
||||||
|
<button class="btn btn-large" type="button">Large button button</button>
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `.btn-large` with a type scale utility to transform the text to a bigger size.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<p class="f3">
|
||||||
|
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
|
||||||
|
<button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Disabled state
|
||||||
|
|
||||||
|
Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<button class="btn" type="button" disabled>Disabled button</button>
|
||||||
|
<a class="btn disabled" href="#url" role="button">Disabled button</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Similar styles are applied to primary, danger, and outline buttons:
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
|
||||||
|
<a class="btn btn-primary disabled" href="#url" role="button">Disabled button</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-danger" type="button" disabled>Disabled button</button>
|
||||||
|
<a class="btn btn-danger disabled" href="#url" role="button">Disabled button</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-outline" type="button" disabled>Disabled button</button>
|
||||||
|
<a class="btn btn-outline disabled" href="#url" role="button">Disabled button</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Block button
|
||||||
|
|
||||||
|
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
|
||||||
|
<div>
|
||||||
|
<p><button class="btn btn-block" type="button">Block button</button></p>
|
||||||
|
<p><button class="btn btn-sm btn-block" type="button">Small block button</button></p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Link button
|
||||||
|
|
||||||
|
Create a button that looks like a link with `.btn-link`. Rather than using an `<a>` to trigger JS, this style on a `<button>` should be used for better accessibility.
|
||||||
|
|
||||||
|
**The `.btn-link` class is not designed to be used with `.btn`; the overlapping styles are not compatible.**
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<p><button class="btn-link" type="button">Link button</button></p>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
**Be sure to clear the float added by the additional class.**
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="clearfix">
|
||||||
|
<a class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||||
|
<%= octicon "eye" %>
|
||||||
|
Watch
|
||||||
|
</a>
|
||||||
|
<a class="social-count" href="#url">6</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also use the [counter](./labels#counters) component within buttons:
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<button class="btn" type="button">
|
||||||
|
Button
|
||||||
|
<span class="Counter">12</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
Button
|
||||||
|
<span class="Counter">12</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-danger" type="button">
|
||||||
|
Button
|
||||||
|
<span class="Counter">12</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-outline" type="button">
|
||||||
|
Button
|
||||||
|
<span class="Counter">12</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Button groups
|
||||||
|
|
||||||
|
Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<div class="BtnGroup mr-2">
|
||||||
|
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||||
|
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||||
|
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="BtnGroup mr-2">
|
||||||
|
<button class="btn BtnGroup-item btn-outline" type="button">Button</button>
|
||||||
|
<button class="btn BtnGroup-item btn-outline" type="button">Button</button>
|
||||||
|
<button class="btn BtnGroup-item btn-outline" type="button">Button</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="BtnGroup">
|
||||||
|
<button class="btn BtnGroup-item btn-sm" type="button">Button</button>
|
||||||
|
<button class="btn BtnGroup-item btn-sm" type="button">Button</button>
|
||||||
|
<button class="btn BtnGroup-item btn-sm" type="button">Button</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="BtnGroup">
|
||||||
|
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||||
|
<form class="BtnGroup-parent">
|
||||||
|
<button class="btn BtnGroup-item" type="button">Button in a form</button>
|
||||||
|
</form>
|
||||||
|
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||||
|
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Hidden text button
|
||||||
|
|
||||||
|
Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<span class="hidden-text-expander">
|
||||||
|
<button type="button" class="ellipsis-expander" aria-expanded="false">…</button>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
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
|
||||||
|
[`<summary>`](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
|
||||||
|
[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
|
||||||
|
element is open.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details>
|
||||||
|
<summary class="btn btn-block btn-primary">Toggle the content</summary>
|
||||||
|
<p class="mt-2">
|
||||||
|
This content will be toggled.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
207
gatsby-docs/src/pages/components/dropdown.md
Normal file
207
gatsby-docs/src/pages/components/dropdown.md
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
---
|
||||||
|
title: Dropdown
|
||||||
|
path: components/dropdown
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/dropdown.scss'
|
||||||
|
symbols:
|
||||||
|
[
|
||||||
|
active,
|
||||||
|
anim-scale-in,
|
||||||
|
btn-link,
|
||||||
|
dropdown,
|
||||||
|
dropdown-caret,
|
||||||
|
dropdown-divider,
|
||||||
|
dropdown-header,
|
||||||
|
dropdown-item,
|
||||||
|
dropdown-menu,
|
||||||
|
dropdown-menu-content,
|
||||||
|
dropdown-menu-e,
|
||||||
|
dropdown-menu-ne,
|
||||||
|
dropdown-menu-no-overflow,
|
||||||
|
dropdown-menu-s,
|
||||||
|
dropdown-menu-se,
|
||||||
|
dropdown-menu-sw,
|
||||||
|
dropdown-menu-w,
|
||||||
|
dropdown-signout,
|
||||||
|
octicon,
|
||||||
|
zeroclipboard-is-hover,
|
||||||
|
]
|
||||||
|
---
|
||||||
|
|
||||||
|
Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
|
||||||
|
|
||||||
|
## Basic examples
|
||||||
|
|
||||||
|
Dropdowns should be trigged by a `<button>`. **[Each dropdown menu requires a directional class](#alignment)**, much like our tooltips.
|
||||||
|
|
||||||
|
Using a GitHub button:
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="btn" aria-haspopup="true">
|
||||||
|
Dropdown
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu dropdown-menu-se">
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
Using a button customized with additional utilities:
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="text-gray p-2 d-inline" aria-haspopup="true">
|
||||||
|
Dropdown
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu dropdown-menu-se">
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Options
|
||||||
|
|
||||||
|
### Alignment
|
||||||
|
|
||||||
|
Align the direction of dropdown menus and their arrows with modifier classes.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="btn" aria-haspopup="true">
|
||||||
|
.dropdown-ne
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu dropdown-menu-ne">
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="btn" aria-haspopup="true">
|
||||||
|
.dropdown-e
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu dropdown-menu-e">
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="btn" aria-haspopup="true">
|
||||||
|
.dropdown-se
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu dropdown-menu-se">
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="btn" aria-haspopup="true">
|
||||||
|
.dropdown-s
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu dropdown-menu-s">
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="btn" aria-haspopup="true">
|
||||||
|
.dropdown-sw
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu dropdown-menu-sw">
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="btn" aria-haspopup="true">
|
||||||
|
.dropdown-w
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu dropdown-menu-w">
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Dividers
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="btn" aria-haspopup="true">
|
||||||
|
Dropdown
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu dropdown-menu-se">
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li class="dropdown-divider" role="separator"></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Another item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">One more</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Headers
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||||
|
<summary class="btn" aria-haspopup="true">
|
||||||
|
Dropdown
|
||||||
|
<div class="dropdown-caret"></div>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<div class="dropdown-menu dropdown-menu-se">
|
||||||
|
<div class="dropdown-header">
|
||||||
|
Dropdown header
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
12
gatsby-docs/src/pages/components/flash-banner.md
Normal file
12
gatsby-docs/src/pages/components/flash-banner.md
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
title: Flash banner
|
||||||
|
path: components/flash-banner
|
||||||
|
status: In review
|
||||||
|
status_issue: 'https://github.com/github/design-systems/issues/99'
|
||||||
|
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/flash-banner.scss'
|
||||||
|
symbols: [flash-banner, is-signed-in, is-signed-out, org-privileges-tour-dismiss, signed-in-tab-flash, signed-out-tab-flash, stale-session-flash]
|
||||||
|
---
|
||||||
|
|
||||||
|
**Needs documentation.**
|
||||||
|
|
||||||
|
A banner rendered at the top of the page and a warning banner shown when you log in/out in another tab.
|
||||||
329
gatsby-docs/src/pages/components/forms.md
Normal file
329
gatsby-docs/src/pages/components/forms.md
Normal file
@ -0,0 +1,329 @@
|
|||||||
|
---
|
||||||
|
title: Forms
|
||||||
|
path: components/forms
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/forms'
|
||||||
|
bundle: forms
|
||||||
|
---
|
||||||
|
|
||||||
|
Style individual form controls and utilize common layouts.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
Overview:
|
||||||
|
|
||||||
|
- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.
|
||||||
|
- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.
|
||||||
|
- Always declare a `type` on your `<button>`s.
|
||||||
|
- Form layouts rely on form groups.
|
||||||
|
|
||||||
|
#### Kitchen sink
|
||||||
|
|
||||||
|
All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p>
|
||||||
|
<button class="btn" type="button">Button</button>
|
||||||
|
<button class="btn select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||||
|
Select menu
|
||||||
|
</button>
|
||||||
|
<input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description" />
|
||||||
|
<input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA" />
|
||||||
|
<select class="form-select" aria-label="Important decision">
|
||||||
|
<option>Select</option>
|
||||||
|
<option value="option 2">Option 2</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button class="btn btn-sm" type="button">Small button</button>
|
||||||
|
<button class="btn btn-sm select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||||
|
Select menu
|
||||||
|
</button>
|
||||||
|
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description" />
|
||||||
|
<select class="form-select select-sm" aria-label="Important decision">
|
||||||
|
<option>Select</option>
|
||||||
|
<option value="option 1">Option 1</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Example form
|
||||||
|
|
||||||
|
Form controls in Primer CSS currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<label for="name">Name</label>
|
||||||
|
<input class="form-control" type="text" id="name" />
|
||||||
|
|
||||||
|
<label for="email">Email address</label>
|
||||||
|
<input class="form-control" type="email" id="email" />
|
||||||
|
|
||||||
|
<label> <input type="checkbox" /> Remember me </label>
|
||||||
|
|
||||||
|
<label> <input type="radio" id="herp" name="herpderp" checked /> Herp </label>
|
||||||
|
<label> <input type="radio" id="derp" name="herpderp" /> Derp </label>
|
||||||
|
|
||||||
|
<button class="btn" type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Form contrast
|
||||||
|
|
||||||
|
Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
|
||||||
|
<input
|
||||||
|
class="form-control input-contrast"
|
||||||
|
type="text"
|
||||||
|
placeholder="Input with contrast"
|
||||||
|
aria-label="Input with contrast"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Sizing
|
||||||
|
|
||||||
|
Make inputs smaller, larger, or full-width with an additional class.
|
||||||
|
|
||||||
|
##### Small
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Small input" />
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Large
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<input class="form-control input-lg" type="text" placeholder="Large input" aria-label="Large input" />
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Block
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<input class="form-control input-block" type="text" placeholder="Full-width input" aria-label="Full-width input" />
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Hide webkit's contact info autofill icon
|
||||||
|
|
||||||
|
Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<input
|
||||||
|
class="form-control input-hide-webkit-autofill"
|
||||||
|
placeholder="Hide Webkit's contact autofill on this input"
|
||||||
|
type="text"
|
||||||
|
aria-label="Hide Webkit's contact autofill on this input"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Selects
|
||||||
|
|
||||||
|
Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<select class="form-select" aria-label="Preference">
|
||||||
|
<option>Choose an option</option>
|
||||||
|
<option>Git</option>
|
||||||
|
<option>Subversion</option>
|
||||||
|
<option>Social Coding</option>
|
||||||
|
<option>Beets</option>
|
||||||
|
<option>Bears</option>
|
||||||
|
<option>Battlestar Galactica</option>
|
||||||
|
</select>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Small
|
||||||
|
|
||||||
|
Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div>
|
||||||
|
<select class="form-select select-sm" aria-label="Preference">
|
||||||
|
<option>Choose an option</option>
|
||||||
|
<option>Git</option>
|
||||||
|
<option>Subversion</option>
|
||||||
|
<option>Social Coding</option>
|
||||||
|
<option>Beets</option>
|
||||||
|
<option>Bears</option>
|
||||||
|
<option>Battlestar Galactica</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select class="form-select select-sm" aria-label="Preference">
|
||||||
|
<option>Choose an option</option>
|
||||||
|
<option>Git</option>
|
||||||
|
<option>Subversion</option>
|
||||||
|
<option>Social Coding</option>
|
||||||
|
<option>Beets</option>
|
||||||
|
<option>Bears</option>
|
||||||
|
<option>Battlestar Galactica</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Form groups
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<dl class="form-group">
|
||||||
|
<dt><label for="example-text">Example Text</label></dt>
|
||||||
|
<dd><input class="form-control" type="text" value="Example Value" id="example-text" /></dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<dl class="form-group">
|
||||||
|
<dt><label for="example-select">Example Select</label></dt>
|
||||||
|
<dd>
|
||||||
|
<select class="form-select" id="example-select">
|
||||||
|
<option>Choose an option</option>
|
||||||
|
<option>Git</option>
|
||||||
|
<option>Subversion</option>
|
||||||
|
<option>Social Coding</option>
|
||||||
|
<option>Beets</option>
|
||||||
|
<option>Bears</option>
|
||||||
|
<option>Battlestar Galactica</option>
|
||||||
|
</select>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<dl class="form-group">
|
||||||
|
<dt><label for="example-textarea">Example Textarea</label></dt>
|
||||||
|
<dd>
|
||||||
|
<textarea class="form-control" id="example-textarea"></textarea>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Form group validation
|
||||||
|
|
||||||
|
Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form-group">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form class="pb-2">
|
||||||
|
<dl class="form-group errored">
|
||||||
|
<dt><label for="example-text-errored">Example Text</label></dt>
|
||||||
|
<dd>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
value="Example Value"
|
||||||
|
id="example-text-errored"
|
||||||
|
aria-describedby="form-error-text"
|
||||||
|
/>
|
||||||
|
</dd>
|
||||||
|
<dd class="error" id="form-error-text">This example input has an error.</dd>
|
||||||
|
</dl>
|
||||||
|
<br />
|
||||||
|
<dl class="form-group warn">
|
||||||
|
<dt><label for="example-text-warn">Example Text</label></dt>
|
||||||
|
<dd>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
value="Example Value"
|
||||||
|
id="example-text-warn"
|
||||||
|
aria-describedby="form-warning-text"
|
||||||
|
/>
|
||||||
|
</dd>
|
||||||
|
<dd class="warning" id="form-warning-text">This example input has a warning.</dd>
|
||||||
|
</dl>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Checkboxes and radios
|
||||||
|
|
||||||
|
Utilities to spice up the alignment and styling of checkbox and radio controls.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<div class="form-checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" checked="checked" aria-describedby="help-text-for-checkbox" />
|
||||||
|
Available for hire
|
||||||
|
</label>
|
||||||
|
<p class="note" id="help-text-for-checkbox">
|
||||||
|
This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
You may also add emphasis to the label:
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<div class="form-checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" checked="checked" />
|
||||||
|
<em class="highlight">Available for hire</em>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Show / hide content based on a checkbox or radio button state
|
||||||
|
|
||||||
|
Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<form>
|
||||||
|
<div class="form-checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="hireme" />
|
||||||
|
Not available for hire
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-checkbox">
|
||||||
|
<label aria-live="polite">
|
||||||
|
<input type="radio" class="form-checkbox-details-trigger" name="hireme" />
|
||||||
|
Available for hire
|
||||||
|
<span class="form-checkbox-details text-normal">
|
||||||
|
<span class="d-block mb-1">Available hours per week</span>
|
||||||
|
<input type="text" name="" class="form-control input-contrast" size="3" />
|
||||||
|
<span class="text-small text-gray pl-2">hours per week</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Input group
|
||||||
|
|
||||||
|
Attached an input and button to one another.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<form>
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="Username" aria-label="Username">
|
||||||
|
<span class="input-group-button">
|
||||||
|
<button class="btn" type="button" aria-label="Copy to clipboard">
|
||||||
|
<%= octicon "clippy" %>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Form actions
|
||||||
|
|
||||||
|
Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.
|
||||||
|
|
||||||
|
```html live
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||||
|
<button type="button" class="btn">Cancel</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
9
gatsby-docs/src/pages/components/index.md
Normal file
9
gatsby-docs/src/pages/components/index.md
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
title: Components
|
||||||
|
path: components/index
|
||||||
|
---
|
||||||
|
|
||||||
|
Components make it easier to mark up a set of elements that are commonly grouped together with similar visual styles. Their base styles are shared and variants are added with modifier classes, so usually components are comprised of multiple classes. Most importantly, components should be highly reusable across the site, rather than built for specific pages or features. To achieve this:
|
||||||
|
|
||||||
|
* **Separate structure and skin:** This means to define repeating visual features (like background and border styles) as separate “skins” that you can mix-and-match with your various components to achieve a large amount of visual variety without much code.
|
||||||
|
* **Separate container and content:** Essentially, this means “rarely use location-dependent styles”. A component should look the same no matter where you put it.
|
||||||
137
gatsby-docs/src/pages/components/labels.md
Normal file
137
gatsby-docs/src/pages/components/labels.md
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
---
|
||||||
|
title: Labels
|
||||||
|
path: components/labels
|
||||||
|
status_issue: 'https://github.com/github/design-systems/issues/332'
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/labels'
|
||||||
|
bundle: labels
|
||||||
|
---
|
||||||
|
|
||||||
|
Labels add metatdata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
|
||||||
|
|
||||||
|
## Labels
|
||||||
|
|
||||||
|
The base label component styles the text, adds padding and rounded corners, and an inset box shadow. Labels come in various themes which apply colors and different border styles.
|
||||||
|
|
||||||
|
GitHub also programmatically generates and applies a background color for labels on items such as issues and pull requests. Users are able to select any background color and the text color will adjust to work with light and dark background colors.
|
||||||
|
|
||||||
|
The base `Label` style does not apply a background color, here's an example using the `bg-blue` utility to apply a blue background:
|
||||||
|
|
||||||
|
```html title="Label"
|
||||||
|
<span title="Label: default label" class="Label bg-blue">default label</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:** Be sure to include a title attribute on labels, it's helpful for people using screen-readers to differentiate a label from other text. I.e. without the title attribute, the following example would read as _"New select component design"_, rather than identifying `design` as a label.
|
||||||
|
|
||||||
|
```html title="Label without title"
|
||||||
|
<!-- Don't do this -->
|
||||||
|
<a href="#url">New select component</a><span class="Label bg-blue ml-1">design</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Label themes
|
||||||
|
|
||||||
|
Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently.
|
||||||
|
|
||||||
|
Use `Label--gray` to create a label with a light gray background and gray text. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or whe you want a label to feel less prominent compared with labels with stronger colors.
|
||||||
|
|
||||||
|
```html title="Label theme gray"
|
||||||
|
<span title="Label: gray label" class="Label Label--gray">gray label</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `Label--gray-darker` to create a label with a dark-gray background color. This label is also neutral in color, however, since it's background is darker it can stand out more compared to `Label--gray`.
|
||||||
|
|
||||||
|
```html title="Label theme dark gray"
|
||||||
|
<span title="Label: dark gray label" class="Label Label--gray-darker">dark gray label</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `Label--orange` to communicate "warning". The orange background color is very close to red, so avoid using next to labels with a red background color since most people will find it hard to tell the difference.
|
||||||
|
|
||||||
|
```html title="Label theme orange"
|
||||||
|
<span title="Label: orange label" class="Label Label--orange">orange label</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `Label--outline` to create a label with gray text, a gray border, and a transparent background. The outline reduces the contrast of this label in combination with filled labels. Use this in contexts where you need it to stand out less than other labels and communicate a neutral message.
|
||||||
|
|
||||||
|
```html title="Label outline"
|
||||||
|
<span title="Label: outline label" class="Label Label--outline">outlined label</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `Label--outline-green` in combination with `Label--outline` to communicate a positive message.
|
||||||
|
|
||||||
|
```html title="Label outline green"
|
||||||
|
<span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
```html title="State"
|
||||||
|
<span class="State">Default</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
### State themes
|
||||||
|
|
||||||
|
States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||||
|
|
||||||
|
```erb title="State themes"
|
||||||
|
<span title="Status: open" class="State State--green"><%= octicon "git-pull-request" %> Open</span>
|
||||||
|
<span title="Status: closed" class="State State--red"><%= octicon "git-pull-request" %> Closed</span>
|
||||||
|
<span title="Status: merged" class="State State--purple"><%= octicon "git-merge" %> Merged</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:** Similar to [labels](#labels), you should include the title attribute on states to differentiate them from other content.
|
||||||
|
|
||||||
|
### Small states
|
||||||
|
|
||||||
|
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
|
||||||
|
|
||||||
|
```erb title="Small states"
|
||||||
|
<span title="Status: open" class="State State--green State--small"><%= octicon "issue-opened" %> Open</span>
|
||||||
|
<span title="Status: closed" class="State State--red State--small"><%= octicon "issue-closed" %> Closed</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Counters
|
||||||
|
|
||||||
|
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text. When a counter is empty, it's visibility will be hidden.
|
||||||
|
|
||||||
|
```html title="Counter"
|
||||||
|
<span class="Counter">16</span>
|
||||||
|
<span class="Counter Counter--gray">32</span>
|
||||||
|
<span class="Counter Counter--gray-light">64</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
|
||||||
|
|
||||||
|
```html title="Counter in tabs"
|
||||||
|
<div class="tabnav">
|
||||||
|
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||||
|
<a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab <span class="Counter">23</a>
|
||||||
|
<a href="#url" class="tabnav-tab">Bar tab</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](./box).
|
||||||
|
|
||||||
|
```html title="Counter in Box headers"
|
||||||
|
<div class="Box">
|
||||||
|
<div class="Box-header">
|
||||||
|
<h3 class="Box-title">
|
||||||
|
Box title
|
||||||
|
<span class="Counter Counter--gray">3</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row one
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row two
|
||||||
|
</li>
|
||||||
|
<li class="Box-row">
|
||||||
|
Box row three
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
174
gatsby-docs/src/pages/components/markdown.md
Normal file
174
gatsby-docs/src/pages/components/markdown.md
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
---
|
||||||
|
title: Markdown
|
||||||
|
path: components/markdown
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/markdown'
|
||||||
|
bundle: markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).
|
||||||
|
|
||||||
|
There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.
|
||||||
|
|
||||||
|
There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.
|
||||||
|
|
||||||
|
> There should be no margin above this first sentence.
|
||||||
|
>
|
||||||
|
> Blockquotes should be a lighter gray with a gray border along the left side.
|
||||||
|
>
|
||||||
|
> There should be no margin below this final sentence.
|
||||||
|
|
||||||
|
# Header 1
|
||||||
|
|
||||||
|
This is a normal paragraph following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.
|
||||||
|
|
||||||
|
## Header 2
|
||||||
|
|
||||||
|
> This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.
|
||||||
|
|
||||||
|
### Header 3
|
||||||
|
|
||||||
|
```
|
||||||
|
This is a code block following a header.
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Header 4
|
||||||
|
|
||||||
|
* This is an unordered list following a header.
|
||||||
|
* This is an unordered list following a header.
|
||||||
|
* This is an unordered list following a header.
|
||||||
|
|
||||||
|
##### Header 5
|
||||||
|
|
||||||
|
1. This is an ordered list following a header.
|
||||||
|
2. This is an ordered list following a header.
|
||||||
|
3. This is an ordered list following a header.
|
||||||
|
|
||||||
|
###### Header 6
|
||||||
|
|
||||||
|
| What | Follows |
|
||||||
|
|-----------|-----------------|
|
||||||
|
| A table | A header |
|
||||||
|
| A table | A header |
|
||||||
|
| A table | A header |
|
||||||
|
|
||||||
|
----------------
|
||||||
|
|
||||||
|
There's a horizontal rule above and below this.
|
||||||
|
|
||||||
|
----------------
|
||||||
|
|
||||||
|
Here is an unordered list:
|
||||||
|
|
||||||
|
* Salt-n-Pepa
|
||||||
|
* Bel Biv DeVoe
|
||||||
|
* Kid 'N Play
|
||||||
|
|
||||||
|
And an ordered list:
|
||||||
|
|
||||||
|
1. Michael Jackson
|
||||||
|
2. Michael Bolton
|
||||||
|
3. Michael Bublé
|
||||||
|
|
||||||
|
And an unordered task list:
|
||||||
|
|
||||||
|
- [x] Create a sample markdown document
|
||||||
|
- [x] Add task lists to it
|
||||||
|
- [ ] Take a vacation
|
||||||
|
|
||||||
|
And a "mixed" task list:
|
||||||
|
|
||||||
|
- [ ] Steal underpants
|
||||||
|
- ?
|
||||||
|
- [ ] Profit!
|
||||||
|
|
||||||
|
And a nested list:
|
||||||
|
|
||||||
|
* Jackson 5
|
||||||
|
* Michael
|
||||||
|
* Tito
|
||||||
|
* Jackie
|
||||||
|
* Marlon
|
||||||
|
* Jermaine
|
||||||
|
* TMNT
|
||||||
|
* Leonardo
|
||||||
|
* Michelangelo
|
||||||
|
* Donatello
|
||||||
|
* Raphael
|
||||||
|
|
||||||
|
Definition lists can be used with HTML syntax. Definition terms are bold and italic.
|
||||||
|
|
||||||
|
<dl>
|
||||||
|
<dt>Name</dt>
|
||||||
|
<dd>Godzilla</dd>
|
||||||
|
<dt>Born</dt>
|
||||||
|
<dd>1952</dd>
|
||||||
|
<dt>Birthplace</dt>
|
||||||
|
<dd>Japan</dd>
|
||||||
|
<dt>Color</dt>
|
||||||
|
<dd>Green</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
----------------
|
||||||
|
|
||||||
|
Tables should have bold headings and alternating shaded rows.
|
||||||
|
|
||||||
|
| Artist | Album | Year |
|
||||||
|
|-------------------|-----------------|------|
|
||||||
|
| Michael Jackson | Thriller | 1982 |
|
||||||
|
| Prince | Purple Rain | 1984 |
|
||||||
|
| Beastie Boys | License to Ill | 1986 |
|
||||||
|
|
||||||
|
If a table is too wide, it should condense down and/or scroll horizontally.
|
||||||
|
|
||||||
|
| Artist | Album | Year | Label | Awards | Songs |
|
||||||
|
|-------------------|-----------------|------|-------------|----------|-----------|
|
||||||
|
| Michael Jackson | Thriller | 1982 | Epic Records | Grammy Award for Album of the Year, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Selling Album, Grammy Award for Best Engineered Album, Non-Classical | Wanna Be Startin' Somethin', Baby Be Mine, The Girl Is Mine, Thriller, Beat It, Billie Jean, Human Nature, P.Y.T. (Pretty Young Thing), The Lady in My Life |
|
||||||
|
| Prince | Purple Rain | 1984 | Warner Brothers Records | Grammy Award for Best Score Soundtrack for Visual Media, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Soundtrack/Cast Recording, Grammy Award for Best Rock Performance by a Duo or Group with Vocal | Let's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain |
|
||||||
|
| Beastie Boys | License to Ill | 1986 | Mercury Records | noawardsbutthistablecelliswide | Rhymin & Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, (You Gotta) Fight for Your Right, No Sleep Till Brooklyn, Paul Revere, Hold It Now, Hit It, Brass Monkey, Slow and Low, Time to Get Ill |
|
||||||
|
|
||||||
|
----------------
|
||||||
|
|
||||||
|
Code snippets like `var foo = "bar";` can be shown inline.
|
||||||
|
|
||||||
|
Also, `this should vertically align` ~~`with this`~~ ~~and this~~.
|
||||||
|
|
||||||
|
Code can also be shown in a block element.
|
||||||
|
```
|
||||||
|
var foo = "bar";
|
||||||
|
```
|
||||||
|
|
||||||
|
Code can also use syntax highlighting.
|
||||||
|
```javascript
|
||||||
|
var foo = "bar";
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.";
|
||||||
|
```
|
||||||
|
|
||||||
|
Inline code inside table cells should still be distinguishable.
|
||||||
|
|
||||||
|
| Language | Code |
|
||||||
|
|-------------|--------------------|
|
||||||
|
| Javascript | `var foo = "bar";` |
|
||||||
|
| Ruby | `foo = "bar"` |
|
||||||
|
|
||||||
|
----------------
|
||||||
|
|
||||||
|
Small images should be shown at their actual size.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Large images should always scale down and fit in the content container.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
This is the final element on the page and there should be no margin below this.
|
||||||
|
```
|
||||||
39
gatsby-docs/src/pages/components/marketing-buttons.md
Normal file
39
gatsby-docs/src/pages/components/marketing-buttons.md
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
title: Marketing Buttons
|
||||||
|
path: components/marketing-buttons
|
||||||
|
status: New Release
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/marketing/buttons'
|
||||||
|
bundle: marketing-buttons
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
|
||||||
|
|
||||||
|
## Colors and outlined
|
||||||
|
|
||||||
|
Marketing buttons can be solid blue, outlined blue, solid green, or transparent.
|
||||||
|
|
||||||
|
The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||||
|
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||||
|
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||||
|
<div class="bg-gray-dark">
|
||||||
|
<button class="btn-mktg btn-transparent m-2" type="button">Learn more</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Sizes
|
||||||
|
|
||||||
|
Available in two sizes, marketing buttons have a default size and a large size.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||||
|
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||||
|
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||||
|
<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||||
|
<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||||
|
<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
|
||||||
|
```
|
||||||
|
|
||||||
406
gatsby-docs/src/pages/components/navigation.md
Normal file
406
gatsby-docs/src/pages/components/navigation.md
Normal file
@ -0,0 +1,406 @@
|
|||||||
|
---
|
||||||
|
title: Navigation
|
||||||
|
path: components/navigation
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/navigation'
|
||||||
|
bundle: navigation
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Primer CSS comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
## Menu
|
||||||
|
|
||||||
|
The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`.
|
||||||
|
|
||||||
|
```html title="Menu"
|
||||||
|
<nav class="menu" aria-label="Person settings">
|
||||||
|
<a class="menu-item selected" href="#url" aria-current="page">Account</a>
|
||||||
|
<a class="menu-item" href="#url">Profile</a>
|
||||||
|
<a class="menu-item" href="#url">Emails</a>
|
||||||
|
<a class="menu-item" href="#url">Notifications</a>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
|
||||||
|
|
||||||
|
```erb title="Menu with octicons, avatars and counters"
|
||||||
|
<nav class="menu" aria-label="Person settings">
|
||||||
|
<a class="menu-item selected" href="#url" aria-current="page">
|
||||||
|
<%= octicon "tools" %>
|
||||||
|
Account
|
||||||
|
</a>
|
||||||
|
<a class="menu-item" href="#url">
|
||||||
|
<%= octicon "person" %>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a class="menu-item" href="#url">
|
||||||
|
<%= octicon "mail" %>
|
||||||
|
Emails
|
||||||
|
</a>
|
||||||
|
<a class="menu-item" href="#url">
|
||||||
|
<%= octicon "radio-tower" %>
|
||||||
|
<span class="Counter">3</span>
|
||||||
|
Notifications
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also add optional headings to a menu. Feel free to use nearly any semantic element with the `.menu-heading` class, including inline elements, headings, and more.
|
||||||
|
|
||||||
|
```html title="Menu with heading"
|
||||||
|
<nav class="menu" aria-labelledby="menu-heading">
|
||||||
|
<span class="menu-heading" id="menu-heading">Menu heading</span>
|
||||||
|
<a class="menu-item selected" href="#url" aria-current="page">Account</a>
|
||||||
|
<a class="menu-item" href="#url">Profile</a>
|
||||||
|
<a class="menu-item" href="#url">Emails</a>
|
||||||
|
<a class="menu-item" href="#url">Notifications</a>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Underline nav
|
||||||
|
|
||||||
|
Use `.UnderlineNav` to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers and other content.
|
||||||
|
|
||||||
|
```html title="UnderlineNav"
|
||||||
|
<nav class="UnderlineNav">
|
||||||
|
<div class="UnderlineNav-body">
|
||||||
|
<a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
|
||||||
|
<a href="#url" role="tab" title="Item 2" class="UnderlineNav-item">Item 2</a>
|
||||||
|
<a href="#url" role="tab" title="Item 3" class="UnderlineNav-item">Item 3</a>
|
||||||
|
<a href="#url" role="tab" title="Item 4" class="UnderlineNav-item">Item 4</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `.UnderlineNav-actions` to place another element, such as a button, to the opposite side of the navigation items.
|
||||||
|
|
||||||
|
```html title="UnderlineNav-actions"
|
||||||
|
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||||
|
<div class="UnderlineNav-body">
|
||||||
|
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">Item 2</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">Item 3</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">Item 4</a>
|
||||||
|
</div>
|
||||||
|
<div class="UnderlineNav-actions">
|
||||||
|
<a class="btn">Button</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `.UnderlineNav--right` to right align the navigation.
|
||||||
|
|
||||||
|
```html title="UnderlineNav--right"
|
||||||
|
<nav class="UnderlineNav UnderlineNav--right">
|
||||||
|
<div class="UnderlineNav-body">
|
||||||
|
<a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
|
||||||
|
<a href="#url" role="tab" title="Item 2" class="UnderlineNav-item">Item 2</a>
|
||||||
|
<a href="#url" role="tab" title="Item 3" class="UnderlineNav-item">Item 3</a>
|
||||||
|
<a href="#url" role="tab" title="Item 4" class="UnderlineNav-item">Item 4</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
`.UnderlineNav--right` also works with when used with `.UnderlineNav-actions`.
|
||||||
|
|
||||||
|
```html title="UnderlineNav--right with actions"
|
||||||
|
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
|
||||||
|
<div class="UnderlineNav-actions">
|
||||||
|
<a class="btn">Button</a>
|
||||||
|
</div>
|
||||||
|
<div class="UnderlineNav-body">
|
||||||
|
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">Item 2</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">Item 3</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">Item 4</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
<!-- Update wording here -->
|
||||||
|
`.Counters` and `.octicons` can be used with navigation items. Use `.UnderlineNav-octicon` to add color and hover styles.
|
||||||
|
|
||||||
|
```erb title="UnderlineNav with Counter"
|
||||||
|
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||||
|
<div class="UnderlineNav-body">
|
||||||
|
<a href="#url" class="UnderlineNav-item selected">
|
||||||
|
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
|
||||||
|
Item 1
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">
|
||||||
|
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
|
||||||
|
Item 2
|
||||||
|
<span class="Counter">10</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">
|
||||||
|
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
|
||||||
|
Item 3
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">
|
||||||
|
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
|
||||||
|
Item 4
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNav-container` to make navigation fill the width of the container.
|
||||||
|
|
||||||
|
```html title="UnderlineNav--full"
|
||||||
|
<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar">
|
||||||
|
<div class="container-lg UnderlineNav-container">
|
||||||
|
<div class="UnderlineNav-body">
|
||||||
|
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">Item 2
|
||||||
|
<span class="Counter">10</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">Item 3</a>
|
||||||
|
<a href="#url" class="UnderlineNav-item">Item 4</a>
|
||||||
|
</div>
|
||||||
|
<div class="UnderlineNav-actions">
|
||||||
|
<a class="btn">Button</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Side Nav
|
||||||
|
|
||||||
|
The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **Side Nav elements have no default width or positioning**. We suggest using [column grid](../../objects/grid) classes or an inline `width` style for sizing, and [flexbox utilities](../../utilities/flexbox) for positioning alongside content.
|
||||||
|
|
||||||
|
- You can use a **light gray background** and a **border** if the parent element doesn't have it already.
|
||||||
|
- Add `aria-current="page"` to show a link as selected. Selected button elements in tab-like UIs should instead have `aria-selected="true"`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||||
|
<a class="SideNav-item" href="#url">Account</a>
|
||||||
|
<a class="SideNav-item" href="#url" aria-current="page">Profile</a>
|
||||||
|
<a class="SideNav-item" href="#url">Emails</a>
|
||||||
|
<a class="SideNav-item" href="#url">Notifications</a>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||||
|
<a class="SideNav-item" href="#url">
|
||||||
|
Text only
|
||||||
|
</a>
|
||||||
|
<a class="SideNav-item" href="#url">
|
||||||
|
<img class="avatar avatar-small mr-2" src="https://avatars.githubusercontent.com/hubot?s=40" alt="hubot" height="20" width="20">
|
||||||
|
With an avatar
|
||||||
|
</a>
|
||||||
|
<a class="SideNav-item" href="#url">
|
||||||
|
<svg class="octicon octicon-octoface mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"></path></svg>
|
||||||
|
With an icon
|
||||||
|
</a>
|
||||||
|
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||||
|
With a status icon <svg class="octicon octicon-primitive-dot color-green-5 ml-2 float-right" viewBox="0 0 8 16" version="1.1" width="8" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"></path></svg>
|
||||||
|
</a>
|
||||||
|
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||||
|
With a label <span class="Label bg-blue" title="Label: label">label</span>
|
||||||
|
</a>
|
||||||
|
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||||
|
With a counter <span class="Counter bg-gray-2 ml-1">16</span>
|
||||||
|
</a>
|
||||||
|
<a class="SideNav-item" href="#url">
|
||||||
|
<h5>With a heading</h5>
|
||||||
|
<span>and some longer description</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<aside class="bg-gray-light border p-3" style="max-width: 360px">
|
||||||
|
<h5 class="text-gray mb-2 pb-1 border-bottom">Menu</h5>
|
||||||
|
<nav class="SideNav">
|
||||||
|
<a class="SideNav-subItem" href="#url">Account</a>
|
||||||
|
<a class="SideNav-subItem" href="#url" aria-current="page">Profile</a>
|
||||||
|
<a class="SideNav-subItem" href="#url">Emails</a>
|
||||||
|
<a class="SideNav-subItem" href="#url">Notifications</a>
|
||||||
|
</nav>
|
||||||
|
<aside>
|
||||||
|
```
|
||||||
|
|
||||||
|
Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||||
|
<a class="SideNav-item" href="#url">
|
||||||
|
<svg class="SideNav-icon octicon octicon-person mr-2" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"></path></svg>
|
||||||
|
<span>Account</span>
|
||||||
|
</a>
|
||||||
|
<a class="SideNav-item" href="#url" aria-current="page">
|
||||||
|
<svg class="SideNav-icon octicon octicon-octoface mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"></path></svg>
|
||||||
|
<span>Profile</span>
|
||||||
|
</a>
|
||||||
|
<nav class="SideNav bg-white border-top py-3 pl-6">
|
||||||
|
<a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a>
|
||||||
|
<a class="SideNav-subItem" href="#url">Sub item 2</a>
|
||||||
|
<a class="SideNav-subItem" href="#url">Sub item 3</a>
|
||||||
|
</nav>
|
||||||
|
<a class="SideNav-item" href="#url">
|
||||||
|
<svg class="SideNav-icon octicon octicon-mail mr-2" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"></path></svg>
|
||||||
|
<span>Emails</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Tabnav
|
||||||
|
|
||||||
|
When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of... tabs!
|
||||||
|
|
||||||
|
```html title="tabnav"
|
||||||
|
<div class="tabnav">
|
||||||
|
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||||
|
<a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab</a>
|
||||||
|
<a href="#url" class="tabnav-tab">Bar tab</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `.float-right` to align additional elements in the `.tabnav`:
|
||||||
|
|
||||||
|
```html title="tabnav with buttons"
|
||||||
|
<div class="tabnav">
|
||||||
|
<a class="btn btn-sm float-right" href="#url" role="button">Button</a>
|
||||||
|
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||||
|
<a href="#url" class="tabnav-tab selected" aria-current="page">Foo Tab</a>
|
||||||
|
<a href="#url" class="tabnav-tab">Bar Tab</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`:
|
||||||
|
|
||||||
|
```html title="tabnav-extra"
|
||||||
|
<div class="tabnav">
|
||||||
|
<div class="tabnav-extra float-right">
|
||||||
|
Tabnav widget text here.
|
||||||
|
</div>
|
||||||
|
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||||
|
<a href="#url" class="tabnav-tab selected" aria-current="page">Foo Tab</a>
|
||||||
|
<a href="#url" class="tabnav-tab">Bar Tab</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html title="tabnav with everything"
|
||||||
|
<div class="tabnav">
|
||||||
|
<div class="float-right">
|
||||||
|
<a class="tabnav-extra" href="#url">
|
||||||
|
Tabnav extra link
|
||||||
|
</a>
|
||||||
|
<a class="tabnav-extra" href="#url">
|
||||||
|
Tabnav extra link
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||||
|
<a href="#url" class="tabnav-tab selected" aria-current="page">Foo Tab</a>
|
||||||
|
<a href="#url" class="tabnav-tab">Bar Tab</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Filter list
|
||||||
|
|
||||||
|
A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
|
||||||
|
|
||||||
|
```html title="filter-list"
|
||||||
|
<ul class="filter-list">
|
||||||
|
<li>
|
||||||
|
<a href="#url" class="filter-item selected" aria-current="page">
|
||||||
|
<span class="count" title="results">21</span>
|
||||||
|
First filter
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#url" class="filter-item">
|
||||||
|
<span class="count" title="results">3</span>
|
||||||
|
Second filter
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#url" class="filter-item">
|
||||||
|
Third filter
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Sub navigation
|
||||||
|
|
||||||
|
`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
|
||||||
|
|
||||||
|
```html title="subnav"
|
||||||
|
<nav class="subnav" aria-label="Respository">
|
||||||
|
<a href="#url" class="subnav-item selected" aria-current="page">Item 1</a>
|
||||||
|
<a href="#url" class="subnav-item">Item 2</a>
|
||||||
|
<a href="#url" class="subnav-item">Item 3</a>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can have `subnav-search` in the subnav bar.
|
||||||
|
|
||||||
|
```erb title="subnav-search"
|
||||||
|
<div class="subnav">
|
||||||
|
<nav class="subnav-links" aria-label="Repository">
|
||||||
|
<a href="#url" class="subnav-item selected" aria-current="page">Item 1</a>
|
||||||
|
<a href="#url" class="subnav-item">Item 2</a>
|
||||||
|
<a href="#url" class="subnav-item">Item 3</a>
|
||||||
|
</nav>
|
||||||
|
<div class="subnav-search float-left">
|
||||||
|
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site">
|
||||||
|
<%= octicon "search", :class => "subnav-search-icon" %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
You can also use a `subnav-search-context` to display search help in a select menu.
|
||||||
|
|
||||||
|
```erb title="subnav-search-context"
|
||||||
|
<div class="subnav">
|
||||||
|
<nav class="subnav-links">
|
||||||
|
<a href="#url" class="subnav-item selected">Item 1</a>
|
||||||
|
<a href="#url" class="subnav-item">Item 2</a>
|
||||||
|
<a href="#url" class="subnav-item">Item 3</a>
|
||||||
|
</nav>
|
||||||
|
<div class="float-left ml-3 select-menu js-menu-container js-select-menu subnav-search-context">
|
||||||
|
<button type="button" name="button" class="btn select-menu-button js-menu-target" aria-expanded="false" aria-haspopup="true">Filters </button>
|
||||||
|
<div class="select-menu-modal-holder js-menu-content js-navigation-container" aria-hidden="true">
|
||||||
|
<div class="select-menu-modal">
|
||||||
|
<div class="select-menu-list">
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<div class="select-menu-item-text">
|
||||||
|
Search filter 1
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<div class="select-menu-item-text">
|
||||||
|
Search filter 2
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<div class="select-menu-item-text">
|
||||||
|
Search filter 3
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="subnav-search float-left">
|
||||||
|
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site">
|
||||||
|
<%= octicon "search", :class => "subnav-search-icon" %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
214
gatsby-docs/src/pages/components/pagehead.md
Normal file
214
gatsby-docs/src/pages/components/pagehead.md
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
---
|
||||||
|
title: Pagehead
|
||||||
|
path: components/pagehead
|
||||||
|
status: Stable
|
||||||
|
internal: true
|
||||||
|
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/pagehead.scss'
|
||||||
|
symbols: [account-switcher, active, admin, avatar, dropdown-menu-content, experiment-repo-nav, fork, fork-flag, mirror, mirror-flag, octicon, octicon-lock, octicon-mirror, octicon-mute, pagehead, pagehead-actions, pagehead-heading, pagehead-tabs-item, path-divider, png, private, repohead, repohead-details-container, reponav, reponav-dropdown, reponav-item, select-menu, select-menu-modal-holder, selected, underline-nav]
|
||||||
|
---
|
||||||
|
|
||||||
|
Give a page a clear, separated title and optional top nav by adding a `.pagehead`.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
## Basic pagehead
|
||||||
|
|
||||||
|
In its simplest form, you can build a pagehead with a `pagehead` element with an `h1` child.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="pagehead">
|
||||||
|
<h1>Title</h1>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Avatars
|
||||||
|
|
||||||
|
Place an avatar inside the `h1` to have margins applied to it. Don't forget the `avatar` class!
|
||||||
|
|
||||||
|
Also be sure to add `aria-hidden="true"` to hide the avatar from screenreaders.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="pagehead">
|
||||||
|
<h1>
|
||||||
|
<%= avatar_for("jonrohan", 32, "aria-hidden": "true") %>
|
||||||
|
jonrohan
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Path divider
|
||||||
|
|
||||||
|
For path or breadcrumb patterns, wrap the `/` with `path-divider` to add some nice horizontal spacing.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="pagehead">
|
||||||
|
<h1>
|
||||||
|
<span class="author"><a href="#url" class="url fn" rel="author">jonrohan</a></span>
|
||||||
|
<span class="path-divider">/</span>
|
||||||
|
<strong><a href="#url">primer</a></strong>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Pagehead actions
|
||||||
|
|
||||||
|
To add actions on the right side of the `pagehead`, use the `pagehead-actions` element. Place `pagehead-actions` before the `h1` to ensure proper placement.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="pagehead">
|
||||||
|
<ul class="pagehead-actions">
|
||||||
|
<li><button class="btn btn-sm" href="#url">Action</button></li>
|
||||||
|
<li><button class="btn btn-sm btn-primary" href="#url">Action</button></li>
|
||||||
|
</ul>
|
||||||
|
<h1>Title</h1>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Org nav
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="pagehead orghead px-3">
|
||||||
|
<nav class="orgnav clearfix" role="navigation">
|
||||||
|
<a class="pagehead-tabs-item selected" href="#url">
|
||||||
|
<%= octicon("repo") %>
|
||||||
|
Repositories
|
||||||
|
</a>
|
||||||
|
<a class="pagehead-tabs-item" href="#url">
|
||||||
|
<%= octicon("jersey") %>
|
||||||
|
Teams
|
||||||
|
<span class="Counter">1</span>
|
||||||
|
</a>
|
||||||
|
<a class="pagehead-tabs-item" href="#url">
|
||||||
|
<%= octicon("project") %>
|
||||||
|
Projects
|
||||||
|
<span class="Counter">2</span>
|
||||||
|
</a>
|
||||||
|
<a class="pagehead-tabs-item" href="#url">
|
||||||
|
<%= octicon("briefcase") %>
|
||||||
|
Jobs
|
||||||
|
<span class="Counter">3</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Repohead
|
||||||
|
|
||||||
|
Use `pagehead` to construct a header and navigation for a repository.
|
||||||
|
|
||||||
|
### Base
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="pagehead repohead experiment-repo-nav">
|
||||||
|
<div class="container-lg repohead-details-container px-3 clearfix">
|
||||||
|
<ul class="pagehead-actions">
|
||||||
|
<li>
|
||||||
|
<div class="clearfix">
|
||||||
|
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||||
|
<%= octicon("eye")%>
|
||||||
|
Watch
|
||||||
|
</button>
|
||||||
|
<button class="social-count" href="#url">6</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="clearfix">
|
||||||
|
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||||
|
<%= octicon("repo-forked") %>
|
||||||
|
Fork
|
||||||
|
</button>
|
||||||
|
<button class="social-count" href="#url">0</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h1>
|
||||||
|
<%= octicon("repo") %>
|
||||||
|
<span class="author"><a href="#url" class="url fn" rel="author">cmwinters</a></span>
|
||||||
|
<span class="path-divider">/</span>
|
||||||
|
<strong><a href="#url">project</a></strong>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="container-lg px-3">
|
||||||
|
<nav class="reponav clearfix" role="navigation">
|
||||||
|
<a class="reponav-item selected" href="#url">
|
||||||
|
<%= octicon("code") %>
|
||||||
|
Code
|
||||||
|
</a>
|
||||||
|
<a class="reponav-item" href="#url">
|
||||||
|
<%= octicon("issue-opened") %>
|
||||||
|
Issues
|
||||||
|
<span class="Counter">1</span>
|
||||||
|
</a>
|
||||||
|
<a class="reponav-item" href="#url">
|
||||||
|
<%= octicon("git-pull-request") %>
|
||||||
|
Pull requests
|
||||||
|
<span class="Counter">2</span>
|
||||||
|
</a>
|
||||||
|
<a class="reponav-item" href="#url">
|
||||||
|
<%= octicon("project") %>
|
||||||
|
Projects
|
||||||
|
<span class="Counter">3</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Private
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="pagehead repohead experiment-repo-nav">
|
||||||
|
<div class="container-lg repohead-details-container px-3 clearfix">
|
||||||
|
<ul class="pagehead-actions">
|
||||||
|
<li>
|
||||||
|
<div class="clearfix">
|
||||||
|
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||||
|
<%= octicon("eye") %>
|
||||||
|
Watch
|
||||||
|
</button>
|
||||||
|
<button class="social-count" href="#url">6</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="clearfix">
|
||||||
|
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||||
|
<%= octicon("repo-forked") %>
|
||||||
|
Fork
|
||||||
|
</button>
|
||||||
|
<button class="social-count" href="#url">0</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h1 class="private">
|
||||||
|
<%= octicon("lock") %>
|
||||||
|
<span class="author"><a href="#url" class="url fn" rel="author">cmwinters</a></span>
|
||||||
|
<span class="path-divider">/</span>
|
||||||
|
<strong><a href="#url">project</a></strong>
|
||||||
|
<span class="Label Label--outline v-align-middle">Private</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="container-lg px-3">
|
||||||
|
<nav class="reponav clearfix" role="navigation">
|
||||||
|
<a class="reponav-item selected" href="#url">
|
||||||
|
<%= octicon("code") %>
|
||||||
|
Code
|
||||||
|
</a>
|
||||||
|
<a class="reponav-item" href="#url">
|
||||||
|
<%= octicon("issue-opened") %>
|
||||||
|
Issues
|
||||||
|
<span class="Counter">1</span>
|
||||||
|
</a>
|
||||||
|
<a class="reponav-item" href="#url">
|
||||||
|
<%= octicon("git-pull-request") %>
|
||||||
|
Pull requests
|
||||||
|
<span class="Counter">2</span>
|
||||||
|
</a>
|
||||||
|
<a class="reponav-item" href="#url">
|
||||||
|
<%= octicon("project") %>
|
||||||
|
Projects
|
||||||
|
<span class="Counter">3</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
54
gatsby-docs/src/pages/components/pagination.md
Normal file
54
gatsby-docs/src/pages/components/pagination.md
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
---
|
||||||
|
title: Pagination
|
||||||
|
path: components/pagination
|
||||||
|
status: New Release
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/pagination'
|
||||||
|
bundle: pagination
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
## Previous/next pagination
|
||||||
|
|
||||||
|
You can make a very simple pagination container with just the Previous and Next buttons. Add the class `disabled` to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<nav class="paginate-container" aria-label="Pagination">
|
||||||
|
<div class="pagination">
|
||||||
|
<span class="previous_page disabled">Previous</span>
|
||||||
|
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Numbered pagination
|
||||||
|
|
||||||
|
For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.
|
||||||
|
|
||||||
|
To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the class `disabled` to the Previous button if you're on the first page. Apply the class `current` to the current numbered page.
|
||||||
|
|
||||||
|
As always, make sure to include the appropriate `aria` attributes to make the element accessible.
|
||||||
|
|
||||||
|
- Add `aria-label="Pagination"` to the the `paginate-container` element.
|
||||||
|
- Add `aria-current="true"` to the current page marker.
|
||||||
|
- Add `aria-label="Page X"` to each anchor link.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<nav class="paginate-container" aria-label="Pagination">
|
||||||
|
<div class="pagination">
|
||||||
|
<span class="previous_page disabled">Previous</span>
|
||||||
|
<em class="current selected" aria-current="true">1</em>
|
||||||
|
<a href="#url" aria-label="Page 2">2</a>
|
||||||
|
<a href="#url" aria-label="Page 3">3</a>
|
||||||
|
<span class="gap">…</span>
|
||||||
|
<a href="#url" aria-label="Page 8">8</a>
|
||||||
|
<a href="#url" aria-label="Page 9">9</a>
|
||||||
|
<a href="#url" aria-label="Page 10">10</a>
|
||||||
|
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
240
gatsby-docs/src/pages/components/popover.md
Normal file
240
gatsby-docs/src/pages/components/popover.md
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
---
|
||||||
|
title: Popover
|
||||||
|
path: components/popover
|
||||||
|
status: Experimental
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/popover'
|
||||||
|
bundle: popover
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
A popover 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-top-center) (default): Places the caret on the top edge of the message, horizontally centered.
|
||||||
|
- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.
|
||||||
|
- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.
|
||||||
|
- [`.Popover-message--left`](#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--bottom-left`](#bottom-left)
|
||||||
|
- [`.Popover-message--bottom-right`](#bottom-right)
|
||||||
|
- [`.Popover-message--left-bottom`](#left-bottom)
|
||||||
|
- [`.Popover-message--left-top`](#left-top)
|
||||||
|
- [`.Popover-message--right-bottom`](#right-bottom)
|
||||||
|
- [`.Popover-message--right-top`](#right-top)
|
||||||
|
- [`.Popover-message--top-left`](#top-left)
|
||||||
|
- [`.Popover-message--top-right`](#top-right)
|
||||||
|
|
||||||
|
Lastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.
|
||||||
|
|
||||||
|
### 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.
|
||||||
|
|
||||||
|
```html title="Default (top-center)"
|
||||||
|
<div class="position-relative text-center">
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
<div class="Popover right-0 left-0 position-relative">
|
||||||
|
<div class="Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Large example
|
||||||
|
|
||||||
|
```html title="Large"
|
||||||
|
<div class="position-relative text-center">
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
<div class="Popover right-0 left-0 position-relative">
|
||||||
|
<div class="Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Bottom
|
||||||
|
|
||||||
|
```html title="Bottom"
|
||||||
|
<div class="position-relative text-center">
|
||||||
|
<div class="Popover position-relative">
|
||||||
|
<div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Bottom-right
|
||||||
|
|
||||||
|
```html title="Bottom-right"
|
||||||
|
<div class="position-relative text-right pr-2">
|
||||||
|
<div class="Popover position-relative">
|
||||||
|
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Bottom-left
|
||||||
|
|
||||||
|
```html title="Bottom-left"
|
||||||
|
<div class="Popover position-relative pl-2">
|
||||||
|
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Left
|
||||||
|
|
||||||
|
```html title="Left"
|
||||||
|
<div class="d-flex flex-justify-center flex-items-center">
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
<div class="Popover position-relative">
|
||||||
|
<div class="Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Left-bottom
|
||||||
|
|
||||||
|
```html title="Left-bottom"
|
||||||
|
<div class="d-flex flex-justify-center flex-items-end">
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
<div class="Popover position-relative">
|
||||||
|
<div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Left-top
|
||||||
|
|
||||||
|
```html title="Left-top"
|
||||||
|
<div class="d-flex flex-justify-center flex-items-start">
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
<div class="Popover position-relative">
|
||||||
|
<div class="Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Right
|
||||||
|
|
||||||
|
```html title="Right"
|
||||||
|
<div class="d-flex flex-justify-center flex-items-center">
|
||||||
|
<div class="Popover position-relative">
|
||||||
|
<div class="Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Right-bottom
|
||||||
|
|
||||||
|
```html title="Right-bottom"
|
||||||
|
<div class="d-flex flex-justify-center flex-items-end">
|
||||||
|
<div class="Popover position-relative">
|
||||||
|
<div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Right-top
|
||||||
|
|
||||||
|
```html title="Right-top"
|
||||||
|
<div class="d-flex flex-justify-center flex-items-start">
|
||||||
|
<div class="Popover position-relative">
|
||||||
|
<div class="Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Top-left
|
||||||
|
|
||||||
|
```html title="Top-left"
|
||||||
|
<div class="position-relative pl-2">
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
<div class="Popover position-relative">
|
||||||
|
<div class="Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Top-right
|
||||||
|
|
||||||
|
```html title="Top-right"
|
||||||
|
<div class="position-relative text-right pr-2">
|
||||||
|
<button class="btn btn-primary">UI</button>
|
||||||
|
<div class="Popover right-0 position-relative">
|
||||||
|
<div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large">
|
||||||
|
<h4 class="mb-2">Popover heading</h4>
|
||||||
|
<p>Message about this particular piece of UI.</p>
|
||||||
|
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
69
gatsby-docs/src/pages/components/progress.md
Normal file
69
gatsby-docs/src/pages/components/progress.md
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
---
|
||||||
|
title: Progress
|
||||||
|
path: components/progress
|
||||||
|
status: New Release
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/progress'
|
||||||
|
bundle: progress
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Use Progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/css/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span class="Progress">
|
||||||
|
<span class="bg-green" style="width: 50%;"></span>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Large Progress
|
||||||
|
Large progress bars are slightly taller than the default.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span class="Progress Progress--large">
|
||||||
|
<span class="bg-green" style="width: 50%;"></span>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Small Progress
|
||||||
|
Large progress bars are shorter than the default.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span class="Progress Progress--small">
|
||||||
|
<span class="bg-green" style="width: 50%;"></span>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Inline Progress
|
||||||
|
For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span class="text-small text-gray mr-2">4 of 16</span>
|
||||||
|
<span class="Progress d-inline-flex" style="width: 160px">
|
||||||
|
<div class="bg-green" style="width: 25%"></div>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Accessibility
|
||||||
|
In cases where it's not possible to describe the progress in text, provide an `aria-label` attribute that does so:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div aria-label="tasks: 8 of 10 complete">
|
||||||
|
<span class="Progress">
|
||||||
|
<span class="bg-green" style="width: 80%;"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Progress with multiple values
|
||||||
|
To show the progress of tasks in multiple states (such as "done", "in progress", and "open"), use distinct background color utilities and give each one a percentage width proportional to the total number. Children are stacked from left to right, so if your widths add up to 100%, your bars will too.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="tooltipped tooltipped-n" aria-label="tasks: 80 done, 14 in progress, 6 open">
|
||||||
|
<span class="Progress">
|
||||||
|
<span class="bg-green" style="width: 80%;"></span>
|
||||||
|
<span class="bg-purple" style="width: 14%;"></span>
|
||||||
|
<span class="bg-red" style="width: 6%;"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
878
gatsby-docs/src/pages/components/select-menu-deprecated.md
Normal file
878
gatsby-docs/src/pages/components/select-menu-deprecated.md
Normal file
@ -0,0 +1,878 @@
|
|||||||
|
---
|
||||||
|
title: Select menu (deprecated)
|
||||||
|
path: components/select-menu
|
||||||
|
status: Deprecated
|
||||||
|
source: 'https://github.com/github/github/blob/master/app/assets/stylesheets/components/select-menu.scss'
|
||||||
|
symbols: [active, close-button, css-truncate-target, description, description-inline, description-warning, disabled, filterable-empty, has-error, hidden-select-button-text, icon-only, indeterminate, is-loading, is-showing-new-item-form, label-select-menu, last-visible, menu-active, modal-backdrop, navigation-focus, octicon, octicon-check, octicon-dash, octicon-octoface, octicon-x, opaque, primary, select-menu, select-menu-action, select-menu-blankslate, select-menu-button, select-menu-button-gravatar, select-menu-button-large, select-menu-clear-item, select-menu-divider, select-menu-error, select-menu-filters, select-menu-header, select-menu-item, select-menu-item-gravatar, select-menu-item-heading, select-menu-item-icon, select-menu-item-parent, select-menu-item-template, select-menu-item-text, select-menu-list, select-menu-loading-overlay, select-menu-modal, select-menu-modal-holder, select-menu-modal-narrow, select-menu-modal-right, select-menu-new-item-form, select-menu-no-results, select-menu-tab, select-menu-tab-bucket, select-menu-tab-nav, select-menu-tabs, select-menu-text-filter, select-menu-title, selected, spinner]
|
||||||
|
---
|
||||||
|
|
||||||
|
> Note: The `.select-menu` component is **deprecated**. Use the [`.SelectMenu`](select-menu) instead.
|
||||||
|
|
||||||
|
## Migration guide
|
||||||
|
|
||||||
|
Here a few tips how to migrate an existing `.select-menu` to `.SelectMenu`.
|
||||||
|
|
||||||
|
1. Use a `<details>` element to toggle the Select Menu.
|
||||||
|
2. Use a [`<details-menu>`](https://github.com/github/details-menu-element) element to add JS behaviour. The older `.js-select-menu` is not compatible.
|
||||||
|
3. In case custom styling is needed, use [utility classes](https://primer.style/css/utilities) if possible.
|
||||||
|
|
||||||
|
Below a comparison between class names:
|
||||||
|
|
||||||
|
`.select-menu` | `.SelectMenu`
|
||||||
|
--- | ---
|
||||||
|
`select-menu` | -
|
||||||
|
`select-menu-button` | -
|
||||||
|
`select-menu-modal-holder` | -
|
||||||
|
`select-menu-modal` | `SelectMenu`
|
||||||
|
`select-menu-modal-right` | `SelectMenu right-0`
|
||||||
|
- | `SelectMenu-modal`
|
||||||
|
`select-menu-loading-overlay` | `SelectMenu-loading`
|
||||||
|
`select-menu-item-icon` | `SelectMenu-icon`
|
||||||
|
`select-menu-header` | `SelectMenu-header`
|
||||||
|
`select-menu-title` | `SelectMenu-title`
|
||||||
|
`close-button` | `SelectMenu-closeButton`
|
||||||
|
`select-menu-filters` | -
|
||||||
|
`select-menu-text-filter` | `SelectMenu-filter`
|
||||||
|
- | `SelectMenu-input`
|
||||||
|
`select-menu-tabs` | `SelectMenu-tabs`
|
||||||
|
`select-menu-tab` | `SelectMenu-tab`
|
||||||
|
`select-menu-tab-nav` | -
|
||||||
|
`select-menu-list` | `SelectMenu-list`
|
||||||
|
`select-menu-item` | `SelectMenu-item`
|
||||||
|
`select-menu-item-text` | -
|
||||||
|
`select-menu-no-results` | `SelectMenu-message`
|
||||||
|
`select-menu-blankslate` | `SelectMenu-blankslate`
|
||||||
|
`selected` | `aria-checked="true"`
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
The select menu provides advanced support for navigation, filtering, and more. Any popover within a select menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
|
||||||
|
|
||||||
|
{:toc}
|
||||||
|
|
||||||
|
## Basic example
|
||||||
|
|
||||||
|
Select menus should be trigged by a `<button>`. In the markup below, all classes prefixed with `select-menu` and `.js-` are required.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Choose an item
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Menu contents
|
||||||
|
|
||||||
|
The contents of a select menu are easily customized with support for headers, footers, tabbed lists, and live filtering.
|
||||||
|
|
||||||
|
### Headers
|
||||||
|
|
||||||
|
Add a header to any select menu's popover to house a clear title and a dismiss button.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Choose an item
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### List items
|
||||||
|
|
||||||
|
The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). [List items are also customizable](#menu-list-items) with options for avatars, additional icons, and multiple lines of text.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Choose an item
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<button type="button" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||||
|
</button>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item" href="#url">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Filter
|
||||||
|
|
||||||
|
Enable live filtering of list items within a `.select-menu-list` with a search input. Only a handful of changes to your menu's markup are required:
|
||||||
|
|
||||||
|
- Add the text input, housed in `.select-menu-filters`, before the `.select-menu-list`.
|
||||||
|
- Add two attritubes, `data-filterable-for` and `data-filterable-type`, to the `.select-menu-list` to scope the filter to the list.
|
||||||
|
|
||||||
|
There are no required changes for the `.select-menu-item`s.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i>Label:</i>
|
||||||
|
<span class="js-select-button">Choose an item</span>
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder js-menu-content js-navigation-container">
|
||||||
|
<div class="select-menu-modal">
|
||||||
|
<div class="select-menu-header" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="js-select-menu-deferred-content">
|
||||||
|
<div class="select-menu-filters">
|
||||||
|
<div class="select-menu-text-filter">
|
||||||
|
<input type="text" id="example-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter this list" aria-label="Type to filter" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list" data-filterable-for="example-filter-field" data-filterable-type="substring">
|
||||||
|
<input hidden="checkbox" name="example" value="">
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Test element
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Filter to this
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
More content
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Something else
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
One more thing
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Tabs
|
||||||
|
|
||||||
|
Sometimes you need two or more lists of items in your select menu, e.g. branches and tags. Select menu lists can be tabbed with the addition of the tab toggles at the top of the menu and a few changes to the `.select-menu-list`.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i>Label:</i>
|
||||||
|
<span class="js-select-button">Choose an item</span>
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder js-menu-content js-navigation-container">
|
||||||
|
<div class="select-menu-modal">
|
||||||
|
<div class="select-menu-header" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="js-select-menu-deferred-content">
|
||||||
|
<div class="select-menu-filters">
|
||||||
|
<div class="select-menu-tabs">
|
||||||
|
<ul>
|
||||||
|
<li class="select-menu-tab">
|
||||||
|
<a href="#url" data-tab-filter="branches" data-filter-placeholder="Filter for " class="js-select-menu-tab" aria-current="false">Branches</a>
|
||||||
|
</li>
|
||||||
|
<li class="select-menu-tab">
|
||||||
|
<a href="#url" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab selected" aria-current="true">Tags</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket selected" data-filterable-for="example-filter-field" data-filterable-type="substring" data-tab-filter="branches" role="menu">
|
||||||
|
<input hidden="checkbox" name="example" value="">
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 1
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 2
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 3
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 4
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 5
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-filterable-for="example-filter-field" data-filterable-type="substring" data-tab-filter="tags" role="menu">
|
||||||
|
<input hidden="checkbox" name="example" value="">
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 1
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 2
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 3
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 4
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 5
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Filter and tabs
|
||||||
|
|
||||||
|
Show a filter and tabs in a single select menu.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i>Label:</i>
|
||||||
|
<span class="js-select-button">Choose an item</span>
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder js-menu-content js-navigation-container">
|
||||||
|
<div class="select-menu-modal">
|
||||||
|
<div class="select-menu-header" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="js-select-menu-deferred-content">
|
||||||
|
<div class="select-menu-filters">
|
||||||
|
<div class="select-menu-text-filter">
|
||||||
|
<input type="text" id="example-filter-field-2" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter labels" aria-label="Type or choose a label" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-tabs">
|
||||||
|
<ul>
|
||||||
|
<li class="select-menu-tab">
|
||||||
|
<a href="#url" data-tab-filter="branches" data-filter-placeholder="Filter for " class="js-select-menu-tab" aria-current="false">Branches</a>
|
||||||
|
</li>
|
||||||
|
<li class="select-menu-tab">
|
||||||
|
<a href="#url" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab selected" aria-current="true">Tags</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket selected" data-filterable-for="example-filter-field" data-filterable-type="substring" data-tab-filter="branches" role="menu">
|
||||||
|
<input hidden="checkbox" name="example" value="">
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 1
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 2
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 3
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 4
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Branch 5
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-filterable-for="example-filter-field" data-filterable-type="substring" data-tab-filter="tags" role="menu">
|
||||||
|
<input hidden="checkbox" name="example" value="">
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 1
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 2
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 3
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 4
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text js-select-button-text">
|
||||||
|
Tag 5
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Blankslate
|
||||||
|
|
||||||
|
Sometimes a select menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.select-menu-list` with the `.select-menu-blankslate` and customize it's contents as needed.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Choose an item
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<div class="select-menu-blankslate">
|
||||||
|
<%= octicon("check", :height => 32) %>
|
||||||
|
<h3>Select menu blankslate</h3>
|
||||||
|
<p>Some text here to describe why you're seeing a blankslate and how to go about fixing that up.</p>
|
||||||
|
<button type="button" class="btn btn-sm btn-primary mt-3 mb-3">Deal with it</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Menu list items
|
||||||
|
|
||||||
|
Select menu list items have a few options available to them for more complex information patterns.
|
||||||
|
|
||||||
|
### Multi-line text
|
||||||
|
|
||||||
|
Sometimes the contents of your select menu list require a heading and a description instead of just a string. Select menus come with some default styles for such situations with the addition of a few classes and wrapping `<span>`s.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i>Multi line:</i>
|
||||||
|
<span class="js-select-button">Choose an item</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal subscription-menu-modal js-menu-content" aria-hidden="false">
|
||||||
|
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Notifications</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list js-navigation-container js-active-navigation-container" role="menu">
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item selected" role="menuitem">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text">
|
||||||
|
<span class="select-menu-item-heading">Not watching</span>
|
||||||
|
<span class="description">Be notified when participating or @mentioned.</span>
|
||||||
|
<span class="js-select-button-text hidden-select-button-text">
|
||||||
|
Watch
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item" role="menuitem">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text">
|
||||||
|
<span class="select-menu-item-heading">Watching</span>
|
||||||
|
<span class="description">Be notified of all conversations.</span>
|
||||||
|
<span class="js-select-button-text hidden-select-button-text">
|
||||||
|
Stop watching
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item" role="menuitem">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<div class="select-menu-item-text">
|
||||||
|
<span class="select-menu-item-heading">Ignoring</span>
|
||||||
|
<span class="description">Never be notified.</span>
|
||||||
|
<span class="js-select-button-text hidden-select-button-text">
|
||||||
|
Stop ignoring
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### With avatars
|
||||||
|
|
||||||
|
Add avatars to a select menu to help indicate when a menu list item represents a user.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Choose an item
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-gravatar">
|
||||||
|
<%= avatar_for(current_user, 20, :alt => "") %>
|
||||||
|
</span>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">
|
||||||
|
probot
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-gravatar">
|
||||||
|
<%= avatar_for(current_user, 20, :alt => "") %>
|
||||||
|
</span>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">
|
||||||
|
probot
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-gravatar">
|
||||||
|
<%= avatar_for(current_user, 20, :alt => "") %>
|
||||||
|
</span>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">
|
||||||
|
probot
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### With dismiss icon
|
||||||
|
|
||||||
|
Indicate how to toggle the selected state on a select menu list item with the addition of a dismiss icon.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Choose an item
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<button type="button" class="select-menu-item selected js-navigation-item width-full">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">
|
||||||
|
<%= octicon("x", :"aria-label" => "Click to remove") %>
|
||||||
|
Item 1
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="select-menu-item js-navigation-item width-full">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">
|
||||||
|
<%= octicon("x", :"aria-label" => "Click to remove") %>
|
||||||
|
Item 2
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="select-menu-item js-navigation-item width-full">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">
|
||||||
|
<%= octicon("x", :"aria-label" => "Click to remove") %>
|
||||||
|
Item 3
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Menu alignment
|
||||||
|
|
||||||
|
By default select menus are automatically aligned to the top left corner of an element, but you can also customize that with a few utilities or custom display.
|
||||||
|
|
||||||
|
### Right aligned menus
|
||||||
|
|
||||||
|
When select menus are right aligned, you can also right-align the select menu's popover with `.select-menu-modal-right`.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu float-right select-menu-modal-right js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Choose an item
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Button options
|
||||||
|
|
||||||
|
Customize the select menu's trigger button by changing the button modifier class, enabling stateful text, and more.
|
||||||
|
|
||||||
|
### Style options
|
||||||
|
|
||||||
|
Since select menus are powered by JavaScript behaviors, the specific display of your select menu button is up to you and your use case.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Default button
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn btn-primary select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Primary button
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn btn-outline select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Outline button
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn-link select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Link button
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stateful text
|
||||||
|
|
||||||
|
Select menu buttons have the option of showing the current selection in the button itself. Wrap the string you intend to update with a `.js-select-button` and the select menu JavaScript will automatically update the contents of that element with the selected item's text.
|
||||||
|
|
||||||
|
Open the select menu below and click different options to see it in action.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="js-select-button">master</span>
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">master</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">feature-branch</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">refactor-component-name</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Emphasized text
|
||||||
|
|
||||||
|
Sometimes you want to spice up your select menu with an emphasized label for the type of content within the menu. For example, you show `Branch:` in front of the current branch on our repository Code page. Within the button, wrap your string in an `<i>` element and you're good to go.
|
||||||
|
|
||||||
|
As shown below, emphasized text works great with the stateful text functionality mentioned above.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i>Branch:</i>
|
||||||
|
<span class="js-select-button">master</span>
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">master</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">feature-branch</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">refactor-component-name</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Button avatars
|
||||||
|
|
||||||
|
Add an avatar to the button, like we do in our context switcher on the logged in dashboard.
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<div class="select-menu js-menu-container js-select-menu">
|
||||||
|
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<div class="select-menu-button-gravatar js-select-button-gravatar">
|
||||||
|
<%= avatar_for(current_user, 20, :"aria-label" => "") %>
|
||||||
|
</div>
|
||||||
|
<span class="js-select-button css-truncate css-truncate-target">probot</span>
|
||||||
|
</button>
|
||||||
|
<div class="select-menu-modal-holder">
|
||||||
|
<div class="select-menu-modal js-menu-content">
|
||||||
|
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||||
|
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||||
|
<span class="select-menu-title">Options</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-menu-list js-navigation-container">
|
||||||
|
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-gravatar">
|
||||||
|
<%= avatar_for(current_user, 20, :"aria-label" => "") %>
|
||||||
|
</span>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">
|
||||||
|
probot
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-gravatar">
|
||||||
|
<%= avatar_for(current_user, 20, :"aria-label" => "") %>
|
||||||
|
</span>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">
|
||||||
|
probot
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a href="#url" class="select-menu-item js-navigation-item">
|
||||||
|
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||||
|
<span class="select-menu-item-gravatar">
|
||||||
|
<%= avatar_for(current_user, 20, :"aria-label" => "") %>
|
||||||
|
</span>
|
||||||
|
<span class="select-menu-item-text js-select-button-text">
|
||||||
|
probot
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
420
gatsby-docs/src/pages/components/select-menu.md
Normal file
420
gatsby-docs/src/pages/components/select-menu.md
Normal file
@ -0,0 +1,420 @@
|
|||||||
|
---
|
||||||
|
title: Select Menu
|
||||||
|
status: New Release
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/select-menu'
|
||||||
|
bundle: select-menu
|
||||||
|
---
|
||||||
|
|
||||||
|
The `SelectMenu` component provides advanced support for navigation, filtering, and more. Any menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
## Basic example
|
||||||
|
|
||||||
|
Use a `<details>` element to toggle the Select Menu. The `<summary>` element can be styled in many ways. In the example below it's a `.btn`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<details class="details-reset details-overlay" open>
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||||
|
</menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 180px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Add a `.SelectMenu-header` to house a clear title and a close button. Note that the close button is only shown on narrow screens (mobile).
|
||||||
|
|
||||||
|
## Right aligned
|
||||||
|
|
||||||
|
In case the Select Menu should be aligned to the right, use `SelectMenu right-0`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex flex-justify-end">
|
||||||
|
|
||||||
|
<details class="details-reset details-overlay" open>
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu right-0">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||||
|
</menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 180px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Selected state
|
||||||
|
|
||||||
|
Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-checked="true"` is set.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<details class="details-reset details-overlay" open>
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||||
|
<svg class="SelectMenu-icon octicon octicon-check" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||||
|
Selected state
|
||||||
|
</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||||
|
<svg class="SelectMenu-icon octicon octicon-check" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||||
|
Default state
|
||||||
|
</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||||
|
<svg class="SelectMenu-icon octicon octicon-check" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||||
|
Selected state
|
||||||
|
</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitemcheckbox">Default state</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitemcheckbox">Default state</button>
|
||||||
|
</menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 250px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## List items
|
||||||
|
|
||||||
|
The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). List items are also customizable with options for avatars, additional icons, and multiple lines of text. Use utility classes like `mr-2`, `d-flex` or `float-right` in case more custom styling is needed.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<details class="details-reset details-overlay" open>
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<button class="SelectMenu-item" role="menuitem">
|
||||||
|
Text only
|
||||||
|
</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">
|
||||||
|
<img class="avatar avatar-small mr-2" src="https://avatars.githubusercontent.com/hubot?s=40" alt="hubot" height="20" width="20">
|
||||||
|
With an avatar
|
||||||
|
</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">
|
||||||
|
With a status icon <svg class="octicon octicon-primitive-dot color-green-5 ml-2" style="fill:currentColor" viewBox="0 0 8 16" version="1.1" width="8" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"></path></svg>
|
||||||
|
</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">
|
||||||
|
With a <span class="Label bg-blue" title="Label: label">label</span>
|
||||||
|
</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">
|
||||||
|
With a counter <span class="Counter bg-gray-2 ml-1">16</span>
|
||||||
|
</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">
|
||||||
|
<h5>With a heading</h5>
|
||||||
|
<span>and some longer description</span>
|
||||||
|
</button>
|
||||||
|
</menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 300px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Divider
|
||||||
|
|
||||||
|
The Select Menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<details class="details-reset details-overlay" open>
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||||
|
<div class="SelectMenu-divider">More options</div>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 4</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||||
|
</menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 260px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Additional filter and footer
|
||||||
|
|
||||||
|
If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the Select Menu to the top of the screen. This makes sure the filter input stays at the same position while typing.
|
||||||
|
|
||||||
|
Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for additional information, but can also greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<details class="details-reset details-overlay" open>
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu SelectMenu--hasFilter">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<form class="SelectMenu-filter">
|
||||||
|
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||||
|
</form>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 1</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 2</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 3</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 4</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 5</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 6</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 7</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 8</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 9</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 10</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 11</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 12</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 13</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 14</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 15</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 16</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 17</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 18</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 19</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 20</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 21</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 22</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 23</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 24</a>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 25</a>
|
||||||
|
</menu>
|
||||||
|
<footer class="SelectMenu-footer">Showing 25 of 25</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 380px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tabs
|
||||||
|
|
||||||
|
Sometimes you need two or more lists of items in your Select Menu, e.g. branches and tags. Select Menu lists can be tabbed with the addition of `.SelectMenu-tabs` above the menu.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<details class="details-reset details-overlay" open>
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu SelectMenu--hasFilter">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<form class="SelectMenu-filter">
|
||||||
|
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||||
|
</form>
|
||||||
|
<nav class="SelectMenu-tabs">
|
||||||
|
<button class="SelectMenu-tab" aria-selected="true">Branches</button>
|
||||||
|
<button class="SelectMenu-tab">Tags</button>
|
||||||
|
</nav>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Branch 1</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Branch 2</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Branch 3</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Branch 4</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Branch 5</button>
|
||||||
|
</menu>
|
||||||
|
<menu class="SelectMenu-list" hidden>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Tag 1</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Tag 2</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Tag 3</button>
|
||||||
|
</menu>
|
||||||
|
<footer class="SelectMenu-footer">Showing 5 of 5</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 380px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Message
|
||||||
|
|
||||||
|
A `SelectMenu-message` can be used to show different kind of messages to a user. Use utility classes to further style the message.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<details class="details-reset details-overlay" open>
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||||
|
<div class="SelectMenu-message border-bottom border-top bg-red-0 text-red p-2">Message goes here</div>
|
||||||
|
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||||
|
</menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 200px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Loading
|
||||||
|
|
||||||
|
When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<details class="details-reset details-overlay">
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu SelectMenu--hasFilter">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<form class="SelectMenu-filter">
|
||||||
|
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||||
|
</form>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<div class="SelectMenu-loading">
|
||||||
|
<svg height="32" class="octicon octicon-octoface anim-pulse" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"></path></svg>
|
||||||
|
</div>
|
||||||
|
</menu>
|
||||||
|
<footer class="SelectMenu-footer">Loading...</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 220px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Blankslate
|
||||||
|
|
||||||
|
Sometimes a Select Menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<details class="details-reset details-overlay" open>
|
||||||
|
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Choose an item
|
||||||
|
</summary>
|
||||||
|
<div class="SelectMenu">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<h3 class="SelectMenu-title">Title</h3>
|
||||||
|
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></button>
|
||||||
|
</header>
|
||||||
|
<menu class="SelectMenu-list">
|
||||||
|
<div class="SelectMenu-blankslate">
|
||||||
|
<svg height="32" class="octicon octicon-repo color-gray-3" viewBox="0 0 12 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
|
||||||
|
<h4 class="my-2">No repositories</h4>
|
||||||
|
<p class="mb-3 text-gray">We didn’t find any matching repositories that you can commit to.</p>
|
||||||
|
<button type="button" class="btn btn-sm btn-primary">Create a repository</button>
|
||||||
|
</div>
|
||||||
|
</menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||||
|
<div class="d-none d-sm-block" style="height: 260px"> <!-- min height for > sm --> </div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## github.com usage
|
||||||
|
|
||||||
|
When adding the `.SelectMenu` component on github.com, use the [`<details-menu>`](https://github.com/github/details-menu-element) element. It will :tophat: magically make the `.SelectMenu` work. Here a basic example:
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<details class="details-reset details-overlay" id="my-select-menu">
|
||||||
|
<summary class="btn" title="Pick an item">
|
||||||
|
<span>Choose</span>
|
||||||
|
<span class="dropdown-caret"></span>
|
||||||
|
</summary>
|
||||||
|
<details-menu class="SelectMenu" role="menu">
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<header class="SelectMenu-header">
|
||||||
|
<span class="SelectMenu-title">My Select Menu</span>
|
||||||
|
<button class="SelectMenu-closeButton" type="button" data-toggle-for="my-select-menu">
|
||||||
|
<%= octicon("x", :"aria-label" => "Close menu") %>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
<div class="SelectMenu-list">
|
||||||
|
<a class="SelectMenu-item" href="" role="menuitem">Item 1</a>
|
||||||
|
<a class="SelectMenu-item" href="" role="menuitem">Item 2</a>
|
||||||
|
<a class="SelectMenu-item" href="" role="menuitem">Item 3</a>
|
||||||
|
</div>
|
||||||
|
</details-menu>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
If loading content should be deferred, use the [`<include-fragment>`](https://github.com/github/details-menu-element) element:
|
||||||
|
|
||||||
|
```erb
|
||||||
|
<details-menu class="SelectMenu" src="/my-menu" preload>
|
||||||
|
<div class="SelectMenu-modal">
|
||||||
|
<include-fragment class="SelectMenu-loading" aria-label="Menu is loading">
|
||||||
|
<%= octicon('octoface', class: "anim-pulse", :height => 32) %>
|
||||||
|
</include-fragment>
|
||||||
|
</div>
|
||||||
|
</details-menu>
|
||||||
|
```
|
||||||
|
|
||||||
|
It will add a pulsing :octoface: icon while the content is loading.
|
||||||
80
gatsby-docs/src/pages/components/subhead.md
Normal file
80
gatsby-docs/src/pages/components/subhead.md
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
---
|
||||||
|
title: Subhead
|
||||||
|
path: components/subhead
|
||||||
|
status: Stable
|
||||||
|
status_issue: 'https://github.com/github/design-systems/issues/101'
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/subhead'
|
||||||
|
bundle: subhead
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
The basic Subhead consists of a `.Subhead` container, which has a light gray bottom border. Use `.Subhead-heading` for the heading itself. It's an `<h2>` sized heading with normal font-weight.
|
||||||
|
|
||||||
|
Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
|
||||||
|
|
||||||
|
```html title="Subhead"
|
||||||
|
<div class="Subhead">
|
||||||
|
<div class="Subhead-heading">Plain subhead</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for separating sections on a settings page.
|
||||||
|
|
||||||
|
```html title="Spacious Subhead"
|
||||||
|
<div class="Subhead Subhead--spacious">
|
||||||
|
<div class="Subhead-heading">Spacious subhead</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can add a one line description to the subhead with `.Subhead-description`.
|
||||||
|
|
||||||
|
```html title="Subhead with description"
|
||||||
|
<div class="Subhead">
|
||||||
|
<div class="Subhead-heading">Subhead with description</div>
|
||||||
|
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
For longer descriptions, it is recommended that you use a paragraph below the Subhead.
|
||||||
|
|
||||||
|
```html title="Subhead with longer description"
|
||||||
|
<div class="Subhead">
|
||||||
|
<div class="Subhead-heading">Plain subhead</div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
This is a longer description that is sitting below the Subheader. It's much longer than a description that could sit comfortably in the Subhead. It might even have <strong>bold</strong> text. <a href="#">Click to learn more.</a>
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can add a button or something to the right of `.Subhead-heading` with the `.Subhead-actions` element.
|
||||||
|
|
||||||
|
```html title="Subhead with actions"
|
||||||
|
<div class="Subhead">
|
||||||
|
<div class="Subhead-heading">Subhead with button</div>
|
||||||
|
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Subhead Subhead--spacious">
|
||||||
|
<div class="Subhead-heading">Subhead with link</div>
|
||||||
|
<div class="Subhead-actions"><a href="#url">Learn more</a></div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use all the elements together to create a Subhead with actions and a description.
|
||||||
|
|
||||||
|
```html title="Subhead with actions and description"
|
||||||
|
<div class="Subhead">
|
||||||
|
<div class="Subhead-heading">Subhead with actions and description</div>
|
||||||
|
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||||
|
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use the `.Subhead-heading--danger` modifier to make the text bold and red. This is useful for warning users.
|
||||||
|
|
||||||
|
```html title="Subhead danger"
|
||||||
|
<div class="Subhead">
|
||||||
|
<div class="Subhead-heading Subhead-heading--danger">Danger zone</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
156
gatsby-docs/src/pages/components/toasts.md
Normal file
156
gatsby-docs/src/pages/components/toasts.md
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
---
|
||||||
|
title: Toasts
|
||||||
|
path: components/toasts
|
||||||
|
status: Experimental
|
||||||
|
status_issue: 'https://github.com/github/design-systems/issues/101'
|
||||||
|
source: ''
|
||||||
|
bundle: toasts
|
||||||
|
---
|
||||||
|
|
||||||
|
Toasts are used to show live, time-sensitive feedback to users.
|
||||||
|
|
||||||
|
|
||||||
|
## Default
|
||||||
|
|
||||||
|
To create a default toast, use `.Toast`. Always use the `info` icon for default messages.
|
||||||
|
|
||||||
|
```html title="Default toast"
|
||||||
|
<div class="p-1">
|
||||||
|
<div class="Toast">
|
||||||
|
<span class="Toast-icon">
|
||||||
|
<!-- <%= octicon "info" %> -->
|
||||||
|
<svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="Toast-content">Toast message goes here</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
The Toast content is formattable. We recommend keeping your message under 140 characters.
|
||||||
|
|
||||||
|
```html title="Toast with long text"
|
||||||
|
<div class="p-1">
|
||||||
|
<div class="Toast">
|
||||||
|
<span class="Toast-icon">
|
||||||
|
<!-- <%= octicon "info" %> -->
|
||||||
|
<svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="Toast-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <strong>Aenean commodo ligula eget dolor.</strong> Aenean massa. Cum sociis <em>natoque</em> penatibus et ma</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Variations
|
||||||
|
|
||||||
|
Use the success, warning, and error modifiers to communicate different states.
|
||||||
|
|
||||||
|
Always use the `check` octicon for success states.
|
||||||
|
|
||||||
|
```html title="Success toast"
|
||||||
|
<div class="p-1">
|
||||||
|
<div class="Toast Toast--success">
|
||||||
|
<span class="Toast-icon">
|
||||||
|
<!-- <%= octicon "check" %> -->
|
||||||
|
<svg class="octicon octicon-check" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="Toast-content">Success message goes here.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Always use the `alert` octicon for warning states.
|
||||||
|
|
||||||
|
```html title="Warning toast"
|
||||||
|
<div class="p-1">
|
||||||
|
<div class="Toast Toast--warning">
|
||||||
|
<span class="Toast-icon">
|
||||||
|
<!-- <%= octicon "alert" %> -->
|
||||||
|
<svg class="octicon octicon-alert" style="fill:currentColor" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="Toast-content">Warning message goes here.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Always use the `stop` octicon for error states.
|
||||||
|
|
||||||
|
```html title="Error toast"
|
||||||
|
<div class="p-1">
|
||||||
|
<div class="Toast Toast--error">
|
||||||
|
<span class="Toast-icon">
|
||||||
|
<!-- <%= octicon "stop" %> -->
|
||||||
|
<svg class="octicon octicon-stop" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="Toast-content">Error message goes here</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Toast with dismiss
|
||||||
|
|
||||||
|
Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
|
||||||
|
|
||||||
|
```html title="Toast with dismiss"
|
||||||
|
<div class="p-1">
|
||||||
|
<div class="Toast">
|
||||||
|
<span class="Toast-icon">
|
||||||
|
<!-- <%= octicon "info" %> -->
|
||||||
|
<svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="Toast-content">This toast is dismissable.</span>
|
||||||
|
<button class="Toast-dismissButton">
|
||||||
|
<svg class="octicon octicon-x" style="fill:currentcolor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Toast with link
|
||||||
|
|
||||||
|
Include a link to allow users to take actions within a Toast.
|
||||||
|
|
||||||
|
```html title="Toast with link"
|
||||||
|
<div class="p-1">
|
||||||
|
<div class="Toast">
|
||||||
|
<span class="Toast-icon">
|
||||||
|
<!-- <%= octicon "info" %> -->
|
||||||
|
<svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="Toast-content">Toast message goes here </strong><a href="#">Action.</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Toast animation
|
||||||
|
|
||||||
|
The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom.
|
||||||
|
|
||||||
|
```html title="Toast animating"
|
||||||
|
<div class="p-1">
|
||||||
|
<div class="Toast Toast--animateIn">
|
||||||
|
<span class="Toast-icon">
|
||||||
|
<!-- <%= octicon "info" %> -->
|
||||||
|
<svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="Toast-content">Toast message goes here.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Toast position
|
||||||
|
|
||||||
|
Use the `position-fixed bottom-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport.
|
||||||
|
|
||||||
|
```html title="Toast animating"
|
||||||
|
<div class="border bg-gray-light" style="height:150px">
|
||||||
|
<div class="position-fixed bottom-0">
|
||||||
|
<div class="Toast">
|
||||||
|
<span class="Toast-icon">
|
||||||
|
<!-- <%= octicon "info" %> -->
|
||||||
|
<svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="Toast-content">Toast message goes here.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
120
gatsby-docs/src/pages/components/tooltips.md
Normal file
120
gatsby-docs/src/pages/components/tooltips.md
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
---
|
||||||
|
title: Tooltips
|
||||||
|
path: components/tooltips
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/tooltips'
|
||||||
|
bundle: tooltips
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Add tooltips built entirely in CSS to nearly any element.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
## Implementation and accessibility
|
||||||
|
|
||||||
|
Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.
|
||||||
|
|
||||||
|
Before adding a tooltip, please consider: Is this information essential and necessary* Can the UI be made clearer? Can the information be shown on the page by default?
|
||||||
|
|
||||||
|
**Attention**: we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content, or consider using `title` for supplemental information.
|
||||||
|
|
||||||
|
**Note:** Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.
|
||||||
|
|
||||||
|
## Tooltip direction
|
||||||
|
Specify the direction of a tooltip with north, south, east, and west directions:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex flex-justify-center pt-4">
|
||||||
|
<span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
|
||||||
|
.tooltipped-nw
|
||||||
|
</span>
|
||||||
|
<span class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
|
||||||
|
.tooltipped-n
|
||||||
|
</span>
|
||||||
|
<span class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
|
||||||
|
.tooltipped-ne
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-justify-center">
|
||||||
|
<span class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
|
||||||
|
.tooltipped-w
|
||||||
|
</span>
|
||||||
|
<span class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
|
||||||
|
.tooltipped-e
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-justify-center pb-4">
|
||||||
|
<span class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
|
||||||
|
.tooltipped-sw
|
||||||
|
</span>
|
||||||
|
<span class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
|
||||||
|
.tooltipped-s
|
||||||
|
</span>
|
||||||
|
<span class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
|
||||||
|
.tooltipped-se
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tooltip alignment
|
||||||
|
Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex flex-justify-center pt-4">
|
||||||
|
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||||
|
.tooltipped-nw .tooltipped-align-right-1
|
||||||
|
</span>
|
||||||
|
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||||
|
.tooltipped-ne .tooltipped-align-left-1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-justify-center">
|
||||||
|
<span class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||||
|
.tooltipped-nw .tooltipped-align-right-2
|
||||||
|
</span>
|
||||||
|
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||||
|
.tooltipped-ne .tooltipped-align-left-2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-justify-center">
|
||||||
|
<span class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||||
|
.tooltipped-sw .tooltipped-align-right-1
|
||||||
|
</span>
|
||||||
|
<span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
|
||||||
|
.tooltipped-se .tooltipped-align-left-1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-justify-center pb-4">
|
||||||
|
<span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||||
|
.tooltipped-sw .tooltipped-align-right-2
|
||||||
|
</span>
|
||||||
|
<span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
|
||||||
|
.tooltipped-se .tooltipped-align-left-2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tooltips with multiple lines
|
||||||
|
Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`.
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex flex-justify-center pt-6">
|
||||||
|
<span class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
|
||||||
|
.tooltipped-multiline
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tooltips with no delay
|
||||||
|
|
||||||
|
By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex flex-justify-center pt-4">
|
||||||
|
<span class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
|
||||||
|
.tooltipped-no-delay
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
24
gatsby-docs/src/pages/components/truncate.md
Normal file
24
gatsby-docs/src/pages/components/truncate.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
---
|
||||||
|
title: Truncate
|
||||||
|
path: components/truncate
|
||||||
|
status: Stable
|
||||||
|
source: 'https://github.com/primer/css/tree/master/src/truncate'
|
||||||
|
bundle: truncate
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
`.css-truncate` will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of `.css-truncate-target`. Unless the full text is so long that it affects performace, always add `title` to the truncated element so the full text can still be seen.
|
||||||
|
|
||||||
|
```html title="Truncate"
|
||||||
|
<span class="branch-ref css-truncate css-truncate-target" title="really-long-branch-name">
|
||||||
|
really-long-branch-name
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can reveal the entire string on hover with the addition of `.expandable`.
|
||||||
|
|
||||||
|
```html title="Truncate Expandable"
|
||||||
|
<span class="css-truncate expandable">
|
||||||
|
<span class="branch-ref css-truncate-target">this-is-a-really-long-branch-name</span>
|
||||||
|
</span>
|
||||||
|
```
|
||||||
104
gatsby-docs/src/pages/getting-started.md
Normal file
104
gatsby-docs/src/pages/getting-started.md
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
---
|
||||||
|
title: Getting started
|
||||||
|
path: getting-started/index
|
||||||
|
---
|
||||||
|
|
||||||
|
Primer CSS is [open-sourced on GitHub](https://github.com/primer/primer) and [available on npm](https://www.npmjs.com/package/primer).
|
||||||
|
|
||||||
|
## Installing via npm
|
||||||
|
|
||||||
|
We recommend installing Primer CSS with npm: `npm install --save @primer/css`.
|
||||||
|
|
||||||
|
### Before you start
|
||||||
|
|
||||||
|
Primer CSS requires npm version 3 or above. You can check which version you have by running `npm -v`. If you have a version that's older than 3.0, you can update it with `npm install npm@latest -g`. For more info, read the [npm install docs](https://docs.npmjs.com/getting-started/installing-node).
|
||||||
|
|
||||||
|
### Initialize npm project
|
||||||
|
|
||||||
|
Begin by initializing your project with a `package.json` file. You can read more on how to do this [in the npm documentation](https://docs.npmjs.com/getting-started/using-a-package.json#creating-a-packagejson).
|
||||||
|
|
||||||
|
### Install Primer CSS
|
||||||
|
|
||||||
|
Install the Primer CSS npm package modules by running `npm install @primer/css`. This will install all of the SCSS source files into the `node_modules/@primer/css` directory.
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm install @primer/css --save
|
||||||
|
```
|
||||||
|
|
||||||
|
### Paths
|
||||||
|
|
||||||
|
Here's what you need to know about how the files are structured in both git and in the published npm module:
|
||||||
|
|
||||||
|
- In git, all of the SCSS source files live in the `src/` directory.
|
||||||
|
- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@import '@primer/css/utilities/index.scss';
|
||||||
|
```
|
||||||
|
|
||||||
|
- All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
|
||||||
|
|
||||||
|
### For a Jekyll site
|
||||||
|
|
||||||
|
Make sure you have [Jekyll](https://jekyllrb.com/) version `3.3.1` or greater with:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
jekyll -v
|
||||||
|
```
|
||||||
|
|
||||||
|
If you have an older version, follow the instructions in the [upgrading docs](https://jekyllrb.com/docs/upgrading/).
|
||||||
|
|
||||||
|
Once you have Jekyll up and running, you will need to add this configuration to your `_config.yml` file. This let's the sass compiler know where your code lives.
|
||||||
|
|
||||||
|
```yml
|
||||||
|
sass:
|
||||||
|
# Where you keep your scss files
|
||||||
|
sass_dir: assets/css/
|
||||||
|
# Where sass should look for other scss
|
||||||
|
load_paths:
|
||||||
|
- node_modules/
|
||||||
|
```
|
||||||
|
|
||||||
|
It's best practice to import all of this scss into one file, usually named `index.scss`. From this file you'll import one or more Primer CSS bundles and any other custom code you write.
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@import '@primer/css/core/index.scss';
|
||||||
|
// These files live in the same directory as the index file.
|
||||||
|
@import './custom-1.scss';
|
||||||
|
@import './custom-2.scss';
|
||||||
|
```
|
||||||
|
|
||||||
|
Here's an example of how it might look if you installed only a few Primer CSS components with some custom variable overrides. The `$blue` uses the default primer blue in the text utilities, then the new blue in `"custom-that-uses-primer-variables.scss"` and `.foo`.
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@import '@primer/css/utilities/index.scss';
|
||||||
|
@import 'primer-buttons/index.scss';
|
||||||
|
|
||||||
|
// Import color variables for custom code
|
||||||
|
@import 'primer-support/index.scss';
|
||||||
|
|
||||||
|
// Override default blue
|
||||||
|
$blue: #0000ff;
|
||||||
|
|
||||||
|
@import './custom-that-uses-primer-variables.scss';
|
||||||
|
|
||||||
|
.foo {
|
||||||
|
background: $blue;
|
||||||
|
font-size: $h2-size;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Don't forget to add the compiled CSS to the `<head>` section of your page.
|
||||||
|
|
||||||
|
```html inert=true
|
||||||
|
<link href="path/to/style.css" rel="stylesheet" />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using Primer CSS on a static site
|
||||||
|
|
||||||
|
You won't need to install any node modules or Sass compilers for a static site; you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/@primer/css/dist/primer.css) from the [unpkg.com](https://unpkg.com) and host it yourself. If that's not an option, you can include a CDN link in your HTML:
|
||||||
|
|
||||||
|
```html inert=true
|
||||||
|
<link href="https://unpkg.com/primer/build/build.css" rel="stylesheet" />
|
||||||
|
```
|
||||||
41
gatsby-docs/src/pages/index.md
Normal file
41
gatsby-docs/src/pages/index.md
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
---
|
||||||
|
title: Primer CSS
|
||||||
|
---
|
||||||
|
|
||||||
|
import {Header, Sidebar, Container, Head} from '@primer/gatsby-theme-doctocat'
|
||||||
|
import Hero from '../components/hero'
|
||||||
|
import {Box, Flex} from '@primer/components'
|
||||||
|
|
||||||
|
export default ({children}) => (
|
||||||
|
<Flex flexDirection="column" minHeight="100vh">
|
||||||
|
<Head title="Primer CSS" />
|
||||||
|
<Header />
|
||||||
|
<Flex flex="1 1 auto" flexDirection={['column', 'column', 'row']}>
|
||||||
|
<Sidebar />
|
||||||
|
<Box width="100%">
|
||||||
|
<Hero />
|
||||||
|
<Container>{children}</Container>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
)
|
||||||
|
|
||||||
|
# Introduction
|
||||||
|
|
||||||
|
Our goal is to create a system that enables us to build consistent user experiences with ease, yet with enough flexibility to support the broad spectrum of GitHub websites. This goal is embedded in our design and code decisions. Our approach to CSS is influenced by Object Oriented CSS principles, functional CSS, and BEM architecture.
|
||||||
|
|
||||||
|
## Highly reusable, flexible styles
|
||||||
|
|
||||||
|
Styles can be mixed and matched to achieve many different layouts, independent of their location. These styles fall into three categories:
|
||||||
|
|
||||||
|
## Systematically designed for GitHub
|
||||||
|
|
||||||
|
Primer CSS is built upon systems that form the foundation of our styles such as spacing, typography, and color. This systematic approach helps ensure our styles are consistent and interoperable with each other.
|
||||||
|
|
||||||
|
## Structure
|
||||||
|
|
||||||
|
Primer CSS is published to npm as `@primer/css`. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
|
||||||
|
|
||||||
|
- **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
|
||||||
|
- **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
|
||||||
|
- **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
|
||||||
29
now.json
29
now.json
@ -1,26 +1,13 @@
|
|||||||
{
|
{
|
||||||
"version": 1,
|
"version": 2,
|
||||||
"name": "primer-css",
|
"name": "primer-css",
|
||||||
"alias": "primer-css.now.sh",
|
"alias": "primer-css.now.sh",
|
||||||
"files": [
|
"builds": [
|
||||||
"docs",
|
{
|
||||||
"lib",
|
"src": "gatsby-docs/package.json",
|
||||||
"next.config.js",
|
"use": "@now/static-build",
|
||||||
"package.json",
|
"config": {"distDir": "public"}
|
||||||
"package-lock.json",
|
|
||||||
"postcss.config.js",
|
|
||||||
"pages",
|
|
||||||
"script",
|
|
||||||
"src",
|
|
||||||
"static"
|
|
||||||
],
|
|
||||||
"scale": {
|
|
||||||
"sfo": {
|
|
||||||
"min": 1,
|
|
||||||
"max": 3
|
|
||||||
}
|
}
|
||||||
},
|
],
|
||||||
"engines": {
|
"routes": [{"src": "/(.*)", "dest": "/gatsby-docs/$1"}]
|
||||||
"node": "10"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
1345
package-lock.json
generated
1345
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@ -34,8 +34,8 @@
|
|||||||
"postpublish": "script/postpublish",
|
"postpublish": "script/postpublish",
|
||||||
"prepublishOnly": "script/prepublish",
|
"prepublishOnly": "script/prepublish",
|
||||||
"publish-storybook": "script/publish-storybook",
|
"publish-storybook": "script/publish-storybook",
|
||||||
"start": "next dev",
|
"start": "npm run dev",
|
||||||
"dev": "next dev",
|
"dev": "cd gatsby-docs && npm install && npm run develop",
|
||||||
"start-storybook": "start-storybook -p 8001",
|
"start-storybook": "start-storybook -p 8001",
|
||||||
"build-storybook": "build-storybook -o .storybuild",
|
"build-storybook": "build-storybook -o .storybuild",
|
||||||
"test": "npm-run-all -s test-urls test-migrate",
|
"test": "npm-run-all -s test-urls test-migrate",
|
||||||
@ -92,7 +92,7 @@
|
|||||||
"primer-colors": "^1.0.1",
|
"primer-colors": "^1.0.1",
|
||||||
"prism-github": "^1.1.0",
|
"prism-github": "^1.1.0",
|
||||||
"prop-types": "^15.6.2",
|
"prop-types": "^15.6.2",
|
||||||
"raw-loader": "^0.5.1",
|
"raw-loader": "0.5.1",
|
||||||
"react": "16.8.1",
|
"react": "16.8.1",
|
||||||
"react-bodymovin": "2.0.0",
|
"react-bodymovin": "2.0.0",
|
||||||
"react-dom": "16.8.1",
|
"react-dom": "16.8.1",
|
||||||
@ -121,5 +121,10 @@
|
|||||||
"unist-util-stringify-position": "^2.0.0",
|
"unist-util-stringify-position": "^2.0.0",
|
||||||
"unist-util-visit": "^1.4.0",
|
"unist-util-visit": "^1.4.0",
|
||||||
"webpack": "4.20.2"
|
"webpack": "4.20.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@compositor/kit": "1.0.47",
|
||||||
|
"html2react": "1.2.1",
|
||||||
|
"react-styled-frame": "1.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user