Skip to content

Conversation

@austingreendev
Copy link
Contributor

Description

@zillding found that our SplitButton example was broken in React v<=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 are React<=16 this 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 our MenuContainer component. 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 MenuContainer example for people to use in the mean time.

Checklist

  • 👌 design updates are Garden Designer approved (add the
    designer as a reviewer)
  • 💅 view component styling is based on a Garden CSS
    component
  • 🌐 Styleguidist demo is up-to-date (yarn start)
  • ⬅️ renders as expected with reversed (RTL) direction
  • 💂‍♂️ includes new unit and snapshot tests
  • 📒 any new files are included in the packages src/index.js export
  • 📝 tested in Chrome, Firefox, Safari, Edge, and IE11

@coveralls
Copy link

Pull Request Test Coverage Report for Build 505

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage remained the same at 96.169%

Totals Coverage Status
Change from base Build 495: 0.0%
Covered Lines: 1692
Relevant Lines: 1706

💛 - Coveralls

Copy link

@zillding zillding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 on moving to react v16+

we should start doing it

@austingreendev austingreendev merged commit d451089 into master Aug 23, 2018
@austingreendev austingreendev deleted the agreen/menu-fragment-fix branch August 23, 2018 20:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

6 participants