[design] use angle icons instead of carets for expandable panels (#6564)

* [design] use angle icons instead of carets for expandable panels

Also moving to the right to conform to the material design specs

* Fix cypress test
This commit is contained in:
Maxime Beauchemin
2018-12-27 22:18:27 -08:00
committed by GitHub
parent a0b2f2ca0f
commit 2c3794e28d
2 changed files with 13 additions and 12 deletions

View File

@@ -31,21 +31,21 @@ export default class ControlPanelSection extends React.Component {
return (
label &&
<div>
<span>
<span onClick={this.toggleExpand.bind(this)}>{label}</span>
{' '}
{description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
{hasErrors &&
<InfoTooltipWithTrigger
label="validation-errors"
bsStyle="danger"
tooltip="This section contains validation errors"
/>}
</span>
<i
className={`text-primary expander fa fa-caret-${this.state.expanded ? 'down' : 'right'}`}
className={`float-right fa-lg text-primary expander fa fa-angle-${this.state.expanded ? 'up' : 'down'}`}
onClick={this.toggleExpand.bind(this)}
/>
{' '}
<span onClick={this.toggleExpand.bind(this)}>{label}</span>
{' '}
{description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
{hasErrors &&
<InfoTooltipWithTrigger
label="validation-errors"
bsStyle="danger"
tooltip="This section contains validation errors"
/>
}
</div>);
}