rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +01:00
Code Issues Actions Packages Releases Activity

Rename popover classes

Browse Source 
Part of an update to align the naming schemes across our components.

- Renames .popover-title to .popover-header
- Renames .popover-content to .popover-body

Refs: #22092
This commit is contained in:
Mark Otto 2017-06-14 22:03:33 -07:00 committed by Mark Otto
parent 6c8c0aa4cf
commit 9c0e423008
7 changed files with 51 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/4.0/components/popovers.md
View File

@ -52,32 +52,32 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-popover-static"> <div class="bd-example bd-example-popover-static">
<div class="popover bs-popover-top bs-popover-top-docs"> <div class="popover bs-popover-top bs-popover-top-docs">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">Popover top</h3> <h3 class="popover-header">Popover top</h3>
<div class="popover-content"> <div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div> </div>
</div> </div>
<div class="popover bs-popover-right bs-popover-right-docs"> <div class="popover bs-popover-right bs-popover-right-docs">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">Popover right</h3> <h3 class="popover-header">Popover right</h3>
<div class="popover-content"> <div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div> </div>
</div> </div>
<div class="popover bs-popover-bottom bs-popover-bottom-docs"> <div class="popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">Popover bottom</h3> <h3 class="popover-header">Popover bottom</h3>
<div class="popover-content"> <div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div> </div>
</div> </div>
<div class="popover bs-popover-left bs-popover-left-docs"> <div class="popover bs-popover-left bs-popover-left-docs">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">Popover left</h3> <h3 class="popover-header">Popover left</h3>
<div class="popover-content"> <div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div> </div>
</div> </div>
@ -228,11 +228,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<tr> <tr>
<td>template</td> <td>template</td>
<td>string</td> <td>string</td>
<td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td> <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-header"&gt;&lt;/h3&gt;&lt;div class="popover-body"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
<td> <td>
<p>Base HTML to use when creating the popover.</p> <p>Base HTML to use when creating the popover.</p>
<p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> <p>The popover's <code>title</code> will be injected into the <code>.popover-header</code>.</p>
<p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> <p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p>
<p><code>.arrow</code> will become the popover's arrow.</p> <p><code>.arrow</code> will become the popover's arrow.</p>
<p>The outermost wrapper element should have the <code>.popover</code> class.</p> <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
</td> </td>

6
js/dist/popover.js vendored
View File

