Fix react warning for instanceId prop on a DOM element (<Button> component)

[nerrad]

Description

Was getting this warning appear whenever I clicked the menu toggle on a block:

Warning: React does not recognize the instanceId prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase instanceid instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This results from the instanceId prop getting passed through via <MenuItem />

How has this been tested?

• Verify unit tests/ e2e tests pass
• Ensure console error doesn't appear in this branch.

Types of changes

Non-breaking change

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[nerrad]

I'm on the fence about this. An alternative way to approach this would be to review all components wrapped by the withInstanceId HOC and ensure they do not pass through the instanceId prop to children. What's unclear to me is whether there is current use-case in GB for passing through the instanceId prop, in which case that alternative might not be an option there.

Another alternative might be to create a HOC wrapping all leaf DOM elements to remove any props that shouldn't be a dom element attribute - so something like withCleanProps.

[gziolo]

Another alternative might be to create a HOC wrapping all leaf DOM elements to remove any props that shouldn't be a dom element attribute - so something like withCleanProps.

This might be much nicer. However, it might have also some performance implications if you wrap all leaf components with such HOC. I'm wondering whether passing thru props a few levels down isn't the root cause of this in the first place.

[nerrad]

The source of the instanceId appears to be the MenuItem component which is wrapped by withInstanceId. However, I don't see any actual use of instanceId in the MenuItem` component (or in the child components implemented there). So I'll give a go at simply removing that wrap there.

[nerrad]

So turns out the <MenuItem> component did not need withInstanceId wrapping it. Removing that fixes the issue. This also required updating a couple snapshots in different packages.

[youknowriad]

I think this is missing some ## :)