diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index a32d5b8570..113e4f80b1 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -44,7 +44,7 @@ Popovers are used to bring attention to specific user interface elements, typica {:toc} -Popover's consist of: +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." @@ -53,19 +53,23 @@ In the examples below, `Popover-message`, in particular, uses a handful of utili The `Popover-message` element also supports several modifiers, most of which position the caret differently: -- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered. -- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered. -- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered. -- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered. +- [`.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--top-right` -- `.Popover-message--right-top` -- `.Popover-message--bottom-left` -- `.Popover-message--left-bottom` +- [`.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` modifier, which assumes a slightly wider popover message on screens wider than 544px. +Lastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px. ### Notes @@ -105,92 +109,165 @@ Defaults to caret oriented top-center. ``` -### Top-right-aligned example +### Bottom -```html title="Top-right" -
- -
-
+```html title="Bottom" +
+
+

Popover heading

Message about this particular piece of UI.

+
``` -### Top-right-aligned example +### Bottom-right -```html title="Top-left" -
- -
-
+```html title="Bottom-right" +
+
+

Popover heading

Message about this particular piece of UI.

+
``` -### Right-aligned example +### Bottom-left -```html title="Right" -
-
+```html title="Bottom-left" +
+

Popover heading

Message about this particular piece of UI.

+ ``` -### Left-aligned example +### Left ```html title="Left" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` -### Bottom-aligned example +### Left-bottom -```html title="Bottom" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +```html title="Left-bottom" +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` -### Bottom-right-aligned example +### Left-top -```html title="Bottom-right" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +```html title="Left-top" +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` -### Bottom-left-aligned example +### Right -```html title="Bottom-left" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +```html title="Right" +
+
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+ +
+``` + +### Right-bottom + +```html title="Right-bottom" +
+
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+ +
+``` + +### Right-top + +```html title="Right-top" +
+
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+ +
+``` + +### Top-left + +```html title="Top-left" +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+
+``` + +### Top-right + +```html title="Top-right" +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss index f732ec7f11..228aff7590 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -108,7 +108,7 @@ } &::before { - margin-top: -9px; + margin-top: -($spacer-2 + 1); } &::after { @@ -164,11 +164,11 @@ } &::before { - bottom: $spacer-4; + bottom: $spacer-3; } &::after { - bottom: 21px; + bottom: $spacer-3 + 1; } }