Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compatibility with React 16.13 #1

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Compatibility with React 16.13 #1

wants to merge 1 commit into from

Conversation

xoob
Copy link

@xoob xoob commented May 12, 2020

This maintenance change introduces compatibility with the current stable releases of React, React DOM, and a number of other smaller libraries. We upgrade the libraries and provide bugfixes for several warnings and library behavior changes that were found during testing.


After the initial upgrade the observed test failures were as follows:

SLDSAlert: [javascript URLs]
    Dismiss alert
        "before each" hook: mountComponentInside for "calls onRequestClose handler"

    Error: Warning: A future version of React will block javascript: URLs as
    a security precaution. Use event handlers instead if you can. If you need
    to generate unsafe HTML try using dangerouslySetInnerHTML instead.

SLDS APP LAUNCHER TILE: [componentWillUpdate]
    App Launcher Tile (truncated)
        "before each" hook for "renders more link"

    Error: Warning: componentWillUpdate has been renamed, and is not
    recommended for use. See https://fb.me/react-unsafe-component-lifecycles
    for details.

     * Move data fetching code or side effects to componentDidUpdate.
     * Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this
       warning in non-strict mode. In React 17.x, only the UNSAFE_ name will
       work. To rename all deprecated lifecycles to their new names, you can
       run `npx react-codemod rename-unsafe-lifecycles` in your project
       source folder.

SLDSColorPicker: [componentWillMount]
    Swatch toggle button
        opens popover when clicked and expects onRequestOpen and onOpen to be fired once

    Error: Warning: componentWillMount has been renamed, and is not
    recommended for use. See https://fb.me/react-unsafe-component-lifecycles
    for details.

    * Move code with side effects to componentDidMount, and set initial state in the constructor.
    * Rename componentWillMount to UNSAFE_componentWillMount to suppress this
      warning in non-strict mode. In React 17.x, only the UNSAFE_ name will
      work. To rename all deprecated lifecycles to their new names, you can
      run `npx react-codemod rename-unsafe-lifecycles` in your project source
      folder.

SLDSCombobox: [componentWillUpdate]
    Assistive technology and keyboard interactions
        has aria-haspopup, aria-expanded is false when closed, aria-expanded is true when open‣

    Error: Warning: componentWillUpdate has been renamed, and is not
    recommended for use. See https://fb.me/react-unsafe-component-lifecycles
    for details.

SLDSMenuPicklist: [componentWillMount]
    in modal mode
        "before each" hook for "expands/contracts the dropdown on click"‣

    Error: Warning: componentWillMount has been renamed, and is not
    recommended for use. See https://fb.me/react-unsafe-component-lifecycles
    for details.

SLDSTimepicker: [React.createFactory()]
    Timepicker Value Prop Change
        displays a modified state upon changing props‣

    Error: Warning: React.createFactory() is deprecated and will be removed
    in a future major release. Consider using JSX or use
    React.createElement() directly instead.

Tree: [onScroll timeout?]
    Scrolling calls onScroll
        scrolling calls onScroll‣

    Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure
    "done()" is called; if returning a Promise, ensure it resolves.

SLDS Visual Picker: [componentWillMount]
    radio switching works correctly‣

    Error: Warning: componentWillMount has been renamed, and is not
    recommended for use. See https://fb.me/react-unsafe-component-lifecycles
    for details.

SLDSWelcomeMat: [componentWillMount]
    Steps Variant
        "before each" hook for "renders welcome mat"‣

    Error: Warning: componentWillMount has been renamed, and is not
    recommended for use. See https://fb.me/react-unsafe-component-lifecycles
    for details.

    Trailhead Variant
        "before each" hook for "renders welcome mat"‣

    Error: Warning: componentWillMount has been renamed, and is not
    recommended for use. See https://fb.me/react-unsafe-component-lifecycles
    for details.

React DOM: Upgrade from 16.8.6 to 16.13

At the time of this pull request, the master branch of design-system-react
is locked in package-lock.json to [email protected] and [email protected]. Unit
tests are succeeding in master.

React DOM version 16.9 introduces two deprecation warnings that cause the
design-system-react test suite to fail after the react-dom dependency is
upgraded:

React DOM

React: Upgrade from 16.9.0 to 16.13

To keep up-to-date with new React releases, this pull request bumps to the
latest stable version. Notable changes between the old and new version are:

React

Other Upgrades

We use this opportunity to upgrade a few other dependencies that include
small bug fixes and other seemingly useful improvements.

prop-types: Upgrade from 15.6.0 to 15.7.2

https://github.com/facebook/prop-types/blob/master/CHANGELOG.md

react-contenteditable: Upgrade from 3.3.1 to 3.3.4

  • Trivial fixes

lovasoa/react-contenteditable@3.3.1...v3.3.4

shortid: Upgrade from 2.2.14 to 2.2.15

  • Generate smaller IDs

dylang/shortid@2.2.14...2.2.15


CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

  • First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
  • npm run lint:fix has been run and linting passes.
  • Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
  • Tests have been added for new props to prevent regressions in the future. See readme.
  • Review the appropriate Storybook stories. Open http://localhost:9001/.
  • Review tests are passing in the browser. Open http://localhost:8001/.
  • Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

  • TravisCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
  • Tests have been added for new props to prevent regressions in the future. See readme.
  • Review the appropriate Storybook stories. Open http://localhost:9001/.
  • The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
  • Review tests are passing in the browser. Open http://localhost:8001/.
  • Review markup conforms to SLDS by looking at DOM snapshot strings.
Required only if there are markup / UX changes
  • Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
  • Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
  • Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
  • While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant