v4 alpha 3 ship list
Didn't do one of this for the second alpha (which kinda sucked). Trying again this time with the highlight-worthy changes as we go.
Summary of changes
- Updated grid system with new mixins and predefined classes.
- Overhauled form controls, documentation, and more to fix bugs, reduce code bloat, improve layout options, improve validation styles, and more.
- New native font stack to replace the Helvetica-Arial one for improved text rendering across all operating systems and devices.
- More selector improvements that reduce HTML requirements by better utilizing classes.
- Added dozens of new variables for improved customization (more still to come).
- Updated lots of documentation to better explain components and more.
- Massive improvements to flexbox support throughout the project, most notably on the grid.
- Renamed
.labelto.tagto disambiguate our custom component from the HTML element.
CSS
-
#17194 (closed): Ensure height of
select.form-controlmatches textual inputs. - #17222: Replace base64 PNGs for form validation icons and custom form controls with smaller, slightly customizable inline SVGs.
-
#17498 (closed), #18130 (closed): Removed horizontal padding on
.form-control-labelso it avoids overriding grid-based form layouts and renders correctly in stacked forms. - #17756: Fix flexbox column wrapping in Firefox and IE10+ by adding a
max-widththat equals the column width. - #18398, #18921: Add new
_custom.scssfile to the import stack for easier variable overrides. -
#18390 (closed): Renamed
.radioand.checkboxto.form-check, and.radio-inlineand.checkbox-inlineto.form-check-inline. - #18488: Turn
.text-mutedinto a full utility class with hover styles. - #18500: Allow multiple instances of
.input-group-addonper input group. -
#18515 (closed): Added
.form-control-{sm/lg}classes to match small and large input classes, namely for vertical alignment of label and input in horizontal form groups. -
#18573 (closed): Renamed
.form-control-labelto.col-form-labelfor it's more contextual use case as a horizontal grid layout option. - #18695: Condition-alize the container classes around the
$enable-grid-classesboolean option (joins the existing conditional.col-*classes). - #18702 (closed): Updated form validation docs to include basic examples for situations in which you'd want to use each state.
-
#18703 (closed): Dropped
.text-helpfor.form-control-feedback, designed specifically to only display temporary form validation feedback text in addition to normal help text. - #18771: Rewrote custom form components (new classes, less nesting, disabled checkboxes and radios) along with some docs tweaks.
- #18772: Renamed
.btn-*-outlineclasses to.btn-outline-*to make it easier to style with attribute selectors. - #18774: Rename
.card-*-outlineclasses to.card-outline-*. - #18782: Dropped the
.pagercomponent since it's essentially a lightly customized version of v4's new outline buttons. - #18783: Revamp a ton of nav variables for easier customization and tweak some nav docs.
- #18789: Prevent breadcrumb separator from getting underlined on hover when not using
<ol>markup in IE9-11 with a funky little CSS hack. - #18807: Overhaul dropdown docs and improve split button dropdowns with some fresh styles.
- #18814: Added Liberation Mono to the monospace font stack for the sake of Linux users.
- #18823: Add
$btn-active-box-shadowvariable for improved customization of button states. - #18848: Only round progress bar borders when
$enable-roundedis true. - #18925: Added
:lang()-based support for translating the text in the custom file input widget. - #18927: Apply
word-wrap:break-wordto tooltips and popovers. - #19000: Remove print-specific
max-width:100%;on images so that Google Maps etc. print correctly. - #19064 (closed): Overhaul tables docs and use rgba() colors for inverse tables.
- #19098: Brand new "native font stack" that prioritizes the well-designed display fonts from each major OS and device over traditional web fonts.
- #19099, #20349, and #20361: Overhauled grid system to add docs for flexbox, add flexbox utility classes, improve flexbox responsive behavior, streamline mixins, and more.
- #19102, a0a157db: Drop
.center-blockfor.m-x-auto. - #19103: Revamp the
{a,button}.list-group-itemselector with a new class,.list-group-item-action. Includes revised docs and more code comments. - #19105: Update modals to use
max-widthwithin their media queries to prevent horizontal scrollbars. - #19106: Added
$enable-print-stylesvariable to control whether default styles for@media printare included. - #19109: Integrated postcss-flexbugs-fixes into the build to workaround Flexbug #4 which affects IE10-11.
- #19121: Refactored button and input
paddingandline-heightfor improved stability after changing rootfont-size. - #19136: Change from hex border colors on
.form-controltorgba()withbackground-clip: padding-boxso we have borders that blend in with their background elements. - #19139: Add support for validation states on custom forms.
- #19157: Rename
.labelclass to.tagto disambiguate between a custom component and<label>s. - 955e0405: Added support for tab and pill navigations in card headers.
- #19234: Add
.w-100aswidth: 100%utility class - #19236: Extract $carousel-icon-width variable
- #19252: Add $card-img-overlay-padding variable
- #19277: new
.form-control-legendclass - #19370: Add
$input-bg-focusand$input-color-focusvariables - #19411: Neutralize link styles for placeholder links/named anchors
-
1b351058: Add
displayutility classes -
#19563 (closed): Add variable for
background-colorof.bg-inverseutility class - #19667: Use
border-radiusmixins and add$nav-tabs-border-radiusvariable - #19714: Suppress IE/Edge additional white/blue colors for focused
<select> - #19735: Add disabled styling for .custom-select
-
#19771 (closed): Fixed form control sizing not applying to
<select>s. - #19862: Update Normalize to v4.0.0
- #19874: Make named anchor/placeholder link style reset more specific by targeting
<a>s without anhrefandtabindex. - #19885: Several card improvements for spacing, contextual variants, bug fixes, and more.
- #19889: Updated popovers to include a variable for the inner padding and restore CSS-powered hiding of empty popover titles with
.popover-title:empty. - #20083: Add media rules to stack nav items in
navbar-toggleable-*s.
JS
- #19894 Update jQuery to v2.2.4
Accessibility
- #19222 Focus (visually hidden) input radio/checkbox
- #19255 add/unify advice on contextual colors and accessibility
- #19705 Add
aria-labeland callout about labelling pagination components - #19879 Handle
aria-hiddenon modal container when showing/hiding
Docs
- Miscellaneous accessibility fixes.
- #17089 (closed): Improve responsive test examples.
-
#17248 (closed), #17266, #19277: Update docs to use
<div>s over<fieldset>s in form groups as fieldsets are more appropriate for groups of multiple inputs. - #18492 (closed): Add .h1 – .h6 example to docs
- #18545 (closed): Combined the "Dropdowns" and "Button dropdown" docs pages into one
- #18704: Updates form validation docs to include examples of validation feedback text alongside always-present form field help text.
- #18705 (closed): Improve Migration Doc for .help-block and .form-group
- #18768 (closed): Add migration guidance for Dropdowns
- #19277: better use of
fieldset/legendfor grouped controls - #19408: Introduction for using table-reflow
- #19439 (closed): Include reasoning & suggested replacements for dropped widgets in migration docs
- #19459: Explicitly state the ordering of cards in card columns in the docs
- #19476: Added explicit commentary to .card-* classes
- #19567: Call out removal of
@screen-*variables in v4 - #19710: Update 300ms click delay docs to reflect iOS 9.3 improvements
- #19789: Suggest alternative approaches for
.hiddenand.showin migration docs - #19863: Add docs for inverse table "variants" using existing utilities
- #19892: Remove reference to
loaded.bs.modalevent - #20372: Enable flexbox CSS on flexbox grid page with custom override file for hosted docs
Examples
- #18741: Fix justified nav example by updating it to the new nav classes (note: it still exhibits the same bug on window resize as documented in v3).
Packaging
- #19427: Add jQuery and Tether to npm dependencies
- Fixed NuGet integration
- #19706: Add GitHub issue template
- #20141: Require Node.js >= v4 in
enginesinpackage.json