diff --git a/src/components/Block.jsx b/src/components/Block.jsx index bfa85ba..383c1fc 100644 --- a/src/components/Block.jsx +++ b/src/components/Block.jsx @@ -69,15 +69,34 @@ export default class Block extends React.Component { })} onClick={this.onLabelClick} > -
- {this.props.label} -
+ {this.props.fieldSpec && +
+ +
+ } + {!this.props.fieldSpec && +
+ {this.props.label} +
+ }
{this.props.action}
this._blockEl = el}> {this.props.children}
+ {this.props.fieldSpec && +
+ +
+ } } } diff --git a/src/components/Fieldset.jsx b/src/components/Fieldset.jsx index aa3b23e..e6308b9 100644 --- a/src/components/Fieldset.jsx +++ b/src/components/Fieldset.jsx @@ -1,5 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' +import FieldDocLabel from './FieldDocLabel' +import Doc from './Doc' let IDX = 0; @@ -8,21 +10,49 @@ export default class Fieldset extends React.Component { constructor (props) { super(props); this._labelId = `fieldset_label_${(IDX++)}`; + this.state = { + showDoc: false, + } + } + + onToggleDoc = (val) => { + this.setState({ + showDoc: val + }); } render () { const {props} = this; return
-
- {props.label} -
+ {this.props.fieldSpec && +
+ +
+ } + {!this.props.fieldSpec && +
+ {props.label} +
+ }
{this.props.action}
{props.children}
+ {this.props.fieldSpec && +
+ +
+ }
} } diff --git a/src/components/SpecField.jsx b/src/components/SpecField.jsx index 9d73f1c..e978b65 100644 --- a/src/components/SpecField.jsx +++ b/src/components/SpecField.jsx @@ -39,7 +39,11 @@ export default class SpecField extends React.Component { TypeBlock = Block; } - return + return } diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 6406dd7..d7ee196 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -89,6 +89,7 @@ font-size: 12px; margin-top: $margin-3; line-height: 1.5; + flex: 1 0; } .maputnik-doc-target:hover .maputnik-doc-popup {