fix(factories): handle ReactElement as primitive

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 -  Add `trapFocus` and `autoFocus` props to `Popup` and remove `popupFocusTrapBehavior` and `popupAutoFocusBehavior` @sophieH29 ([#1565](https://github.com/stardust-ui/react/pull/1565))
 - `defaultBehavior` was removed @layershifter ([#1600](https://github.com/stardust-ui/react/pull/1600))
+- `ReactElement`s are now handled in the same way as string in all shorthands @layershifter ([#1600](https://github.com/stardust-ui/react/pull/1600))
 
 ### Features
 - Split action handlers with "OR" condition in accessibility behaviors @sophieH29 ([#1622](https://github.com/stardust-ui/react/pull/1622))

build/webpack.config.ts

@@ -107,6 +107,7 @@ const webpackConfig: any = {
       contextRegExp: /moment$/,
     }),
     __DEV__ &&
+      !process.env.CI &&
       new webpack.ProgressPlugin({
         entries: true,
         modules: true,

docs/src/components/ComponentDoc/ComponentDocLinks.tsx

@@ -29,12 +29,7 @@ export default class ComponentDocLinks extends React.PureComponent<any, any> {
           <Icon name="github" />
           <code>
             <a
-              style={{
-                color: 'rgba(0,0,0,.4)',
-                ':hover, :focus': {
-                  color: 'rgba(0,0,0,.8)',
-                },
-              }}
+              style={{ color: 'rgba(0,0,0,.4)' }}
               href={`${constants.repoURL}/blob/master/${repoPath}`}
               target="_blank"
               rel="noopener noreferrer"

docs/src/examples/components/Accordion/Usage/AccordionPanelCustomContentExample.shorthand.tsx

@@ -1,25 +1,20 @@
 import * as React from 'react'
 import { Accordion, Button, Flex } from '@stardust-ui/react'
 
-class AccordionPanelCustomContentExample extends React.Component {
-  render() {
-    const panels = [
-      {
-        title: 'Pets',
-        content: {
-          key: 'animals',
-          content: (
-            <Flex gap="gap.smaller">
-              <Button primary>Add pet</Button>
-              <Button>Remove pet</Button>
-            </Flex>
-          ),
-        },
-      },
-    ]
+const AccordionPanelCustomContentExample = () => {
+  const panels = [
+    {
+      title: 'Pets',
+      content: (
+        <Flex gap="gap.smaller" key="animals">
+          <Button primary>Add pet</Button>
+          <Button>Remove pet</Button>
+        </Flex>
+      ),
+    },
+  ]
 
-    return <Accordion defaultActiveIndex={[0]} panels={panels} />
-  }
+  return <Accordion defaultActiveIndex={[0]} panels={panels} />
 }
 
 export default AccordionPanelCustomContentExample

docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx

@@ -1,28 +1,23 @@
 import * as React from 'react'
 import { Accordion, Label, Layout } from '@stardust-ui/react'
 
-class AccordionPanelCustomTitleExample extends React.Component {
-  render() {
-    const panels = [
-      {
-        title: {
-          content: (
-            <Layout
-              start={
-                <Label icon="warning circle" iconPosition="start" circular content="Warnings" />
-              }
-            />
-          ),
-        },
-        content: {
-          key: 'warnings',
-          content: 'Here is a list of warnings discovered.',
-        },
+const AccordionPanelCustomTitleExample = () => {
+  const panels = [
+    {
+      title: (
+        <Layout
+          key="title"
+          start={<Label icon="warning circle" iconPosition="start" circular content="Warnings" />}
+        />
+      ),
+      content: {
+        key: 'warnings',
+        content: 'Here is a list of warnings discovered.',
       },
-    ]
+    },
+  ]
 
-    return <Accordion defaultActiveIndex={[0]} panels={panels} />
-  }
+  return <Accordion defaultActiveIndex={[0]} panels={panels} />
 }
 
 export default AccordionPanelCustomTitleExample

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx

@@ -14,16 +14,19 @@ const AvatarExampleImageCustomizationShorthand = () => (
     />
      
     <Avatar
-      image={
+      image={render =>
         // This example does not react to the avatar size variable
         // and otherwise produces bad results when border is applied compared to "normal" image
-        <Icon
-          name="lock"
-          circular
-          bordered
-          variables={{ color: 'blue' }}
-          styles={{ boxSizing: 'border-box', padding: '8px' }}
-        />
+        render({ name: 'chess rook' }, (ComponentType, props) => (
+          <Icon
+            {...{ ...props, avatar: undefined, fluid: undefined }}
+            name="lock"
+            circular
+            bordered
+            variables={{ color: 'blue' }}
+            styles={{ boxSizing: 'border-box', padding: '8px' }}
+          />
+        ))
       }
       status={{ color: 'green', icon: 'check', title: 'Available' }}
     />

docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.tsx

@@ -13,47 +13,41 @@ const items = [
   {
     attached: 'top',
     contentPosition: 'end',
-    message: {
-      content: (
-        <Chat.Message
-          actionMenu={actionMenu}
-          content="Hello"
-          author="John Doe"
-          timestamp="Yesterday, 10:15 PM"
-          mine
-        />
-      ),
-    },
+    message: (
+      <Chat.Message
+        actionMenu={actionMenu}
+        content="Hello"
+        author="John Doe"
+        timestamp="Yesterday, 10:15 PM"
+        mine
+      />
+    ),
     key: 'message-1',
   },
   {
     attached: 'bottom',
     contentPosition: 'end',
     key: 'message-2',
-    message: {
-      content: (
-        <Chat.Message
-          actionMenu={actionMenu}
-          content="I'm back!"
-          author="John Doe"
-          timestamp="Yesterday, 10:15 PM"
-          mine
-        />
-      ),
-    },
+    message: (
+      <Chat.Message
+        actionMenu={actionMenu}
+        content="I'm back!"
+        author="John Doe"
+        timestamp="Yesterday, 10:15 PM"
+        mine
+      />
+    ),
   },
   {
-    gutter: { content: <Avatar image="public/images/avatar/small/ade.jpg" /> },
-    message: {
-      content: (
-        <Chat.Message
-          actionMenu={actionMenu}
-          content="Hi"
-          author="Jane Doe"
-          timestamp="Yesterday, 10:15 PM"
-        />
-      ),
-    },
+    gutter: <Avatar image="public/images/avatar/small/ade.jpg" />,
+    message: (
+      <Chat.Message
+        actionMenu={actionMenu}
+        content="Hi"
+        author="Jane Doe"
+        timestamp="Yesterday, 10:15 PM"
+      />
+    ),
     key: 'message-3',
   },
 ]

docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx

@@ -10,47 +10,41 @@ const items = [
   {
     attached: 'top',
     contentPosition: 'end',
-    message: {
-      content: (
-        <Chat.Message
-          reactionGroup={reactions}
-          content="Hello"
-          author="John Doe"
-          timestamp="Yesterday, 10:15 PM"
-          mine
-        />
-      ),
-    },
+    message: (
+      <Chat.Message
+        reactionGroup={reactions}
+        content="Hello"
+        author="John Doe"
+        timestamp="Yesterday, 10:15 PM"
+        mine
+      />
+    ),
     key: 'message-1',
   },
   {
     attached: 'bottom',
     contentPosition: 'end',
     key: 'message-2',
-    message: {
-      content: (
-        <Chat.Message
-          reactionGroup={[{ key: 'up', icon: 'thumbs up', content: '8' }]}
-          content="I'm back!"
-          author="John Doe"
-          timestamp="Yesterday, 10:15 PM"
-          mine
-        />
-      ),
-    },
+    message: (
+      <Chat.Message
+        reactionGroup={[{ key: 'up', icon: 'thumbs up', content: '8' }]}
+        content="I'm back!"
+        author="John Doe"
+        timestamp="Yesterday, 10:15 PM"
+        mine
+      />
+    ),
   },
   {
-    gutter: { content: <Avatar image="public/images/avatar/small/ade.jpg" /> },
-    message: {
-      content: (
-        <Chat.Message
-          reactionGroup={reactions}
-          content="Hi"
-          author="Jane Doe"
-          timestamp="Yesterday, 10:15 PM"
-        />
-      ),
-    },
+    gutter: <Avatar image="public/images/avatar/small/ade.jpg" />,
+    message: (
+      <Chat.Message
+        reactionGroup={reactions}
+        content="Hi"
+        author="Jane Doe"
+        timestamp="Yesterday, 10:15 PM"
+      />
+    ),
     key: 'message-3',
   },
 ]

docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx

@@ -10,52 +10,44 @@ const items = [
   {
     attached: 'top',
     contentPosition: 'end',
-    message: {
-      content: (
-        <Chat.Message
-          reactionGroup={{
-            items: reactions,
-          }}
-          content="Hello"
-          author="John Doe"
-          timestamp="Yesterday, 10:15 PM"
-          mine
-        />
-      ),
-    },
+    message: (
+      <Chat.Message
+        reactionGroup={{
+          items: reactions,
+        }}
+        content="Hello"
+        author="John Doe"
+        timestamp="Yesterday, 10:15 PM"
+        mine
+      />
+    ),
     key: 'message-1',
   },
   {
     attached: 'bottom',
     contentPosition: 'end',
     key: 'message-2',
-    message: {
-      content: (
-        <Chat.Message
-          reactionGroup={reactions}
-          reactionGroupPosition="end"
-          content="I'm back!"
-          author="John Doe"
-          timestamp="Yesterday, 10:15 PM"
-          mine
-        />
-      ),
-    },
+    message: (
+      <Chat.Message
+        reactionGroup={reactions}
+        reactionGroupPosition="end"
+        content="I'm back!"
+        author="John Doe"
+        timestamp="Yesterday, 10:15 PM"
+        mine
+      />
+    ),
   },
   {
-    gutter: {
-      content: <Avatar image="public/images/avatar/small/ade.jpg" />,
-    },
-    message: {
-      content: (
-        <Chat.Message
-          reactionGroup={reactions}
-          content="Hi"
-          author="Jane Doe"
-          timestamp="Yesterday, 10:15 PM"
-        />
-      ),
-    },
+    gutter: <Avatar image="public/images/avatar/small/ade.jpg" />,
+    message: (
+      <Chat.Message
+        reactionGroup={reactions}
+        content="Hi"
+        author="Jane Doe"
+        timestamp="Yesterday, 10:15 PM"
+      />
+    ),
     key: 'message-3',
   },
 ]