Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rename popover classes #22829

Merged
merged 1 commit into from
Jun 15, 2017
+52 −52
Merged

Rename popover classes #22829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions docs/4.0/components/popovers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop

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
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions js/src/popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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