clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-24 03:57:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

Browse Source
This commit is contained in:
Mark Otto 2015-04-25 23:53:25 -07:00
commit e815696dac
8 changed files with 77 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/_plugins/callout.rb
View File

@ -6,12 +6,11 @@ module Jekyll
def initialize(tag_name, type, tokens)
super
@type = type
if type == "danger"
@type = "danger"
elsif type == "warning"
@type = "warning"
elsif type == "info"
type.strip!
if %w(info danger warning).include?(type)
@type = type
else
puts "#{type} callout not supported. Defaulting to info"
@type = "info"
end
end

2
docs/components/card.md
View File

@ -21,7 +21,7 @@ Cards require very little markup, but do require some additional classes to give
### Sizing
Cards are block-leve by default, so they'll fill the available horizontal space. Constrain their widths via custom styles, our predefined grid classes, or our grid mixins.
Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via custom styles, our predefined grid classes, or our grid mixins.
{% example html %}
<div class="card" style="width: 20rem;">

2
docs/components/forms.md
View File

@ -185,7 +185,7 @@ Use the `.inline-form` class to to display a series of labels, form controls, an
- Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
- Controls **only appear inline in viewports that are at least 768px wide** to account for narrow viewports on mobile devices.
Because of this, you may need to manually adddres the width and alignment of individual form controls. Lastly, as shown below, you should always include a `<label>` with each form control.
Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a `<label>` with each form control.
#### Visible labels

2
docs/components/reboot.md
View File

@ -118,7 +118,7 @@ Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-a
<div class="bd-example">
<table>
<caption>
This is an example table, and this is it's caption to describe the contents.
This is an example table, and this is its caption to describe the contents.
</caption>
<thead>
<tr>

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

