Skip to content

Commit

Permalink
Rename popover classes
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@mdo
mdo committed Jun 15, 2017
1 parent 8396039 commit 5b65876
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 52 deletions.
22 changes: 11 additions & 11 deletions docs/4.0/components/popovers.md
View file
Expand Up @@ -52,32 +52,32 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-popover-static">
<div class="popover bs-popover-top bs-popover-top-docs">
<div class="arrow"></div>
<h3 class="popover-title">Popover top</h3>
<div class="popover-content">
<h3 class="popover-header">Popover top</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>

<div class="popover bs-popover-right bs-popover-right-docs">
<div class="arrow"></div>
<h3 class="popover-title">Popover right</h3>
<div class="popover-content">
<h3 class="popover-header">Popover right</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>

<div class="popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow"></div>
<h3 class="popover-title">Popover bottom</h3>
<div class="popover-content">
<h3 class="popover-header">Popover bottom</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>

<div class="popover bs-popover-left bs-popover-left-docs">
<div class="arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content">
<h3 class="popover-header">Popover left</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
Expand Down Expand Up @@ -228,11 +228,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<tr>
<td>template</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>
<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>content</code> will be injected into the <code>.popover-content</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-body</code>.</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>
</td>
Expand Down
6 changes: 3 additions & 3 deletions js/dist/popover.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion js/dist/popover.js.map
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions js/src/popover.js
View file
Expand Up @@ -31,8 +31,8 @@ const Popover = (($) => {
content : '',
template : '<div class="popover" role="tooltip">'
+ '<div class="arrow"></div>'
+ '<h3 class="popover-title"></h3>'
+ '<div class="popover-content"></div></div>'
+ '<h3 class="popover-header"></h3>'
+ '<div class="popover-body"></div></div>'
})

const DefaultType = $.extend({}, Tooltip.DefaultType, {
Expand All @@ -45,8 +45,8 @@ const Popover = (($) => {
}

const Selector = {
TITLE : '.popover-title',
CONTENT : '.popover-content'
TITLE : '.popover-header',
CONTENT : '.popover-body'
}

const Event = {
Expand Down
28 changes: 14 additions & 14 deletions js/tests/unit/popover.js
View file
Expand Up @@ -95,8 +95,8 @@ $(function () {
$popover.bootstrapPopover('show')

assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.strictEqual($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
assert.strictEqual($('.popover .popover-content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
assert.strictEqual($('.popover .popover-header').text(), '@fat', 'title correctly inserted')
assert.strictEqual($('.popover .popover-body').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')

$popover.bootstrapPopover('hide')

Expand All @@ -114,10 +114,10 @@ $(function () {
$popover.bootstrapPopover('show')

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')
// 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')
})

Expand All @@ -132,9 +132,9 @@ $(function () {
$popover.bootstrapPopover('show')

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.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')
})

Expand All @@ -154,14 +154,14 @@ $(function () {

$popover.bootstrapPopover('show')
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')
assert.strictEqual($('.popover').length, 0, 'popover was removed')

$popover.bootstrapPopover('show')
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')
assert.strictEqual($('.popover').length, 0, 'popover was removed')
Expand All @@ -175,8 +175,8 @@ $(function () {
.bootstrapPopover('show')

assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted')
assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')

$popover.bootstrapPopover('hide')
assert.strictEqual($('.popover').length, 0, 'popover was removed')
Expand All @@ -193,8 +193,8 @@ $(function () {
.bootstrapPopover('show')

assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted')
assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')

$popover.bootstrapPopover('hide')
assert.strictEqual($('.popover').length, 0, 'popover was removed')
Expand Down Expand Up @@ -380,8 +380,8 @@ $(function () {
content: 7
})
.on('shown.bs.popover', function () {
assert.strictEqual($('.popover .popover-title').text(), '5')
assert.strictEqual($('.popover .popover-content').text(), '7')
assert.strictEqual($('.popover .popover-header').text(), '5')
assert.strictEqual($('.popover .popover-body').text(), '7')
done()
})

Expand Down
22 changes: 11 additions & 11 deletions scss/_popover.scss
View file
Expand Up @@ -120,16 +120,16 @@
border-bottom-color: $popover-arrow-color;
}

// This will remove the popover-title's border just below the arrow
.popover-title::before {
// This will remove the popover-header's border just below the arrow
.popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 20px;
margin-left: -10px;
content: "";
border-bottom: 1px solid $popover-title-bg;
border-bottom: 1px solid $popover-header-bg;
}
}

Expand Down Expand Up @@ -174,13 +174,13 @@


// Offset the popover to account for the popover arrow
.popover-title {
padding: $popover-title-padding-y $popover-title-padding-x;
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
margin-bottom: 0; // Reset the default from Reboot
font-size: $font-size-base;
color: $popover-title-color;
background-color: $popover-title-bg;
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
color: $popover-header-color;
background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
@include border-top-radius($offset-border-width);

Expand All @@ -189,7 +189,7 @@
}
}

.popover-content {
padding: $popover-content-padding-y $popover-content-padding-x;
color: $popover-content-color;
.popover-body {
padding: $popover-body-padding-y $popover-body-padding-x;
color: $popover-body-color;
}
16 changes: 8 additions & 8 deletions scss/_variables.scss
View file
Expand Up @@ -673,14 +673,14 @@ $popover-border-width: $border-width !default;
$popover-border-color: rgba($black,.2) !default;
$popover-box-shadow: 0 5px 10px rgba($black,.2) !default;

$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-color: $headings-color !default;
$popover-title-padding-y: 8px !default;
$popover-title-padding-x: 14px !default;

$popover-content-color: $body-color !default;
$popover-content-padding-y: 9px !default;
$popover-content-padding-x: 14px !default;
$popover-header-bg: darken($popover-bg, 3%) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: 8px !default;
$popover-header-padding-x: 14px !default;

$popover-body-color: $body-color !default;
$popover-body-padding-y: 9px !default;
$popover-body-padding-x: 14px !default;

$popover-arrow-width: 10px !default;
$popover-arrow-height: 5px !default;
Expand Down

0 comments on commit 5b65876

Please sign in to comment.