[Docs] example titles & descriptions: AppBar, AutoComplete, Avatar

[mbrookes]

First two for #2927

[newoga]

@mbrookes What do you think about defining the example names as part of the example and exporting it?

For example:

import React from 'react';
import AppBar from 'material-ui/lib/app-bar';
import IconButton from 'material-ui/lib/icon-button';
import NavigationClose from 'material-ui/lib/svg-icons/navigation/close';
import FlatButton from 'material-ui/lib/flat-button';

function handleTouchTap() {
  alert('onTouchTap triggered on the title component');
}

const styles = {
  title: {
    cursor: 'pointer',
  },
};

// Added this...
export const exampleName = '`IconButton` left, clickable title, and `FlatButton` right.';

const AppBarExampleIconButton = () => (
  <AppBar
    title={<span style={styles.title}>Title</span>}
    onTitleTouchTap={handleTouchTap}
    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
    iconElementRight={<FlatButton label="Save" />}
  />
);

export default AppBarExampleIconButton;

import React from 'react';
import CodeExample from '../../../CodeExample';
import PropTypeDescription from '../../../PropTypeDescription';
import MarkdownElement from '../../../MarkdownElement';

import appBarReadmeText from './README';
import AppBarExampleIcon from './ExampleIcon';
import appBarExampleIconCode from '!raw!./ExampleIcon';
import AppBarExampleIconButton, {example as iconButton} from './ExampleIconButton';
import appBarExampleIconButtonCode from '!raw!./ExampleIconButton';
import AppBarExampleIconMenu from './ExampleIconMenu';
import appBarExampleIconMenuCode from '!raw!./ExampleIconMenu';
import appBarCode from '!raw!material-ui/lib/app-bar';

const descriptions = {
  icon: 'A simple example of `AppBar` with an icon on the right. ' +
  'By default, the left icon is a `hamburger-menu`.',
  iconButton: '`IconButton` left, clickable title, and `FlatButton` right.',
  iconMenu: 'Two exapmles of filtering. The first uses `fuzzyFilter`, the second uses `caseInsensitiveFilter`',
};

const AppBarPage = () => (
  <div>
    <MarkdownElement text={appBarReadmeText} />
    <CodeExample
      code={appBarExampleIconCode}
      title="Simple example"
      description={descriptions.icon}
    >
      <AppBarExampleIcon />
    </CodeExample>
    <CodeExample
      code={appBarExampleIconButtonCode}
      title="Buttons"
      description={iconButton}
    >
      <AppBarExampleIconButton />
    </CodeExample>
    <CodeExample
      code={appBarExampleIconMenuCode}
      title="Icon Menu"
      description={descriptions.iconMenu}
    >
      <AppBarExampleIconMenu />
    </CodeExample>
    <PropTypeDescription code={appBarCode} />
  </div>
);

export default AppBarPage;

[newoga]

Well, I guess my example is wrong because its the description, not the title. I wonder if there's a way to simplify all this importing though...Mm

Edit:
That's also a problem because that would also show up in the code string...Mmm. Maybe ignore this for now, I am curious if there is a way we can reduce the boilerplate imports some.

[mbrookes]

Yes, I dropped the idea of importing the descriptions from md files, as it was going to add another file and import per example, and was overkill.

As for the existing imports - I'll let you puzzle over that one before I progress any further. The best I could come up with was to propose shortening the imports to match the file names.

I wanted to get the first couple out there for review - so glad this has sparked some thought on potential improvements.

[newoga]

@mbrookes Yeah by all means go ahead and wrap up updating examples for a component or two. I really like what you've done with this. I'll continue ruminating a bit about the imports.

[oliviertassinari]

examples

[oliviertassinari]

This approach seems like a good tradeoff. Should we squash down and merge?

[mbrookes]

Typo fixed & commits squashed.

[oliviertassinari]

@mbrookes Thanks!