fix(factories): handle ReactElement as primitive #1513

layershifter · 2019-06-18T10:05:54Z

BREAKING CHANGES

This PR changes how React.Elements are handled in shorthands, this change affects all components. To replace elements consider to use render() callback.

Before

React.Element replaced matching slot.

<Attachment header={<span>Document.docx</span>} />

<div class="ui-attachment" tabindex="0" data-is-focusable="true">
  <div><span>Document.docx</span></div>
</div>

<Button icon={<Icon className="bar" name="book" />} primary />

After

React.Element will be inside matching slot.

<Attachment header={<span>Document.docx</span>} />
// now these lines are equal
<Attachment header={{ content: <span>Document.docx</span> }} />

<div class="ui-attachment" tabindex="0" data-is-focusable="true">
  <div><span class="ui-text"><span>Document.docx</span></span></div>
</div>

To keep existing behavior with replacement consider to use Render Callback to completely replace contents of slot. However, in the most case enough to use Object Shorthand.

// use object shorthand
<Button icon={{ className: 'bar', name: 'book' }} primary />
// or render callback
<Button
  icon={render =>
    render(null, (ComponentType, props) => <Icon className="foo" name="book" {...props} />)
  }
  primary
/>

See Shorthand props docs for more details.

Problem

<Popup content='Foo' /> // it's cool, I can set message 😎 
<Popup content={<i>Foo</i>} /> // layout is broken, WTF? 💣

Our component factories handles primitives (string, number) and React.Elements in different ways. This issue comes from Semantic UI React where it was a single way to modify rendered element in matching slot. But, we have render() callback that covers that purpose.

The most common use case is over-complicated and disguised from consumer:

<Popup content={{ content: <i>Foo</i>}} />
// I want just pass an element and I have to use `{ content: <i />}` 😭

We can't always apply props properly to passed element, it's a black box for us:

<Popup content={<Foo />} />
// will `Foo` handle `styles`, `pointerRef` or any other props? 🤔

Solution

When passing JSX, it should be a child of the slot component, this is the more intuitive behavior:

<Popup content='Foo' />
<Popup content={<span>Foo</span>} /> // will have a <span> in DOM tree, but look will be same

I.e. we will handle React.Element in the same way as string, so the approach will be consistent.

Shorthand without JSX

Shorthands like icons and images can't render children and have mapping to other props than content. That's why we should handle these cases separately and render null in that case. Factories were updated to handle a new allowJSX param in config.

codecov · 2019-06-19T13:47:37Z

Codecov Report

Merging #1513 into master will decrease coverage by 0.01%.
The diff coverage is 82.05%.

@@            Coverage Diff             @@
##           master    #1513      +/-   ##
==========================================
- Coverage   71.24%   71.23%   -0.02%     
==========================================
  Files         851      851              
  Lines        7021     7032      +11     
  Branches     1999     2004       +5     
==========================================
+ Hits         5002     5009       +7     
- Misses       2013     2017       +4     
  Partials        6        6

Impacted Files	Coverage Δ
packages/react/src/components/Input/Input.tsx	`100% <ø> (ø)`	⬆️
packages/react/src/components/Menu/MenuItem.tsx	`34.04% <ø> (ø)`	⬆️
...ackages/react/src/components/Checkbox/Checkbox.tsx	`80% <ø> (ø)`	⬆️
...ackages/react/src/components/Reaction/Reaction.tsx	`81.81% <ø> (ø)`	⬆️
packages/react/src/components/Status/Status.tsx	`100% <ø> (ø)`	⬆️
packages/react/src/components/Button/Button.tsx	`80% <ø> (ø)`	⬆️
packages/react/src/components/Label/Label.tsx	`95.23% <ø> (ø)`	⬆️
...kages/react/src/components/Toolbar/ToolbarItem.tsx	`48.14% <ø> (ø)`	⬆️
...ges/react/src/components/Dropdown/DropdownItem.tsx	`71.42% <ø> (ø)`	⬆️
...react/src/components/RadioGroup/RadioGroupItem.tsx	`85.71% <ø> (ø)`	⬆️
... and 9 more

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 e8ce890...afd4afb. Read the comment docs.

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

docs/src/examples/components/Popup/Types/index.tsx

layershifter · 2019-06-19T14:21:04Z

packages/react/src/components/Dropdown/DropdownSelectedItem.tsx

+              },
+              overrideProps: props,
+            }),
+          )


I am still disappointed with this.

As I see we used our own components in the wrong way, I expect that we can reuse Image and Icon components, but should we reuse Label component in this case? Not sure 🌵

Is this the only place where we implicitly pass shorthand of a shorthand? This will be issue in every case we have like this. Meaning, we have shorthand for something that is shorthand in another element..

