<h3 dir="auto">Description</h3>
<p dir="auto">Going through v1-alpha branch code I've noticed that in some places (like a few, but I'm sure this will grow with time) there are 'hardcoded' component names/identifiers, which in my opinion don't scale well. To improve that I suggest to move all component identifiers (values assigned as <code class="notranslate">muiName</code>) to a separate file as importable constants (eg. in <code class="notranslate">src/internal/identifiers.js</code> or <code class="notranslate">constants.js</code>).</p>
<p dir="auto">Alternative approach would be to export them directly from components, but I feel it's more handy to just</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { identifier1, identifier2 } from '../internal/identifiers';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">identifier1</span><span class="pl-kos">,</span> <span class="pl-s1">identifier2</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../internal/identifiers'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">rather than</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { identifier1 } from '../Component1';
import { identifier2 } from '../Component2/SubComponent';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">identifier1</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../Component1'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">identifier2</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../Component2/SubComponent'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Also <code class="notranslate">muiName</code> itself could be stored there:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { MUI_NAME_PROP, MY_COMPONENT } from '../internal/identifiers';

// ...

MyComponent[MUI_NAME_PROP] = MY_COMPONENT;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-c1">MUI_NAME_PROP</span><span class="pl-kos">,</span> <span class="pl-c1">MY_COMPONENT</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../internal/identifiers'</span><span class="pl-kos">;</span>

<span class="pl-c">// ...</span>

