fix(factories): shorthand fix for applying props to react element

[Alex B (bmdalex)]

createShorthandFactory fix for applying props to React Element

Description

This PR tackles the first argument type of the function returned by createShorthandFactory factory, more precisely when passing a React.Element as argument.

This comes into play in examples such as:

<Button
  icon={<span name='coffee' style={{ background: 'red' }}>span content</span>}
  content="Click Me"
/>
<Button
  icon={<Icon name='coffee' style={{ background: 'red' }}>icon content</Icon>}
  content="Click Me"
/>

that translate into calling:

createShorthandFactory(Icon, 'name').create(icon, {
  defaultProps: {
    styles: styles.icon,
    xSpacing: !content ? 'none' : iconPosition === 'after' ? 'before' : 'after',
    variables: variables.icon,
  }
})

// with icon being
<span name='coffee' style={{ background: 'red' }}>span content</span>

// and respectively:
<Icon name='coffee' style={{ background: 'red' }}>icon content</Icon>

and rendering:

The icon argument can be any React.Element so we cannot make too many presumptions on what to do with the props send as the 2nd argument (defaultProps and overrideProps).

Current Behavior:

We blindly send all props to the React.cloneElement call (see createShorthand call in factories.tsx).
For the example above, this can lead to passing invalid props to certain components and we currently catch this wrong usage in one of our unit tests:

Solution:

If the first argument of the function returned by createShorthandFactory factory is a React.Element just return the element early without cloning and applying extra props.

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (master@0d969eb). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master     #496   +/-   ##
=========================================
  Coverage          ?   88.32%           
=========================================
  Files             ?       42           
  Lines             ?     1456           
  Branches          ?      212           
=========================================
  Hits              ?     1286           
  Misses            ?      165           
  Partials          ?        5

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0d969eb...0340cd7. Read the comment docs.

[Oleksandr Fediashov (layershifter)]

Can we check my solution for areTypeNamesEqual? I think that the check of displayName is not the best solution.

[Alex B (bmdalex)]

marking blocked until having a resolution on:

#496 (comment)

[Oleksandr Fediashov (layershifter)]

We discussed these changes before, the final result LGTM 👍