diff --git a/__tests__/components/CardCloseButton.test.jsx b/__tests__/components/CardCloseButton.test.jsx new file mode 100644 index 0000000000..f341201f60 --- /dev/null +++ b/__tests__/components/CardCloseButton.test.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { mountWithContexts } from '../enzymeHelpers'; +import CardCloseButton from '../../src/components/CardCloseButton'; + +describe('', () => { + test('should render close button', () => { + const wrapper = mountWithContexts(); + 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(); + 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'); + }); +}); diff --git a/src/app.scss b/src/app.scss index 74d0f4f91b..704f02219a 100644 --- a/src/app.scss +++ b/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; diff --git a/src/components/CardCloseButton.jsx b/src/components/CardCloseButton.jsx new file mode 100644 index 0000000000..9b8dffe41c --- /dev/null +++ b/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 }) => ( + + + + )} + + ); + } + return ( + + {({ i18n }) => ( + + )} + + ); +} +CardCloseButton.propTypes = { + linkTo: string, +}; +CardCloseButton.defaultProps = { + linkTo: null, +}; + +export default CardCloseButton; diff --git a/src/components/FormActionGroup.jsx b/src/components/FormActionGroup/FormActionGroup.jsx similarity index 98% rename from src/components/FormActionGroup.jsx rename to src/components/FormActionGroup/FormActionGroup.jsx index 675633163e..99db0621a4 100644 --- a/src/components/FormActionGroup.jsx +++ b/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 = { diff --git a/src/components/FormActionGroup/index.js b/src/components/FormActionGroup/index.js new file mode 100644 index 0000000000..95f4999d9e --- /dev/null +++ b/src/components/FormActionGroup/index.js @@ -0,0 +1,3 @@ +import FormActionGroup from './FormActionGroup'; + +export default FormActionGroup; diff --git a/src/components/FormActionGroup/styles.scss b/src/components/FormActionGroup/styles.scss new file mode 100644 index 0000000000..b42fb22d74 --- /dev/null +++ b/src/components/FormActionGroup/styles.scss @@ -0,0 +1,3 @@ +.pf-c-form__group.pf-m-action { + --pf-c-form__group--m-action--MarginTop: 0; +} diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx index 479a12b642..50737c6701 100644 --- a/src/pages/Organizations/screens/Organization/Organization.jsx +++ b/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} /> - - - + )} diff --git a/src/pages/Organizations/screens/OrganizationAdd.jsx b/src/pages/Organizations/screens/OrganizationAdd.jsx index 219e5da82d..c975ea6bac 100644 --- a/src/pages/Organizations/screens/OrganizationAdd.jsx +++ b/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" > - +