Issue 1:
When adding multiple children to the button the placement is dependent of the order of the children.

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Same placement, independent from the order.

Current Behavior

Placement differs slightly. There is a problem with the inheriting display of the label. We could not inherit the display-prop (behavior like the html5-button-component).

Steps to Reproduce (for bugs)

https://codesandbox.io/s/y0vv1243w9

Context

I stumbled over that when working with custom icons implemented like the examples. (used Fontawesome5-icons, like in this sandbox).

Your Environment

Tech
Version

Material-UI
1.0.0-beta.25

React
16.2.0

browser
chrome 63.0.3239.108

Issue 2:
I am facing a wired issue when trying to publish my app to production, I am using "npm run build" to build my app.the log contains some warning but its's not related to my issue:

npm WARN react-router@3.0.2 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN recharts@1.0.0-beta.9 requires a peer of react-transition-group@^2.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

The problem is when I render the production build the app styles is corrupted while the js functions is working fine e.g.login, axios requests and routing.

I figured out what causing this issue but I couldn't solve the issue:

I am using jss-rtl as per the docs, so I have a HOC to wrap my components with so the RTL will be rendered properly, when I remove the RTL HOC the style is ok but the rtl is not rendered as expected e.g. Text field label is ltr:

import React from "react";
import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

export default function RTL(props) {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
{props.children}
</JssProvider>
);
}

Usage:

<form>
<RTL>
<TextField
placeholder="username"
label="username"
fullWidth={true}
value={this.state.login}
onChange={this.handleLogin}
margin="normal"
/>
</RTL>
...
</form>

I tried to solve this issue in last two day with no luck :(. so I am here to file this issue.

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Material ui components should be displayed correctly in production as in dev mode.

Expected like dev mode

Current Behavior

Corrupted TextField styles (while button styles is ok!):

Corrupted styles in prod

Steps to Reproduce (for bugs)

1.Follow RTL enabling steps here

2.Add jss-rtl

3.Use the HOC to wrap any textfield in your code.

4.npm run build

Context

This my first app that should be deployed in production environment, the app should be fully RTL in Arabic. unfortunately this issue delayed the deployment 3 days until now.

Your Environment

Tech
Version

Material-UI
1.0.0-beta.33

React
^16.2.0

browser
chrome 64

react-jss
^8.1.0

jss-rtl
^0.2.1