add close (x) button to Add Org screen

This commit is contained in:
Keith Grant
2019-03-12 11:48:29 -04:00
parent 5b3f5206c4
commit 601214f6d4
3 changed files with 71 additions and 18 deletions

View File

@@ -206,6 +206,17 @@
--pf-c-card__body--PaddingTop: 24px;
}
//
// pf tooltip overrides
//
.pf-c-tooltip__content {
--pf-c-tooltip__content--PaddingTop: 0.71rem;
--pf-c-tooltip__content--PaddingRight: 0.71rem;
--pf-c-tooltip__content--PaddingBottom: 0.71rem;
--pf-c-tooltip__content--PaddingLeft: 0.71rem;
}
//
// pf empty state overrides
//
@@ -238,3 +249,7 @@
--pf-c-card__body--PaddingX: 0;
--pf-c-card__body--PaddingY: 0;
}
.at-u-textRight {
text-align: right;
}

View File

@@ -10,10 +10,12 @@ import {
TextInput,
Gallery,
Card,
CardHeader,
CardBody,
Button,
Tooltip,
} from '@patternfly/react-core';
import { QuestionCircleIcon } from '@patternfly/react-icons';
import { QuestionCircleIcon, TimesIcon } from '@patternfly/react-icons';
import { ConfigContext } from '../../../context';
import Lookup from '../../../components/Lookup';
@@ -110,11 +112,25 @@ class OrganizationAdd extends React.Component {
return (
<PageSection>
<Card>
<CardBody>
<Form autoComplete="off">
<I18n>
{({ i18n }) => (
<I18n>
{({ i18n }) => (
<Card>
<CardHeader className="at-u-textRight">
<Tooltip
content={i18n._(t`Close`)}
position="top"
>
<Button
variant="plain"
aria-label={i18n._(t`Close`)}
onClick={this.onCancel}
>
<TimesIcon />
</Button>
</Tooltip>
</CardHeader>
<CardBody>
<Form autoComplete="off">
<Gallery gutter="md">
<FormGroup
label={i18n._(t`Name`)}
@@ -193,17 +209,17 @@ class OrganizationAdd extends React.Component {
)}
</ConfigContext.Consumer>
</Gallery>
)}
</I18n>
<FormActionGroup
onSubmit={this.onSubmit}
submitDisabled={!enabled}
onCancel={this.onCancel}
/>
{error ? <div>error</div> : ''}
</Form>
</CardBody>
</Card>
<FormActionGroup
onSubmit={this.onSubmit}
submitDisabled={!enabled}
onCancel={this.onCancel}
/>
{error ? <div>error</div> : ''}
</Form>
</CardBody>
</Card>
)}
</I18n>
</PageSection>
);
}