Add nowrap option for Toolbar

Author: adamkudrna

src/demo/pages/DemoContainer.jsx

@@ -445,6 +445,27 @@ class DemoContainer extends React.Component {
                 </Toolbar>
               )}
             />
+            <Documentation
+              name="Toolbar with disabled wrapping"
+              component={(
+                <Toolbar justify="space-between" nowrap>
+                  <ToolbarGroup>
+                    <ToolbarItem>
+                      <Placeholder text="grouped item 1" />
+                    </ToolbarItem>
+                    <ToolbarItem>
+                      <Placeholder text="grouped item 2" />
+                    </ToolbarItem>
+                    <ToolbarItem>
+                      <Placeholder text="grouped item 3" />
+                    </ToolbarItem>
+                  </ToolbarGroup>
+                  <ToolbarItem>
+                    <Placeholder text="item A" />
+                  </ToolbarItem>
+                </Toolbar>
+              )}
+            />
             <Documentation
               name="Centered justification and alignment"
               component={(

src/lib/components/layout/Toolbar/Toolbar.jsx

@@ -7,6 +7,7 @@ const Toolbar = (props) => {
     align,
     children,
     justify,
+    nowrap,
   } = props;
 
   const alignClass = (value) => {
@@ -45,6 +46,7 @@ const Toolbar = (props) => {
     <div
       className={[
         styles.toolbar,
+        nowrap ? styles.isNowrap : null,
         alignClass(align),
         justifyClass(justify),
       ].join(' ')}
@@ -57,6 +59,7 @@ const Toolbar = (props) => {
 Toolbar.defaultProps = {
   align: 'top',
   justify: 'start',
+  nowrap: false,
 };
 
 Toolbar.propTypes = {
@@ -66,6 +69,7 @@ Toolbar.propTypes = {
     PropTypes.node,
   ]).isRequired,
   justify: PropTypes.oneOf(['start', 'center', 'end', 'space-between']),
+  nowrap: PropTypes.bool,
 };
 
 export default Toolbar;

src/lib/components/layout/Toolbar/Toolbar.scss

@@ -1,4 +1,3 @@
-@import '../../../styles/tools/offset';
 @import 'theme';
 
 .toolbar,
@@ -16,8 +15,12 @@
   margin: $toolbar-spacing;
 }
 
-.spacer {
-  flex: 1 1 auto;
+.isNowrap {
+  flex-wrap: nowrap;
+}
+
+.isNowrap > .item {
+  flex: 0 1 auto;
 }
 
 .isAlignedToTop {

src/lib/components/layout/Toolbar/__tests__/Toolbar.test.jsx

@@ -27,7 +27,7 @@ describe('rendering', () => {
 
   it('renders correctly with all props', () => {
     const tree = shallow((
-      <Toolbar align="middle" justify="center">
+      <Toolbar align="middle" justify="center" nowrap>
         <span>content</span>
       </Toolbar>
     ));

src/lib/components/layout/Toolbar/__tests__/__snapshots__/Toolbar.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`rendering renders correctly with a single child 1`] = `
 <div
-  className="toolbar isAlignedToTop isJustifiedToStart"
+  className="toolbar  isAlignedToTop isJustifiedToStart"
 >
   <span>
     content
@@ -12,7 +12,7 @@ exports[`rendering renders correctly with a single child 1`] = `
 
 exports[`rendering renders correctly with all props 1`] = `
 <div
-  className="toolbar isAlignedToMiddle isJustifiedToCenter"
+  className="toolbar isNowrap isAlignedToMiddle isJustifiedToCenter"
 >
   <span>
     content
@@ -22,7 +22,7 @@ exports[`rendering renders correctly with all props 1`] = `
 
 exports[`rendering renders correctly with multiple children 1`] = `
 <div
-  className="toolbar isAlignedToTop isJustifiedToStart"
+  className="toolbar  isAlignedToTop isJustifiedToStart"
 >
   <span>
     content 1