Skip to content
Permalink
Browse files

Merge branch 'master' into pr/867

  • Loading branch information
simurai committed Aug 23, 2019
2 parents e4b6b38 + 6607f33 commit 7fd6d37fba6357ab6ea4794345cf93b1a3f5c350
Showing with 19,637 additions and 6,504 deletions.
  1. +2 −0 .gitignore
  2. +0 −9 docs/DetailsDialog.js
  3. +0 −67 docs/PackageHeader.js
  4. +0 −32 docs/StatusLabel.js
  5. +0 −2 docs/components.js
  6. +0 −6 docs/constants.js
  7. +31 −16 {pages/css → docs/content}/components/alerts.md
  8. +118 −35 {pages/css → docs/content}/components/avatars.md
  9. +43 −26 {pages/css → docs/content}/components/blankslate.md
  10. +1 −4 {pages/css → docs/content}/components/box-overlay.md
  11. +66 −57 {pages/css → docs/content}/components/box.md
  12. +49 −0 docs/content/components/boxed-groups.md
  13. +5 −6 {pages/css → docs/content}/components/branch-name.md
  14. +1 −3 {pages/css → docs/content}/components/breadcrumb.md
  15. +22 −29 {pages/css → docs/content}/components/buttons.md
  16. +33 −14 {pages/css → docs/content}/components/dropdown.md
  17. +11 −2 {pages/css → docs/content}/components/flash-banner.md
  18. +66 −47 {pages/css → docs/content}/components/forms.md
  19. 0 {pages/css → docs/content}/components/header.md
  20. 0 {pages/css → docs/content}/components/index.md
  21. +13 −16 {pages/css → docs/content}/components/labels.md
  22. 0 {pages/css → docs/content}/components/markdown.md
  23. +3 −5 {pages/css → docs/content}/components/marketing-buttons.md
  24. +212 −53 {pages/css → docs/content}/components/navigation.md
  25. +7 −7 {pages/css → docs/content}/components/pagehead.md
  26. +3 −7 {pages/css → docs/content}/components/pagination.md
  27. +14 −14 {pages/css → docs/content}/components/popover.md
  28. +12 −9 {pages/css → docs/content}/components/progress.md
  29. 0 {pages/css → docs/content}/components/select-menu-deprecated.md
  30. +170 −54 {pages/css → docs/content}/components/select-menu.md
  31. +7 −7 {pages/css → docs/content}/components/subhead.md
  32. +227 −0 docs/content/components/toasts.md
  33. +5 −5 {pages/css → docs/content}/components/tooltips.md
  34. +2 −2 {pages/css → docs/content}/components/truncate.md
  35. +99 −0 docs/content/getting-started/contributing.md
  36. +20 −20 {pages/css → docs/content}/getting-started/index.md
  37. +100 −0 docs/content/index.mdx
  38. +99 −52 {pages/css → docs/content}/objects/grid.md
  39. 0 {pages/css → docs/content}/objects/index.md
  40. +3 −4 {pages/css → docs/content}/objects/layout.md
  41. +7 −4 {pages/css → docs/content}/objects/table-object.md
  42. +1 −1 {pages/css → docs/content}/principles/accessibility.md
  43. +1 −1 {pages/css → docs/content}/principles/html.md
  44. +1 −1 {pages/css → docs/content}/principles/index.md
  45. +1 −1 {pages/css → docs/content}/principles/scss.md
  46. +43 −20 {pages/css → docs/content}/support/breakpoints.md
  47. +75 −0 docs/content/support/color-system.mdx
  48. 0 {pages/css → docs/content}/support/index.md
  49. 0 {pages/css → docs/content}/support/marketing-variables.md
  50. +21 −19 {pages/css → docs/content}/support/spacing.md
  51. +16 −14 {pages/css → docs/content}/support/typography.md
  52. +0 −2 {pages/css → docs/content}/tools/atom-packages.md
  53. 0 {pages/css → docs/content}/tools/docset.md
  54. 0 {pages/css → docs/content}/tools/index.md
  55. +5 −5 {pages/css → docs/content}/tools/linting.md
  56. 0 {pages/css → docs/content}/tools/local-primer.md
  57. +9 −9 {pages/css → docs/content}/tools/prototyping.md
  58. 0 {pages/css → docs/content}/tools/testing.md
  59. +2 −2 {pages/css → docs/content}/utilities/animations.md
  60. +21 −21 pages/css/utilities/borders.md → docs/content/utilities/borders.mdx
  61. +14 −13 {pages/css → docs/content}/utilities/box-shadow.md
  62. +18 −23 pages/css/utilities/colors.md → docs/content/utilities/colors.mdx
  63. +3 −3 {pages/css → docs/content}/utilities/details.md
  64. +38 −38 {pages/css → docs/content}/utilities/flexbox.md
  65. 0 {pages/css → docs/content}/utilities/index.md
  66. +22 −22 {pages/css → docs/content}/utilities/layout.md
  67. +7 −7 {pages/css → docs/content}/utilities/margin.md
  68. 0 {pages/css → docs/content}/utilities/marketing-borders.md
  69. +2 −2 {pages/css → docs/content}/utilities/marketing-filters.md
  70. +3 −3 {pages/css → docs/content}/utilities/marketing-layout.md
  71. +2 −2 {pages/css → docs/content}/utilities/marketing-margin.md
  72. +2 −2 {pages/css → docs/content}/utilities/marketing-padding.md
  73. +7 −10 {pages/css → docs/content}/utilities/marketing-type.md
  74. +5 −5 {pages/css → docs/content}/utilities/padding.md
  75. +11 −11 {pages/css → docs/content}/utilities/typography.md
  76. +31 −0 docs/gatsby-config.js
  77. +0 −2 docs/index.js
  78. +0 −1 docs/landing/ComponentsImage.svg
  79. +0 −1,418 docs/landing/HeaderImage.svg
  80. +0 −1 docs/landing/ObjectsImage.svg
  81. +0 −18 docs/landing/PrimerCSSAnimation.js
  82. +0 −1 docs/landing/UtilitiesImage.svg
  83. +0 −184 docs/landing/index.js
  84. +0 −26 docs/markdown.js
  85. +16,986 −0 docs/package-lock.json
  86. +40 −0 docs/package.json
  87. +12 −0 docs/postcss.config.js
  88. +26 −0 docs/src/@primer/gatsby-theme-doctocat/components/hero.js
  89. +14 −0 docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
  90. +139 −0 docs/src/@primer/gatsby-theme-doctocat/nav.yml
  91. 0 docs/{landing/ColorImage.svg → src/color-image.svg}
  92. +1 −1 docs/{ → src}/color-system.js
  93. +2 −2 docs/{ → src}/color-variables.js
  94. +1 −0 docs/src/components-image.svg
  95. +16 −0 docs/src/hero-animation.js
  96. 0 docs/{landing/PrimerCSSAnimation.json → src/hero-animation.json}
  97. +97 −0 docs/src/hero-illustration.svg
  98. +1 −0 docs/src/objects-image.svg
  99. 0 docs/{landing/SpacingImage.svg → src/spacing-image.svg}
  100. +6 −4 docs/{Table.js → src/table.js}
  101. BIN static/typography.png → docs/src/typography-image.png
  102. +1 −0 docs/src/utilities-image.svg
  103. +0 −115 docs/utils.js
  104. +0 −43 lib/config.js
  105. +0 −72 lib/mdx-loader.js
  106. +0 −62 lib/rehype-prism.js
  107. +0 −13 lib/search-loader.js
  108. +0 −18 next.config.js
  109. +14 −20 now.json
  110. +466 −2,909 package-lock.json
  111. +3 −34 package.json
  112. +0 −116 pages/_app.js
  113. +0 −51 pages/_document.js
  114. +0 −26 pages/_error.js
  115. +0 −18 pages/css/bundle.js
  116. +0 −9 pages/css/components/boxed-groups.md
  117. +0 −164 pages/css/components/toasts.md
  118. +0 −186 pages/css/getting-started/contributing.md
  119. +0 −65 pages/css/index.md
  120. +0 −16 pages/css/status-key.md
  121. +0 −55 pages/css/support/color-system.md
  122. +0 −2 pages/index.js
  123. +0 −1 pages/robots.txt
  124. BIN static/apple-touch-icon.png
  125. BIN static/favicon.png
