Merge branch 'develop' into fix/document-theme

Author: lindapaiste

client/common/Button.jsx

@@ -257,7 +257,7 @@ Button.propTypes = {
    * The visible part of the button, telling the user what
    * the action is
    */
-  children: PropTypes.element,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   /**
     If the button can be activated or not
   */

client/modules/IDE/components/Toolbar.jsx

@@ -18,6 +18,7 @@ class Toolbar extends React.Component {
     super(props);
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handleProjectNameChange = this.handleProjectNameChange.bind(this);
+    this.handleProjectNameClick = this.handleProjectNameClick.bind(this);
     this.handleProjectNameSave = this.handleProjectNameSave.bind(this);
 
     this.state = {
@@ -36,6 +37,17 @@ class Toolbar extends React.Component {
     this.setState({ projectNameInputValue: event.target.value });
   }
 
+  handleProjectNameClick() {
+    if (this.canEditProjectName) {
+      this.props.showEditProjectName();
+      setTimeout(() => {
+        if (this.projectNameInput) {
+          this.projectNameInput.focus();
+        }
+      }, 140);
+    }
+  }
+
   handleProjectNameSave() {
     const newProjectName = this.state.projectNameInputValue.trim();
     if (newProjectName.length === 0) {
@@ -132,12 +144,7 @@ class Toolbar extends React.Component {
         <div className={nameContainerClass}>
           <button
             className="toolbar__project-name"
-            onClick={() => {
-              if (canEditProjectName) {
-                this.props.showEditProjectName();
-                setTimeout(() => this.projectNameInput.focus(), 140);
-              }
-            }}
+            onClick={this.handleProjectNameClick}
             disabled={!canEditProjectName}
             aria-label={this.props.t('Toolbar.EditSketchARIA')}
           >