Skip to content

Commit

Permalink
Merge pull request #346 from StackExchange/feature/popover-placement
Browse files Browse the repository at this point in the history 
Popover placement
  • Loading branch information
@aaronshekey
aaronshekey authored Jun 25, 2019
2 parents 8c94d2d + 0da8f60 commit 4c8d5ee
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 30 deletions.
31 changes: 16 additions & 15 deletions docs/product/components/popovers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,10 @@
</div>

{% header h3 | Manual %}
<p class="stacks-copy">Popovers can also be positioning manually. This will most likely be achieved by adding something like <code class="stacks-code">ps-absolute t8 l8</code> to <code class="stacks-code">.s-popover</code>. Manually positioning for arrows is also provided. Arrow direction (top, right, bottom, left) will appear first, followed by the secondary (center, top, right, bottom, left). For example, a popover with an arrow child of <code class="stacks-code">.s-popover--arrow_tc</code> will appear on the top of the <code class="stacks-code">.s-popover</code> and centered horizontally. Though there are sensible defaults applied to the width of popovers, you may need to adjust manually.</p>
<p class="stacks-copy">Popovers can also be positioned manually if you aren’t using the built-in JavaScript interactivity. Practically, this might look like adding something like <code class="stacks-code">t8 l8</code> to <code class="stacks-code">.s-popover</code>.</p>
<p class="stacks-copy">Manual positioning for arrows is also provided. Arrow direction (top, right, bottom, left) will appear first, followed by the secondary (center, top, right, bottom, left). For example, a popover with an arrow child of <code class="stacks-code">.s-popover--arrow_tc</code> will appear on the top of the <code class="stacks-code">.s-popover</code> and centered horizontally. Though there are sensible defaults applied to the width of popovers, you may need to adjust manually.</p>

<p class="stacks-copy">By default, popovers are hidden. Adding the class <code class="stacks-code">.is-visible</code> will show the popover.</p>
<p class="stacks-copy">By default, popovers are hidden and positioned absolutely. Adding the class <code class="stacks-code">.is-visible</code> will show the popover.</p>

<div class="stacks-preview">
{% highlight html linenos %}
Expand All @@ -147,85 +148,85 @@
{% endhighlight %}
<div class="stacks-preview--example bg-black-025">
<div class="grid gs16 grid__allcells4 fw-wrap">
<div class="grid--cell ps-relative">
<div class="s-popover z-base is-visible">
<div class="grid--cell">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__tc"></div>
<p class="ff-mono mb8">.s-popover--arrow__tc</p>
<p class="mb0">Popover arrow appears top center</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__tl"></div>
<p class="ff-mono mb8">.s-popover--arrow__tl</p>
<p class="mb0">Popover arrow appears top left</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__tr"></div>
<p class="ff-mono mb8">.s-popover--arrow__tr</p>
<p class="mb0">Popover arrow appears top right</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__bc"></div>
<p class="ff-mono mb8">.s-popover--arrow__bc</p>
<p class="mb0">Popover arrow appears bottom center</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__bl"></div>
<p class="ff-mono mb8">.s-popover--arrow__bl</p>
<p class="mb0">Popover arrow appears bottom left</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__br"></div>
<p class="ff-mono mb8">.s-popover--arrow__br</p>
<p class="mb0">Popover arrow appears bottom right</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__rc"></div>
<p class="ff-mono mb8">.s-popover--arrow__rc</p>
<p class="mb0">Popover arrow appears right center</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__rt"></div>
<p class="ff-mono mb8">.s-popover--arrow__rt</p>
<p class="mb0">Popover arrow appears right top</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__rb"></div>
<p class="ff-mono mb8">.s-popover--arrow__rb</p>
<p class="mb0">Popover arrow appears right bottom</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__lc"></div>
<p class="ff-mono mb8">.s-popover--arrow__lc</p>
<p class="mb0">Popover arrow appears left center</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__lt"></div>
<p class="ff-mono mb8">.s-popover--arrow__lt</p>
<p class="mb0">Popover arrow appears left top</p>
</div>
</div>
<div class="grid--cell">
<div class="s-popover z-base is-visible">
<div class="s-popover ps-relative z-base is-visible">
<div class="s-popover--arrow__lb"></div>
<p class="ff-mono mb8">.s-popover--arrow__lb</p>
<p class="mb0">Popover arrow appears left bottom</p>
Expand Down
29 changes: 14 additions & 15 deletions lib/css/components/_stacks-popovers.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
// ----------------------------------------------------------------------------
.s-popover {
visibility: hidden;
position: relative;
position: absolute;
min-width: 12rem;
max-width: 24rem;
width: 100%;
Expand All @@ -38,24 +38,23 @@
z-index: @zi-popovers;
transition: opacity 100ms @te-smooth 0s, z-index 0s 0s, visibility 0s 0s; // Transition in
}
}

// Auto adjust margins for auto-placed popovers

.s-popover[x-placement^="top"] {
margin-bottom: @su8 + 2px;
}
// Auto adjust margins for auto-placed popovers
&[x-placement^="top"] {
margin-bottom: @su8 + 2px;
}

.s-popover[x-placement^="right"] {
margin-left: @su8 + 2px;
}
&[x-placement^="right"] {
margin-left: @su8 + 2px;
}

.s-popover[x-placement^="bottom"] {
margin-top: @su8 + 2px;
}
&[x-placement^="bottom"] {
margin-top: @su8 + 2px;
}

.s-popover[x-placement^="left"] {
margin-right: @su8 + 2px;
&[x-placement^="left"] {
margin-right: @su8 + 2px;
}
}

// ============================================================================
Expand Down

0 comments on commit 4c8d5ee

Please sign in to comment.