Merge branch 'mpowney-enhancement/258-webPartTitleSectionBackground' into dev

Author: estruyf

docs/documentation/docs/controls/WebPartTitle.md

@@ -93,6 +93,7 @@ The WebPartTitle control can be configured with the following properties:
 | updateProperty | Function | yes | Function that you can pass to update the title in the root web part. |
 | className | string | no | Optional property to specify a custom class that allows you to change the web part title style. |
 | placeholder | string | no | Optional property to specify a custom placeholder to display when the title is editable. |
-| moreLink    | Function \| JSX.Element | no | Optional property to render a _See all_ link in the web part title. |
+| themeVariant | IReadonlyTheme | no | The current loaded SharePoint theme/section background (More info: [Supporting section backgrounds](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds)). |
+| moreLink | Function \| JSX.Element | no | Optional property to render a _See all_ link in the web part title. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/WebPartTitle)

src/controls/webPartTitle/WebPartTitle.test.tsx

@@ -14,6 +14,7 @@ describe('<WebPartTitle />', () => {
   const dummyTitle = "Dummy Title";
   const dummyClass = "DummyClass";
   const dummyMoreLink = "See all";
+  const dummyColor = "#ffffff";
   const dummyPlaceholder = "News";
   const dummyUpdateFnc = sinon.spy((value) => { return value; });
 
@@ -87,4 +88,11 @@ describe('<WebPartTitle />', () => {
     expect(webparttitle.find(`span.${styles.moreLink}`)).to.have.length(0);
     done();
   });
+
+  it('Check theme\'s color is used if specified', (done) => {
+    webparttitle = mount(<WebPartTitle displayMode={DisplayMode.Edit} title={dummyTitle} updateProperty={dummyUpdateFnc} themeVariant={{ semanticColors: { bodyText: dummyColor }}} />);
+    expect(webparttitle.find(`div.${styles.webPartTitle}`).prop('style')).property("color").to.equal(dummyColor);
+    done();
+  });
+
 });

src/controls/webPartTitle/WebPartTitle.tsx

@@ -11,6 +11,7 @@ export interface IWebPartTitleProps {
   className?: string;
   placeholder?: string;
   moreLink?: JSX.Element | Function;
+  themeVariant?: any; // TODO: type should be IReadonlyTheme from @microsoft/sp-component-base
 }
 
 /**
@@ -43,10 +44,13 @@ export class WebPartTitle extends React.Component<IWebPartTitleProps, {}> {
    * Default React component render method
    */
   public render(): React.ReactElement<IWebPartTitleProps> {
+
+    const color: string = (!!this.props.themeVariant && this.props.themeVariant.semanticColors.bodyText) || null;
+
     if (this.props.title || this.props.moreLink || this.props.displayMode === DisplayMode.Edit) {
       return (
         <div className={`${styles.webPartHeader} ${this.props.className ? this.props.className : ""}`}>
-          <div className={styles.webPartTitle}>
+          <div className={styles.webPartTitle} style={{color: color}}>
             {
               this.props.displayMode === DisplayMode.Edit && (
                 <textarea placeholder={this.props.placeholder ? this.props.placeholder : strings.WebPartTitlePlaceholder} aria-label={strings.WebPartTitleLabel} onChange={this._onChange} defaultValue={this.props.title}></textarea>