Beta 3 ship list #24439

Highlights

• New vertically centered modal option in Add .modal-dialog-centered for optional vertically centered modal #24510.
• Added new dropleft and dropright variants for dropdowns in Add dropright and dropleft (right and left placements for our dropdown) #23860.
• Rewrote background-images for custom checkboxes and radios to account for better multiple backgrounds. Now the opt-in background-image gradient is on the .custom-control-indicator and the icon is a pseudo-element, .custom-control-indicator::before.
• Our npm package no longer includes any files other than our source and dist JavaScript and CSS files. If you previously relied on our running our scripts via the node_modules folder, you'll need to update your build tools.
• Input groups rewritten to have specific .input-group-{prepend|append} classes, support validation styles and messages, and add custom select and file support.
• Rewrite and unify default and custom checkboxes and radios to have simpler markup, un-nesting the inputs from the labels so we can style the label based on the input's state. This is essential for form validation and disabled inputs.
• Responsive tables are once again parent classes to avoid a11y issues with changing a <table>'s display.
• Print styles have moved to bottom of the import stack to properly override styles.
• Restored cursor: pointer to non-disabled buttons, .close, navbar toggler, and pagination links.

CSS

• Convert px values to rem on tooltip variables #23468: Convert tooltip units to rem.
• v4 - Modal align vertical center #23638, Add .modal-dialog-centered for optional vertically centered modal #24510: Add new .modal-dialog-centered modifier to vertically center shorter modals.
• Consider alternative method of styling toggle buttons (don't use data-toggle="buttons" for styling)  #23728, Make styling of grouped option buttons class-based #24733: Change selector for styling input-based button groups.
• Converts modal px units to rem #23782: Convert modal's px units to rem.
• Outline button hover should apply same darken as filled button. #24144, Darken outline hover color to match default button hover #24150: Add ability to customize outline button hover state via mixin with two additional parameters.
• Custom Checkboxes/Radios Do Not Display Correct Color on :focus For Validation #24173, Issue #24173 Custom checkboxes radios correct color #24401: Fix validation focus styles for custom checks and file inputs.
• Add support for fractional viewport widths (zoom/high-dpi displays) #24299: Add support for fractional viewport widths (zoom/high-dpi displays).
• Reduce z-indexes in button-group, input-group, list-group, and pagination to the minimum necessary #24315: Reduce z-indexes in button-group, input-group, list-group, and pagination to the minimum necessary.
• Removes margin for pre on _code.scss since it's already set on _reboot.scss #24366: Remove margin for pre in _code.scss since it's already set in _reboot.scss.
• Add variable to configure the $dropdown-border-radius. #24376: Added variable for $dropdown-border-radius.
• Refactor a few selectors. #24404: Refactor a few selectors.
• Add vars for yiq color contrast function #24426: Added two new variables for our color contrast function, $yiq-text-dark and $yiq-text-light, for easier customization.
• Remove background-image: none; on .form-control #24454: Remove background-image: none; on .form-control.
• Add input group support for custom selects and custom files #24455: Add support for custom selects and file inputs to input groups.
• Adds animation to color on outlined btns #24465: Add animation to color on outlined btns
• Remove thumbnail-transition from .img-thumbnail. #24467: Remove unused transition from .img-thumbnail (and it's associated variable).
• Dismissible alert - long text overlaps close button #24469, Fix for right padding in dismissible alerts #24481: Fix padding on dismissible alerts to prevent overlapping close button.
• .form-control-plaintext not 100% width #24473, match form-control width to form-control-plaintext #24486: Match .form-control-plaintext display and width to the .form-control.
• Card headers and footers maintain border radius inside a card group #24488, fix card-group border radii #24491: Round corners of card headers and footers in card groups.
• Vertical button style radios/checkboxes bottom label margin not removed #24496, fix vertical input button group margin #24498: Remove margin-bottom on <label>-based buttons in button groups.
• Variable $enable-rounded doesn't disable border-radius in buttons #24503, Add fallback border-radius to .btn #24505: Override the border-radius on all .btns when $enable-rounded is disabled.
• Custom-select doesn't support single select with size attribute set above 1 #24504, .c-select-sm and .c-select-lg missing #20316, Add a mention and/or example of .custom-select-sm to Custom Select section #23823, Custom Select Border and Custom File Browser when active or focus not displaying properly #24597, Custom select updates #24699: Improve custom selects and document their sizes.
• Horizontal rule hard-coded margin introduced in Beta #24517, Adds margin variables for the hr element #24520: Add margin variables for the hr element.
• Progress bar doesn't handle 0% case #24538, Progress bar text #24544: Improve .progress-text rendering for 0% use case.
• valid/invalid custom select reverts to default border color on focus #24553, Custom select focus border #24695: Override the border-color on .custom-select:focus when the form control is valid or invalid.
• Custom Radio and Checkbox broken when $enable-gradients is true #24598, Rewrite custom form check backgrounds #24697: Rewrite custom checkbox and radio backgrounds.
• Removes hardcoded colors references on variables.scss #24603: Remove hardcoded colors references in our variables for colors, tabs, and more.
• Changes $list-inline-padding from px to rem #24618: Convert .list-inline padding to rem units.
• z-index of custom file input #24632, Reduce custom file z-index #24633: Reduce z-index on custom file input.
• Nav Tabs use single variable to style `$nav-tabs-link-hover-border-co… #24639: Add new variable to consolidate border variables on nav tabs.
• V4.beta.2 missing transition for progress-bar #24643, Restore .progress-bar transition #24694: Restore transition on .progress-bar.
• Move hardcoded opacity value in .btn:disabled to variable `$btn-dis… #24680: Add new variable for disable button opacity.
• Adds underline back to btn-link on focus #24723: Add underline back to btn-link on focus.
• Fix nested cards on card group #24766: Fix nested cards on card group.
• Adds variables for form validation messages #24767: Add variables for form validation messages.
• Fixes centered modal vertical overflow #24803: Improve support for vertically centered modals.
• adds hover state to the button element for background color utilities #24813: Add hover state to <button> elements for .bg- utilities to match <a> elements.
• Adds variable for color yiq threshold #24886: Adds variable for color yiq threshold.
• Feature request: col-form-label should have optional size classes #24917, Remove .col-form-legend in favor of .col-form-label #24932: Drop .col-form-legend in favor of .col-form-label, enabling size modifier classes to be used on <legend> elements.
• Rewrite input group component #25020: Rewrite input group component with specific prepends/appends, form validation, and more custom control support.
• Form check markup v2 #25050: Rewrite and unify default and custom checkboxes and radios to have simpler markup, un-nesting the inputs from the labels so we can style the label based on the input's state. This is essential for form validation and disabled inputs.
• Restyle code element, remove docs example overflow, improve docs examples #25054: Made file inputs 100% wide, updated examples in docs to prevent horizontal scrolling.
• Restore .table-responsive as a parent class #25058: Responsive tables are once again parent classes to avoid a11y issues with changing a <table>'s display.
• Full width custom select and file inputs #25059: Make custom selects and custom files full width to match their browser defaults.
• Fix tooltip/popover arrow size and position #25062: Refactor tooltip and popover arrow sizing and positioning.
• Update SCSS import order to have print styles last #25064: Update SCSS import order to have print styles last.
• Darken table border-color #25066: Darken table border-color to avoid matching with background-color.
• Rewrite custom file input #25068: Rewrite custom file input to move <label> to sibling of <input> and replace outer wrapper with a <div>, matching other inputs. Also adds validation support.
• Opinionated: reintroduce cursor:pointer #25082: Restored cursor: pointer to non-disabled buttons, .close, navbar toggler, and pagination links.
• Update button focus and active styles #25070: Separated .btn focus and active styles so that multiple .active buttons do not appear to all have focus.
• Set cursor:pointer for <summary> #24630: Set cursor:pointer for <summary>.

JS

• Add dropright and dropleft (right and left placements for our dropdown) #23860: Dropleft and dropright variants for dropdown added.
• Modal doesn't open without popper.min.js #24304, Throw error about Popper.js only when it's needed #24573: Throw error about Popper.js only when it's needed.
• Clean up transitionEnd properties. #24511, Changes related to #24958 #24962: Clean up transitionEnd properties.
• Update popper.js to v1.12.6 and package-lock.json. #24512: Update popper.js to v1.12.6 and package-lock.json.
• Add Util.jQuery which will detect jQuery instead of relying on global $ #24513, Ensure our plugins can work in jQuery.noConflict mode #24530: Ensure our plugins can work in jQuery.noConflict mode
• Add unit tests for util.js #24545: Add unit tests for util.js
• Dropdown - refine handling of keydown in input and textarea thanks to @pvdlg #24557: Dropdown - refine handling of keydown in input and textarea
• Do not create a Popper.js instance when we don't need it #24572: Do not create a Popper.js instance when we don't need it.
• Object spread : less jQuery more ES6 #24665, Simplify spread #24774: Object spread : less jQuery more ES6
• Update babel to v7.0.0-beta.31 #24683: Update babel to v7.0.0-beta.31
• Popover - when content is a function we should call it just once #24690: Popover - call content once if it's a function.
• Escape ID in Util.getSelectorFromElement #24700: Escape ID in Util.getSelectorFromElement.
• Fix test failure with jQuery 1.9.1 #24706: Fix test failure with jQuery 1.9.1.
• Use native pseudo-selectors instead of jQuery selectors #24713: Use native pseudo-selectors instead of jQuery selectors.
• fix(build): Use UMD and fix build to properly load deps #24783: Use UMD and fix build to properly load deps.
• Tab.js: do not remove fade class if there's no initial active pane #24871: Tab.js: do not remove fade class if there's no initial active pane
• feat(dropdown): add boundary config option #24976: dropdown: add boundary config option
• feat(tooltip+popover): add boundary config option #24979: tooltip & popover: add boundary config option

Docs

• V4 Documentation - Various Issues #24373, #24373 : Documentation/Utility/Display #24424: Improve documentation of display utilities.
• New examples screenshots #24395: Update screenshots for Examples page.
• remove max- from height of documentation sidebars #24446: Change max-height to height in documentation sidebars.
• migration.md: fix Jekyll variable. #24449: migration.md: fix Jekyll variable.
• Fix broken URI fragment and a redirected link. #24456: Fix broken URI fragment and a redirected link.
• Be consistent with "JS"/"JavaScript". #24457: Be consistent with "JS"/"JavaScript".
• Use navbar-expand-sm to our navbar bottom example for small devices #24463: Use navbar-expand-sm in our navbar bottom example for small devices.
• Reduce whitespace liquid outputs. #24470: Reduce whitespace liquid outputs.
• Simplify social.html. #24483: Simplify social.html and fix the wrong usage of site.description instead of page.description in meta description.
• descriptive docs variable naming #24521: Improve variable naming for docs Sass.
• Add table-row in documentation #24551: Add table-row in documentation.
• Add information about the fact we do not use Popper.js for Dropdown c… #24571: Add comment about dropdowns in navbars not using dynamic positioning.
• form y space in doc #24577: Improve form spacing in docs.
• Revamp docs About section #24589: Revamp some of the About section.
• Update docsearch.js links #24613: Update docsearch.js links.
• Update our Webpack documentation for Webpack 3 #24656: Update our Webpack documentation for Webpack 3.
• Fix jQuery file name in docs #24712: Use correct jQuery name in docs.
• v4 docs Collapse trigger using anchor tags should have role="button" #24725: Add missing role="button" in collapse examples.
• Removed .col-form-label from vertical form example #24771: Remove .col-form-label from vertical form example.
• Changes the text color to dark on bg color warning examples #24805: Change the text color to dark on bg color warning examples.
• Remove unused file and bundle ie-emulation-modes-warning.js with docs.min.js #24825: Remove unused file and bundle ie-emulation-modes-warning.js with docs.min.js.
• Update typography docs (#24809) #24863: Update typography docs.
• Use Jekyll's smartify filter when possible. #24866: Use Jekyll's smartify filter when possible.
• Remove unused CSS. #24872: Remove unused CSS.
• Override padding on radio input label #24899: Override padding on radio input label.
• Remove page reload in pwa.js. #24923: Remove page reload in pwa.js.
• Restyle code element, remove docs example overflow, improve docs examples #25054: Restyle code element, remove docs example overflow to fix remove the overflow from example container, currently it breaks the dropdown  #25038, and improve docs examples to prevent horizontal scrolling.
• d363c64: Fix invalid <nav role="tablist"> in docs

Build tools

• Set autoprefixer's cascade option to false. #24459: Set autoprefixer's cascade option to false.
• Tighten htmllint's rules. #24471: Tighten htmllint's rules.
• Update gems. #24499: Update gems.
• Enable stylelint's function-comma-space-after. #24501: Enable stylelint's function-comma-space-after.
• npm scripts: fix duplicate runs. #24532: npm scripts: fix duplicate runs.
• Clean up package.json scripts. #24583: Clean up package.json scripts.
• Revisit vnu-jar suppressions and fix the script to work on 32-bit OS #24606: Revisit vnu-jar suppressions and fix the script to work on 32-bit OS
• Don't run postcss for dist/css/*.min.css files. #24676: Don't run postcss for dist/css/*.min.css files.
• Update devDependencies #24722, Update devDependencies and gems. #24940: Update devDependencies and gems.
• Run our unit tests on different jQuery versions #24749: Run our unit tests on different jQuery versions
• Add a simple script to generate SRI hashes. #24814: Add a script to generate SRI hashes.
• Replace lint-vars.sh script with a shell.js script.  #24860: Replace lint-vars.sh script with a Node.js script.
• package.json: add Firefox in browserslist section. #24919: Update our browserslist.

Packaging

• Don't block using Bower #24584, Remove invalid bower.json (#24584) #24590: Remove the bower.json file entirely instead of providing a comment inside.