v4 Alpha 6 ship list

[mdo]

Highlights

• Flexbox is now on by default, with no fallback! This means we've dropped IE9 support, but with significant savings to our code base, simpler components, and improved customization thanks to the power of flexbox.
• Rebuilt the navbar with flexbox in mind, leading to some structural changes, but including more flexibility and customization. Includes updated docs, code snippets, more responsive options. All navbars in our examples are also using the latest markup and styles now. Also solves around 10 bugs in the process!
• Overhauled flexbox utilities and documented them. Replaced all the previous flexbox utilities with new ones that are named after property: value pairs (instead of creating new names for things). For example, .flex-items-between is now .justify-content-between to apply justify-content: between;. This also adds tons of new flexbox utilities for display, order, wrap, and more.
• Revamped navs Sass with flexbox and updated docs. All the floats and clearfixs have been removed, .nav-inline removed (on account of display: flex inlining for us on .nav), added fill and justify options, and more.
• Fixed up all examples to use latest navbar and grid changes.
• Building on the grid improvements from Alpha 5, you can now customize container padding across grid breakpoints and optionally remove grid gutters with .no-gutters.
• Similarly, our flexbox grid system has new classes for automatically sizing columns to the size of their content across viewports (e.g., you can now apply col-xs-6, col-md-auto, and col-xl-4 to a single element).
• Grid, display, float, margin, padding, and text utility classes have been significantly overhauled. In addition to all classes now being responsive, the xs tier no longer requires a breakpoint abbreviation, making for shorter and more descriptive classes and an easier migration from v3. For example, instead of .d-xs-none, it's back to .d-none while it remains .d-{sm,md,lg,xl}-none for those breakpoints.
• Renamed some .active, all .in, and all .open classes for our JavaScript powered components for more consistent naming. For example, instead it's now .collapse.show instead of .collapse.in and .show > .dropdown-menu instead of .open > .dropdown-menu to better communicate the visibility of elements.
• Refactored carousel with new, simpler styles, better documentation, and less specific selectors.
• Rewrote progress component without the <progress> element due to lack of animations, no support for multiple bars, and no support for labels on the progress bars.
• Fixed some unescaped #s in our SVG data URLs that are used to add vector background-images.
• Renamed .tag back to .badge, like v3, to avoid conflicts with common WordPress styles.
• A number of custom form enhancements and bugfixes were made. Label-less custom radios and cehckboxes, fixed SVG URLs in background-images, and more.
• Updated Normalize.css to v5.0.0.
• .form-check and .form-check-inline now share the same markup. Switch between the two by adding or removing .form-check-inline as a modifier.
• Added support for justified navigation when in flexbox mode.
• Renamed _animation.scss to _transitions.scss for clarity.
• Added new color variables (e.g., $blue) for additional customization.

CSS

