From 3cfa7aec65b6e76dfec1b7e144d3d73e778375a4 Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Fri, 2 Mar 2018 15:00:51 +0100
Subject: [PATCH] Hide web part tile completely when empty

---
 CHANGELOG.md                                  |  3 +++
 .../documentation/docs/about/release-notes.md |  3 +++
 src/controls/webPartTitle/WebPartTitle.tsx    | 26 +++++++++++--------
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ad75b29a..802d41ff6 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
index 3154b8061..80544409c 100644
--- a/docs/documentation/docs/about/release-notes.md
+++ b/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
 
diff --git a/src/controls/webPartTitle/WebPartTitle.tsx b/src/controls/webPartTitle/WebPartTitle.tsx
index c5eb627d2..7d2d4247f 100644
--- a/src/controls/webPartTitle/WebPartTitle.tsx
+++ b/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;
   }
 }