<span class="pl-v">MyComponent</span><span class="pl-kos">[</span><span class="pl-c1">MUI_NAME_PROP</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-c1">MY_COMPONENT</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Or event abstracted away to helpers:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { setMuiName, MY_COMPONENT } from '../internal/identifiers';

// sets static property on MyComponent
setMuiName(MyComponent, MY_COMPONENT);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">setMuiName</span><span class="pl-kos">,</span> <span class="pl-c1">MY_COMPONENT</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../internal/identifiers'</span><span class="pl-kos">;</span>

<span class="pl-c">// sets static property on MyComponent</span>
<span class="pl-en">setMuiName</span><span class="pl-kos">(</span><span class="pl-v">MyComponent</span><span class="pl-kos">,</span> <span class="pl-c1">MY_COMPONENT</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { isMuiComponent, OTHER_COMPONENT } from '../internal/identifiers';

// isMuiComponent could be something simple as:
const isMuiComponent = (component, type) =&gt;
  component &amp;&amp; component.type &amp;&amp; component.type.muiName === type;

if (isMuiComponent(component, OTHER_COMPONENT)) {
  // do magic
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">isMuiComponent</span><span class="pl-kos">,</span> <span class="pl-c1">OTHER_COMPONENT</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../internal/identifiers'</span><span class="pl-kos">;</span>

<span class="pl-c">// isMuiComponent could be something simple as:</span>
<span class="pl-k">const</span> <span class="pl-en">isMuiComponent</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">component</span><span class="pl-kos">,</span> <span class="pl-s1">type</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span>
  <span class="pl-s1">component</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">component</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">component</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">.</span><span class="pl-c1">muiName</span> <span class="pl-c1">===</span> <span class="pl-s1">type</span><span class="pl-kos">;</span>

<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-en">isMuiComponent</span><span class="pl-kos">(</span><span class="pl-s1">component</span><span class="pl-kos">,</span> <span class="pl-c1">OTHER_COMPONENT</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-c">// do magic</span>
<span class="pl-kos">}</span></pre></div>
<hr>
<p dir="auto">Same approach could/should be most likely used for default style sheet names (eg. <code class="notranslate">MuiCard</code>, <code class="notranslate">MuiListItem</code> etc.) as currently these keys are duplicated in component file (<code class="notranslate">createStyleSheet</code>) as well as in <code class="notranslate">src/styles/muiThemeProviderFactory.js</code>. I'd suggest something storing them in <code class="notranslate">src/internal</code> directory as <code class="notranslate">jssIdentifiers.js</code> or <code class="notranslate">styleSheetIdentifiers.js</code>, but to me it's not as important as clearing component logic (<code class="notranslate">muiName</code>s).</p>
<h3 dir="auto">References</h3>
<p dir="auto">Current code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// material-ui/src/List/ListItem.js

// line ~138
const hasAvatar = children.some(value =&gt; {
  return value.type &amp;&amp; value.type.muiName === 'ListItemAvatar';
});

// line ~168
if (
  children.length &amp;&amp;
  children[children.length - 1].type &amp;&amp;
  children[children.length - 1].type.muiName === 'ListItemSecondaryAction'
) {"><pre class="notranslate"><span class="pl-c">// material-ui/src/List/ListItem.js</span>

<span class="pl-c">// line ~138</span>
<span class="pl-k">const</span> <span class="pl-s1">hasAvatar</span> <span class="pl-c1">=</span> <span class="pl-s1">children</span><span class="pl-kos">.</span><span class="pl-en">some</span><span class="pl-kos">(</span><span class="pl-s1">value</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-s1">value</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">value</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">.</span><span class="pl-c1">muiName</span> <span class="pl-c1">===</span> <span class="pl-s">'ListItemAvatar'</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// line ~168</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span>
  <span class="pl-s1">children</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">&amp;&amp;</span>
  <span class="pl-s1">children</span><span class="pl-kos">[</span><span class="pl-s1">children</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">&amp;&amp;</span>
  <span class="pl-s1">children</span><span class="pl-kos">[</span><span class="pl-s1">children</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">.</span><span class="pl-c1">muiName</span> <span class="pl-c1">===</span> <span class="pl-s">'ListItemSecondaryAction'</span>
<span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos"></span></pre></div>
<p dir="auto">Suggestion:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { LIST_ITEM_AVATAR, LIST_ITEM_SECONDARY_ACTION } from '../internal/identifiers';

const hasAvatar = children.some(value =&gt; {
  return value.type &amp;&amp; value.type.muiName === LIST_ITEM_AVATAR;
});

if (
  children.length &amp;&amp;
  children[children.length - 1].type &amp;&amp;
  children[children.length - 1].type.muiName === LIST_ITEM_SECONDARY_ACTION
) {

// or
const childrenLength = children.length;
if (childrenLength &amp;&amp; isMuiComponent(children[childrenLength - 1], LIST_ITEM_SECONDARY_ACTION)) {"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-c1">LIST_ITEM_AVATAR</span><span class="pl-kos">,</span> <span class="pl-c1">LIST_ITEM_SECONDARY_ACTION</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../internal/identifiers'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">hasAvatar</span> <span class="pl-c1">=</span> <span class="pl-s1">children</span><span class="pl-kos">.</span><span class="pl-en">some</span><span class="pl-kos">(</span><span class="pl-s1">value</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-s1">value</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">value</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">.</span><span class="pl-c1">muiName</span> <span class="pl-c1">===</span> <span class="pl-c1">LIST_ITEM_AVATAR</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">if</span> <span class="pl-kos">(</span>
  <span class="pl-s1">children</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">&amp;&amp;</span>
  <span class="pl-s1">children</span><span class="pl-kos">[</span><span class="pl-s1">children</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">&amp;&amp;</span>
  <span class="pl-s1">children</span><span class="pl-kos">[</span><span class="pl-s1">children</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">.</span><span class="pl-c1">muiName</span> <span class="pl-c1">===</span> <span class="pl-c1">LIST_ITEM_SECONDARY_ACTION</span>
<span class="pl-kos">)</span> <span class="pl-kos">{</span>

<span class="pl-c">// or</span>
<span class="pl-k">const</span> <span class="pl-s1">childrenLength</span> <span class="pl-c1">=</span> <span class="pl-s1">children</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">childrenLength</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-en">isMuiComponent</span><span class="pl-kos">(</span><span class="pl-s1">children</span><span class="pl-kos">[</span><span class="pl-s1">childrenLength</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">LIST_ITEM_SECONDARY_ACTION</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos"></span><span class="pl-kos"></span></pre></div>
<p dir="auto">--</p>
<p dir="auto">Current:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// src/IconButton/IconButton.js

if (child.type &amp;&amp; child.type.muiName === 'Icon') {
  return cloneElement(child, {
    className: classNames(classes.icon, child.props.className),
  });
}"><pre class="notranslate"><span class="pl-c">// src/IconButton/IconButton.js</span>

<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">.</span><span class="pl-c1">muiName</span> <span class="pl-c1">===</span> <span class="pl-s">'Icon'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">cloneElement</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">className</span>: <span class="pl-en">classNames</span><span class="pl-kos">(</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">icon</span><span class="pl-kos">,</span> <span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Suggestion:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (isMuiComponent(child, ICON)) {
  return cloneElement(child, {
    className: classNames(classes.icon, child.props.className),
  });
}"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-en">isMuiComponent</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">,</span> <span class="pl-c1">ICON</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">cloneElement</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">className</span>: <span class="pl-en">classNames</span><span class="pl-kos">(</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">icon</span><span class="pl-kos">,</span> <span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">--</p>
<p dir="auto">Current:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// src/form/FormControl.js

Children.forEach(this.props.children, child =&gt; {
  if (child &amp;&amp; child.type &amp;&amp; child.type.muiName === 'Input' &amp;&amp; isDirty(child.props, true)) {
    this.setState({ dirty: true });
  }
});"><pre class="notranslate"><span class="pl-c">// src/form/FormControl.js</span>

<span class="pl-v">Children</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">,</span> <span class="pl-s1">child</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">child</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">.</span><span class="pl-c1">muiName</span> <span class="pl-c1">===</span> <span class="pl-s">'Input'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-en">isDirty</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">dirty</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Suggestion:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { isMuiComponent, INPUT } from '../internal/identifiers';

Children.forEach(this.props.children, child =&gt; {
  if (isMuiComponent(child, INPUT) &amp;&amp; isDirty(child.props, true)) {
    this.setState({ dirty: true });
  }
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">isMuiComponent</span><span class="pl-kos">,</span> <span class="pl-c1">INPUT</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../internal/identifiers'</span><span class="pl-kos">;</span>

<span class="pl-v">Children</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">,</span> <span class="pl-s1">child</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-en">isMuiComponent</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">,</span> <span class="pl-c1">INPUT</span><span class="pl-kos">)</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-en">isDirty</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">dirty</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">--</p>
<p dir="auto">I'd love to submit a PR, but first I wanted to make sure this is something you guys see useful as well :)</p>
<p dir="auto">Thanks!</p>
<h3 dir="auto">Function values do not seem to be generated for style rules generated from <code class="notranslate">withStyles</code>. This makes it a bit annoying to have to choose-either-or or have a duplicate non-material-ui styleSheet for anything which requires a function.</h3>
<h3 dir="auto">Example: <a href="https://www.webpackbin.com/bins/-Kq_JaPyi7k3QAqPyTsN" rel="nofollow">https://www.webpackbin.com/bins/-Kq_JaPyi7k3QAqPyTsN</a></h3>
<p dir="auto">(In this example, component should not display as <code class="notranslate">isShown</code> is set to <code class="notranslate">false</code> which should trigger <code class="notranslate">display</code> to return <code class="notranslate">none</code>)</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 1.0.0-beta.3</li>
<li>React: 15.6.1</li>
<li>Browser: Chrome @ latest</li>
</ul>