Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add components examples in README.md files - Part 2 #8338

Merged
merged 42 commits into from
Aug 8, 2018
Merged

Add components examples in README.md files - Part 2 #8338

merged 42 commits into from
Aug 8, 2018

Conversation

mmtr
Copy link
Contributor

@mmtr mmtr commented Jul 31, 2018

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

@gziolo gziolo mentioned this pull request Aug 1, 2018
4 tasks
@mmtr
Copy link
Contributor Author

mmtr commented Aug 3, 2018

@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
Copy link
Contributor Author

mmtr commented Aug 4, 2018

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

@gziolo
Copy link
Member

gziolo commented Aug 4, 2018

@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 mmtr changed the title [WIP] Add components examples in README.md files - Part 2 Add components examples in README.md files - Part 2 Aug 5, 2018
@mmtr
Copy link
Contributor Author

mmtr commented Aug 5, 2018

@gziolo this should be ready to review 🎉

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


return <div>{ post.data.title.rendered }</div>;
class Context extends React.Component {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: We are deprecating this one: #8584.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks! I won't include it then in Calypso

@@ -7,15 +7,38 @@
Wrap your original component with `withContext`, defining a key of context to receive and an optional mapping function.

```jsx
function OriginalComponent( { favoriteColor } ) {
return <div>Your favorite color is: { favoriteColor }</div>;
import PropTypes from 'prop-types';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are deprecating this one, too: #8189.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one example less to include in Calypso

import { Button, Modal } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MyModal = withState( {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Much shorter 👍

@@ -14,10 +13,14 @@ New blocks should be built in conjunction with any necessary REST API endpoints,
Render core/archives preview.

```jsx
import { ServerSideRender } from '@wordpress/components';

const MyServerSideRender = ( { attributes } ) => (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@gziolo gziolo merged commit 5b81cbc into WordPress:master Aug 8, 2018
@gziolo gziolo added this to the 3.5 milestone Aug 8, 2018
@gziolo gziolo added [Type] Developer Documentation Documentation for developers [Package] Components /packages/components labels Aug 8, 2018
@mmtr mmtr deleted the update/components-examples branch August 9, 2018 21:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants