DataTable, TopNav, and Modal CSS changes

CONTRIBUTING.md

@@ -26,6 +26,9 @@ For components from visual-stack that require state management, this library pro
 This is a microsite providing documentation and live examples of components. This package depends on the other two.
 
 ### Running locally
+Install lerna: `npm install -g lerna`
+
+Make sure you are using node 14 or below (`npm install -g n` can be helpful here)
 
 From a fresh clone of the repo, start by bootstrapping the project from the root with `npm run bootstrap`. This will install all external dependencies, create links between local dependent packages and build all three packages.
 

packages/visual-stack/src/components/BlankSlate/index.js

@@ -2,31 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '../Button';
 import './BlankSlate.css';
-import IconExample from 'mdi-react/BlurIcon';
-import { Panel } from '../../../lib/components/Panel';
 
 export const BlankSlate = ({
   children,
   alignment = '',
   title = 'You do not have any content.',
-  headerGraphic = <IconExample />,
+  headerGraphic = '',
   className = '',
   ...restProps
 }) => {
   return (
-    <Panel>
-      <div
-        {...restProps}
-        className={`vs-bs-container ${alignment === 'left-side' &&
-          'vs-bs-leftalign'} ${className}`}
-      >
-        <div className="vs-bs-img">{headerGraphic}</div>
-        <div className="vs-bs-content">
-          <h1 className="vs-bs-title">{title}</h1>
-          {children}
-        </div>
+    <div
+      {...restProps}
+      className={`vs-bs-container ${alignment === 'left-side' &&
+        'vs-bs-leftalign'} ${className}`}
+    >
+      <div className="vs-bs-img">{headerGraphic}</div>
+      <div className="vs-bs-content">
+        <h1 className="vs-bs-title">{title}</h1>
+        {children}
       </div>
-    </Panel>
+    </div>
   );
 };
 

packages/visual-stack/src/components/Form/Form.css

@@ -147,10 +147,6 @@ fieldset.group ul.checkbox li.focus {
   margin-top: -4px;
 }
 
-.vs-field {
-  margin-bottom: 24px;
-}
-
 .vs-field-optional {
   color: #777;
   font-size: 1.3rem;

packages/visual-stack/src/components/Modal.css

@@ -43,6 +43,7 @@
 
 .modal-content {
   position: relative;
+  top: 80px;
   background-color: #fff;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -79,7 +80,14 @@
 
 .modal-header {
   padding: 15px;
-  border-bottom: 1px solid #e5e5e5;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+.modal-header-grid {
+  display: grid;
+  grid-template-columns: 1fr 36px;
+  align-items: center;
 }
 
 .modal-header h1 {
@@ -99,12 +107,13 @@
 .modal-body {
   position: relative;
   padding: 15px;
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
 .modal-footer {
   padding: 15px;
   text-align: right;
-  border-top: 1px solid #e5e5e5;
 }
 
 .modal-footer .btn + .btn {
@@ -153,6 +162,9 @@
   .modal-sm {
     width: 300px;
   }
+  .modal-md {
+    width: 400px;
+  }
 }
 @media (min-width: 992px) {
   .modal-lg {

packages/visual-stack/src/components/Panel.js

@@ -2,15 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Panel.css';
 import { deprecated } from 'prop-types-extra';
-
-export const Panel = ({ children, ...restProps }) => (
-  <div {...restProps} className="cj-panel panel vs-panel-default">
+import cn from 'classnames';
+export const Panel = ({ children, className, ...restProps }) => (
+  <div
+    {...restProps}
+    className={cn(className, 'cj-panel', 'panel', 'vs-panel-default')}
+  >
     {children}
   </div>
 );
 
-export const Footer = ({ children, ...restProps }) => (
-  <div {...restProps} className="cj-panel panel-footer">
+export const Footer = ({ children, className, ...restProps }) => (
+  <div {...restProps} className={cn(className, 'cj-panel', 'panel-footer')}>
     {children}
   </div>
 );
@@ -20,7 +23,13 @@ const paddingMapping = {
   large: 'wide',
 };
 
-export const Body = ({ children, paddingSize, padding, ...restProps }) => {
+export const Body = ({
+  children,
+  paddingSize,
+  padding,
+  className,
+  ...restProps
+}) => {
   const paddingSizeClass = paddingSize
     ? `cj-panel-body-padding-${paddingSize}`
     : '';
@@ -30,15 +39,21 @@ export const Body = ({ children, paddingSize, padding, ...restProps }) => {
   return (
     <div
       {...restProps}
-      className={`cj-panel panel-body ${paddingSizeClass} ${paddingClass}`}
+      className={cn(
+        className,
+        'cj-panel',
+        'panel-body',
+        paddingSizeClass,
+        paddingClass
+      )}
     >
       {children}
     </div>
   );
 };
 
-export const Header = ({ title, children, ...restProps }) => (
-  <div {...restProps} className="cj-panel panel-heading">
+export const Header = ({ title, children, className, ...restProps }) => (
+  <div {...restProps} className={cn(className, 'cj-panel', 'panel-heading')}>
     {title && <legend>{title}</legend>}
     {children}
   </div>

packages/visual-stack/src/components/Table/DataTable/DataTable.css

@@ -28,6 +28,8 @@
   min-height: 32px;
   padding: 4px 8px;
   vertical-align: bottom;
+  border-bottom: 2px solid #d8dcdf;
+  color: #757575;
 }
 
 .vs-data-table-container .vs-tbody .vs-cell {