diff --git a/docs/CodeExample.js b/docs/CodeExample.js index 2bb9553343..57719f2af0 100644 --- a/docs/CodeExample.js +++ b/docs/CodeExample.js @@ -35,7 +35,7 @@ export default function CodeExample(props) { return ( - + diff --git a/docs/Frame.js b/docs/Frame.js index 579ce72819..49a48f13cd 100644 --- a/docs/Frame.js +++ b/docs/Frame.js @@ -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 ( this.setHeight(rect.bounds.height)}> {({measureRef}) => ( -
+
{children}
)} diff --git a/pages/css/components/forms.md b/pages/css/components/forms.md index 95a2344531..25fee25fc9 100644 --- a/pages/css/components/forms.md +++ b/pages/css/components/forms.md @@ -205,7 +205,7 @@ Use the `.select-sm` class to resize both default and custom ` diff --git a/pages/css/components/labels.md b/pages/css/components/labels.md index 3730c86478..d60b0921e8 100644 --- a/pages/css/components/labels.md +++ b/pages/css/components/labels.md @@ -138,5 +138,3 @@ Counters can also be used in `Box` headers to indicate the number of items in a
``` - - diff --git a/pages/css/components/popover.md b/pages/css/components/popover.md index bbd6781aa3..93c9db2ace 100644 --- a/pages/css/components/popover.md +++ b/pages/css/components/popover.md @@ -51,7 +51,7 @@ Defaults to caret oriented top-center. ```html title="Default (top-center)"
-
+

Popover heading

Message about this particular piece of UI.

@@ -66,7 +66,7 @@ Defaults to caret oriented top-center. ```html title="Large"
-
+

Popover heading

Message about this particular piece of UI.

@@ -94,7 +94,7 @@ Defaults to caret oriented top-center. ### Bottom-right ```html title="Bottom-right" -
+

Popover heading

@@ -109,14 +109,14 @@ Defaults to caret oriented top-center. ### Bottom-left ```html title="Bottom-left" -
+

Popover heading

Message about this particular piece of UI.

+
- ``` ### Left @@ -212,9 +212,9 @@ Defaults to caret oriented top-center. ### Top-left ```html title="Top-left" -
+
-
+

Popover heading

Message about this particular piece of UI.

@@ -227,9 +227,9 @@ Defaults to caret oriented top-center. ### Top-right ```html title="Top-right" -
+
-
+

Popover heading

Message about this particular piece of UI.

@@ -238,4 +238,3 @@ Defaults to caret oriented top-center.
``` - diff --git a/pages/css/components/tooltips.md b/pages/css/components/tooltips.md index 0e3035bfc0..869af1f1e6 100644 --- a/pages/css/components/tooltips.md +++ b/pages/css/components/tooltips.md @@ -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 - - Tooltip North - - - Tooltip North East - - - Tooltip East - - - Tooltip South East - - - Tooltip South - - - Tooltip South West - - - Tooltip West - - - Tooltip North West - +
+ + .tooltipped-nw + + + .tooltipped-n + + + .tooltipped-ne + +
+
+ + .tooltipped-w + + + .tooltipped-e + +
+
+ + .tooltipped-sw + + + .tooltipped-s + + + .tooltipped-se + +
``` ## 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 - - Tooltip North East align left 1 - - - Tooltip North East align left 2 - - - Tooltip South East align left 1 - - - Tooltip South East align left 2 - - - Tooltip North West align right 1 - - - Tooltip North West align right 2 - - - Tooltip South West align right 1 - - - Tooltip South West align right 2 - +
+ + .tooltipped-nw .tooltipped-align-right-1 + + + .tooltipped-ne .tooltipped-align-left-1 + +
+
+ + .tooltipped-nw .tooltipped-align-right-2 + + + .tooltipped-ne .tooltipped-align-left-2 + +
+
+ + .tooltipped-sw .tooltipped-align-right-1 + + + .tooltipped-se .tooltipped-align-left-1 + +
+
+ + .tooltipped-sw .tooltipped-align-right-2 + + + .tooltipped-se .tooltipped-align-left-2 + +
``` ## Tooltips with multiple lines @@ -96,18 +100,21 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi ```html - - Tooltip with multiple lines - +
+ + .tooltipped-multiline + +
``` -## 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 - - Tooltip no delay - +
+ + .tooltipped-no-delay + +
``` - diff --git a/pages/css/utilities/layout.md b/pages/css/utilities/layout.md index 166b9ae35e..4441605df6 100644 --- a/pages/css/utilities/layout.md +++ b/pages/css/utilities/layout.md @@ -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 `