From b6c3a4d7d4051de83ccf7e282866e87d4144b7ad Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Fri, 8 Jun 2018 14:03:35 +0300
Subject: [PATCH] style(forms): improve forms ui
---
.../components/MakeDecision/DecisionForm.js | 13 ++---
.../MakeRecommendation/RecommendWizard.js | 5 +-
.../components/MakeRecommendation/StepTwo.js | 53 +++++++------------
.../src/components/UIComponents/FormItems.js | 20 +++----
4 files changed, 35 insertions(+), 56 deletions(-)
diff --git a/packages/components-faraday/src/components/MakeDecision/DecisionForm.js b/packages/components-faraday/src/components/MakeDecision/DecisionForm.js
index 3e0d89583..fe8f3f38b 100644
--- a/packages/components-faraday/src/components/MakeDecision/DecisionForm.js
+++ b/packages/components-faraday/src/components/MakeDecision/DecisionForm.js
@@ -28,7 +28,6 @@ const {
FormContainer,
TextAreaField,
CustomRadioGroup,
- CustomValidatedField,
} = FormItems
const Form = RootContainer.withComponent(FormContainer)
@@ -83,13 +82,11 @@ const DecisionForm = ({
<Row>
<RowItem vertical>
<Label>Comments for Handling Editor</Label>
- <CustomValidatedField>
- <ValidatedField
- component={TextAreaField}
- name="messageToHE"
- validate={[required]}
- />
- </CustomValidatedField>
+ <ValidatedField
+ component={TextAreaField}
+ name="messageToHE"
+ validate={[required]}
+ />
</RowItem>
</Row>
)}
diff --git a/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js b/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js
index 1b06f395f..3ef84572b 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js
@@ -83,10 +83,13 @@ export default compose(
const recommendation = utils.parseRecommendationValues(values)
createRecommendation(collectionId, fragmentId, recommendation).then(r => {
resetForm('recommendation')
- getCollections()
showModal({
title: 'Recommendation sent',
cancelText: 'OK',
+ onCancel: () => {
+ getCollections()
+ hideModal()
+ },
})
})
},
diff --git a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
index ae48f5f41..7081d58f0 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
@@ -27,7 +27,6 @@ const {
RootContainer,
FormContainer,
CustomRadioGroup,
- CustomValidatedField,
} = FormItems
const Form = RootContainer.withComponent(FormContainer)
@@ -53,17 +52,13 @@ const StepTwo = ({
<Row>
<RowItem vertical>
<Label>Message for Editor in Chief (optional)</Label>
- <CustomValidatedField>
- <ValidatedField component={TextAreaField} name="message.eic" />
- </CustomValidatedField>
+ <ValidatedField component={TextAreaField} name="message.eic" />
</RowItem>
</Row>
<Row>
<RowItem vertical>
<Label>Message for Author (optional)</Label>
- <CustomValidatedField>
- <ValidatedField component={TextAreaField} name="message.author" />
- </CustomValidatedField>
+ <ValidatedField component={TextAreaField} name="message.author" />
</RowItem>
</Row>
{recommendationError && (
@@ -76,7 +71,7 @@ const StepTwo = ({
</Fragment>
) : (
<Fragment>
- <CustomRow>
+ <Row>
<RowItem vertical>
<Label>REVISION TYPE</Label>
<ValidatedField
@@ -93,22 +88,20 @@ const StepTwo = ({
validate={[required]}
/>
</RowItem>
- </CustomRow>
- <CustomRow>
+ </Row>
+ <Row>
<RowItem vertical>
<Label>
REASON & DETAILS
<SubLabel>Required</SubLabel>
</Label>
- <CustomValidatedField>
- <ValidatedField
- component={TextAreaField}
- name="revision.reason"
- validate={[required]}
- />
- </CustomValidatedField>
+ <ValidatedField
+ component={TextAreaField}
+ name="revision.reason"
+ validate={[required]}
+ />
</RowItem>
- </CustomRow>
+ </Row>
{!hasNote ? (
<Row>
<RowItem>
@@ -118,7 +111,7 @@ const StepTwo = ({
</Row>
) : (
<Fragment>
- <CustomRow withMargin>
+ <Row noMargin>
<RowItem flex={2}>
<Label>
INTERNAL NOTE
@@ -131,17 +124,15 @@ const StepTwo = ({
</IconButton>
<TextButton>Remove</TextButton>
</CustomRowItem>
- </CustomRow>
- <CustomRow>
+ </Row>
+ <Row noMargin>
<RowItem>
- <CustomValidatedField>
- <ValidatedField
- component={TextAreaField}
- name="revision.internal-note"
- />
- </CustomValidatedField>
+ <ValidatedField
+ component={TextAreaField}
+ name="revision.internal-note"
+ />
</RowItem>
- </CustomRow>
+ </Row>
</Fragment>
)}
</Fragment>
@@ -218,11 +209,7 @@ const CustomRowItem = RowItem.extend`
justify-content: flex-end;
& > div {
- flex: 0;
+ justify-content: flex-end;
}
`
-
-const CustomRow = Row.extend`
- margin: ${({ withMargin }) => `${withMargin ? 6 : 0}px 0px`};
-`
// #endregion
diff --git a/packages/components-faraday/src/components/UIComponents/FormItems.js b/packages/components-faraday/src/components/UIComponents/FormItems.js
index 11120c0d0..fc91cd922 100644
--- a/packages/components-faraday/src/components/UIComponents/FormItems.js
+++ b/packages/components-faraday/src/components/UIComponents/FormItems.js
@@ -50,7 +50,12 @@ export const Row = styled.div`
display: flex;
flex-direction: row;
justify-content: space-evenly;
- margin: calc(${th('subGridUnit')} * 2) 0;
+ margin: ${({ noMargin }) =>
+ noMargin ? 0 : css`calc(${th('subGridUnit')} * 2) 0`};
+
+ div[role='alert'] {
+ margin-top: 0;
+ }
`
export const RowItem = styled.div`
@@ -58,7 +63,6 @@ export const RowItem = styled.div`
flex: ${({ flex }) => flex || 1};
flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
- margin: ${th('subGridUnit')};
& > div {
flex: 1;
@@ -120,16 +124,4 @@ export const CustomRadioGroup = styled.div`
}
`
-export const CustomValidatedField = styled.div`
- div {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
-
- div:last-child {
- margin-top: 0;
- }
- }
-`
-
export const TextAreaField = input => <Textarea {...input} height={70} />
--
GitLab