Redesign toolbar using flexbox

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

Hide file tree

Showing 4 changed files with 14 additions and 13 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,20 @@ function getStyles(props, state) {
 
   const styles = {
     root: {
-      float,
       position: 'relative',
       marginLeft: firstChild ? -marginHorizontal : undefined,
       marginRight: lastChild ? -marginHorizontal : undefined,
+      display: 'flex',
+      justifyContent: 'space-between',
+      flexWrap: 'wrap',
     },
     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 +42,12 @@ function getStyles(props, state) {
       },
     },
     button: {
-      float: 'left',
       margin: `${marginVertical}px ${marginHorizontal}px`,
       position: 'relative',
+      overflow: 'hidden',
     },
     icon: {
       root: {
-        float: 'left',
         cursor: 'pointer',
         color: toolbar.iconColor,
         lineHeight: `${toolbar.height}px`,
@@ -57,7 +58,6 @@ function getStyles(props, state) {
       },
     },
     span: {
-      float: 'left',
       color: toolbar.iconColor,
       lineHeight: `${toolbar.height}px`,
     },
@@ -112,7 +112,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,11 +12,11 @@ function getStyles(props, state) {
       paddingRight: baseTheme.spacing.desktopGutterLess,
       lineHeight: `${toolbar.height}px`,
       fontSize: toolbar.titleFontSize,
-      display: 'inline-block',
       position: 'relative',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
+      flex: 2,
     },
   };
 }

diff --git a/src/toolbar/toolbar.jsx b/src/toolbar/toolbar.jsx
@@ -19,6 +19,8 @@ function getStyles(props, state) {
       height: toolbar.height,
       width: '100%',
       padding: noGutter ? 0 : `0px ${baseTheme.spacing.desktopGutter}px`,
+      display: 'inline-flex',
+      justifyContent: 'space-between',
     },
   };
 }