@ -166,7 +166,8 @@ $(function () {
QUnit.test('should destroy popover', function (assert) {
assert.expect(7)
var $popover = $('<div/>')
var $popover = $('<div>Popover trigger</div>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
trigger: 'hover'
})
@ -240,6 +241,17 @@ $(function () {
.bootstrapPopover('show')
})
QUnit.test('should throw an error when trying to show a popover on a hidden element', function (assert) {
assert.expect(1)
var $target = $('<a href="#" title="Another popover" data-content="Body" style="display: none;">I am hidden</a>').appendTo('#qunit-fixture')
assert.throws(function () {
$target.bootstrapPopover('show')
}, new Error('Can\'t show a tooltip/popover on a hidden element'))
$target.remove()
})
QUnit.test('should throw an error when initializing popover on the document object without specifying a delegation selector', function (assert) {
assert.expect(1)
assert.throws(function () {

80
js/tests/unit/tooltip.js
View File

@ -44,7 +44,7 @@ $(function () {
})
test('should add aria-describedby to the trigger on show', function () {
var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.bootstrapTooltip()
.appendTo('#qunit-fixture')
.bootstrapTooltip('show')
@ -57,7 +57,7 @@ $(function () {
})
test('should remove aria-describedby from trigger on hide', function () {
var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.bootstrapTooltip()
.appendTo('#qunit-fixture')
@ -69,7 +69,7 @@ $(function () {
})
test('should assign a unique id tooltip element', function () {
$('<a href="#" rel="tooltip" title="Another tooltip"/>')
$('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip('show')
@ -80,7 +80,7 @@ $(function () {
})
test('should place tooltips relative to placement option', function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ placement: 'bottom' })
@ -92,7 +92,7 @@ $(function () {
})
test('should allow html entities', function () {
var $tooltip = $('<a href="#" rel="tooltip" title="&lt;b&gt;@fat&lt;/b&gt;"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="&lt;b&gt;@fat&lt;/b&gt;">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ html: true })
@ -104,7 +104,7 @@ $(function () {
})
test('should respect custom classes', function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>' })
@ -118,7 +118,8 @@ $(function () {
test('should fire show event', function (assert) {
var done = assert.async()
$('<div title="tooltip title"/>')
$('<div title="tooltip title">Tooltip trigger</div>')
.appendTo('#qunit-fixture')
.on('show.bs.tooltip', function () {
ok(true, 'show event fired')
done()
@ -129,7 +130,7 @@ $(function () {
test('should fire shown event', function (assert) {
var done = assert.async()
$('<div title="tooltip title"></div>')
$('<div title="tooltip title">Tooltip trigger</div>')
.appendTo('#qunit-fixture')
.on('shown.bs.tooltip', function () {
ok(true, 'shown was called')
@ -141,7 +142,8 @@ $(function () {
test('should not fire shown event when show was prevented', function (assert) {
var done = assert.async()
$('<div title="tooltip title"/>')
$('<div title="tooltip title">Tooltip trigger</div>')
.appendTo('#qunit-fixture')
.on('show.bs.tooltip', function (e) {
e.preventDefault()
ok(true, 'show event fired')
@ -156,7 +158,7 @@ $(function () {
test('should fire hide event', function (assert) {
var done = assert.async()
$('<div title="tooltip title"/>')
$('<div title="tooltip title">Tooltip trigger</div>')
.appendTo('#qunit-fixture')
.on('shown.bs.tooltip', function () {
$(this).bootstrapTooltip('hide')
@ -171,7 +173,7 @@ $(function () {
test('should fire hidden event', function (assert) {
var done = assert.async()
$('<div title="tooltip title"/>')
$('<div title="tooltip title">Tooltip trigger</div>')
.appendTo('#qunit-fixture')
.on('shown.bs.tooltip', function () {
$(this).bootstrapTooltip('hide')
@ -186,7 +188,7 @@ $(function () {
test('should not fire hidden event when hide was prevented', function (assert) {
var done = assert.async()
$('<div title="tooltip title"/>')
$('<div title="tooltip title">Tooltip trigger</div>')
.appendTo('#qunit-fixture')
.on('shown.bs.tooltip', function () {
$(this).bootstrapTooltip('hide')
@ -203,7 +205,8 @@ $(function () {
})
test('should destroy tooltip', function () {
var $tooltip = $('<div/>')
var $tooltip = $('<div>Tooltip trigger</div>')
.appendTo('#qunit-fixture')
.bootstrapTooltip()
.on('click.foo', function () {})
@ -221,7 +224,7 @@ $(function () {
})
test('should show tooltip with delegate selector on click', function () {
var $div = $('<div><a href="#" rel="tooltip" title="Another tooltip"/></div>')
var $div = $('<div><a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a></div>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
selector: 'a[rel="tooltip"]',
@ -236,7 +239,7 @@ $(function () {
})
test('should show tooltip when toggle is called', function () {
$('<a href="#" rel="tooltip" title="tooltip on toggle"/>')
$('<a href="#" rel="tooltip" title="tooltip on toggle">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'manual' })
.bootstrapTooltip('toggle')
@ -255,7 +258,7 @@ $(function () {
})
test('should place tooltips inside body when container is body', function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ container: 'body' })
.bootstrapTooltip('show')
@ -275,7 +278,7 @@ $(function () {
var $styles = $(styles).appendTo('head')
var $container = $('<div/>').appendTo('#qunit-fixture')
var $target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>')
var $target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line">m</a>')
.appendTo($container)
.bootstrapTooltip({
placement: 'right',
@ -296,7 +299,7 @@ $(function () {
})
test('should use title attribute for tooltip text', function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip()
@ -308,7 +311,7 @@ $(function () {
})
test('should prefer title attribute over title option', function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
title: 'This is a tooltip with some content'
@ -322,7 +325,7 @@ $(function () {
})
test('should use title option', function () {
var $tooltip = $('<a href="#" rel="tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
title: 'This is a tooltip with some content'
@ -548,7 +551,7 @@ $(function () {
var $styles = $(styles).appendTo('head')
var $container = $('<div/>').appendTo('#qunit-fixture')
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>')
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;">m</a>')
.appendTo($container)
.bootstrapTooltip({
placement: 'right',
@ -575,7 +578,7 @@ $(function () {
var $styles = $(styles).appendTo('head')
var $container = $('<div/>').appendTo('#qunit-fixture')
var $target = $('<a href="#" rel="tooltip" title="tip" style="bottom: 0px; left: 0px;"/>')
var $target = $('<a href="#" rel="tooltip" title="tip" style="bottom: 0px; left: 0px;">m</a>')
.appendTo($container)
.bootstrapTooltip({
placement: 'right',
@ -604,7 +607,7 @@ $(function () {
var $styles = $(styles).appendTo('head')
var $container = $('<div/>').appendTo('#qunit-fixture')
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>')
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;">m</a>')
.appendTo($container)
.bootstrapTooltip({
placement: 'bottom',
@ -632,7 +635,7 @@ $(function () {
var $styles = $(styles).appendTo('head')
var $container = $('<div/>').appendTo('body')
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; right: 0px;"/>')
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; right: 0px;">m</a>')
.appendTo($container)
.bootstrapTooltip({
placement: 'bottom',
@ -662,7 +665,7 @@ $(function () {
var $styles = $(styles).appendTo('head')
var $container = $('<div class="container-viewport"/>').appendTo(document.body)
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 50px; left: 350px;"/>')
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 50px; left: 350px;">m</a>')
.appendTo($container)
.bootstrapTooltip({
placement: 'bottom',
@ -682,7 +685,7 @@ $(function () {
test('should not error when trying to show an auto-placed tooltip that has been removed from the dom', function () {
var passed = true
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.one('show.bs.tooltip', function () {
$(this).remove()
@ -770,7 +773,7 @@ $(function () {
test('should show tooltip if leave event hasn\'t occurred before delay expires', function (assert) {
var done = assert.async()
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 })
@ -789,7 +792,7 @@ $(function () {
test('should not show tooltip if leave event occurs before delay expires', function (assert) {
var done = assert.async()
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 })
@ -809,7 +812,7 @@ $(function () {
test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function (assert) {
var done = assert.async()
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 0, hide: 150 }})
@ -834,7 +837,7 @@ $(function () {
test('should not show tooltip if leave event occurs before delay expires', function (assert) {
var done = assert.async()
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 })
@ -854,7 +857,7 @@ $(function () {
test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function (assert) {
var done = assert.async()
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 150, hide: 0 }})
@ -874,7 +877,7 @@ $(function () {
test('should wait 200ms before hiding the tooltip', function (assert) {
var done = assert.async()
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 0, hide: 150 }})
@ -1089,7 +1092,7 @@ $(function () {
+ '</style>'
var $styles = $(styles).appendTo('head')
var $element = $('<div id="target" title="1"/>').appendTo('#qunit-fixture')
var $element = $('<div id="target" title="1"></div>').appendTo('#qunit-fixture')
$element
.on('shown.bs.tooltip', function () {
@ -1109,4 +1112,15 @@ $(function () {
$element.bootstrapTooltip('show')
})
QUnit.test('should throw an error when trying to show a tooltip on a hidden element', function (assert) {
assert.expect(1)
var $target = $('<a href="#" rel="tooltip" title="Another tooltip" style="display: none;">I am hidden</a>').appendTo('#qunit-fixture')
assert.throws(function () {
$target.bootstrapTooltip('show')
}, new Error('Can\'t show a tooltip/popover on a hidden element'))
$target.remove()
})
})

8
js/tooltip.js
View File

@ -293,6 +293,14 @@ Tooltip.prototype['destroy'] = function () {
* and replace with external lib
*/
Tooltip.prototype['show'] = function () {
// jQuery's :hidden gives false positives for SVG elements
// See https://github.com/jquery/jquery/pull/939
// Since this hiddenness check is just a nicety anyway, simply assume SVGs are always visible.
var isHidden = $(this.element).is(':hidden') && !(window.SVGElement && this.element instanceof window.SVGElement)
if (isHidden) {
throw new Error('Can\'t show a tooltip/popover on a hidden element')
}
var showEvent = $.Event(this.getEventObject().SHOW)
if (this.isWithContent() && this._isEnabled) {

2
scss/_reboot.scss
View File

@ -243,7 +243,7 @@ textarea {
margin: 0;
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
// properly inherited. However, `line-height` isn't addressed there. Using this
// ensures we don't need to unnessarily redeclare the global font stack.
// ensures we don't need to unnecessarily redeclare the global font stack.
line-height: inherit;
}