Hide web part tile completely when empty

Author: estruyf

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 ## 1.2.3
 
+**Enhancements**
+
 - Optimized telemetry so that it only pushes control data
+- `WebPartTitle` hide control completely when empty
 
 ## 1.2.2
 

docs/documentation/docs/about/release-notes.md

@@ -2,7 +2,10 @@
 
 ## 1.2.3
 
+**Enhancements**
+
 - Optimized telemetry so that it only pushes control data
+- `WebPartTitle` hide control completely when empty
 
 ## 1.2.2
 

src/controls/webPartTitle/WebPartTitle.tsx

@@ -41,16 +41,20 @@ export class WebPartTitle extends React.Component<IWebPartTitleProps, {}> {
    * Default React component render method
    */
   public render(): React.ReactElement<IWebPartTitleProps> {
-    return (
-      <div className={`${styles.webPartTitle} ${this.props.className ? this.props.className : ''}` }>
-        {
-          this.props.displayMode === DisplayMode.Edit && <textarea placeholder={strings.WebPartTitlePlaceholder} aria-label={strings.WebPartTitleLabel} onChange={this._onChange} defaultValue={this.props.title}></textarea>
-        }
-
-        {
-          this.props.displayMode !== DisplayMode.Edit && this.props.title && <span>{this.props.title}</span>
-        }
-      </div>
-    );
+    if (this.props.title || this.props.displayMode === DisplayMode.Edit) {
+      return (
+        <div className={`${styles.webPartTitle} ${this.props.className ? this.props.className : ''}` }>
+          {
+            this.props.displayMode === DisplayMode.Edit && <textarea placeholder={strings.WebPartTitlePlaceholder} aria-label={strings.WebPartTitleLabel} onChange={this._onChange} defaultValue={this.props.title}></textarea>
+          }
+
+          {
+            this.props.displayMode !== DisplayMode.Edit && this.props.title && <span>{this.props.title}</span>
+          }
+        </div>
+      );
+    }
+
+    return null;
   }
 }