Merge pull request #189 from keithjgrant/73-add-org-spacing

Adjust spacing for add/edit org form

__tests__/components/CardCloseButton.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mountWithContexts } from '../enzymeHelpers';
+import CardCloseButton from '../../src/components/CardCloseButton';
+
+describe('<CardCloseButton>', () => {
+  test('should render close button', () => {
+    const wrapper = mountWithContexts(<CardCloseButton />);
+    const button = wrapper.find('Button');
+    expect(button).toHaveLength(1);
+    expect(button.prop('variant')).toBe('plain');
+    expect(button.prop('className')).toBe('pf-c-card__close');
+    expect(wrapper.find('Link')).toHaveLength(0);
+  });
+
+  test('should render close link when `linkTo` prop provided', () => {
+    const wrapper = mountWithContexts(<CardCloseButton linkTo="/foo" />);
+    expect(wrapper.find('Button')).toHaveLength(0);
+    const link = wrapper.find('Link');
+    expect(link).toHaveLength(1);
+    expect(link.prop('to')).toEqual('/foo');
+    expect(link.prop('className')).toEqual('pf-c-button pf-c-card__close');
+  });
+});

src/app.scss

@@ -34,7 +34,7 @@
 // sidebar overrides
 //
 
-.pf-c-page__sidebar{
+.pf-c-page__sidebar {
   --pf-c-page__sidebar--md--Width: 255px;
 
   .pf-c-nav {
@@ -205,8 +205,25 @@
 // pf card overrides
 //
 
-.pf-c-card {
+// specificity hack to override PatternFly
+.pf-c-card.pf-c-card {
+  --pf-c-card--child--PaddingRight: 20px;
+  --pf-c-card--child--PaddingBottom: 24px;
+  --pf-c-card--child--PaddingLeft: 20px;
+
   display: flex;
+  position: relative;
+}
+
+.pf-c-card__close {
+  position: absolute;
+  top: 10px;
+  right: 4px;
+  color: var(--pf-c-button--m-plain--Color);
+
+  &.pf-c-button {
+    position: absolute;
+  }
 }
 
 .pf-c-card__header {
@@ -300,14 +317,6 @@
   margin-bottom: 10px;
 }
 
-.OrgsTab-closeButton {
-  color: black;
-  float: right;
-  position: relative;
-  top: -25px;
-  margin: 0 10px;
-  right: 10px;
-}
 .awx-c-form-action-group {
   float: right;
   display: block;

src/components/CardCloseButton.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { string } from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Button } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+function CardCloseButton ({ linkTo, ...props }) {
+  if (linkTo) {
+    return (
+      <I18n>
+        {({ i18n }) => (
+          <Link
+            className="pf-c-button pf-c-card__close"
+            aria-label={i18n._(t`Close`)}
+            title={i18n._(t`Close`)}
+            to={linkTo}
+            {...props}
+          >
+            <TimesIcon />
+          </Link>
+        )}
+      </I18n>
+    );
+  }
+  return (
+    <I18n>
+      {({ i18n }) => (
+        <Button
+          variant="plain"
+          className="pf-c-card__close"
+          aria-label={i18n._(t`Close`)}
+          {...props}
+        >
+          <TimesIcon />
+        </Button>
+      )}
+    </I18n>
+  );
+}
+CardCloseButton.propTypes = {
+  linkTo: string,
+};
+CardCloseButton.defaultProps = {
+  linkTo: null,
+};
+
+export default CardCloseButton;

src/components/FormActionGroup/FormActionGroup.jsx

@@ -1,21 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-
 import {
   ActionGroup,
   Toolbar,
   ToolbarGroup,
   Button
 } from '@patternfly/react-core';
+import './styles.scss';
 
 const formActionGroupStyle = {
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'flex-end',
-  marginTop: '10px'
 };
 
 const buttonGroupStyle = {

src/components/FormActionGroup/index.js

@@ -0,0 +1,3 @@
+import FormActionGroup from './FormActionGroup';
+
+export default FormActionGroup;

src/components/FormActionGroup/styles.scss

@@ -0,0 +1,3 @@
+.pf-c-form__group.pf-m-action {
+  --pf-c-form__group--m-action--MarginTop: 0;
+}

src/pages/Organizations/screens/Organization/Organization.jsx

@@ -1,23 +1,11 @@
 import React, { Component } from 'react';
 import { I18n, i18nMark } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
-  Switch,
-  Route,
-  withRouter,
-  Redirect,
-  Link
-} from 'react-router-dom';
-import {
-  Card,
-  CardHeader,
-  PageSection,
-} from '@patternfly/react-core';
-import {
-  TimesIcon
-} from '@patternfly/react-icons';
+import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
+import { Card, CardHeader, PageSection } from '@patternfly/react-core';
 import { withNetwork } from '../../../../contexts/Network';
 import NotifyAndRedirect from '../../../../components/NotifyAndRedirect';
+import CardCloseButton from '../../../../components/CardCloseButton';
 import OrganizationAccess from './OrganizationAccess';
 import OrganizationDetail from './OrganizationDetail';
 import OrganizationEdit from './OrganizationEdit';
@@ -125,7 +113,9 @@ class Organization extends Component {
     } = this.state;
 
     const tabsPaddingOverride = {
-      padding: '0'
+      paddingTop: '0',
+      paddingRight: '0',
+      paddingLeft: '0',
     };
 
     const canSeeNotificationsTab = me.is_system_auditor || isNotifAdmin || isAuditorOfThisOrg;
@@ -164,13 +154,7 @@ class Organization extends Component {
                     labeltext={i18n._(t`Organization detail tabs`)}
                     tabsArray={tabsArray}
                   />
-                  <Link
-                    aria-label="Close"
-                    title="Close"
-                    to="/organizations"
-                  >
-                    <TimesIcon className="OrgsTab-closeButton" />
-                  </Link>
+                  <CardCloseButton linkTo="/organizations" />
                 </React.Fragment>
               )}
             </I18n>

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -8,13 +8,11 @@ import {
   Card,
   CardHeader,
   CardBody,
-  Button,
   Tooltip,
 } from '@patternfly/react-core';
-import { TimesIcon } from '@patternfly/react-icons';
 
 import { withNetwork } from '../../../contexts/Network';
-
+import CardCloseButton from '../../../components/CardCloseButton';
 import OrganizationForm from '../components/OrganizationForm';
 
 class OrganizationAdd extends React.Component {
@@ -70,13 +68,7 @@ class OrganizationAdd extends React.Component {
                   content={i18n._(t`Close`)}
                   position="top"
                 >
-                  <Button
-                    variant="plain"
-                    aria-label={i18n._(t`Close`)}
-                    onClick={this.handleCancel}
-                  >
-                    <TimesIcon />
-                  </Button>
+                  <CardCloseButton onClick={this.handleCancel} />
                 </Tooltip>
               </CardHeader>
               <CardBody>