fix(factories): reverted changed for not passing props to elements in the factories (#759)

* -reverted changed for not passing props to react elements in the factories

* -updated shorthand props documentation

* -updated changelog

* -updated shorthand props docs

* -updated shorthand props docs

* -updated shorthand props docs

* -updated chat divider styles & example

Author: mnajdova

CHANGELOG.md

@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix teams theme `Status` and `Chat.Message` styles ([#747](https://github.com/stardust-ui/react/pull/747))
 - Fix `Popup` - do not stop event propagation when pressing Esc on trigger element @sophieH29 ([#750](https://github.com/stardust-ui/react/pull/750))
 - Fix alignment of `Layout`'s `main` area @kuzhelov ([#752](https://github.com/stardust-ui/react/pull/752))
+- Forwarding props for `createShorthand` calls if the value is a React element @mnajdova ([#759](https://github.com/stardust-ui/react/pull/759))
 
 ### Features
 - Rename `Slot` component to `Box` and export it @Bugaa92 ([#713](https://github.com/stardust-ui/react/pull/713))

docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx

@@ -53,7 +53,7 @@ const items = [
     key: 'message-id-5',
   },
   {
-    message: <Divider content="Today" color="primary" important />,
+    children: <Divider content="Today" color="primary" important />,
     key: 'message-id-6',
   },
   {

docs/src/prototypes/chatPane/index.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react'
-import { Provider } from '@stardust-ui/react'
+import { Provider, Divider } from '@stardust-ui/react'
 
 import ChatPaneLayout from './chatPaneLayout'
 import { getChatMock } from './services'
+import { pxToRem } from '../../../../src/lib'
 
 const chatMock = getChatMock({ msgCount: 40, userCount: 6 })
+const dividerSelector = `& .${Divider.className}`
 
 export default () => (
   <Provider
@@ -14,6 +16,14 @@ export default () => (
           start: { display: 'block' },
           end: { display: 'block' },
         },
+        ChatItem: {
+          root: {
+            [dividerSelector]: {
+              marginLeft: `-${pxToRem(40)}`,
+              marginRight: `-${pxToRem(40)}`,
+            },
+          },
+        },
       },
     }}
   >

docs/src/views/ShorthandProps.tsx

@@ -86,14 +86,13 @@ const ShorthandProps = props => (
     <blockquote>
       <strong>
         There is a very important caveat here, though: whenever React Element is directly used as a
-        shorthand value, it becomes client's responsibility to handle some aspects that Stardust was
-        originally responsible for (such as {code('styles')} or {code('accessibility')}).
+        shorthand value, all props that Stardust has created for the slot's Component will be spread
+        on the passed element. This means that provided element should be able to handle Stardust
+        props - while this requirement is satisfied for all Stardust components, you should be aware
+        of that when either HTML or any third-party elements are provided.
       </strong>{' '}
-      This is because, in contrast to other forms of shorthand values, Stardust-evaluated props
-      cannot be safely passed to the element which type is, generally, doesn't allow Stardust to
-      make any prior assumptions about. Due to this limitation, you should strive to use other
-      options for shorthand values whenever is possible - for instance, this is how previous example
-      can be rewritten:
+      Due to this limitation, you should strive to use other options for shorthand values whenever
+      is possible - for instance, this is how previous example can be rewritten:
     </blockquote>
     {codeExample([`<Button icon={{ as: 'i', className: 'my-icon' }} />`])}
 

src/lib/factories.ts

@@ -129,18 +129,16 @@ function createShorthandFromValue(
     )
   }
 
-  // return value 'as is' if it a ReactElement
-  if (valIsReactElement) {
-    return value as React.ReactElement<Props>
-  }
-
   // ----------------------------------------
   // Build up props
   // ----------------------------------------
   const { defaultProps = {} } = options
 
   // User's props
-  const usersProps = valIsPropsObject ? (value as Props) : {}
+  const usersProps =
+    (valIsReactElement && (value as React.ReactElement<Props>).props) ||
+    (valIsPropsObject && (value as Props)) ||
+    {}
 
   // Override props
   let { overrideProps } = options
@@ -199,6 +197,9 @@ function createShorthandFromValue(
     return render(Component, props)
   }
 
+  // Clone ReactElements
+  if (valIsReactElement) return React.cloneElement(value as React.ReactElement<Props>, props)
+
   // Create ReactElements from built up props
   if (valIsPrimitive || valIsPropsObject) return React.createElement(Component, props)
 

test/specs/lib/factories-test.tsx

@@ -492,6 +492,16 @@ describe('factories', () => {
         testCreateShorthand({ overrideProps, value: testValue }, overrideProps())
       })
 
+      test("is called with the user's element's and default props", () => {
+        const defaultProps = { 'data-some': 'defaults' }
+        const overrideProps = jest.fn(() => ({}))
+        const userProps = { 'data-user': 'props' }
+        const value = <div {...userProps} />
+
+        shallow(getShorthand({ defaultProps, overrideProps, value }))
+        expect(overrideProps).toHaveBeenCalledWith({ ...defaultProps, ...userProps })
+      })
+
       test("is called with the user's props object", () => {
         const defaultProps = { 'data-some': 'defaults' }
         const overrideProps = jest.fn(() => ({}))
@@ -524,21 +534,18 @@ describe('factories', () => {
 
     describe('from an element', () => {
       itReturnsAValidElement(<div />)
+      itAppliesDefaultProps(<div />)
       itDoesNotIncludePropsFromMappedProp(<div />)
+      itMergesClassNames('element', 'user', { value: <div className="user" /> })
       itAppliesProps('element', { foo: 'foo' }, { value: <div {...{ foo: 'foo' } as any} /> })
-
-      test('forwards original element "as is"', () => {
-        testCreateShorthand(
-          {
-            Component: 'p',
-            value: (
-              <span {...{ commonProp: 'originalElement', originalElementProp: true } as any} />
-            ),
-            defaultProps: { commonProp: 'default', defaultProp: true },
-            overrideProps: { commonProp: 'override', overrideProp: true },
-          },
-          { commonProp: 'originalElement', originalElementProp: true },
-        )
+      itOverridesDefaultProps(
+        'element',
+        { some: 'defaults', overridden: false },
+        { some: 'defaults', overridden: true },
+        { value: <div {...{ overridden: true } as any} /> },
+      )
+      itOverridesDefaultPropsWithFalseyProps('element', {
+        value: <div {...{ undef: undefined, nil: null, zero: 0, empty: '' } as any} />,
       })
     })