support for custom rendering of Placeholder's iconText and description

Author: AJIXuMuK

docs/documentation/docs/controls/Placeholder.md

@@ -23,6 +23,16 @@ import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
              onConfigure={this._onConfigure} />
 ```
 
+- With custom element for `description`:
+
+```TypeScript
+<Placeholder iconName='Edit'
+             iconText='Configure your web part'
+             description={defaultClassNames => <span className={`${defaultClassNames} ${additionalStyles}`}>Please configure the web part.</span>}
+             buttonLabel='Configure'
+             onConfigure={this._onConfigure} />
+```
+
 - With the `onConfigure` property you can define what it needs to do when you click on the button. Like for example opening the property pane:
 
 ```typescript
@@ -51,9 +61,9 @@ The placeholder control can be configured with the following properties:
 | ---- | ---- | ---- | ---- |
 | buttonLabel | string | no | Text label to be displayed on the button bellow the description. The button is optional. |
 | contentClassName | string | no | This is the className that is applied to the root element of the content zone. You can use this to apply custom styles to the placeholder. |
-| description | string | yes | Text description for the placeholder. This appears bellow the Icon and IconText. |
+| description | string \| ((defaultClassNames: string) =&gt; React.ReactElement) | yes | Text description or render function for the placeholder. This appears bellow the Icon and IconText. |
 | iconName | string | yes | The name of the icon that will be used in the placeholder. This is the same name as you can find on the Office UI Fabric icons page: [Office UI Fabric icons](https://dev.office.com/fabric#/styles/icons). For example: `Page` or `Add`. |
-| iconText | string | yes | Heading text which is displayed next to the icon. |
+| iconText | string \| ((defaultClassNames: string) =&gt; React.ReactElement) | yes | Heading text or render function which is displayed next to the icon. |
 | hideButton | boolean | no | Specify if you want to hide the button. Default is `false`. |
 | onConfigure | function | no | onConfigure handler for the button. The button is optional. |
 

src/controls/placeholder/IPlaceholderComponent.ts

@@ -5,17 +5,17 @@
 export interface IPlaceholderProps {
 
   /**
-   * Text description for the placeholder. Appears bellow the Icon and IconText.
+   * Text description or component for the placeholder. Appears bellow the Icon and IconText.
    */
-  description: string;
+  description: string | ((defaultClassNames: string) => React.ReactElement);
   /**
    * Icon name used for the className from the MDL2 set. Example: 'Add'.
    */
   iconName: string;
   /**
    * Heading displayed against the Icon.
    */
-  iconText: string;
+  iconText: string | ((defaultClassNames: string) => React.ReactElement);
   /**
    * Text label to be displayed on button below the description.
    * Optional: As the button is optional.

src/controls/placeholder/PlaceholderComponent.tsx

@@ -64,7 +64,7 @@ export class Placeholder extends React.Component<IPlaceholderProps, IPlaceholder
               return true;
           }
       }
-    } 
+    }
     return this.state.width !== nextState.width || this.props.hideButton !== nextProps.hideButton;
   }
 
@@ -95,28 +95,42 @@ export class Placeholder extends React.Component<IPlaceholderProps, IPlaceholder
    * Default React component render method
    */
   public render(): React.ReactElement<IPlaceholderProps> {
+
+    const {
+      iconName,
+      iconText,
+      description,
+      children,
+      buttonLabel,
+      hideButton
+    } = this.props;
+
+    const iconTextClassNames = `${styles.placeholderText} ${(this.state.width && this.state.width <= 380) ? styles.hide : "" }`;
+    const iconTextEl = typeof iconText === 'string' ? <span className={iconTextClassNames}>{this.props.iconText}</span> : iconText(iconTextClassNames);
+    const descriptionEl = typeof description === 'string' ? <span className={styles.placeholderDescriptionText}>{this.props.description}</span> : description(styles.placeholderDescriptionText);
+
     return (
       <div className={`${styles.placeholder} ${this.props.contentClassName ? this.props.contentClassName : ''}`} ref={this._linkElm}>
         <div className={styles.placeholderContainer}>
           <div className={styles.placeholderHead}>
             <div className={styles.placeholderHeadContainer}>
               {
-                this.props.iconName && <Icon iconName={this.props.iconName} className={styles.placeholderIcon} />
+                iconName && <Icon iconName={iconName} className={styles.placeholderIcon} />
               }
-              <span className={`${styles.placeholderText} ${(this.state.width && this.state.width <= 380) ? styles.hide : "" }`}>{this.props.iconText}</span>
+              {iconTextEl}
             </div>
           </div>
           <div className={styles.placeholderDescription}>
-            <span className={styles.placeholderDescriptionText}>{this.props.description}</span>
+            {descriptionEl}
           </div>
-          {this.props.children}
+          {children}
           <div className={styles.placeholderDescription}>
             {
-              (this.props.buttonLabel && !this.props.hideButton) &&
+              (buttonLabel && !hideButton) &&
               <PrimaryButton
-                text={this.props.buttonLabel}
-                ariaLabel={this.props.buttonLabel}
-                ariaDescription={this.props.description}
+                text={buttonLabel}
+                ariaLabel={buttonLabel}
+                ariaDescription={typeof description === 'string' ? description : ''}
                 onClick={this._handleBtnClick} />
             }
           </div>

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -885,7 +885,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
         <Placeholder iconName='Edit'
           iconText='Configure your web part'
-          description='Please configure the web part.'
+          description={defaultClassNames => <span className={defaultStyle}>Please configure the web part.</span>}
           buttonLabel='Configure'
           hideButton={this.props.displayMode === DisplayMode.Read}
           onConfigure={this._onConfigure} />