primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-22 06:07:31 +03:00
Code Issues Projects Releases Wiki Activity
4264e821cb
css/modules/primer-popover
History
Shawn Allen 32f7398507 Publish 
- primer-alerts@1.5.12
 - primer-avatars@1.5.9
 - primer-base@1.9.1
 - primer-blankslate@1.5.1
 - primer-box@2.5.12
 - primer-branch-name@1.0.10
 - primer-breadcrumb@1.5.8
 - primer-buttons@2.6.3
 - primer-core@6.10.7
 - primer-forms@2.1.7
 - primer-labels@1.5.12
 - primer-layout@1.6.1
 - primer-markdown@3.7.12
 - primer-marketing-buttons@1.0.12
 - primer-marketing-support@1.5.5
 - primer-marketing-type@1.4.12
 - primer-marketing-utilities@1.7.2
 - primer-marketing@6.3.2
 - primer-navigation@1.5.10
 - primer-page-headers@1.5.2
 - primer-page-sections@1.5.2
 - primer-pagination@1.0.6
 - primer-popover@0.1.7
 - primer-product@5.8.2
 - primer-progress@0.1.2
 - primer-subhead@1.0.10
 - primer-support@4.7.1
 - primer-table-object@1.4.12
 - primer-tables@1.5.2
 - primer-tooltips@1.5.10
 - primer-truncate@1.4.12
 - primer-utilities@4.14.2
 - primer@10.10.3
 - primer-module-build@1.0.9
2019-01-07 15:03:45 -08:00
..
lib fix #462 .Popover-message-right-bottom caret 2018-03-26 16:04:40 -07:00
index.scss Stable CSS-only 'Popover' component 2017-10-27 10:14:00 -05:00
LICENSE update year in licenses and source headers to 2019 2019-01-04 10:38:46 -08:00
package.json Publish 2019-01-07 15:03:45 -08:00
README.md add path metadata to all docs 2018-12-17 15:26:50 -08:00
stories.js Init .Popover 2017-10-26 15:31:29 -05:00

README.md

Primer Popover

npm version Build Status

Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.

This repository is a module of the full primer repository.

Install

This repository is distributed with npm. After installing npm, you can install primer-popover with this command.

$ npm install --save primer-popover

Usage

The source files included are written in Sass (SCSS) You can simply point your sass include-path at your node_modules directory and import it like this.

@import "primer-popover/index.scss";

You can also import specific portions of the module by importing those partials from the /lib/ folder. Make sure you import any requirements along with the modules.

Build

For a compiled CSS version of this module, an npm script is included that will output a css version to build/build.css The built css file is also included in the npm package:

$ npm run build

Documentation

Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.

{:toc}

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:

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:

Lastly, there is an added .Popover-message--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.

<div class="position-relative text-center">
  <button class="btn btn-primary">UI</button>
  <div class="Popover right-0 left-0">
    <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

<div class="position-relative text-center">
  <button class="btn btn-primary">UI</button>
  <div class="Popover right-0 left-0">
    <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

<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

<div class="position-relative text-right">
  <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

<div class="Popover position-relative">
  <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>
</div>
<button class="btn btn-primary">UI</button>

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

<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

<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

<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

<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

<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

<div class="position-relative">
  <button class="btn btn-primary">UI</button>
  <div class="Popover">
    <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

<div class="position-relative text-right">
  <button class="btn btn-primary">UI</button>
  <div class="Popover right-0">
    <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>

License

MIT © GitHub