We have this only in Dropdown components. I feel that it will be easier to have some custom components instead of this composition

layershifter · 2019-06-19T14:23:01Z

packages/react/src/components/Popup/Popup.tsx

@@ -441,7 +441,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
    const popupContentAttributes =
      accessibility.focusTrap || accessibility.autoFocus ? {} : popupWrapperAttributes

-    const popupContent = Popup.Content.create(content, {
+    const popupContent = Popup.Content.create(content || {}, {


If we will pass false or null to this slot we will render nothing and it will break Popper and Ref components that expects children. I want to consider refactoring of this place more deeply.

Are you going to create a separate issue for that?

packages/react/src/lib/factories.ts

packages/react/src/components/Icon/Icon.tsx

mnajdova · 2019-07-01T08:38:42Z

packages/react/src/components/Label/Label.tsx

@@ -62,9 +62,9 @@ class Label extends UIComponent<WithAsProp<LabelProps>, any> {
  static propTypes = {
    ...commonPropTypes.createCommon({ color: true }),
    circular: PropTypes.bool,
-    icon: customPropTypes.itemShorthand,
+    icon: customPropTypes.itemShorthandWithoutJSX,


Maybe we should rethink how we create these custom prop types - the user here must know that the image and icon are this special type...

Can you please provide more info? We already have a custom propTypes for them...

My point was, the user must know that the Icon and Image have different type then the other shorthands, and this is very prone to mistake in the future... Maybe we can make the component type param to the item shorthand and have one centralized place where this logic will be implemented. Other then this don't have any better idea.. What do you think?

packages/react-proptypes/src/index.ts

e2e/tests/popupEscHandling-example.tsx

docs/src/pages/ShorthandProps.mdx

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

Co-Authored-By: Marija Najdova <mnajdova@gmail.com>

into fix/factories-jsx

docs/src/pages/ShorthandProps.mdx

miroslavstastny · 2019-07-12T13:20:37Z

docs/src/pages/ShorthandProps.mdx

+/>
+```
+
+### Customizing rendered tree


We should also add new use case now - completely replace slot content.

Actually, the example in this section does required thing. I removed a paragraph that doesn't have any sense now, 1fbc89a

Co-Authored-By: Miroslav Stastny <mistastn@microsoft.com>

packages/react/src/components/Dropdown/DropdownSelectedItem.tsx

mnajdova · 2019-07-12T14:17:14Z

yarn.lock

@@ -9,7 +9,27 @@
  dependencies:
    "@babel/highlight" "^7.0.0"

-"@babel/core@^7.1.0", "@babel/core@^7.2.2", "@babel/core@^7.3.4":
+"@babel/core@^7.1.0", "@babel/core@^7.3.4":


Can you check again why we have changes in the yarn.lock and if we have new dependencies that require OSS scan?

I reverted these changes because I don't why they happened 🤔 There are no any changes in any package.json

…/stardust-ui/react into fix/factories-jsx

layershifter commented Jun 19, 2019

View reviewed changes

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx Outdated Show resolved Hide resolved

layershifter commented Jun 19, 2019

View reviewed changes

docs/src/examples/components/Popup/Types/index.tsx Show resolved Hide resolved

layershifter commented Jun 19, 2019

View reviewed changes

packages/react/src/lib/factories.ts Show resolved Hide resolved

layershifter force-pushed the fix/factories-jsx branch 2 times, most recently from 64f6d26 to d63151f Compare June 24, 2019 09:36

levithomason reviewed Jun 24, 2019

View reviewed changes

packages/react/src/components/Icon/Icon.tsx Outdated Show resolved Hide resolved

fix(factories): handle ReactElement as primitive

9f7a429

layershifter force-pushed the fix/factories-jsx branch from d63151f to 9f7a429 Compare June 25, 2019 16:26

restore footer, update header

78194b2

layershifter marked this pull request as ready for review June 25, 2019 16:39

layershifter requested review from dvdzkwsk, kuzhelov, miroslavstastny and mnajdova as code owners June 25, 2019 16:39

layershifter added architecture 🚀 ready for review labels Jun 25, 2019

merge master

1e5af41

mnajdova reviewed Jul 1, 2019

View reviewed changes

packages/react-proptypes/src/index.ts Outdated Show resolved Hide resolved

mnajdova reviewed Jul 1, 2019

View reviewed changes

e2e/tests/popupEscHandling-example.tsx Show resolved Hide resolved

mnajdova reviewed Jul 1, 2019

View reviewed changes

docs/src/pages/ShorthandProps.mdx Show resolved Hide resolved

mnajdova reviewed Jul 1, 2019

View reviewed changes

docs/src/pages/ShorthandProps.mdx Outdated Show resolved Hide resolved

alinais reviewed Jul 1, 2019

View reviewed changes

docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx Outdated Show resolved Hide resolved

layershifter and others added 4 commits July 1, 2019 12:39

Update docs/src/pages/ShorthandProps.mdx

6716247

Co-Authored-By: Marija Najdova <mnajdova@gmail.com>

remove more content:content

14d32ba

Merge branch 'fix/factories-jsx' of https://github.com/stardust-ui/react

d59194d

into fix/factories-jsx

allow false in itemShorthandWithoutJSX

b5d4bef

fix comments in snippets

fd6fece

vercel bot deployed to staging July 12, 2019 11:31 View deployment

pick back fix with content

727c7a9

vercel bot temporarily deployed to staging July 12, 2019 12:01 Inactive

remove duplicates from lock

2756ca7

vercel bot deployed to staging July 12, 2019 12:02 View deployment

miroslavstastny reviewed Jul 12, 2019

View reviewed changes

docs/src/pages/ShorthandProps.mdx Outdated Show resolved Hide resolved

miroslavstastny reviewed Jul 12, 2019

View reviewed changes

docs/src/pages/ShorthandProps.mdx Outdated Show resolved Hide resolved

miroslavstastny reviewed Jul 12, 2019

View reviewed changes

Update docs/src/pages/ShorthandProps.mdx

0f251fc

Co-Authored-By: Miroslav Stastny <mistastn@microsoft.com>

vercel bot temporarily deployed to staging July 12, 2019 13:20 Inactive

Update docs/src/pages/ShorthandProps.mdx

9753305

Co-Authored-By: Miroslav Stastny <mistastn@microsoft.com>

vercel bot temporarily deployed to staging July 12, 2019 13:22 Inactive

Update ShorthandProps.mdx

1fbc89a

vercel bot deployed to staging July 12, 2019 13:25 View deployment

miroslavstastny reviewed Jul 12, 2019

View reviewed changes

packages/react/src/components/Dropdown/DropdownSelectedItem.tsx Outdated Show resolved Hide resolved

Update packages/react/src/components/Dropdown/DropdownSelectedItem.tsx

3018449

vercel bot deployed to staging July 12, 2019 13:30 View deployment

layershifter mentioned this pull request Jul 12, 2019

Popup: refactor to avoid strange condition #1630

Open

miroslavstastny approved these changes Jul 12, 2019

View reviewed changes

mnajdova approved these changes Jul 12, 2019

View reviewed changes

mnajdova reviewed Jul 12, 2019

View reviewed changes

layershifter added 2 commits July 12, 2019 16:48

Merge branches 'fix/factories-jsx' and 'master' of https://github.com…

ab0e327

…/stardust-ui/react into fix/factories-jsx

revert changes in yarn.lock

afd4afb

vercel bot deployed to staging July 12, 2019 14:51 View deployment

layershifter merged commit c1bfffc into master Jul 12, 2019

delete-merged-branch bot deleted the fix/factories-jsx branch July 12, 2019 15:03

bmdalex mentioned this pull request Jul 16, 2019

docs(slider): best practices and usage in form #1641

Merged

kolaps33 mentioned this pull request Jan 6, 2020

prototype(chat pane): accessibility fix attachment in chat #2204

Merged

layershifter mentioned this pull request Jan 4, 2021

[RFC] Increasing focus and iteration speed in convergence - Lean the Towers v2.0 microsoft/fluentui#15929

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(factories): handle ReactElement as primitive #1513

fix(factories): handle ReactElement as primitive #1513

layershifter commented Jun 18, 2019 •

edited

codecov bot commented Jun 19, 2019 •

edited

layershifter Jun 19, 2019

mnajdova Jul 1, 2019

layershifter Jul 1, 2019

layershifter Jun 19, 2019

miroslavstastny Jul 12, 2019

layershifter Jul 12, 2019

mnajdova Jul 1, 2019

layershifter Jul 1, 2019

mnajdova Jul 1, 2019

miroslavstastny Jul 12, 2019

layershifter Jul 12, 2019

mnajdova Jul 12, 2019

layershifter Jul 12, 2019

fix(factories): handle ReactElement as primitive #1513

fix(factories): handle ReactElement as primitive #1513

Conversation

layershifter commented Jun 18, 2019 • edited

BREAKING CHANGES

Before

After

Problem

Solution

Shorthand without JSX

codecov bot commented Jun 19, 2019 • edited

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

layershifter commented Jun 18, 2019 •

edited

codecov bot commented Jun 19, 2019 •

edited