diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fd72019..40400e2b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,18 @@ +# 13.1.0 + +### :rocket: Enhancement +- [#904](https://github.com/primer/css/pull/904) Add Keyboard Shortcuts `kbd` from github/github +- [#926](https://github.com/primer/css/pull/926) Add Flash Banner `.flash-banner` from github/github +- [#927](https://github.com/primer/css/pull/927) Add `.flex-column-reverse` utilities + +### :memo: Documentation +- [#932](https://github.com/primer/css/pull/932) Fix CDN links in documentation +- [#933](https://github.com/primer/css/pull/933) Convert most ERB examples to HTML + +### Committers +- [@shawnbot](https://github.com/shawnbot) +- [@simurai](https://github.com/simurai) + # 13.0.2 ### :memo: Documentation diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md index 5f298527..9591848a 100644 --- a/docs/content/components/alerts.md +++ b/docs/content/components/alerts.md @@ -120,3 +120,15 @@ A flash message that is full width and removes border and border radius. ``` + +## Flash banner + +A flash message that is fixed positioned at the top of the page. Use for more global events where the content of the page is unknown. + +```html live +
+
+ Flash banner message. +
+
+``` diff --git a/docs/content/components/avatars.md b/docs/content/components/avatars.md index 26ed2427..857e6f70 100644 --- a/docs/content/components/avatars.md +++ b/docs/content/components/avatars.md @@ -191,12 +191,13 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the ### Small -```erb +```html live - <%= octicon "zap", :class => "CircleBadge-icon text-white" %> + + ``` @@ -220,11 +221,12 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the 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 +```html live

- <%= octicon("repo") %> + + / project @@ -131,22 +139,26 @@ Use `pagehead` to construct a header and navigation for a repository.
@@ -163,8 +175,9 @@ Use `pagehead` to construct a header and navigation for a repository.
  • @@ -172,15 +185,17 @@ Use `pagehead` to construct a header and navigation for a repository.

    • - <%= octicon("lock") %> + + / project @@ -190,22 +205,26 @@ Use `pagehead` to construct a header and navigation for a repository.
    diff --git a/docs/content/getting-started/index.md b/docs/content/getting-started/index.md index 82b20b2e..640c3fa3 100644 --- a/docs/content/getting-started/index.md +++ b/docs/content/getting-started/index.md @@ -100,5 +100,5 @@ Don't forget to add the compiled CSS to the `` section of your page. 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 - + ``` diff --git a/docs/content/objects/grid.md b/docs/content/objects/grid.md index a61ae058..d2bccca0 100644 --- a/docs/content/objects/grid.md +++ b/docs/content/objects/grid.md @@ -88,10 +88,12 @@ Use `.mx-auto` to center columns within a container. Column widths can be used with any other block or inline-block elements to add percentage-based widths. -```erb title="Column widths" +```html live
    - <%= octicon "heart" %> Don't go bacon my heart. + + + Don't go bacon my heart.

    T-bone drumstick alcatra ribeye. Strip steak chuck andouille tenderloin bacon tri-tip ball tip beef capicola rump. Meatloaf bresaola drumstick ball tip salami. Drumstick ham bacon alcatra pig porchetta, spare ribs leberkas pork belly.

    diff --git a/docs/content/tools/prototyping.md b/docs/content/tools/prototyping.md index 6e03dd01..29a15987 100644 --- a/docs/content/tools/prototyping.md +++ b/docs/content/tools/prototyping.md @@ -19,7 +19,7 @@ This method requires no dev environment set up and is useful for when you want t - + diff --git a/docs/content/utilities/animations.md b/docs/content/utilities/animations.md index f51be264..22b2b354 100644 --- a/docs/content/utilities/animations.md +++ b/docs/content/utilities/animations.md @@ -9,46 +9,65 @@ bundle: utilities Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button. - + ## Fade In The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed. -```erb -<%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub! +```html live + + + + Hello from GitHub! + ``` ## Fade Out The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed. -```erb -<%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub! +```html live + + + + Hello from GitHub! + ``` ## Fade Up The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page. -```erb -
    <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!
    +```html live +
    + + + Hello from GitHub! +
    ``` ## Fade Down The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page. -```erb -
    <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!
    +```html live +
    + + + Hello from GitHub! +
    ``` ## Scale In The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly. -```erb -
    <%= octicon("mark-github") %>
    +```html live +
    + + +
    ``` ## Grow X @@ -63,16 +82,18 @@ The `.anim-grow-x` class will grow an element width from 0-:100: real quick. The `.anim-pulse` class will pulse an element infinitely. -```erb -<%= octicon("mark-github", :class => "anim-pulse") %> +```html live + + ``` ## Hover animation The `.hover-grow` class will increase the scale of the element upon hover. -```erb +```html live
    - <%= octicon("mark-github", :height => 32) %> + +
    ``` diff --git a/docs/content/utilities/box-shadow.md b/docs/content/utilities/box-shadow.md index 3bb08af4..9185d798 100644 --- a/docs/content/utilities/box-shadow.md +++ b/docs/content/utilities/box-shadow.md @@ -54,7 +54,7 @@ Medium box shadows are more diffused and slightly larger than small box shadows. Medium box shadows are typically used on editorialized content that needs to appear elevated. Most of the time, the elements using this level of shadow will be clickable. -```erb +```html live
    @@ -63,8 +63,16 @@ Medium box shadows are typically used on editorialized content that needs to app Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.

      -
    • <%= octicon "repo", :class => "mr-1" %>12 Repositories
      • -
    • <%= octicon "code", :class => "mr-1" %>5 Languages
      • +
    • + + + 12 Repositories +
      • +
    • + + + 5 Languages +
    diff --git a/docs/content/utilities/flexbox.md b/docs/content/utilities/flexbox.md index 16775b66..3b6558a1 100644 --- a/docs/content/utilities/flexbox.md +++ b/docs/content/utilities/flexbox.md @@ -9,7 +9,7 @@ bundle: utilities Flex utilities can be used to apply `flexbox` behaviors to elements by using utility classes. - + ## Required reading @@ -64,9 +64,10 @@ Use these classes to define the orientation of the main axis (`row` or `column`) #### CSS ```css -.flex-row { flex-direction: row; } -.flex-row-reverse { flex-direction: row-reverse; } -.flex-column { flex-direction: column; } +.flex-row { flex-direction: row; } +.flex-row-reverse { flex-direction: row-reverse; } +.flex-column { flex-direction: column; } +.flex-column-reverse { flex-direction: column-reverse; } ``` #### Classes @@ -76,6 +77,7 @@ Use these classes to define the orientation of the main axis (`row` or `column`) | `.flex-row` | The main axis runs left to right (default). | | `.flex-row-reverse` | The main axis runs right to left. | | `.flex-column` | The main axis runs top to bottom. | +| `.flex-column-reverse` | The main axis runs bottom to top. | #### Example using `.flex-column` @@ -87,6 +89,18 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
    ``` +#### Example using `.flex-column-reverse` + +This example uses the responsive variant `.flex-md-column-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order. + +```html live +
    +
    Item 1
    +
    Item 2
    +
    Item 3
    +
    +``` + #### Example using `.flex-row` This example uses the responsive variant `.flex-md-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. @@ -101,7 +115,7 @@ This example uses the responsive variant `.flex-md-row` to override `.flex-colum #### Example using `.flex-row-reverse` -This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. +This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order. ```html live
    @@ -713,7 +727,7 @@ You can use flex utilities to make a simple media object, like this: Here is an example of a media object that is **vertically centered on large screens**, but converts to a stacked column layout on small screens. -```erb +```html live
    @@ -722,7 +736,8 @@ Here is an example of a media object that is **vertically centered on large scre

    Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

    - <%= octicon "mark-github", :height => '32' %> + +
    ``` diff --git a/docs/content/utilities/layout.md b/docs/content/utilities/layout.md index b56fb9ca..f6dd59c9 100644 --- a/docs/content/utilities/layout.md +++ b/docs/content/utilities/layout.md @@ -8,7 +8,7 @@ bundle: utilities Change the document layout with display, float, alignment, and other utilities. - + ## Display Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-inline-block`, `.d-table`, `.d-table-cell` utilities. @@ -212,10 +212,11 @@ Use `.height-fit` to set max-height 100%. Use `.height-full` to set height to 100%. -```erb +```html live
    - <%= octicon "three-bars" %> + +
    Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong. diff --git a/package-lock.json b/package-lock.json index d9b1f969..0be1b9c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@primer/css", - "version": "13.0.2", + "version": "13.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 132200f1..10ef44b5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/css", - "version": "13.0.2", + "version": "13.1.0", "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.", "homepage": "https://primer.style/css", "author": "GitHub, Inc.", diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss index 23edbcdb..371cbfb0 100644 --- a/src/alerts/flash.scss +++ b/src/alerts/flash.scss @@ -72,6 +72,18 @@ border-radius: 0; } +// A banner rendered at the top of the page. +.flash-banner { + position: fixed; + top: 0; + z-index: 90; + width: 100%; + border-top: 0; + border-right: 0; + border-left: 0; + border-radius: 0; +} + // FIXME deprecate this .warning { padding: $em-spacer-5; diff --git a/src/base/index.scss b/src/base/index.scss index e4563c75..2c7f8b99 100644 --- a/src/base/index.scss +++ b/src/base/index.scss @@ -2,4 +2,5 @@ @import "./normalize.scss"; @import "./base.scss"; +@import "./kbd.scss"; @import "./typography-base.scss"; diff --git a/src/base/kbd.scss b/src/base/kbd.scss new file mode 100644 index 00000000..ac95d609 --- /dev/null +++ b/src/base/kbd.scss @@ -0,0 +1,16 @@ +// Keyboard shortcuts +// stylelint-disable selector-max-type + +kbd { + display: inline-block; + padding: ($spacer-1 - 1) ($spacer-1 + 1); + font: 11px $mono-font; + line-height: 10px; + color: $gray-700; + vertical-align: middle; + background-color: $bg-gray-light; + border: $border-style $border-width $border-gray-dark; + border-bottom-color: $border-gray-dark; + border-radius: $border-radius; + box-shadow: inset 0 -1px 0 $border-gray-dark; +} diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss index 9ba36ddf..7b152a76 100644 --- a/src/markdown/markdown-body.scss +++ b/src/markdown/markdown-body.scss @@ -10,6 +10,8 @@ line-height: $body-line-height; word-wrap: break-word; + @import "../base/kbd.scss"; // adds support for keyboard shortcuts + // Clearfix on the markdown body &::before { display: table; @@ -90,18 +92,4 @@ margin-bottom: 0; } } - - kbd { - display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: $gray-700; - vertical-align: middle; - background-color: $gray-000; - border: solid 1px darken($gray-300, 4%); - border-bottom-color: $gray-400; - border-radius: 3px; - box-shadow: inset 0 -1px 0 $gray-400; - } } diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss index 825fe441..7f93c3ad 100644 --- a/src/utilities/flexbox.scss +++ b/src/utilities/flexbox.scss @@ -4,9 +4,10 @@ @include breakpoint($breakpoint) { // Flexbox classes // Container - .flex#{$variant}-row { flex-direction: row !important; } - .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; } - .flex#{$variant}-column { flex-direction: column !important; } + .flex#{$variant}-row { flex-direction: row !important; } + .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; } + .flex#{$variant}-column { flex-direction: column !important; } + .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; } .flex#{$variant}-wrap { flex-wrap: wrap !important; } .flex#{$variant}-nowrap { flex-wrap: nowrap !important; }