From 0b5f8921932869d14d8b793cb9fdf519d04a554d Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Wed, 19 Feb 2020 14:56:56 -0500 Subject: [PATCH] update FormLayout styling --- .../FormActionGroup/FormActionGroup.jsx | 1 + .../src/components/FormField/PasswordField.jsx | 7 +++++-- .../src/components/FormLayout/FormLayout.jsx | 15 +++++++++------ .../screens/Project/ProjectEdit/ProjectEdit.jsx | 10 +--------- .../src/screens/Project/shared/ProjectForm.jsx | 1 - .../shared/ProjectSubForms/ManualSubForm.jsx | 1 - .../screens/Template/shared/JobTemplateForm.jsx | 1 - awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx | 8 +------- 8 files changed, 17 insertions(+), 27 deletions(-) diff --git a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx index 71adc9c2f7..203de01483 100644 --- a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx +++ b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx @@ -10,6 +10,7 @@ const ActionGroup = styled(PFActionGroup)` justify-content: flex-end; --pf-c-form__group--m-action--MarginTop: 0; grid-column: 1 / -1; + margin-right: calc(var(--pf-c-form__actions--MarginRight) * -1); .pf-c-form__actions { & > button { diff --git a/awx/ui_next/src/components/FormField/PasswordField.jsx b/awx/ui_next/src/components/FormField/PasswordField.jsx index 312db1f971..34823cf8a0 100644 --- a/awx/ui_next/src/components/FormField/PasswordField.jsx +++ b/awx/ui_next/src/components/FormField/PasswordField.jsx @@ -17,6 +17,7 @@ function PasswordField(props) { const { id, name, label, validate, isRequired, i18n } = props; const [inputType, setInputType] = useState('password'); const [field, meta] = useField({ name, validate }); + const isValid = !(meta.touched && meta.error); const handlePasswordToggle = () => { @@ -46,11 +47,13 @@ function PasswordField(props) { { + onChange={(_, event) => { field.onChange(event); }} /> diff --git a/awx/ui_next/src/components/FormLayout/FormLayout.jsx b/awx/ui_next/src/components/FormLayout/FormLayout.jsx index aeab53a3ef..c9eb849822 100644 --- a/awx/ui_next/src/components/FormLayout/FormLayout.jsx +++ b/awx/ui_next/src/components/FormLayout/FormLayout.jsx @@ -2,9 +2,9 @@ import styled from 'styled-components'; export const FormColumnLayout = styled.div` width: 100%; - grid-column: 1 / 4; + grid-column: 1 / -1; display: grid; - grid-gap: 20px; + grid-gap: var(--pf-c-form--GridGap); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); @media (min-width: 1210px) { @@ -16,25 +16,28 @@ export const FormFullWidthLayout = styled.div` grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; - grid-gap: 20px; + grid-gap: var(--pf-c-form--GridGap); `; export const FormCheckboxLayout = styled.div` display: flex; justify-content: flex-start; flex-wrap: wrap; + margin-bottom: -10px; + margin-right: -30px !important; & > * { - margin-right: 30px; margin-bottom: 10px; + margin-right: 30px; } `; export const SubFormLayout = styled.div` grid-column: 1 / -1; background-color: #f5f5f5; - margin: 0 -24px; - padding: 24px; + margin-right: calc(var(--pf-c-card--child--PaddingRight) * -1); + margin-left: calc(var(--pf-c-card--child--PaddingLeft) * -1); + padding: var(--pf-c-card--child--PaddingRight); & > .pf-c-title { --pf-c-title--m-md--FontWeight: 700; diff --git a/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx b/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx index 64ebf65c05..bde5500cb6 100644 --- a/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx +++ b/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx @@ -1,18 +1,10 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -import styled from 'styled-components'; -import { Card as _Card } from '@patternfly/react-core'; +import { Card } from '@patternfly/react-core'; import { CardBody } from '@components/Card'; import ProjectForm from '../shared/ProjectForm'; import { ProjectsAPI } from '@api'; -// TODO: we are doing this in multiple add/edit screens -- move to -// common component? -const Card = styled(_Card)` - --pf-c-card--child--PaddingLeft: 0; - --pf-c-card--child--PaddingRight: 0; -`; - function ProjectEdit({ project }) { const [formSubmitError, setFormSubmitError] = useState(null); const history = useHistory(); diff --git a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx index 220462f98f..d49221657b 100644 --- a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx +++ b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx @@ -368,7 +368,6 @@ function ProjectForm({ i18n, project, submitError, ...props }) {
- )} ); }; diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx index db1229cbe1..82ceeb3313 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx @@ -510,7 +510,6 @@ class JobTemplateForm extends Component { diff --git a/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx b/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx index 0694627815..279bb4e1ff 100644 --- a/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx +++ b/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx @@ -1,16 +1,10 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -import styled from 'styled-components'; -import { Card as _Card, PageSection } from '@patternfly/react-core'; +import { Card, PageSection } from '@patternfly/react-core'; import { CardBody } from '@components/Card'; import UserForm from '../shared/UserForm'; import { UsersAPI } from '@api'; -const Card = styled(_Card)` - --pf-c-card--child--PaddingLeft: 0; - --pf-c-card--child--PaddingRight: 0; -`; - function UserAdd() { const [formSubmitError, setFormSubmitError] = useState(null); const history = useHistory();