[Docs] Add title and description to code examples

[mbrookes]

Now that #2888 is closed, we need to add a title and description to each of the examples, following the example in AppBar.

• AppBar
• AutoComplete
• Avatar
• Badge
• Card
• Checkbox
• CircularProgress
• DatePicker
• Dialog
• Divider
• DropDownMenu
• FlatButton
• FloatingActionButton
• FontIcon
• GridList
• IconButton
• IconMenu
• LeftNav
• LinearProgress
• List
• Menu
• Paper
• Popover
• RadioButton
• RaisedButton
• RefreshIndicator
• SelectField
• Slider
• Snackbar
• SvgIcon
• Table
• Tabs
• TextField
• TimePicker
• Toggle
• Toolbar

[mbrookes]

What's the preferred code style (assuming it's under 120 chars)?:

<CodeExample code={appBarExampleIconCode} title="Simple Example" description={descriptions.icon} >

or

    <CodeExample
      code={appBarExampleIconCode}
      title="Simple Example"
      description={descriptions.icon}
    >

There are plenty of examples of each.

[oliviertassinari]

I would pick the second one. And enforce https://github.com/airbnb/javascript/tree/master/react#alignment.

[newoga]

@mbrookes I was wondering that too. I prefer option 2 personally as I generally follow AirBnb's style guide in my projects. https://github.com/airbnb/javascript/tree/master/react#props

Yeah, what @oliviertassinari said. Haha.

[mbrookes]

Good for me. 👌

Edit: Hmm, this seems to contradict itself:

  // if props fit in one line then keep it on the same line
  <Foo bar="bar" />

[oliviertassinari]

Edit: Hmm, this seems to contradict itself:

Well, we have to take into account that we enforce
react/jsx-max-props-per-line: [2, {maximum: 4}] and max-len: [2, 120, 4].

[mbrookes]

That's why I was confused 😕 the first example also meets the AirBNB guidlelines and the linting rules. However since you've said the second form is preferred, that's what I've gone with.

Shall I simplify the import names, or leave that alone? @newoga was looking at other ways we could simplify or reduce the imports.

[oliviertassinari]

Shall I simplify the import names

Good question. I personally follow this pattern on my project:

import appBarReadmeText from 'AppBar/README';
import AppBarExampleIcon from 'AppBar/ExampleIcon';
import appBarExampleIconCode from '!raw!AppBar/ExampleIcon';
import appBarExampleIconDescription from 'AppBar/exampleIconDescription.md';
import AppBarExampleIconButton from 'AppBar/ExampleIconButton';
import appBarExampleIconButtonCode from '!raw!AppBar/ExampleIconButton';
import AppBarExampleIconMenu from 'AppBar/ExampleIconMenu';
import appBarExampleIconMenuCode from '!raw!AppBar/ExampleIconMenu';
import appBarCode from '!raw!material-ui/lib/app-bar';

[newoga]

@mbrookes Feel free to follow the pattern @oliviertassinari presented here. I think there is room to wrap some of the logic that does this importing but that can come later. I don't think it'll be wasted effort to move forward with defining proper name/descriptions for all the examples if we have to refactor imports later. I'm currently prioritizing refactoring under ./src instead ./docs at the moment 😄

[mbrookes]

Yeah, I'm probably going to come back to that at this stage.

[mbrookes]

Aaaaand - were done! : 🎉

[newoga]

👏 👏

[mbrookes]

LOL 😆

[alitaheri]

Thanks a lot @mbrookes

@newoga Epic 😆 😆

@oliviertassinari Time for a release 😎