@@ -9,3 +9,5 @@ _site
dist/
node_modules/
searchIndex.js
.cache/
public/

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

@@ -6,31 +6,33 @@ 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
```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
```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>
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.*
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
```html live
<div class="flash-messages">
<div class="flash">
Flash message goes here.
@@ -42,19 +44,19 @@ Should the need arise, you can quickly space out your flash message from surroun

Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively.

```html
```html live
<div class="flash flash-warn">
Flash message goes here.
</div>
```

```html
```html live
<div class="flash flash-error">
Flash message goes here.
</div>
```

```html
```html live
<div class="flash flash-success">
Flash message goes here.
</div>
@@ -64,9 +66,15 @@ Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to m

Add an icon to the left of the flash message to give it some funky fresh attention.

```erb
```html live
<div class="flash">
<%= octicon "alert" %>
<!-- <%= octicon "alert" %> -->
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert mr-2" 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"
/>
</svg>
Flash message with an icon goes here.
</div>
```
@@ -75,9 +83,17 @@ Add an icon to the left of the flash message to give it some funky fresh attenti

Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.

```erb
```html live
<div class="flash">
<button class="flash-close js-flash-close" type="button"><%= octicon "x", :"aria-label" => "Close" %></button>
<button class="flash-close js-flash-close" type="button">
<!-- <%= octicon "x", :"aria-label" => "Close" %> -->
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-label="Close" 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"
/>
</svg>
</button>
Dismissable flash message goes here.
</div>
```
@@ -86,7 +102,7 @@ Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any fl

A flash message with an action button.

```html
```html live
<div class="flash">
<button type="submit" class="btn btn-sm primary flash-action">Complete action</button>
Flash message with action here.
@@ -97,11 +113,10 @@ A flash message with an action button.

A flash message that is full width and removes border and border radius.

```html
```html live
<div class="flash flash-full">
<div class="container">
Full width flash message.
</div>
</div>
```

0 comments on commit 7fd6d37

Please sign in to comment.
You can’t perform that action at this time.