Redesign toolbar using flexbox

Incorporate flexbox design in the existing design of toolbar. Resolves mui#3192
tintin1343 · Mar 3, 2016 · e2bec06 · e2bec06
1 parent b0ca301
commit e2bec06
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 15 deletions.
diff --git a/docs/src/app/components/pages/components/Toolbar/ExampleSimple.jsx b/docs/src/app/components/pages/components/Toolbar/ExampleSimple.jsx
@@ -25,7 +25,7 @@ export default class ToolbarExamplesSimple extends React.Component {
   render() {
     return (
       <Toolbar>
-        <ToolbarGroup firstChild={true} float="left">
+        <ToolbarGroup firstChild={true}>
           <DropDownMenu value={this.state.value} onChange={this.handleChange}>
             <MenuItem value={1} primaryText="All Broadcasts" />
             <MenuItem value={2} primaryText="All Voice" />
@@ -36,9 +36,11 @@ export default class ToolbarExamplesSimple extends React.Component {
             <MenuItem value={7} primaryText="Active Text" />
           </DropDownMenu>
         </ToolbarGroup>
-        <ToolbarGroup float="right">
-          <ToolbarTitle text="Options" style={{width: 90}} />
+        <ToolbarGroup>
+          <ToolbarTitle text="Options" />
           <FontIcon className="muidocs-icon-custom-sort" />
+          <ToolbarSeparator />
+          <RaisedButton label="Create Broadcast" primary={true} />
           <IconMenu
             iconButtonElement={
               <IconButton touch={true}>
@@ -49,8 +51,6 @@ export default class ToolbarExamplesSimple extends React.Component {
             <MenuItem primaryText="Download" />
             <MenuItem primaryText="More Info" />
           </IconMenu>
-          <ToolbarSeparator />
-          <RaisedButton label="Create Broadcast" primary={true} />
         </ToolbarGroup>
       </Toolbar>
     );

diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx
@@ -4,7 +4,6 @@ import getMuiTheme from '../styles/getMuiTheme';
 function getStyles(props, state) {
   const {
     firstChild,
-    float,
     lastChild,
   } = props;
 
@@ -19,17 +18,18 @@ function getStyles(props, state) {
 
   const styles = {
     root: {
-      float,
       position: 'relative',
       marginLeft: firstChild ? -marginHorizontal : undefined,
       marginRight: lastChild ? -marginHorizontal : undefined,
+      display: 'flex',
+      justifyContent: 'space-between',
     },
     dropDownMenu: {
       root: {
-        float: 'left',
         color: toolbar.color, // removes hover color change, we want to keep it
-        display: 'inline-block',
         marginRight: baseTheme.spacing.desktopGutter,
+        flex: 1,
+        whiteSpace: 'nowrap',
       },
       controlBg: {
         backgroundColor: toolbar.menuHoverColor,
@@ -40,13 +40,11 @@ function getStyles(props, state) {
       },
     },
     button: {
-      float: 'left',
       margin: `${marginVertical}px ${marginHorizontal}px`,
       position: 'relative',
     },
     icon: {
       root: {
-        float: 'left',
         cursor: 'pointer',
         color: toolbar.iconColor,
         lineHeight: `${toolbar.height}px`,
@@ -57,7 +55,6 @@ function getStyles(props, state) {
       },
     },
     span: {
-      float: 'left',
       color: toolbar.iconColor,
       lineHeight: `${toolbar.height}px`,
     },
@@ -112,7 +109,6 @@ const ToolbarGroup = React.createClass({
   getDefaultProps() {
     return {
       firstChild: false,
-      float: 'left',
       lastChild: false,
     };
   },

diff --git a/src/toolbar/toolbar-title.jsx b/src/toolbar/toolbar-title.jsx
@@ -12,7 +12,6 @@ function getStyles(props, state) {
       paddingRight: baseTheme.spacing.desktopGutterLess,
       lineHeight: `${toolbar.height}px`,
       fontSize: toolbar.titleFontSize,
-      display: 'inline-block',
       position: 'relative',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',

diff --git a/src/toolbar/toolbar.jsx b/src/toolbar/toolbar.jsx
@@ -17,8 +17,9 @@ function getStyles(props, state) {
       WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated)
       backgroundColor: toolbar.backgroundColor,
       height: toolbar.height,
-      width: '100%',
       padding: noGutter ? 0 : `0px ${baseTheme.spacing.desktopGutter}px`,
+      display: 'flex',
+      justifyContent: 'space-between',
     },
   };
 }