improvement(editor): add title to toggle buttons (#2548)

This commit is contained in:
Sarabjot Kohli 2019-08-28 15:48:30 -07:00 committed by Shawn Erquhart
parent 9cb7cd7214
commit 6e6e4b86ca
2 changed files with 5 additions and 2 deletions

View File

@ -257,12 +257,14 @@ class EditorInterface extends Component {
active={previewVisible} active={previewVisible}
onClick={this.handleTogglePreview} onClick={this.handleTogglePreview}
icon="eye" icon="eye"
title="Toggle preview"
/> />
<EditorToggle <EditorToggle
enabled={collectionPreviewEnabled && previewVisible} enabled={collectionPreviewEnabled && previewVisible}
active={scrollSyncEnabled} active={scrollSyncEnabled}
onClick={this.handleToggleScrollSync} onClick={this.handleToggleScrollSync}
icon="scroll" icon="scroll"
title="Sync scrolling"
/> />
</ViewControls> </ViewControls>
{collectionPreviewEnabled && this.state.previewVisible ? ( {collectionPreviewEnabled && this.state.previewVisible ? (

View File

@ -18,9 +18,9 @@ const EditorToggleButton = styled.button`
margin-bottom: 12px; margin-bottom: 12px;
`; `;
const EditorToggle = ({ enabled, active, onClick, icon }) => const EditorToggle = ({ enabled, active, onClick, icon, title }) =>
!enabled ? null : ( !enabled ? null : (
<EditorToggleButton onClick={onClick} isActive={active}> <EditorToggleButton onClick={onClick} isActive={active} title={title}>
<Icon type={icon} size="large" /> <Icon type={icon} size="large" />
</EditorToggleButton> </EditorToggleButton>
); );
@ -30,6 +30,7 @@ EditorToggle.propTypes = {
active: PropTypes.bool, active: PropTypes.bool,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
icon: PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
}; };
export default EditorToggle; export default EditorToggle;