Add border prop to Toolbar and Sidebar

package.json

@@ -9,7 +9,7 @@
     "test": "lerna run lint && lerna run test",
     "start": "cd packages/design-system-website && npm start",
     "styleguide:build": "cd packages/design-system-website && npm run styleguide:build",
-    "publish": "lerna publish"
+    "release": "lerna publish"
   },
   "devDependencies": {
     "@babel/preset-stage-2": "^7.0.0",

packages/data-grid/package.json

@@ -104,6 +104,5 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
       "\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
     }
-  },
-  "gitHead": "4a6c41ff75aabb2ec705588e6ab757fc69ac9f97"
+  }
 }

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/package.json

@@ -88,6 +88,5 @@
     "react-transition-group": "^4.3.0",
     "regenerator-runtime": "^0.13.5",
     "scroll-into-view-if-needed": "^2.2.24"
-  },
-  "gitHead": "4a6c41ff75aabb2ec705588e6ab757fc69ac9f97"
+  }
 }

packages/react-components/source/index.js

@@ -2,63 +2,67 @@ import 'core-js'; // TODO: Potentially remove polyfills from package, after tria
 import 'regenerator-runtime/runtime';
 
 import ActionSelect from './react/library/action-select';
+import Alert from './react/library/alert';
+import Badge from './react/library/badge';
+import Breadcrumb from './react/library/breadcrumb';
 import Button from './react/library/button';
 import ButtonSelect from './react/library/button-select';
 import Card from './react/library/card';
-import Sidebar from './react/library/sidebar';
-import Icon from './react/library/icon';
-import Table from './react/library/table';
-import Input from './react/library/input';
-import Switch from './react/library/switch';
-import Loading from './react/library/loading';
-import Modal from './react/library/modal';
-import TooltipHoverArea from './react/library/tooltips/TooltipHoverArea';
-import Select from './react/library/select';
-import Form from './react/library/form';
-import Filters from './react/library/filters';
 import Checkbox from './react/library/checkbox';
+import Code from './react/library/code';
+import ConfirmationModal from './react/library/confirmation-modal';
 import Content from './react/library/content';
+import Filters from './react/library/filters';
+import Form from './react/library/form';
 import Heading from './react/library/heading';
-import Text from './react/library/text';
-import Alert from './react/library/alert';
-import Badge from './react/library/badge';
+import Icon from './react/library/icon';
+import Input from './react/library/input';
 import Link from './react/library/link';
+import Loading from './react/library/loading';
 import Logo from './react/library/logo';
-import Tabs from './react/library/tabs';
-import Breadcrumb from './react/library/breadcrumb';
-import ConfirmationModal from './react/library/confirmation-modal';
-import Code from './react/library/code';
+import Modal from './react/library/modal';
 import RadioButton from './react/library/radiobutton';
+import Select from './react/library/select';
+import Sidebar from './react/library/sidebar';
+import SidePanel from './react/library/sidepanel';
+import Switch from './react/library/switch';
+import Table from './react/library/table';
+import Tabs from './react/library/tabs';
 import Tag from './react/library/tag';
+import Text from './react/library/text';
+import Toolbar from './react/library/toolbar';
+import TooltipHoverArea from './react/library/tooltips/TooltipHoverArea';
 
 export {
   ActionSelect,
+  Alert,
+  Badge,
+  Breadcrumb,
   Button,
   ButtonSelect,
-  Card,
+  Card, 
+  Checkbox, 
+  Code, 
+  ConfirmationModal, 
+  Content, 
+  Filters,
+  Form,
+  Heading,
   Icon,
-  Table,
   Input,
-  Switch,
+  Link,
   Loading,
+  Logo,
   Modal,
-  TooltipHoverArea,
+  RadioButton,
   Select,
-  Form,
-  Filters,
-  Checkbox,
-  Content,
   Sidebar,
-  Heading,
-  Text,
-  Alert,
-  Badge,
-  Link,
-  Logo,
+  SidePanel,
+  Switch,
+  Table,
   Tabs,
-  Breadcrumb,
-  ConfirmationModal,
-  Code,
-  RadioButton,
   Tag,
+  Text,
+  Toolbar,
+  TooltipHoverArea,
 };

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,7 +17,9 @@ const propTypes = {
 };
 
 const defaultProps = {
+  border: false,
   children: null,
+  closeButtonProps: {},
   open: true,
   title: '',
   onClose() {},
@@ -27,6 +31,7 @@ const defaultProps = {
  * SidePanel may be used inside the rightmost Columns.Column.
  */
 const SidePanel = ({
+  border,
   children,
   open,
   title,
@@ -48,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/package.json

@@ -89,6 +89,5 @@
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.2",
     "webpack-node-externals": "^1.7.2"
-  },
-  "gitHead": "4a6c41ff75aabb2ec705588e6ab757fc69ac9f97"
+  }
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-// import './Columns.scss';
+import './Columns.scss';
 
 const columnsPropTypes = {
   children: PropTypes.node,
@@ -13,7 +13,7 @@ const columnsDefaultProps = {
 };
 
 const Columns = ({ children, className }) => (
-  <div className={classNames('columns', className)}>{children}</div>
+  <div className={classNames('rc-columns', className)}>{children}</div>
 );
 
 Columns.propTypes = columnsPropTypes;
@@ -31,7 +31,9 @@ const columnDefaultProps = {
 };
 
 const Column = ({ children, className, fixed }) => (
-  <div className={classNames('column', className, { fixed })}>{children}</div>
+  <div className={classNames('rc-column', className, { fixed })}>
+    {children}
+  </div>
 );
 
 Column.propTypes = columnPropTypes;

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

@@ -1,14 +1,19 @@
-.columns {
+.rc-columns {
   display: flex;
   flex-direction: row;
+  height: 100%;
 }
 
-.column {
+.rc-column {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
   min-width: 0;
 
+  &:empty {
+    display: none;
+  }
+
   &.fixed {
     flex-grow: 0;
     flex-shrink: 0;

packages/sass-variables/package.json

@@ -13,7 +13,6 @@
   "devDependencies": {
     "stylelint-config-prettier": "^6.0.0"
   },
-  "gitHead": "4a6c41ff75aabb2ec705588e6ab757fc69ac9f97",
   "dependencies": {
     "prettier": "^1.19.1",
     "stylelint": "^11.1.1",

packages/uikit/package.json

@@ -44,6 +44,5 @@
     "prettier": "^1.19.1",
     "sinon": "^7.5.0",
     "sinon-chai": "^3.5.0"
-  },
-  "gitHead": "4a6c41ff75aabb2ec705588e6ab757fc69ac9f97"
+  }
 }