Reactstrap: Tracking Beta 1 Changes

[eddywashere]

read through https://github.com/twbs/bootstrap/issues/21568

• Grid/Layout
  
  
  
  • [x] Column offsets are gone (but will be back again in bootstrap v4 beta 2)
  
  
• Card
  
  
  
  • [x] Renamed .card-block to .card-body https://github.com/twbs/bootstrap/pull/22828
  
  
  • [x] inverse is no longer a thing, just use .text-white (keep for convenience?)
  
  
  • [x] Outline (.card-outeline-{color}) is now border util .border-{color}
  
  
  • [x] Color (.card-{color}) is now bg util .bg-{color}
  
  
• Nav/NavBar
  
  
  
  • [x] nav now has .nav-fill
  
  
  • [x] nav vertical should accept a string for the responsive size (.flex-{size}-column)
  
  
  • [x] nav now has .card-header-tabs/.card-header-pills (add boolean card prop?)
  
  
  • [x] .navbar-inverse -> .navbar-dark
  
  
  • [x] .navbar-toggler-left and .navbar-toggler-right have been removed
  
  
  • [x] Navbar toggle class .navbar-toggleable{-sm|-md|-lg|-xl} -> .navbar-expand{-sm|-md|-lg|-xl}
  
  
• Popover
  
  
  
  • [x] Renamed .popover-title to .popover-header and .popover-content to .popover-body twbs/bootstrap#22829
  
  
  • [x] tether -> poppers.js
  
  
• Tooltip
  
  
  
  • [x] tether -> poppers.js
  
  
• Forms
  
  
  
  • [x] form validations (feedback and "server-side" classes)
  
  
• Dropdowns
  
  
  
  • [x] .show is now needed on .dropdown-menu when open
  
  
  • [x] tether -> poppers.js
  
  
• Badge
  
  
  
  • [x] .badge-default -> .badge-secondary
  
  

bootstrap v4 beta docs: https://getbootstrap.com/docs/4.0/getting-started/introduction/

The v5 branch will have the latest changes while the list is being completed. Items marked as completed on the list indicate that the item is addressed in the v5 branch. This issue will be closed one v5 has been merged into master.

Feel free to add anything not listed with a general description and link to either docs page or pr and I'll update the list 🙌

[xidedix]

Renamed .card-block to .card-body https://github.com/twbs/bootstrap/pull/22828

[TheSharpieOne]

For the changes where this makes sense, such as .card-block to .card-body I would suggest keeping and deprecating with a warning the current props, such asblock, and adding a new one, such as body, which better lines up with bootstrap, eventually removing the old one (perhaps when bootstrap v4 is finally released). Both block and body would add the new class just the same, but this way it is not a breaking change for something which is minor just to line up with bootstrap.
I know before there were some changes to line up with bootstrap when bootstrap changed which caused some pain (Badge -> Tag -> Badge), I hope to avoid this.

[TheSharpieOne]

Popovers look like they have changed quite a bit. The arrow is no longer hard-coded to the middle of the popover, it is more dynamic to be center-aligned with the item it is relative to thanks to poppers.js.
twbs/bootstrap#22681

[eddywashere]

Interesting. Since tether is the biggest pain right now, I'll prioritize popper + popper related component updates so we get that tested sooner. It could be worth getting that into the alpha 6 version first. I'll explore and post updates in a WIP branch.

[supergibbs]

A couple inverse to dark changes:

.navbar-inverse -> .navbar-dark
.card-inverse -> .card-dark

[TheSharpieOne]

535 suggests the default color for Button ("secondary") in v4 beta is not that great of a default. (just adding it here for tracking and possibly discussion)

[gthomas-appfolio]

Current dropdowns do not work with Beta, now need a show class on the downdown-menu:
https://getbootstrap.com/docs/4.0/components/dropdowns/
https://github.com/twbs/bootstrap/blob/860ca6dee8d68151165bfa2d0bde02cb180ddd33/docs/4.0/migration.md#dropdowns

