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.

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

Be consistent with Popper's name. #32224

Merged
merged 2 commits into from
Nov 21, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions js/src/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -156,10 +156,10 @@ class Dropdown {
return
}

// Disable totally Popper.js for Dropdown in Navbar
// Totally disable Popper for Dropdowns in Navbar
if (!this._inNavbar) {
if (typeof Popper === 'undefined') {
throw new TypeError('Bootstrap\'s dropdowns require Popper.js (https://popper.js.org)')
throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
}

let referenceElement = this._element
Expand Down Expand Up @@ -329,7 +329,7 @@ class Dropdown {
}
}

// Disable Popper.js if we have a static display
// Disable Popper if we have a static display
if (this._config.display === 'static') {
popperConfig.modifiers.applyStyle = {
enabled: false
Expand Down
2 changes: 1 addition & 1 deletion js/src/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ const TRIGGER_MANUAL = 'manual'
class Tooltip {
constructor(element, config) {
if (typeof Popper === 'undefined') {
throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org)')
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
}

// private
Expand Down
14 changes: 7 additions & 7 deletions js/tests/unit/dropdown.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ describe('Dropdown', () => {
expect(dropdown.toggle).toHaveBeenCalled()
})

it('should allow to pass config to popper.js with `popperConfig`', () => {
it('should allow to pass config to Popper with `popperConfig`', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
Expand Down Expand Up @@ -841,7 +841,7 @@ describe('Dropdown', () => {
expect(dropdown._element).toBeNull()
})

it('should dispose dropdown with popper.js', () => {
it('should dispose dropdown with Popper', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
Expand Down Expand Up @@ -872,7 +872,7 @@ describe('Dropdown', () => {
})

describe('update', () => {
it('should call popper.js and detect navbar on update', () => {
it('should call Popper and detect navbar on update', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
Expand Down Expand Up @@ -1005,7 +1005,7 @@ describe('Dropdown', () => {
btnDropdown.click()
})

it('should not use popper.js in navbar', done => {
it('should not use Popper in navbar', done => {
fixtureEl.innerHTML = [
'<nav class="navbar navbar-expand-md navbar-light bg-light">',
' <div class="dropdown">',
Expand All @@ -1022,14 +1022,14 @@ describe('Dropdown', () => {
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')

dropdownEl.addEventListener('shown.bs.dropdown', () => {
expect(dropdownMenu.getAttribute('style')).toEqual(null, 'no inline style applied by popper.js')
expect(dropdownMenu.getAttribute('style')).toEqual(null, 'no inline style applied by Popper')
done()
})

btnDropdown.click()
})

it('should not use popper.js if display set to static', done => {
it('should not use Popper if display set to static', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>',
Expand All @@ -1044,7 +1044,7 @@ describe('Dropdown', () => {
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')

dropdownEl.addEventListener('shown.bs.dropdown', () => {
// popper.js add this attribute when we use it
// Popper adds this attribute when we use it
expect(dropdownMenu.getAttribute('x-placement')).toEqual(null)
done()
})
Expand Down
2 changes: 1 addition & 1 deletion js/tests/unit/tooltip.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ describe('Tooltip', () => {
tooltipInContainerEl.click()
})

it('should allow to pass config to popper.js with `popperConfig`', () => {
it('should allow to pass config to Popper with `popperConfig`', () => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip">'

const tooltipEl = fixtureEl.querySelector('a')
Expand Down
2 changes: 1 addition & 1 deletion js/tests/visual/dropdown.html
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
<div class="col-sm-3 mt-4">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Dropdown menu without Popper.js
Dropdown menu without Popper
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
Expand Down
2 changes: 1 addition & 1 deletion scss/_dropdown.scss
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
}
}

// When enabled Popper.js, reset basic dropdown position
// When Popper is enabled, reset the basic dropdown position
// stylelint-disable-next-line no-duplicate-selectors
.dropdown-menu {
&[x-placement^="top"],
Expand Down
18 changes: 9 additions & 9 deletions site/content/docs/5.0/components/dropdowns.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ toc: true

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).

Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
Dropdowns are built on a third party library, [Popper](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.

## Accessibility

Expand Down Expand Up @@ -633,7 +633,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.

{{< callout info >}}
**Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
**Heads up!** Dropdowns are positioned thanks to Popper (except when they are contained in a navbar).
{{< /callout >}}

{{< example >}}
Expand Down Expand Up @@ -683,7 +683,7 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d
</div>
{{< /example >}}

Note that you don't need to add a `data-bs-display="static"` attribute to dropdown buttons in navbars, since Popper.js isn't used in navbars.
Note that you don't need to add a `data-bs-display="static"` attribute to dropdown buttons in navbars, since Popper isn't used in navbars.

## Menu content

Expand Down Expand Up @@ -874,38 +874,38 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>
<p>Offset of the dropdown relative to its target.</p>
<p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p>
<p>For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
<p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
</td>
</tr>
<tr>
<td><code>flip</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..flip.enabled">flip docs</a>.</td>
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.enabled">flip docs</a>.</td>
</tr>
<tr>
<td><code>boundary</code></td>
<td>string | element</td>
<td><code>'scrollParent'</code></td>
<td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
<td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
</tr>
<tr>
<td><code>reference</code></td>
<td>string | element</td>
<td><code>'toggle'</code></td>
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#referenceObject">referenceObject docs</a>.</td>
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#referenceObject">referenceObject docs</a>.</td>
</tr>
<tr>
<td><code>display</code></td>
<td>string</td>
<td><code>'dynamic'</code></td>
<td>By default, we use Popper.js for dynamic positioning. Disable this with <code>static</code>.</td>
<td>By default, we use Popper for dynamic positioning. Disable this with <code>static</code>.</td>
</tr>
<tr>
<td><code>popperConfig</code></td>
<td>null | object</td>
<td><code>null</code></td>
<td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper.js's configuration</a></td>
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
</tr>
</tbody>
</table>
Expand Down
10 changes: 5 additions & 5 deletions site/content/docs/5.0/components/popovers.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ toc: true

Things to know when using the popover plugin:

- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
- Popovers rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper in order for popovers to work!
- Popovers require the [tooltip plugin]({{< docsref "/components/tooltips" >}}) as a dependency.
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
- Zero-length `title` and `content` values will never show a popover.
Expand Down Expand Up @@ -247,20 +247,20 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
<td><code>offset</code></td>
<td>number | string</td>
<td><code>0</code></td>
<td>Offset of the popover relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</td>
<td>Offset of the popover relative to its target. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</td>
</tr>
<tr>
<td><code>fallbackPlacement</code></td>
<td>string | array</td>
<td><code>'flip'</code></td>
<td>Allow to specify which position Popper will use on fallback. For more information refer to
Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
</tr>
<tr>
<td><code>boundary</code></td>
<td>string | element</td>
<td><code>'scrollParent'</code></td>
<td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
<td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
</tr>
<tr>
<td><code>sanitize</code></td>
Expand All @@ -284,7 +284,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
<td><code>popperConfig</code></td>
<td>null | object</td>
<td><code>null</code></td>
<td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper.js's configuration</a></td>
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
</tr>
</tbody>
</table>
Expand Down
10 changes: 5 additions & 5 deletions site/content/docs/5.0/components/tooltips.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ toc: true

Things to know when using the tooltip plugin:

- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
- Tooltips rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper in order for tooltips to work!
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
- Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
Expand Down Expand Up @@ -255,21 +255,21 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
<td>
<p>Offset of the tooltip relative to its target.</p>
<p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p>
<p>For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
<p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
</td>
</tr>
<tr>
<td><code>fallbackPlacement</code></td>
<td>string | array</td>
<td><code>'flip'</code></td>
<td>Allow to specify which position Popper will use on fallback. For more information refer to
Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
</tr>
<tr>
<td><code>boundary</code></td>
<td>string | element</td>
<td><code>'scrollParent'</code></td>
<td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
<td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
</tr>
<tr>
<td><code>sanitize</code></td>
Expand All @@ -293,7 +293,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
<td><code>popperConfig</code></td>
<td>null | object</td>
<td><code>null</code></td>
<td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper.js's configuration</a></td>
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
</tr>
</tbody>
</table>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.0/customize/optimize.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ If you're not using a component, comment it out or delete it entirely. For examp

## Lean JavaScript

Bootstrap's JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper.js) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you're customizing via Sass, be sure to remove related JavaScript.
Bootstrap's JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you're customizing via Sass, be sure to remove related JavaScript.

For instance, assuming you're using your own JavaScript bundler like Webpack or Rollup, you'd only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript:

Expand All @@ -37,7 +37,7 @@ import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/tooltip';
```

This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper.js dependency in your `package.json` file.
This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file.

{{< callout info >}}
### Default Exports
Expand Down
Loading