• #15534, #19751: Properly enable 3D transforms for carousels in Firefox with @supports.
• #17982, #21202: Include box-sizing reset CSS media query helpers in bootstrap-grid.scss to ensure grid behaves as intended.
• #18228, #21429: Fix tab border in IE11 and Edge.
• #18574, #21379: Update alignment of badges in list group items with margin utilities.
• #18612, #21208: Update table docs to use .table-responsive as a modifier instead of wrapper.
• #18849, #18851: Don't use the clearfix mixin on card headers/footers in flexbox mode.
• #18946, #21111: Make .card-header and .card-footer transparent in inverse card.
• #18978, #18981: Add flexbox support to the list group component.
• #19065, #21216: Ensure proper rounding of progress bars when max is greater than value-"100".
• #19107, #21211: Add option to remove gutters from grid columns with .no-gutters on rows.
• #19217, #19308: Warn on compiling if the smallest breakpoint doesn't equal 0.
• #19253, #21441: Swap some hardcoded values for variables across form styles.
• #19304, #20973: Add ability to customize grid container padding across tiers.
• #19460, #21524: Remove explicit root font-size in pixels in favor of an implicit 16px browser default for improved accessibility.
• #19739: Update .embed-responsive to use flexbox.
• #19757: Improve use of variables by reassigning $gray- vars to component-based ones.
• #19762: Fix input group's .form-control sizing in Firefox when in flexbox mode.
• #19915: Remove margin-bottom from <label>s on custom file inputs.
• #19973, #21207: Change modal sizes to better account for responsive behavior. $modal-md is now 500px instead of 600px and $modal-lg is now 800px instead of 900px (to better match the medium one).
• #19983, #20284, #21224: Update clearfix to use display: block instead of table.
• #20033: Allow custom file inputs to utilize drag-and-drop by giving their inputs a fixed height and removing the pointer-events from the custom input.
• #20013, #21230: Increase padding of dismiss icon in alerts.
• #20395, #20903: Fix double border on flush list groups.
• #20441: Restore the invisible mixin for visibility: hidden.
• #20542, #21020, #21122: Rename .tag to .badge to avoid conflicts w/ WordPress.
• #20609, #20734: Add new parameter to the button-outline-variant mixin for setting the color on hover/focus.
• #20677: More color variables throughout Sass.
• #20730, #21033: Add a min-height to custom form controls to ensure they don't collapse without label text (due to indicators being absolutely positioned).
• #20741, #20951: Add and use variables for font-weight.
• #18490, #20926: Spacing utility classes are now responsive.
• #20908, #21244: Remove border-bottom from <abbr> given underline from Normalize.css.
• #20927, #21032: Improve the flexbox support for input groups.
• #20934: Display utility classes are now responsive, and float utilities have been tweaked slightly to drop the xs abbreviation for that breakpont.
• #20936, #20995: .form-check and .form-check-inline now share the same markup. Switch between the two by adding or removing .form-check-inline as a modifier.
• #20957: Remove duplicate navbar toggler variables.
• #20964: Use proper @if statement around shadows on .form-control.
• #20962: Fix unescaped # in SVG data URLs.
• #20963: Add support for variable width grid columns in our flexbox grid system.
• #20977, #21171: Use $input-line-height variable instead of base line-height to calculate height of <select>s so they properly match textual inputs and buttons.
• #20983, #21041: Add horizontal form validation state support and example to docs.
• #20999, #21295: Change margin-left to margin-right for custom form checks for better rendering on narrow viewports.
• #20101: Rearrange the grid mixins slightly to re-use the between mixin with less repetition.
• #21004: Add new $font-weight-base variable for setting the global, default font-weight on the <body> of your pages.
• #21023, #21034: Use some math functions to calculate the vertical offset via top on custom form controls.
• #21039, #21052: Adjust line-height of pagination links to match buttons and inputs.
• #21046: Improve rendering of .navbar-text across light and dark variants.
• #21050: Update forms to use their Sass variables for border-color on :focus.
• #21059, #21086, #21222: Remove -xs from the extra small grid class names (but keep the sm, md, lg, and xl for the others).
• #21064: Add $alert-margin-bottom variable.
• #21080, #21118: Rename $modal-title- variables to $modal-header- to match the classes.
• #21094, #21187: Fix underline on pagination links.
• #21095: Scope ::first-letter selector for print styles (fixes IE11 print bug).
• #21133: Update Normalize.css to v5 (which fixes #21060, a bug where details/summary elements wouldn't render correctly).
• #21164, #21242: Update .card-inverse to set a color for the entire card, and then update the docs to better describe the class's use and scope.
• #21199: Darken some colors for improved contrast (including some $gray- colors to fix #20952, active list group item text, and close icon).
• #21201: Add some flexbox nav variants for justified and centered nav options.
• #21203: Wrap transitions for .fade and .collapsing in an @if statement so they can be controlled by global $enable-transitions variable, which has been restored to true.
• #21205: Add styling for disabled nav links in light and dark navbars.
• #21206: Update instances of hardcoded $gray-lightest.
• #21212: Update .form-inline to add flexbox support, better docs, and better support for more form control types.
• #21213: Add border-0 override utilities (for all properties and individual sides).
• #21214: Add .rounded-0 utility for overriding border-radius.
• #21217: Remove xs- prefix from text utilities.
• #21221: Add .mw-100 and .mh-100 utilities for max-width: 100%; and max-height: 100%;.
• #21226: Rename .navbar-toggleable-xs to .navbar-toggleable and more cleanup.
• #21259, #21392: Reset <code> styles when in <a>s.
• #21261: Update <fieldset> comment to better reflect min-width weirdness.
• #21266, #21345: Add transitions variables throughout.
• #21278, #21315: Use the margin variable for custom checks.
• #21298: Refactor carousel component to remove nested CSS, restyle the component, and improve docs.
• #21327, #21370: Renamed _animation.scss to _transitions.scss for clarity.
• #21356: Add system-ui to font stack for future-proofing Chrome.
• #21368: Use $brand-primary as background-color for progress bar background.
• #21371: Rename $table-bg-inverse to $table-inverse-bg and add $table-inverse-color.
• #21378: Add some additional color variables.
• #21389, #21393: Make everything flexbox by default; drop support for IE9.
• #21390: Rewrite navbar with flexbox and overhaul it's docs.
• #21394: Rewrite button groups with flexbox.
• #21397: Add $white and $black variables to build on #21378 and put them to use.
• #21400: Rewrite carousel indicators and controls with flexbox.
• #21402: Added new width and height utilities for 25%, 50%, and 75% wide options.
• #21403: Rebuild cards with flexbox in mind, simplifying overall styling and improving docs.
• #21405: Rebuild .media object with flexbox, heavily reducing included classes and overhauling docs with new and improved examples.
• #21407: Fixed tons of flexbox bugs, overhauled flexbox utilities, redid navs in flexbox, fixed examples.
• #21425: Rebuild modal in flexbox.
• #21426: Add more margin-{side}: auto utilities and document how awesome they are with flexbox layouts.
• #21432: Update some CSS comments, clean up responsive spacing, reorder classes.
• #21442: Move _custom.scss import after variables and mixins.
• #21439: Simplify button states for pseudo-classes and more. Fixes a handful of issues in the process around how disabled and active buttons are styled.
• #21459: Simplify pseudo-classes on navs, navbars, list groups, and pagination. Also rewrite pagination in flexbox.
• #21461: Add align-items: center to .form-inline so smaller elements don't grow to their potentially larger siblings.
• #21462: More navbar simplification to be more mobile-first friendly, remove ambiguity, and improve customization.
• #21464: Add position: relative to containers by default.
• #21473: Rewrite progress component without <progress>.
• #21487: Remove tab-focus mixin as we're no longer overriding default focus styles.
• bd72b95: Remove .table-reflow.
• #21525: Removed leftover .caret styles from button CSS. These have been unused for some time with the switch to ::after for our dropdown indicators.

