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

3 files changed, 59 insertions, 74 deletions

diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index a07a477a5..73d3ef5ff 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -11,21 +11,7 @@ Group a series of buttons together on a single line with the button group. Add o
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-{% callout warning %}
-#### Tooltips & popovers in button groups require special setting
-
-When using tooltips or popovers on elements within a `.btn-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
-{% endcallout %}
-
-{% callout warning %}
-#### Ensure correct `role` and provide a label
-
-In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
-
-In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
-{% endcallout %}
-
-### Basic example
+## Basic example
 
 Wrap a series of buttons with `.btn` in `.btn-group`.
 
@@ -37,7 +23,7 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 </div>
 {% endexample %}
 
-### Button toolbar
+## Button toolbar
 
 Combine sets of button groups into button toolbars for more complex components.
 
@@ -60,7 +46,7 @@ Combine sets of button groups into button toolbars for more complex components.
 </div>
 {% endexample %}
 
-### Sizing
+## Sizing
 
 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
 
@@ -97,7 +83,7 @@ Instead of applying button sizing classes to every button in a group, just add `
 <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
 {% endhighlight %}
 
-### Nesting
+## Nesting
 
 Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
 
@@ -118,7 +104,7 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
 </div>
 {% endexample %}
 
-### Vertical variation
+## Vertical variation
 
 Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
 
@@ -172,3 +158,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
   ...
 </div>
 {% endhighlight %}
+
+## Tooltips and popovers
+
+Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **You'll have to specify the option `container: 'body'`** to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 352671208..5de1bdc46 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -515,10 +515,22 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
 
 ## Help text
 
-Block level help text for form controls.
+No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes like `.text-muted`, you can create much more flexible help text as you need it.
+
+Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else).
+
+{% example html %}
+<small class="text-muted">
+  Some inline text with a small tag looks like this.
+</small>
+{% endexample %}
+
+Block help text—for below inputs or for longer lines of help text—can be easily achieved with a `<p>`.
 
 {% example html %}
-<p class="text-help">A block of help text that breaks onto a new line and may extend beyond one line.</p>
+<p class="text-muted">
+  A block of help text that breaks onto a new line and may extend beyond one line.
+</p>
 {% endexample %}
 
 ## Validation
@@ -655,35 +667,18 @@ Custom checkboxes and radios are inline to start. Add a parent with class `.c-in
 
 ### Select menu
 
-Similar to the checkboxes and radios, we wrap the `<select>` in a `<label>` as a semantic wrapper that we can generate custom styles on with CSS's generated content.
+Custom `<select>` menus need only a custom class, `.c-selecct` to trigger the custom styles.
 
 {% example html %}
-<label class="select">
-  <select>
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>
-</label>
+<select class="c-select">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
 {% endexample %}
 
-The `<select>` has quite a few styles to override and includes a few hacks to get things done. Here's what's happening:
-
-- The `appearance` is reset to `none` for nearly all styles to correctly apply across modern browsers (meaning not IE9).
-- The `:-moz-focusring` is overridden so that on focus there's no inner border in Firefox.
-- The arrow is hidden in Firefox with a media query hack. (There's a [longstanding open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a native method of addressing this.)
-- The arrow is hidden in IE10+ with a simple selector.
-- The arrow is hidden in IE9 with a separate media query hack which generates another pseudo-element to literally mask it. Not ideal, but doable.
-
-**Heads up!** This one comes with some quirks right now:
-
-- `select[multiple]` is currently currently **not supported**.
-- Clickability is limited in IE9.
-- Firefox's dropdown of `option`s looks rather ugly.
-- The custom caret is unable to receive the selected state's `color`.
-
-Any ideas on improving these are most welcome.
+Custom selects degrade nicely in IE9, receiving only a handful of overrides to remove the custom `background-image`. **Multiple selects (e.g., `<select multiple>`) are not currently supported.**
 
 ### File browser
 
diff --git a/docs/components/navs.md b/docs/components/navs.md
index 644cd7bf0..486b59433 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -30,8 +30,8 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
   <li class="nav-item">
     <a class="nav-link" href="#">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a class="nav-link" href="#">Disabled</a>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -53,8 +53,8 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
 
 {% example html %}
 <ul class="nav nav-tabs">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
   </li>
   <li class="nav-item">
     <a href="#" class="nav-link">Link</a>
@@ -74,8 +74,8 @@ Take that same HTML, but use `.nav-pills` instead:
 
 {% example html %}
 <ul class="nav nav-pills">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
   </li>
   <li class="nav-item">
     <a href="#" class="nav-link">Link</a>
@@ -83,8 +83,8 @@ Take that same HTML, but use `.nav-pills` instead:
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -95,8 +95,8 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
 
 {% example html %}
 <ul class="nav nav-pills nav-stacked">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
   </li>
   <li class="nav-item">
     <a href="#" class="nav-link">Link</a>
@@ -104,8 +104,8 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -118,10 +118,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 {% example html %}
 <ul class="nav nav-tabs">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
-  </li>
   <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
+  </li>
+  <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
     <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Action</a>
@@ -134,8 +134,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -144,10 +144,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 {% example html %}
 <ul class="nav nav-pills">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
-  </li>
   <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
+  </li>
+  <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
     <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Action</a>
@@ -160,8 +160,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -172,8 +172,8 @@ Use the tab JavaScript plugin—include it individually or through the compiled
 
 <div class="bd-example bd-example-tabs" role="tabpanel">
   <ul id="myTab" class="nav nav-tabs" role="tablist">
-    <li class="nav-item active">
-      <a class="nav-link" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
+    <li class="nav-item">
+      <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
@@ -212,8 +212,8 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 {% highlight html %}
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
-  <li class="nav-item active">
-    <a class="nav-link" href="#home" role="tab" data-toggle="tab">Home</a>
+  <li class="nav-item">
+    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
@@ -277,8 +277,8 @@ Activates a tab element and content container. Tab should have either a `data-ta
 
 {% highlight html %}
 <ul class="nav nav-tabs" role="tablist" id="myTab">
-  <li class="nav-item active">
-    <a class="nav-link" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
+  <li class="nav-item">
+    <a class="nav-link active" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>