Add border prop to Toolbar and Sidebar

Author: vine77

packages/react-components/CHANGELOG.md

@@ -1,6 +1,10 @@
-# [Unreleased](https://github.com/puppetlabs/design-system/compare/@puppet/[email protected])
+# [Unreleased](https://github.com/puppetlabs/design-system/compare/@puppet/[email protected])
+
+# [5.19.1](https://github.com/puppetlabs/design-system/compare/@puppet/[email protected]...@puppet/[email protected]) (2020-03-18)
 
 - [Docs] Add instructions for setting up fonts in different environments (by [sprokusk](https://github.com/sprokusk) in [#233](https://github.com/puppetlabs/design-system/pull/233))
+- [SidePanel, Toolbar] Add `border` prop to Toolbar and Sidebar (by [@vine77](https://github.com/vine77) in [#235](https://github.com/puppetlabs/design-system/pull/235))
+- Upgrade dependencies (by [@vine77](https://github.com/vine77) in [b91310b](https://github.com/puppetlabs/design-system/commit/b91310b722c509d90268b6efeae6692404074f0f))
 
 # [5.19.0](https://github.com/puppetlabs/design-system/compare/@puppet/[email protected]...@puppet/[email protected]) (2020-03-13)
 

packages/react-components/source/react/library/sidepanel/SidePanel.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import Button from '../button';
 import Heading from '../heading';
 
 const propTypes = {
+  border: PropTypes.bool,
   className: PropTypes.string,
   children: PropTypes.node,
   closeButtonProps: PropTypes.shape({}),
@@ -15,6 +17,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+  border: false,
   children: null,
   closeButtonProps: {},
   open: true,
@@ -28,6 +31,7 @@ const defaultProps = {
  * SidePanel may be used inside the rightmost Columns.Column.
  */
 const SidePanel = ({
+  border,
   children,
   open,
   title,
@@ -49,7 +53,11 @@ const SidePanel = ({
 
   return (
     open && (
-      <div className={`rc-sidepanel ${className}`}>
+      <div
+        className={classNames('rc-sidepanel', className, {
+          'rc-sidepanel-border': border,
+        })}
+      >
         <div className="rc-sidepanel-toolbar">
           <Heading
             as="h5"

packages/react-components/source/react/library/toolbar/Toolbar.js

@@ -1,19 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import Actions from './Actions';
 
 const propTypes = {
+  border: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
 };
 
 const defaultProps = {
+  border: false,
   children: null,
   className: '',
 };
 
-const Toolbar = ({ children, className }) => (
-  <div className={`rc-toolbar ${className}`}>{children}</div>
+const Toolbar = ({ border, children, className }) => (
+  <div
+    className={classNames('rc-toolbar', className, {
+      'rc-toolbar-border': border,
+    })}
+  >
+    {children}
+  </div>
 );
 
 Toolbar.propTypes = propTypes;

packages/react-components/source/react/library/toolbar/Toolbar.md

@@ -7,7 +7,7 @@ Toolbar acts as a container for tabs and buttons that is unified and compact.
 ```jsx
 import Button from '../button';
 
-<Toolbar>
+<Toolbar border>
   <Toolbar.Actions>
     <Button innerFocus type="transparent">
       Toolbar button
@@ -30,7 +30,7 @@ const [open, setOpen] = React.useState(false);
 
 <div style={{ display: 'flex' }}>
   <div style={{ flexGrow: 1 }}>
-    <Toolbar>
+    <Toolbar border>
       <Tabs>
         <Tabs.Tab icon="home" title="Tab 1">
           <Text>This is the first toolbar tab.</Text>
@@ -52,7 +52,7 @@ const [open, setOpen] = React.useState(false);
   <div>
     <SidePanel
       type="toolbar"
-      bordered
+      border
       title="SidePanel for the toolbar"
       open={open}
       onClose={() => setOpen(false)}

packages/react-components/source/scss/library/components/_sidepanel.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex: none;
   flex-direction: column;
+  height: 100%;
   width: 326px;
 
   @media (max-width: 767px) {
@@ -18,11 +19,14 @@
 .rc-sidepanel-toolbar {
   background-color: $puppet-n50;
   border-bottom: $puppet-common-border;
-  border-top: $puppet-common-border;
   display: flex;
   justify-content: space-between;
 }
 
+.rc-sidepanel-border .rc-sidepanel-toolbar {
+  border-top: $puppet-common-border;
+}
+
 .rc-sidepanel-heading {
   color: $puppet-n800;
   font-family: $puppet-type-font-family-secondary;

packages/react-components/source/scss/library/components/_toolbar.scss

@@ -3,21 +3,32 @@
 .rc-toolbar {
   background-color: $puppet-n50;
   border-bottom: $puppet-common-border;
-  border-top: $puppet-common-border;
   display: flex;
 }
 
+.rc-toolbar-border {
+  border-top: $puppet-common-border;
+}
+
 .rc-toolbar > .rc-tabs {
-  margin: -1px 0;
+  margin-bottom: -1px;
+  margin-top: 0;
+}
+
+.rc-toolbar-border > .rc-tabs {
+  margin-top: -1px;
 }
 
 .rc-toolbar > .rc-tabs > .rc-tabs-list {
   background-color: $puppet-n50;
   border-bottom: $puppet-common-border;
-  border-top: $puppet-common-border;
   z-index: 2;
 }
 
+.rc-toolbar-border > .rc-tabs > .rc-tabs-list {
+  border-top: $puppet-common-border;
+}
+
 .rc-toolbar > .rc-tabs > .rc-tabs-list > .rc-tabs-button {
   border: 0;
   border-radius: 0 !important;
@@ -60,6 +71,7 @@
 
 .rc-toolbar > .rc-tabs > .rc-tabs-panel {
   border-top: 0;
+  padding: 0;
 }
 
 .rc-toolbar-actions {

packages/react-layouts/src/Columns/Columns.scss

@@ -1,6 +1,7 @@
 .rc-columns {
   display: flex;
   flex-direction: row;
+  height: 100%;
 }
 
 .rc-column {