JS

• #16673, #17599, #18874, #18900: Ensure input-powered buttons trigger change event on input (instead of label).
• #16732, #21440: Update tooltip click state when hiding so can be shown again by trigger.
• #17371, #17642: Ensure dropdown items don't get stuck in .active state.
• #17739, #18804: Restore v3's Scrollspy behavior for better identifying sections at the end of pages.
• #17400, #17536: Add padding restoration tests for the <body>.
• #17754, #20467: Allow tab JS to use <ol>s in addition to <ul>s.
• #17755, #20725: Add container option to tooltips.
• #17800, #17823: Throw an error when a plugin is in transition.
• #17964, #17997: Avoid creating a function with Function constructor to avoid CSP violation.
• #18154, #18245: Add unit test for ignoreBackdropClick.
• #18454, #19953: Scope dropdown search for active element to current menu instead of whole document.
• #18850, #19058: Don't prevent keydown for inputs and textareas in carousel.
• #18796, #20462: Prevent modals from trying to navigate to <area>s.
• #18824, #18847: Ensure that accordions collapse properly.
• #19270, #20568, #21227: Hide tooltips and popovers within a modal when the modal is closed.
• #19344, #20982: Use a single "active"/"open" class—that being .active—across all our JavaScript plugins.
• #19541: Don't reference Tether via attachment to window.
• #20261, #21536: Update scrollspy plugin to use pageYOffset instead of scrollY.
• #20304: Fix broken activation of sibling nav links in Scrollspy.
• #20633, #21049: Move from $.proxy to ES6 arrow functions.
• #20642: Use multi-selector to remove the same event handler.
• #20651: Remove classes all at the same time.
• #20940: Tooltips throw an error when trigged from an element with display: none;.
• #21005: Refactor ESLint configuration based on eslint:recommended settings.
• #21021, #21036: Undo #19344 and #20982 some, using .show as the "in"/"active" class for transitioning components toggled via JavaScript.
• #21055, #21056: Rubber band scrolling no longer removes active state on first nav link.
• #21121: Update visual tests.
• #20907, #21413: Only .preventDefault() for the left and right arrow keys rather than every key.
• #21375: Close dropdown menus when focusing outside the menu, too.
• #21451: Allow tabs to use <nav> component markup.
• #21093: Fix aria-pressed attribute for buttons in container with data-attribute="buttons"

Docs

• #18532, #21027: Update and document our z-index variables.
• #19887: Document the carousel ride option and more.
• #20945: Update Google Analytics snippet to always load via HTTPS.
• #20947: Update examples to use latest versions of key components like navbars.
• #20948, #20998: Change name of Microsoft Edge in docs to just Edge.
• #20965, #20966: Fix docs for spacer utilities that set all values.
• #20994: Fix version number in Rubygems install docs.
• #20602, #21236: Better fallback copy for copy-pasting code snippets.
• #21205: Update values for media queries.
• #21262: Remove callout for soon to be defunct Firefox fieldset bug.
• #21288: Rebuild docs sidenav for simpler presentation; add redirect, too, for /utilities/.
• #21292: Remove specific requirement of float-left utility for card header navs (though you'll need float-right for right-aligned navs).
• #21420: Remove Meteor install instructions.
• #21466: Switched to the slim version of jQuery in our local and hosted docs.
• #21476, #21483: Remove all IE compatibility mode meta tags from our docs, examples, and JS tests.
• #21558: Fix media object alignment examples.

Examples

• #17816, #17883, #18707, #21140: Update Dashboard example to use latest markup and styles.

Build tools

• #17163, #21108: Refresh Travis build infrastructure w/ Ubuntu container and more.
• #21374: Move scss_lint task to npm script.
• #21404: Move cssmin task to npm script.
• #21414: Move uglify task to npm script.
• #21430: Disable Hound on test cases.
• #21480, #17924, #20740: Extend ESLint to cover all JS files and drop JSCS.
• #21489: Move sass task to npm script and drop Ruby Sass support.
• #21544: Update all dependencies.

Packaging