Adding a message when there are no items returned. Using MS office look & feel

samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.module.scss

@@ -36,4 +36,32 @@
 
 .DocumentCardActionsPadding{
   padding: 4px 4px;
+}
+
+// No Items message
+.emptyStateControl{
+  position: relative;
+  width: 50%;
+  text-align: center;
+  padding-bottom: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  .emptyStateImage{
+    margin-top: 56px;
+  }
+  .emptyStateTextWrapper{
+    margin-top: 32px;
+    .title{
+      color: #424242;
+      font-size: 20px;
+      font-weight: 600;
+      text-align: center;
+    }
+    .subtitle{
+      color: #424242;
+      font-size: 14px;
+      font-weight: 400;
+      text-align: center;
+    }
+  }
 }

samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx

@@ -448,6 +448,18 @@ export default class FollowDocumentWebPart extends React.Component<IFollowDocume
             onRenderGridItem={(item, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}
           />
         </div>
+        {/* No Items message */}
+        {!this.state.visible && !this.state.ItemsSearch &&
+          <div className={styles.emptyStateControl}>
+            <div className={styles.emptyStateImage}>
+              <img src="https://res.cdn.office.net/officehub/officestartresources/favorites_light_and_dark.svg" alt="Empty state icon" />
+            </div>
+            <div className={styles.emptyStateTextWrapper}>
+              <div className={styles.title} role="status" aria-live="polite">No favorites yet</div>
+              <div className={styles.subtitle} role="status" aria-live="polite">See something you love? Favorite it and we'll put it here.</div>
+            </div>
+          </div>
+        }
       </>
     );
   }