[Informational] Bootstrap V4.beta 1, 2 & 3 ship list

[tmorehouse]

Changes / features in Bootstrap V4.beta:

V4.beta.1: twbs/bootstrap#21568 ✔️
V4.beta.2: twbs/bootstrap#23278 ✔️
V4.beta.3: twbs/bootstrap#24439

We will use this issue to track progress for Bootstrap-Vue v1.0.0.x

Bootstrap-Vue components affected (we'll ad more as we find out more):

• b-tooltip popper.js (PR feat: New popper.js based tooltip/popover directives and components #923) implemented as a directive & component
• b-popover popper.js (PR feat: New popper.js based tooltip/popover directives and components #923) implemented as a directive & component
• b-badge:
• • b-badge class .badge-default removed in beta.1
• • V4.beta.2 supports "actionable" badges (i.e. links with HREF) Making using the contextual classes on links clearer. twbs/bootstrap#24422
• b-dropdown:
• • popper.js positioning (PR fix(dropdowns): Migration to popper.js positioning #913)
• • Dropleft and dropright support (See Add dropright and dropleft (right and left placements for our dropdown) twbs/bootstrap#23860)
• • Allow container option for dropdowns (see Add container option to our Dropdowns twbs/bootstrap#24257) Canned as it breaks keyboard navigation
• • Support for forms in dropdown (see docs: show a form in navbar dropdown example twbs/bootstrap#22591 and Add examples of forms in dropdown menus twbs/bootstrap#22857)
• b-nav-item-dropdown:
• • popper.js - exclude positioning (see dropdown-menu-right works only inside navbars twbs/bootstrap#23553) (PR fix(dropdowns): Migration to popper.js positioning #913)
    Add examples of forms in dropdown menus twbs/bootstrap#22857)
• b-table:
• • b-table renamed .table-inverse, .thead-inverse, and .thead-default to .*-dark and .*-light, matching BSV4 color schemes used elsewhere. See Rename .table-inverse, .thead-inverse, .thead-default to .*-dark, .*-light twbs/bootstrap#23560. b-table docs: Bootstrap-Vue already supports any variant name on b-table, but needs updated documentation when V4.beta.2 ships. (PR feat(table): BS V4.beta.2 New responsive breakpoints and table-dark class #1222)
• • b-table: table-responsive breakpoints: Responsive tables generate classes for each grid breakpoint, meaning they have added .table-responsive-{sm,md,lg,xl} to the already present .table-responsive.. See Generate series of .table-responsive-* classes to accomodate overflowing tables in a variety of screen sizes twbs/bootstrap#22804. (PR feat(table): BS V4.beta.2 New responsive breakpoints and table-dark class #1222)
• b-card Background variants & color classes
• b-navbar & b-nav-toggle Class changes (commit 1fab033)
• b-pagination changes to .hidden-* class names to .d-* (PR fix(pagination): Change classes from .hidden-* to .d-* #840)
• b-progress:
• • b-progress height controls (PR feat(progress): Add height prop #837)
• • b-progress V4.beta.2 changes how height is applied Progress bars: center labels vertically and set height on parent .progress twbs/bootstrap#22703 (PR fix(Progress): Bootstrap V4.beta.2 CSS height prop change #1217)
• • b-progress transition changes
• • b-progress multiple progress bar support (PR feat(progress): Support for multiple progress bars #889)
• b-carousel transition timings, tweaks (fixed in PR fix(carousel): Handle changes in slide content #809, and more)
• b-modal
• • changes to scroll bar measuring and padding adjustments for better BSV4 alignment, (PR feat(modal): Improve modal transitions, padding adjustments, and aditional features #1024)
• • b-modal V4.beta.3 will introduce a modal vertical center option (see Add .modal-dialog-centered for optional vertically centered modal twbs/bootstrap#24510) (PR feat(modal): Add Bootstrap V4 anticipated verticaly centered modal #1246 , but will need a revisit once BSV4.beta.3 is released)
• b-button, b-form-radio, b-form-checkbox Toggle buttons don't honor [disabled] or .disabled (this is actually fixed in Bootstrap-Vue 😄 )
• b-col
• • new component (PR [WIP] feat(col): BS4 column component #836)
• • bring back offset-* classes (PR feat(b-col): restore .offset-* col classes + new b-container and b-row components 🍾🍻🎉 #929)
• • Document offset prop for b-col
• b-collapse use show/flexshow based on collapse flexbox (see Collapse with flex elements twbs/bootstrap#22758) (on hold until BS V4.beta.3)
• b-form-input & b-form-textarea readonly plaintext style missing 100% width styles. which will be fixed in BS V4.beta.3. Will need to remove the w-100 class addition when beta.3 is released.
• Forms: V4.beta has major form validation changes compared to v4.alpha.6. Only two new validation states now: valid and invalid (warning has been removed). Now supports native browser validation states as well. Note: there are known issues & limitations using the new BS 4.beta form validation contextual states with wrapped input elements. (see .invalid-feedback doesn't show for .input-group with an invalid control twbs/bootstrap#23454)
• • b-form validation classes and attributes + native browser validation (PR fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-group Validation states no longer applied at the root fieldset (was b-form-fieldset) (PR fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-file Now accepts validation states + native states (PR fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-file new classes for plain file inputs + native states (PR fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-input new validation classes + native states (PR fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-select new validation classes + native states (PR fix(forms): BS4.beta form/input validation styles & components #847)
  • • 'b-form-select': custom-select with "multiple" will be supported in BSV4.beta.2 (PR fix(form-select): Custom select now supports multiple attribute in V4.beta.2 CSS #1223)
  • • 'b-form-select': select.custom-select class will be changing to select.form-control class in V4.beta.3
  • • 'b-form-select': will properly support sizing in V4.beta.3
• • b-form-radio new validation classes + native states (PR fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-checkbox new validation classes + native states (PR fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-radio & b-form-checkbox: Slight markup changes needed for BSV4.beta.3 for styling (see Form check markup twbs/bootstrap#23444) (PR feat(form-radio+form-checkbox): Prep for BSV4.beta.3 plain checkbox/radio validation styling #1253, may need to revisit once BSV4.beta.3 released)
• • b-form-input-static new class name (PR fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-text (new component) help block text (PR feat(form-text): New functional component #846,fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-feedback (new component & new class) feedback text (PR fix(forms): BS4.beta form/input validation styles & components #847)
• • b-form-row (new component) helper for inline forms (PR feat(form-row): New functional component #844, fix(forms): BS4.beta form/input validation styles & components #847)
• • Updated form component docs
• • Rework how b-form-select, b-form-radio, and b-form-checkbox work, using sub-components. Allow optgroup in form-select (PR feat(forms): New handling of form-select, form-radios and form-checkboxes #994)
• • Need more information on when invalid/valid sates can be applied to form-group, etc

Directives that will need changes:

• v-b-scrollspy changes in which classes can be active (for more than just navs) not implemented in BS4.beta yet
• v-b-toggle Collapse support multi target (already available in Bootstrap-Vue 😄 )

[alexsasharegan]

I knew something was up with the grid system! That col component is gonna need an overhaul.

[ImTheDeveloper]

I think it would be great if you could link out to the relevant bootstrap 4 docs where things like "variant" and "type" translate over to a specific option in bootstrap. I've found I'm often having to go to your docs, then to the underlying component source code to view the "defaults" and then over to the official bootstrap docs to see what options I can pass in.

Example of this is the navbar which has "variant" and "type" as options. These form part of:
https://v4-alpha.getbootstrap.com/components/navbar/#color-schemes
https://v4-alpha.getbootstrap.com/utilities/colors/#content

[tmorehouse]

@ImTheDeveloper We've started to include supported variants in many of the component docs in the 1.x banch (and at the v1.0.0.beta docs at https://bootstrap-vue.js.org/docs/)