Skip to content

Commit

Permalink
fix(atoms): fix from filed row align
Browse files Browse the repository at this point in the history
  • Loading branch information
@ej9x
ej9x authored and Andrei Firsov committed Nov 2, 2018
1 parent abf814e commit fae1317
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 14 deletions.
1 change: 1 addition & 0 deletions src/atoms/dataEntry/Form/FormField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const FormFieldDirectionTag = createStyledTag(name, props => ({
display: 'inline-flex',
flexDirection: props.direction === 'row' ? 'row-reverse' : 'column',
alignItems: props.direction === 'row' ? 'center' : 'flex-start',
justifyContent: props.direction === 'row' ? 'flex-end' : 'flex-start',
width: props.stretch ? '100%' : 'auto',
}));

Expand Down
2 changes: 1 addition & 1 deletion src/atoms/dataEntry/InputField/InputField.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default (asStory) => {
<InputField direction="row" stretch={ false } label="Input" input={{ name: 'input', onChange }} />
))
.add('with custom width input', () => (
<InputField direction="row" stretch={ false } width={ 7 } label="Input" input={{ name: 'input', onChange }} />
<InputField direction="row" stretch width={ 7 } label="Input" input={{ name: 'input', onChange }} />
))
.add('with center align', () => (
<InputField input={{ name: 'input', onChange }} align="center" />
Expand Down
126 changes: 113 additions & 13 deletions storybook/__tests__/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3195,6 +3195,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/CheckboxField default 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -3349,6 +3353,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/CheckboxField with checked 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -3504,6 +3512,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/CheckboxField with error 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -3641,6 +3653,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form with form error 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -4023,6 +4039,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form with form error is null 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -4336,6 +4356,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form with groups 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -4704,6 +4728,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form without groups 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -5954,6 +5982,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with center align 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -6045,28 +6077,21 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with custom width input 1`] = `
margin: 2rem;
}
.emotion-4 {
.emotion-8 {
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
width: auto;
}
.emotion-0 {
margin-left: 1rem;
font-size: 1.4rem;
color: #878c93;
line-height: 2;
width: 100%;
}
.emotion-8 {
position: relative;
.emotion-4 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
width: auto;
}
Expand All @@ -6082,7 +6107,18 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with custom width input 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: auto;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%;
}
.emotion-0 {
margin-left: 1rem;
font-size: 1.4rem;
color: #878c93;
line-height: 2;
}
.emotion-2 {
Expand Down Expand Up @@ -6190,6 +6226,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with error 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -6437,6 +6477,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with error and row direction 1`]
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%;
}
Expand Down Expand Up @@ -6520,6 +6564,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with placeholder 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -6697,6 +6745,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with row direction 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%;
}
Expand Down Expand Up @@ -6828,6 +6880,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with row direction and stretch=f
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
width: auto;
}
Expand Down Expand Up @@ -6892,6 +6948,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with stretch 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -7016,6 +7076,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with value 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -7140,6 +7204,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField without error label and indicato
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -7253,6 +7321,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField without label 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -7365,6 +7437,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField without value 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -8649,6 +8725,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/RadioGroupField default 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -8867,6 +8947,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/RadioGroupField with error 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -9934,6 +10018,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/SelectField default 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -10521,6 +10609,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/TextAreaField with placeholder 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -10597,6 +10689,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/TextAreaField with value 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down Expand Up @@ -10673,6 +10769,10 @@ exports[`Storyshots ATOMS/DATA ENTRY/TextAreaField without value 1`] = `
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
Expand Down

0 comments on commit fae1317

Please sign in to comment.