Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-14 00:19:16 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #129 from Unleash/create_feature_in_card

Browse Source 
fix(feature): Create feature form inside a Card to align UI
This commit is contained in:
Ivar Conradi Østhus 2018-04-27 09:44:48 +02:00 committed by GitHub
commit 844812c8a4
2 changed files with 693 additions and 453 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
frontend/src/component/feature/form/__tests__/__snapshots__/form-add-feature-component-test.jsx.snap
View File

@ -49,7 +49,21 @@ ShallowWrapper {
"key": undefined,
"nodeType": "host",
"props": Object {
"children": <section
"children": Array [
<react-mdl-CardTitle
style={
Object {
"paddingTop": "24px",
"wordBreak": "break-all",
}
}
>
Create feature toggle
</react-mdl-CardTitle>,
<form
onSubmit={undefined}
>
<section
style={
Object {
"padding": "16px",
@ -97,15 +111,105 @@ ShallowWrapper {
updateStrategy={[MockFunction]}
/>
<br />
</section>
<react-mdl-CardActions>
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>
</react-mdl-CardActions>
</form>,
],
"className": "fullwidth",
"shadow": 0,
"style": Object {
"overflow": "visible",
},
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": "Create feature toggle",
"style": Object {
"paddingTop": "24px",
"wordBreak": "break-all",
},
},
"ref": null,
"rendered": "Create feature toggle",
"type": "react-mdl-CardTitle",
},
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": Array [
<section
style={
Object {
"padding": "16px",
}
}
>
<react-mdl-Textfield
error={Object {}}
floatingLabel={true}
label="Name"
name="name"
onBlur={[Function]}
onChange={[Function]}
required={true}
value="feature"
/>
<react-mdl-Textfield
floatingLabel={true}
label="Description"
onChange={[Function]}
required={true}
rows={1}
style={
Object {
"width": "100%",
}
}
value="Description"
/>
<div>
<br />
<react-mdl-Switch
checked={false}
onChange={[Function]}
>
Enabled
</react-mdl-Switch>
<hr />
</div>
<StrategiesSection
addStrategy={[MockFunction]}
configuredStrategies={Array []}
moveStrategy={[MockFunction]}
removeStrategy={[MockFunction]}
updateStrategy={[MockFunction]}
/>
<br />
</section>,
<react-mdl-CardActions>
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>
</react-mdl-CardActions>,
],
"onSubmit": undefined,
},
"ref": null,
"rendered": Object {
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
@ -152,10 +256,6 @@ ShallowWrapper {
updateStrategy={[MockFunction]}
/>,
<br />,
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>,
],
"style": Object {
"padding": "16px",
@ -276,7 +376,21 @@ ShallowWrapper {
"rendered": null,
"type": "br",
},
],
"type": "section",
},
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": <FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>,
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "function",
@ -288,18 +402,35 @@ ShallowWrapper {
"rendered": null,
"type": [Function],
},
],
"type": "section",
"type": "react-mdl-CardActions",
},
],
"type": "form",
},
],
"type": "react-mdl-Card",
},
Symbol(enzyme.__nodes__): Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": <section
"children": Array [
<react-mdl-CardTitle
style={
Object {
"paddingTop": "24px",
"wordBreak": "break-all",
}
}
>
Create feature toggle
</react-mdl-CardTitle>,
<form
onSubmit={undefined}
>
<section
style={
Object {
"padding": "16px",
@ -347,15 +478,105 @@ ShallowWrapper {
updateStrategy={[MockFunction]}
/>
<br />
</section>
<react-mdl-CardActions>
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>
</react-mdl-CardActions>
</form>,
],
"className": "fullwidth",
"shadow": 0,
"style": Object {
"overflow": "visible",
},
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": "Create feature toggle",
"style": Object {
"paddingTop": "24px",
"wordBreak": "break-all",
},
},
"ref": null,
"rendered": "Create feature toggle",
"type": "react-mdl-CardTitle",
},
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": Array [
<section
style={
Object {
"padding": "16px",
}
}
>
<react-mdl-Textfield
error={Object {}}
floatingLabel={true}
label="Name"
name="name"
onBlur={[Function]}
onChange={[Function]}
required={true}
value="feature"
/>
<react-mdl-Textfield
floatingLabel={true}
label="Description"
onChange={[Function]}
required={true}
rows={1}
style={
Object {
"width": "100%",
}
}
value="Description"
/>
<div>
<br />
<react-mdl-Switch
checked={false}
onChange={[Function]}
>
Enabled
</react-mdl-Switch>
<hr />
</div>
<StrategiesSection
addStrategy={[MockFunction]}
configuredStrategies={Array []}
moveStrategy={[MockFunction]}
removeStrategy={[MockFunction]}
updateStrategy={[MockFunction]}
/>
<br />
</section>,
<react-mdl-CardActions>
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>
</react-mdl-CardActions>,
],
"onSubmit": undefined,
},
"ref": null,
"rendered": Object {
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
@ -402,10 +623,6 @@ ShallowWrapper {
updateStrategy={[MockFunction]}
/>,
<br />,
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>,
],
"style": Object {
"padding": "16px",
@ -526,7 +743,21 @@ ShallowWrapper {
"rendered": null,
"type": "br",
},
],
"type": "section",
},
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": <FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>,
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "function",
@ -538,12 +769,15 @@ ShallowWrapper {
"rendered": null,
"type": [Function],
},
],
"type": "section",
"type": "react-mdl-CardActions",
},
],
"type": "form",
},
],
"type": "react-mdl-Card",
},
],
Symbol(enzyme.__options__): Object {
"adapter": ReactSixteenAdapter {
"options": Object {

10
frontend/src/component/feature/form/form-add-feature-component.jsx
View File

@ -1,9 +1,10 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Textfield, Switch } from 'react-mdl';
import { Textfield, Switch, Card, CardTitle, CardActions } from 'react-mdl';
import StrategiesSection from './strategies-section-container';
import { FormButtons } from './../../common';
import { styles as commonStyles } from '../../common';
const trim = value => {
if (value && value.trim) {
@ -44,6 +45,8 @@ class AddFeatureComponent extends Component {
const configuredStrategies = input.strategies || [];
return (
<Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
<CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>Create feature toggle</CardTitle>
<form onSubmit={onSubmit(input)}>
<section style={{ padding: '16px' }}>
<Textfield
@ -87,9 +90,12 @@ class AddFeatureComponent extends Component {
/>
<br />
<FormButtons submitText={'Create'} onCancel={onCancel} />
</section>
<CardActions>
<FormButtons submitText={'Create'} onCancel={onCancel} />
</CardActions>
</form>
</Card>
);
}
}