Merge pull request #18782 from twbs/v4-rip-pager

v4: Drop pager component

docs/components/pagination.md

@@ -11,7 +11,7 @@ Provide pagination links for your site or app with the multi-page pagination com
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-## Default pagination
+## Overview
 
 Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
 
@@ -39,7 +39,7 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
 </nav>
 {% endexample %}
 
-### Disabled and active states
+## Disabled and active states
 
 Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
 
@@ -49,7 +49,6 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
 The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
 {% endcallout %}
 
-
 {% example html %}
 <nav>
   <ul class="pagination">
@@ -93,7 +92,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
 {% endexample %}
 
 
-### Sizing
+## Sizing
 
 Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
 
@@ -140,47 +139,3 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
   </ul>
 </nav>
 {% endexample %}
-
-## Pager
-
-Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
-
-### Default example
-
-By default, the pager centers links.
-
-{% example html %}
-<nav>
-  <ul class="pager">
-    <li><a href="#">Previous</a></li>
-    <li><a href="#">Next</a></li>
-  </ul>
-</nav>
-{% endexample %}
-
-### Aligned links
-
-Alternatively, you can align each link to the sides:
-
-{% example html %}
-<nav>
-  <ul class="pager">
-    <li class="pager-prev"><a href="#">Older</a></li>
-    <li class="pager-next"><a href="#">Newer</a></li>
-  </ul>
-</nav>
-{% endexample %}
-
-
-### Optional disabled state
-
-Pager links also support the `.disabled` class (though note that the same advice about keyboard focus as for the default pagination applies here as well).
-
-{% example html %}
-<nav>
-  <ul class="pager">
-    <li class="pager-prev disabled"><a href="#" tabindex="-1">Older</a></li>
-    <li class="pager-next"><a href="#">Newer</a></li>
-  </ul>
-</nav>
-{% endexample %}

docs/examples/blog/blog.css

@@ -125,14 +125,10 @@ h6, .h6 {
 
 
 /* Pagination */
-.pager {
+.blog-pagination {
   margin-bottom: 4rem;
-  text-align: left;
 }
-.pager > li > a {
+.blog-pagination > .btn {
-  width: 8rem;
-  padding: .75rem 1.25rem;
-  text-align: center;
   border-radius: 2rem;
 }
 

docs/examples/blog/index.html

@@ -104,11 +104,9 @@
             <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
           </div><!-- /.blog-post -->
 
-          <nav>
+          <nav class="blog-pagination">
-            <ul class="pager">
+            <a class="btn btn-outline-primary" href="#">Older</a>
-              <li><a href="#">Older</a></li>
+            <a class="btn btn-outline-secondary disabled" href="#">Newer</a>
-              <li class="disabled"><a href="#">Newer</a></li>
-            </ul>
           </nav>
 
         </div><!-- /.blog-main -->

docs/migration.md

@@ -36,7 +36,8 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
   - [Font Awesome](https://fortawesome.github.io/Font-Awesome/)
 - Dropped the Affix jQuery plugin. We recommend using a `position: sticky` polyfill instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations.
   - If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library.
-- Refactored nearly all components to use more unnested classes instead of children selectors.
+- Dropped the pager component as it was essentially slightly customized buttons.
+- Refactored nearly all components to use more un-nested classes instead of children selectors.
 
 ### Misc
 - Non-responsive usage of Bootstrap is no longer supported.
@@ -113,6 +114,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
 ### Pagination
 
 - Explicit classes (`.page-item`, `.page-link`) are now required on the descendants of `.pagination`s
+- Dropped the `.pager` component entirely as it was little more than customized outline buttons.
 
 ### Breadcrumbs
 

scss/_pager.scss

@@ -1,58 +0,0 @@
-.pager {
-  padding-left: 0;
-  margin-top: $spacer-y;
-  margin-bottom: $spacer-y;
-  text-align: center;
-  list-style: none;
-  @include clearfix();
-
-  li {
-    display: inline;
-
-    > a,
-    > span {
-      display: inline-block;
-      padding: 5px 14px;
-      background-color: $pager-bg;
-      border: $pager-border-width solid $pager-border-color;
-      border-radius: $pager-border-radius;
-    }
-
-    > a {
-      @include hover-focus {
-        text-decoration: none;
-        background-color: $pager-hover-bg;
-      }
-    }
-  }
-
-  .disabled {
-    > a {
-      @include plain-hover-focus {
-        color: $pager-disabled-color;
-        pointer-events: none;
-        cursor: $cursor-disabled;
-        background-color: $pager-bg;
-      }
-    }
-    > span {
-      color: $pager-disabled-color;
-      cursor: $cursor-disabled;
-      background-color: $pager-bg;
-    }
-  }
-}
-
-.pager-next {
-  > a,
-  > span {
-    float: right;
-  }
-}
-
-.pager-prev {
-  > a,
-  > span {
-    float: left;
-  }
-}

scss/bootstrap.scss

@@ -33,7 +33,6 @@
 @import "card";
 @import "breadcrumb";
 @import "pagination";
-@import "pager";
 @import "labels";
 @import "jumbotron";
 @import "alert";