chore(docs): update SplitButton example with React15 version #124
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
@zillding found that our
SplitButtonexample was broken in Reactv<=15.Sad News
Turns out this is due to some
<Fragment>usage in our codebase that is required for us to accurately position with popper.js, allow component composition, as well as a few other important API features that we can't remove.Since we are using a
<Fragment>shim for consumers that areReact<=16this is causing some weird results. Unfortunately, I wasn't able to find a way forward with removing the shim that wouldn't significantly degrade the experience of consumers on React 16.Additionally, we are going to have to start moving off of the deprecated lifecycle events soon in preparation of the React 17 release. So unfortunately, the "long-term" fix for these issues is to deprecate v14&15 😢
Good News
The specific example that started this discussion,
SplitButton, is easily fixable by switching to ourMenuContainercomponent. This usage still include the "extra"<div>, but allows users to choose at which level it should be added and drilling the props/attributes to the specific element needed.<ChevronButton />in this example.I've added some additional documentation about the React 14/15/16 differences and included a
MenuContainerexample for people to use in the mean time.Checklist
designer as a reviewer)
component
yarn start)src/index.jsexport