[gthomas-appfolio]

Ugg.., the form feedback classes have been changed: https://getbootstrap.com/docs/4.0/components/forms/#server-side

So the FormGroup and FormFeedback components no longer work.
Looks like FormGroup can only have is-invalid, is-valid, and FormFeedback only supportsinvalid-feedback

[th3fallen]

any update on when this lib will be updated to the beta version?

[TheSharpieOne]

As I make some of the changes in the list and look for additional changes for the components I am noticing the utilities are used a ton. I wonder how much we can bake into each component and how much we just depend on the user to add className.
For instance bootstrap's docs show nav with .justify-content-center and .justify-content-end, it that enough to justify adding specific props to trigger those classes?

81 for reference

[virgofx]

Thanks for helping with this @TheSharpieOne . I'll help with any additional PRs for any remaining work this weekend to hopefully get V5 pushed.

[matt961]

For instance bootstrap's docs show nav with .justify-content-center and .justify-content-end, it that enough to justify adding specific props to trigger those classes?

Is it really that hard to write out all of your divs with proper bootstrap classes? May as well go all the way.

[mtakac]

@TheSharpieOne I think using classNames is just fine. It's even easier for people like me that use both Bootstrap for projects without react and reactstrap.

[TheSharpieOne]

Looking at popper.js and react-popper, I think we might have to make our own little react wrapper for popper.js instead of using react-popper. The reason is mostly because of the wrapping component which is nice when using react-popper, but it would force reactstrap users to wrap their components in a similar fashion.
react-popper uses this to avoid having to select DOM reference (such as by id) and then passes those reference to popper.js. reactstrap, like bootstrap, uses ids to determine the target; allowing the target and popover to be more disjoint in the code (and not require a wrapping component).

[TheSharpieOne]

I created a popper branch with my experimental attempt at implementing popperjs via react-popper. Tooltips and Popovers look good. Having some difficulty with Dropdown since react-popper's manager add a wrapping element which is messing up the dropup and right as well as when it flips when there isn't enough room to display. I am thinking that since Dropdown more closely mimic what react-popper has in terms of element structure, it might be easier to use it more directly for Dropdown.
Animations (which currently are not working/there) are still TBD.

[TheSharpieOne]

I am leaving the offsets alone (and marking them as completed) since they have been added back to bootstrap: https://github.com/twbs/bootstrap/pull/23445

[bartoszhernas]

Could you guys post it to npm, so other can start building on this branch?

I've started updating from react-bootstrap (v4) to your library but would like to start building with beta bootstrap

[bartoszhernas]

If anyone need to use current state of reactstrap for bootstrap4-beta, I posted an npm package:

"ahoy-reactstrap": "5.0.1-alpha"

If you use webpack, just add this to your config until we can use master version of this package.

resolve: {
    alias: {
        reactstrap: "ahoy-reactstrap"
    }
}

[lgants]

@bartoszhernas thanks for creating! For those waiting on the Carousel, it's included in this package. I successfully implemented it using this as a guide: https://github.com/reactstrap/reactstrap/blob/v5/docs/lib/examples/Carousel.js

[bartoszhernas]

Is anyone working on updating form classes for validation?

[virgofx]

Its a few lines of code ... already done in extending projects ... the problem now is merging ... so we actually need to get the Popover and RTG 2.0 stuff merged then we can rebase and do the work on the form validation.

[th3fallen]

Any chance we could tag the v5 branch with a beta tag for people to test with?

[ghost]

@th3fallen
If you really want to use that branch:

yarn add git://github.com/reactstrap/reactstrap#v5

cd node_modules/reactstrap
yarn && yarn build

[TheSharpieOne]

[email protected] has been published to npm using the next tag. It can be installed using npm install reactstrap@next

[darrylmack]

@TheSharpieOne You guys are amazing! The dropdown just works now!