Hide web part tile completely when empty

pnp · Mar 2, 2018 · 3cfa7ae · 3cfa7ae
1 parent 60aae21
commit 3cfa7ae
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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;
   }
 }