mirror of
https://github.com/primer/css.git
synced 2025-01-05 04:47:21 +03:00
Merge pull request #725 from primer/fix-cut-off-examples
Fix cut off examples
This commit is contained in:
simurai
GitHub
commit
4284ea581c
@ -35,7 +35,7 @@ export default function CodeExample(props) {
|
||||
return (
|
||||
<LiveProvider {...liveProps}>
|
||||
<BorderBox {...rest}>
|
||||
<BorderBox bg="white" p={3} border={0} borderBottom={1} borderRadius={0}>
|
||||
<BorderBox bg="white" border={0} borderBottom={1} borderRadius={0}>
|
||||
<Frame>
|
||||
<LivePreview />
|
||||
</Frame>
|
||||
|
||||
@ -6,6 +6,7 @@ import {assetPrefix} from './utils'
|
||||
|
||||
export default class Frame extends React.Component {
|
||||
static defaultProps = {
|
||||
display: 'block',
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
minHeight: 0,
|
||||
@ -40,7 +41,7 @@ export default class Frame extends React.Component {
|
||||
return (
|
||||
<Measure bounds onResize={rect => this.setHeight(rect.bounds.height)}>
|
||||
{({measureRef}) => (
|
||||
<div ref={measureRef} style={{overflow: 'auto'}}>
|
||||
<div ref={measureRef} className="p-3 overflow-auto">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -205,7 +205,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form-group">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
|
||||
|
||||
```html
|
||||
<form>
|
||||
<form class="pb-2">
|
||||
<dl class="form-group errored">
|
||||
<dt><label for="example-text-errored">Example Text</label></dt>
|
||||
<dd><input class="form-control" type="text" value="Example Value" id="example-text-errored" aria-describedby="form-error-text"></dd>
|
||||
|
||||
@ -138,5 +138,3 @@ Counters can also be used in `Box` headers to indicate the number of items in a
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -51,7 +51,7 @@ Defaults to caret oriented top-center.
|
||||
```html title="Default (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 right-0 left-0 position-relative">
|
||||
<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>
|
||||
@ -66,7 +66,7 @@ Defaults to caret oriented top-center.
|
||||
```html title="Large"
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0">
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
<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>
|
||||
@ -94,7 +94,7 @@ Defaults to caret oriented top-center.
|
||||
### Bottom-right
|
||||
|
||||
```html title="Bottom-right"
|
||||
<div class="position-relative text-right">
|
||||
<div class="position-relative text-right pr-2">
|
||||
<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>
|
||||
@ -109,14 +109,14 @@ Defaults to caret oriented top-center.
|
||||
### Bottom-left
|
||||
|
||||
```html title="Bottom-left"
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover position-relative pl-2">
|
||||
<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>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
</div>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
```
|
||||
|
||||
### Left
|
||||
@ -212,9 +212,9 @@ Defaults to caret oriented top-center.
|
||||
### Top-left
|
||||
|
||||
```html title="Top-left"
|
||||
<div class="position-relative">
|
||||
<div class="position-relative pl-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover">
|
||||
<div class="Popover position-relative">
|
||||
<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>
|
||||
@ -227,9 +227,9 @@ Defaults to caret oriented top-center.
|
||||
### Top-right
|
||||
|
||||
```html title="Top-right"
|
||||
<div class="position-relative text-right">
|
||||
<div class="position-relative text-right pr-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0">
|
||||
<div class="Popover right-0 position-relative">
|
||||
<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>
|
||||
@ -238,4 +238,3 @@ Defaults to caret oriented top-center.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -24,71 +24,75 @@ Before adding a tooltip, please consider: Is this information essential and nece
|
||||
## Tooltip direction
|
||||
Specify the direction of a tooltip with north, south, east, and west directions:
|
||||
|
||||
- `.tooltipped-n`
|
||||
- `.tooltipped-ne`
|
||||
- `.tooltipped-e`
|
||||
- `.tooltipped-se`
|
||||
- `.tooltipped-s`
|
||||
- `.tooltipped-sw`
|
||||
- `.tooltipped-w`
|
||||
- `.tooltipped-nw`
|
||||
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-n border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North side.">
|
||||
Tooltip North
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North East side.">
|
||||
Tooltip North East
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-e border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the East side.">
|
||||
Tooltip East
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South East side.">
|
||||
Tooltip South East
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-s border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South side.">
|
||||
Tooltip South
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-sw border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South West side.">
|
||||
Tooltip South West
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-w border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the West side.">
|
||||
Tooltip West
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-nw border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North West side.">
|
||||
Tooltip North West
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
|
||||
.tooltipped-nw
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
|
||||
.tooltipped-n
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
|
||||
.tooltipped-ne
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<span class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
|
||||
.tooltipped-w
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
|
||||
.tooltipped-e
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center pb-4">
|
||||
<span class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
|
||||
.tooltipped-sw
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
|
||||
.tooltipped-s
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
|
||||
.tooltipped-se
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltip alignment
|
||||
Align tooltips to the left or right of an element, combined with a directional class to specify north or south.
|
||||
Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented.
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
|
||||
Tooltip North East align left 1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
|
||||
Tooltip North East align left 2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
|
||||
Tooltip South East align left 1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
|
||||
Tooltip South East align left 2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
|
||||
Tooltip North West align right 1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
|
||||
Tooltip North West align right 2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
|
||||
Tooltip South West align right 1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
|
||||
Tooltip South West align right 2
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||
.tooltipped-nw .tooltipped-align-right-1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||
.tooltipped-ne .tooltipped-align-left-1
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||
.tooltipped-nw .tooltipped-align-right-2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||
.tooltipped-ne .tooltipped-align-left-2
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||
.tooltipped-sw .tooltipped-align-right-1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
|
||||
.tooltipped-se .tooltipped-align-left-1
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center pb-4">
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||
.tooltipped-sw .tooltipped-align-right-2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
|
||||
.tooltipped-se .tooltipped-align-left-2
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltips with multiple lines
|
||||
@ -96,18 +100,21 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi
|
||||
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-multiline tooltipped-n border p-2" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
|
||||
Tooltip with multiple lines
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-6">
|
||||
<span class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
|
||||
.tooltipped-multiline
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltips No Delay
|
||||
## Tooltips with no delay
|
||||
|
||||
By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay`
|
||||
By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this.
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-delay border p-2" aria-label="This is the tooltip on the no delay side.">
|
||||
Tooltip no delay
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
|
||||
.tooltipped-no-delay
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -247,11 +247,13 @@ Use `.position-absolute` to take elements out of the normal document flow.
|
||||
|
||||
Use `.position-fixed` to position an element relative to the viewport. **Be careful when using fixed positioning. It is tricky to use and can lead to unwanted side effects.**
|
||||
|
||||
_Note: fixed positioning has been disabled here for demonstration only._
|
||||
_Note: This example is shown in an `<iframe>` and therefore will not be positioned to the viewport of this page._
|
||||
|
||||
```html
|
||||
<div class="position-fixed bg-gray-light border-bottom border-gray p-3">
|
||||
.position-fixed
|
||||
<div style="height: 64px;">
|
||||
<div class="position-fixed right-0 bottom-0 bg-gray-light border p-2">
|
||||
.position-fixed
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -32,8 +32,8 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
|
||||
Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/marketing-variables/).
|
||||
|
||||
```html
|
||||
<div class="clearfix">
|
||||
<div class="offset-n1 col-3 border p-3">.offset-n1</div>
|
||||
<div class="offset-n2 col-3 border p-3">.offset-n2</div>
|
||||
<div class="mx-auto border" style="width: 300px">
|
||||
<div class="offset-n1 col-4 border p-3">.offset-n1</div>
|
||||
<div class="offset-n2 col-4 border p-3">.offset-n2</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user