@ -35,7 +35,7 @@ var Popover = function ($) {
placement: 'right', placement: 'right',
trigger: 'click', trigger: 'click',
content: '', content: '',
template: '<div class="popover" role="tooltip">' + '<div class="arrow"></div>' + '<h3 class="popover-title"></h3>' + '<div class="popover-content"></div></div>' template: '<div class="popover" role="tooltip">' + '<div class="arrow"></div>' + '<h3 class="popover-header"></h3>' + '<div class="popover-body"></div></div>'
}); });
var DefaultType = $.extend({}, Tooltip.DefaultType, { var DefaultType = $.extend({}, Tooltip.DefaultType, {
@ -48,8 +48,8 @@ var Popover = function ($) {
}; };
var Selector = { var Selector = {
TITLE: '.popover-title', TITLE: '.popover-header',
CONTENT: '.popover-content' CONTENT: '.popover-body'
}; };
var Event = { var Event = {

2
js/dist/popover.js.map vendored
View File

File diff suppressed because one or more lines are too long

8
js/src/popover.js
View File

@ -31,8 +31,8 @@ const Popover = (($) => {
content : '', content : '',
template : '<div class="popover" role="tooltip">' template : '<div class="popover" role="tooltip">'
+ '<div class="arrow"></div>' + '<div class="arrow"></div>'
+ '<h3 class="popover-title"></h3>' + '<h3 class="popover-header"></h3>'
+ '<div class="popover-content"></div></div>' + '<div class="popover-body"></div></div>'
}) })
const DefaultType = $.extend({}, Tooltip.DefaultType, { const DefaultType = $.extend({}, Tooltip.DefaultType, {
@ -45,8 +45,8 @@ const Popover = (($) => {
} }
const Selector = { const Selector = {
TITLE : '.popover-title', TITLE : '.popover-header',
CONTENT : '.popover-content' CONTENT : '.popover-body'
} }
const Event = { const Event = {

28
js/tests/unit/popover.js
View File

@ -95,8 +95,8 @@ $(function () {
$popover.bootstrapPopover('show') $popover.bootstrapPopover('show')
assert.notEqual($('.popover').length, 0, 'popover was inserted') assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.strictEqual($('.popover .popover-title').text(), '@fat', 'title correctly inserted') assert.strictEqual($('.popover .popover-header').text(), '@fat', 'title correctly inserted')
assert.strictEqual($('.popover .popover-content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted') assert.strictEqual($('.popover .popover-body').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
$popover.bootstrapPopover('hide') $popover.bootstrapPopover('hide')
@ -114,10 +114,10 @@ $(function () {
$popover.bootstrapPopover('show') $popover.bootstrapPopover('show')
assert.notEqual($('.popover').length, 0, 'popover inserted') assert.notEqual($('.popover').length, 0, 'popover inserted')
assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted') assert.strictEqual($('.popover .popover-header').text(), '@glebm <3 writing tests', 'title inserted')
assert.ok($.contains($('.popover').get(0), title), 'title node moved, not copied') assert.ok($.contains($('.popover').get(0), title), 'title node moved, not copied')
// toLowerCase because IE8 will return <I>...</I> // toLowerCase because IE8 will return <I>...</I>
assert.strictEqual($('.popover .popover-content').html().toLowerCase(), '<i>¯\\_(ツ)_/¯</i>', 'content inserted') assert.strictEqual($('.popover .popover-body').html().toLowerCase(), '<i>¯\\_(ツ)_/¯</i>', 'content inserted')
assert.ok($.contains($('.popover').get(0), content), 'content node moved, not copied') assert.ok($.contains($('.popover').get(0), content), 'content node moved, not copied')
}) })
@ -132,9 +132,9 @@ $(function () {
$popover.bootstrapPopover('show') $popover.bootstrapPopover('show')
assert.notEqual($('.popover').length, 0, 'popover inserted') assert.notEqual($('.popover').length, 0, 'popover inserted')
assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted') assert.strictEqual($('.popover .popover-header').text(), '@glebm <3 writing tests', 'title inserted')
assert.ok(!$.contains($('.popover').get(0), title), 'title node copied, not moved') assert.ok(!$.contains($('.popover').get(0), title), 'title node copied, not moved')
assert.strictEqual($('.popover .popover-content').html(), '¯\\_(ツ)_/¯', 'content inserted') assert.strictEqual($('.popover .popover-body').html(), '¯\\_(ツ)_/¯', 'content inserted')
assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved') assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved')
}) })
@ -154,14 +154,14 @@ $(function () {
$popover.bootstrapPopover('show') $popover.bootstrapPopover('show')
assert.notEqual($('.popover').length, 0, 'popover was inserted') assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted') assert.equal($('.popover .popover-body').html(), $div[0].outerHTML, 'content correctly inserted')
$popover.bootstrapPopover('hide') $popover.bootstrapPopover('hide')
assert.strictEqual($('.popover').length, 0, 'popover was removed') assert.strictEqual($('.popover').length, 0, 'popover was removed')
$popover.bootstrapPopover('show') $popover.bootstrapPopover('show')
assert.notEqual($('.popover').length, 0, 'popover was inserted') assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted') assert.equal($('.popover .popover-body').html(), $div[0].outerHTML, 'content correctly inserted')
$popover.bootstrapPopover('hide') $popover.bootstrapPopover('hide')
assert.strictEqual($('.popover').length, 0, 'popover was removed') assert.strictEqual($('.popover').length, 0, 'popover was removed')
@ -175,8 +175,8 @@ $(function () {
.bootstrapPopover('show') .bootstrapPopover('show')
assert.notEqual($('.popover').length, 0, 'popover was inserted') assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted') assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted')
assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted') assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
$popover.bootstrapPopover('hide') $popover.bootstrapPopover('hide')
assert.strictEqual($('.popover').length, 0, 'popover was removed') assert.strictEqual($('.popover').length, 0, 'popover was removed')
@ -193,8 +193,8 @@ $(function () {
.bootstrapPopover('show') .bootstrapPopover('show')
assert.notEqual($('.popover').length, 0, 'popover was inserted') assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted') assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted')
assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted') assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
$popover.bootstrapPopover('hide') $popover.bootstrapPopover('hide')
assert.strictEqual($('.popover').length, 0, 'popover was removed') assert.strictEqual($('.popover').length, 0, 'popover was removed')
@ -380,8 +380,8 @@ $(function () {
content: 7 content: 7
}) })
.on('shown.bs.popover', function () { .on('shown.bs.popover', function () {
assert.strictEqual($('.popover .popover-title').text(), '5') assert.strictEqual($('.popover .popover-header').text(), '5')
assert.strictEqual($('.popover .popover-content').text(), '7') assert.strictEqual($('.popover .popover-body').text(), '7')
done() done()
}) })

22
scss/_popover.scss
View File

@ -120,8 +120,8 @@
border-bottom-color: $popover-arrow-color; border-bottom-color: $popover-arrow-color;
} }
// This will remove the popover-title's border just below the arrow // This will remove the popover-header's border just below the arrow
.popover-title::before { .popover-header::before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
@ -129,7 +129,7 @@
width: 20px; width: 20px;
margin-left: -10px; margin-left: -10px;
content: ""; content: "";
border-bottom: 1px solid $popover-title-bg; border-bottom: 1px solid $popover-header-bg;
} }
} }
@ -174,13 +174,13 @@
// Offset the popover to account for the popover arrow // Offset the popover to account for the popover arrow
.popover-title { .popover-header {
padding: $popover-title-padding-y $popover-title-padding-x; padding: $popover-header-padding-y $popover-header-padding-x;
margin-bottom: 0; // Reset the default from Reboot margin-bottom: 0; // Reset the default from Reboot
font-size: $font-size-base; font-size: $font-size-base;
color: $popover-title-color; color: $popover-header-color;
background-color: $popover-title-bg; background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width}); $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
@include border-top-radius($offset-border-width); @include border-top-radius($offset-border-width);
@ -189,7 +189,7 @@
} }
} }
.popover-content { .popover-body {
padding: $popover-content-padding-y $popover-content-padding-x; padding: $popover-body-padding-y $popover-body-padding-x;
color: $popover-content-color; color: $popover-body-color;
} }

14
scss/_variables.scss
View File

@ -673,14 +673,14 @@ $popover-border-width: $border-width !default;
$popover-border-color: rgba($black,.2) !default; $popover-border-color: rgba($black,.2) !default;
$popover-box-shadow: 0 5px 10px rgba($black,.2) !default; $popover-box-shadow: 0 5px 10px rgba($black,.2) !default;
$popover-title-bg: darken($popover-bg, 3%) !default; $popover-header-bg: darken($popover-bg, 3%) !default;
$popover-title-color: $headings-color !default; $popover-header-color: $headings-color !default;
$popover-title-padding-y: 8px !default; $popover-header-padding-y: 8px !default;
$popover-title-padding-x: 14px !default; $popover-header-padding-x: 14px !default;
$popover-content-color: $body-color !default; $popover-body-color: $body-color !default;
$popover-content-padding-y: 9px !default; $popover-body-padding-y: 9px !default;
$popover-content-padding-x: 14px !default; $popover-body-padding-x: 14px !default;
$popover-arrow-width: 10px !default; $popover-arrow-width: 10px !default;
$popover-arrow-height: 5px !default; $popover-arrow-height: 5px !default;