Enhance Toolbar and Toolbar Group with dense and nowrap options, now available for both

Author: adamkudrna

src/demo/pages/DemoContainer.jsx

@@ -789,10 +789,10 @@ class DemoContainer extends React.Component {
             />
             <h3 id="layout-components-toolbar" className="typography-size-4 mb-6">Toolbar</h3>
             <Documentation
-              name="Example layout with group and space-between justification"
+              name="Example layout with not-wrapping dense group and space-between justification"
               component={(
                 <Toolbar justify="space-between">
-                  <ToolbarGroup>
+                  <ToolbarGroup dense nowrap>
                     <ToolbarItem>
                       <Placeholder text="grouped item 1" />
                     </ToolbarItem>
@@ -813,9 +813,9 @@ class DemoContainer extends React.Component {
               )}
             />
             <Documentation
-              name="Toolbar with disabled wrapping"
+              name="Dense toolbar with disabled wrapping (groups still wrap)"
               component={(
-                <Toolbar justify="space-between" nowrap>
+                <Toolbar justify="space-between" dense nowrap>
                   <ToolbarGroup>
                     <ToolbarItem>
                       <Placeholder text="grouped item 1" />

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

@@ -6,6 +6,7 @@ const Toolbar = (props) => {
   const {
     align,
     children,
+    dense,
     justify,
     nowrap,
   } = props;
@@ -46,6 +47,7 @@ const Toolbar = (props) => {
     <div
       className={[
         styles.toolbar,
+        dense ? styles.isDense : null,
         nowrap ? styles.isNowrap : null,
         alignClass(align),
         justifyClass(justify),
@@ -58,13 +60,15 @@ const Toolbar = (props) => {
 
 Toolbar.defaultProps = {
   align: 'top',
+  dense: false,
   justify: 'start',
   nowrap: false,
 };
 
 Toolbar.propTypes = {
   align: PropTypes.oneOf(['top', 'middle', 'bottom', 'baseline']),
   children: PropTypes.node.isRequired,
+  dense: PropTypes.bool,
   justify: PropTypes.oneOf(['start', 'center', 'end', 'space-between']),
   nowrap: PropTypes.bool,
 };

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

@@ -15,14 +15,6 @@
   margin: $toolbar-spacing;
 }
 
-.isNowrap {
-  flex-wrap: nowrap;
-}
-
-.isNowrap > .item {
-  flex: 0 1 auto;
-}
-
 .isAlignedToTop {
   align-items: flex-start;
 }
@@ -54,3 +46,28 @@
 .isJustifiedToSpaceBetween {
   justify-content: space-between;
 }
+
+.isNowrap {
+  flex-wrap: nowrap;
+}
+
+.isNowrap > .item {
+  flex: 0 1 auto;
+}
+
+.isDense {
+  margin: calc(-1 * #{$toolbar-spacing-dense});
+}
+
+.isDense .item {
+  margin: $toolbar-spacing-dense;
+}
+
+.isDense > .isDense {
+  margin: 0;
+}
+
+.toolbar:not(.isDense) > .isDense,
+.group:not(.isDense) > .isDense {
+  margin: $toolbar-spacing-dense;
+}

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

@@ -6,6 +6,8 @@ const ToolbarGroup = (props) => {
   const {
     align,
     children,
+    dense,
+    nowrap,
   } = props;
 
   const alignClass = (value) => {
@@ -28,6 +30,8 @@ const ToolbarGroup = (props) => {
     <div
       className={[
         styles.group,
+        dense ? styles.isDense : null,
+        nowrap ? styles.isNowrap : null,
         alignClass(align),
       ].join(' ')}
     >
@@ -38,11 +42,15 @@ const ToolbarGroup = (props) => {
 
 ToolbarGroup.defaultProps = {
   align: 'top',
+  dense: false,
+  nowrap: false,
 };
 
 ToolbarGroup.propTypes = {
   align: PropTypes.oneOf(['top', 'middle', 'bottom', 'baseline']),
   children: PropTypes.node.isRequired,
+  dense: PropTypes.bool,
+  nowrap: PropTypes.bool,
 };
 
 export default ToolbarGroup;

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

@@ -46,7 +46,7 @@ describe('rendering', () => {
 
   it('renders correctly with group and all props', () => {
     const tree = shallow((
-      <Toolbar align="middle" justify="space-between" nowrap>
+      <Toolbar align="middle" justify="space-between" dense nowrap>
         <ToolbarItem>item 1</ToolbarItem>
         <ToolbarItem>item 2</ToolbarItem>
         <ToolbarItem>item 3</ToolbarItem>

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

@@ -28,7 +28,7 @@ describe('rendering', () => {
 
   it('renders correctly with all props', () => {
     const tree = shallow((
-      <ToolbarGroup align="middle">
+      <ToolbarGroup align="middle" dense nowrap>
         <ToolbarItem>item</ToolbarItem>
       </ToolbarGroup>
     ));

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"
 >
   <ToolbarItem>
     item
@@ -12,7 +12,7 @@ exports[`rendering renders correctly with a single child 1`] = `
 
 exports[`rendering renders correctly with group and all props 1`] = `
 <div
-  className="toolbar isNowrap isAlignedToMiddle isJustifiedToSpaceBetween"
+  className="toolbar isDense isNowrap isAlignedToMiddle isJustifiedToSpaceBetween"
 >
   <ToolbarItem>
     item 1
@@ -25,6 +25,8 @@ exports[`rendering renders correctly with group and all props 1`] = `
   </ToolbarItem>
   <ToolbarGroup
     align="top"
+    dense={false}
+    nowrap={false}
   >
     <ToolbarItem>
       group item 1
@@ -41,7 +43,7 @@ exports[`rendering renders correctly with group and all props 1`] = `
 
 exports[`rendering renders correctly with multiple children 1`] = `
 <div
-  className="toolbar  isAlignedToTop isJustifiedToStart"
+  className="toolbar   isAlignedToTop isJustifiedToStart"
 >
   <ToolbarItem>
     item 1
@@ -57,7 +59,7 @@ exports[`rendering renders correctly with multiple children 1`] = `
 
 exports[`rendering renders correctly with multiple children and groups 1`] = `
 <div
-  className="toolbar  isAlignedToTop isJustifiedToStart"
+  className="toolbar   isAlignedToTop isJustifiedToStart"
 >
   <ToolbarItem>
     item 1
@@ -70,6 +72,8 @@ exports[`rendering renders correctly with multiple children and groups 1`] = `
   </ToolbarItem>
   <ToolbarGroup
     align="top"
+    dense={false}
+    nowrap={false}
   >
     <ToolbarItem>
       group item 1

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

@@ -2,7 +2,7 @@
 
 exports[`rendering renders correctly with a single child 1`] = `
 <div
-  className="group isAlignedToTop"
+  className="group   isAlignedToTop"
 >
   <ToolbarItem>
     item
@@ -12,7 +12,7 @@ exports[`rendering renders correctly with a single child 1`] = `
 
 exports[`rendering renders correctly with all props 1`] = `
 <div
-  className="group isAlignedToMiddle"
+  className="group isDense isNowrap isAlignedToMiddle"
 >
   <ToolbarItem>
     item
@@ -22,7 +22,7 @@ exports[`rendering renders correctly with all props 1`] = `
 
 exports[`rendering renders correctly with multiple children 1`] = `
 <div
-  className="group isAlignedToTop"
+  className="group   isAlignedToTop"
 >
   <ToolbarItem>
     item 1

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

@@ -1 +1,2 @@
 $toolbar-spacing: var(--rui-toolbar-spacing);
+$toolbar-spacing-dense: var(--rui-toolbar-spacing-dense);

src/lib/components/ui/Modal/Modal.jsx

@@ -107,7 +107,7 @@ class Modal extends React.Component {
             {this.props.children}
           </div>
           <div className={styles.footer}>
-            <Toolbar>
+            <Toolbar dense>
               {this.props.actions.map((action) => (
                 <ToolbarItem key={action.label}>
                   <Button