Add components examples in README.md files - Part 2

[mmtr]

This continues #8267

The aim of this PR is to include working examples in the components documentation.

Components (Part 2)

• HigherOrder
• Modal
• NavigableContainer
• Notice
• Panel
• Placeholder
• Popover
• QueryControls
• RadioControl
• RangeControl
• ResponsiveWrapper
• Sandbox
• ScrollLock
• SelectControl
• ServerSideRender
• SlotFill
• Spinner
• TabPanel
• TextControl
• TextAreaControl
• ToggleControl
• Toolbar
• Tooltip
• TreeSelect

[mmtr]

@gziolo I've started to define a MyComponent component name for the examples, so Calypso can run them dynamically using the render function of react-live as suggested here. Does this look good to you?

[mmtr]

I don't think we should expose ServerSideRender in Calypso. It requires a /gutenberg/v1/block-renderer/:block API endpoint.

[gziolo]

@mmtr - whatever works in terms of the name. My only concern would be the need to document it somewhere so we could point contributors to a link which explains how examples should be structured to ensure we can consume them from docs.

ServerSideRenderer probably should be moved to the editor or standalone package, @youknowriad any thoughts on that? This is similar to CodeEditor tied to WordPress instance.

[mmtr]

@gziolo this should be ready to review 🎉

[gziolo]

I had only one comment. I haven't tested code examples as it would be too time-consuming. Let's move forward and open a follow-up when we discover any issues. Those are only docs after all 😃

I had one question where I think we should skip providing props to the example component.

[gziolo]

FYI: We are deprecating this one: #8584.

[mmtr]

thanks! I won't include it then in Calypso

[gziolo]

We are deprecating this one, too: #8189.

[mmtr]

one example less to include in Calypso

[gziolo]

Much shorter 👍

[gziolo]

Should it provide some dummy attributes to make it work without any attributes provided?

[mmtr]

yep, it makes sense. I forgot this one because it's not being included in Calypso.