Add themeVariant and color props to WebPartTitle

Author: Mark Powney

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,17 @@ describe('<WebPartTitle />', () => {
     expect(webparttitle.find(`span.${styles.moreLink}`)).to.have.length(0);
     done();
   });
+
+  it('Check color is used if specified', (done) => {
+    webparttitle = mount(<WebPartTitle displayMode={DisplayMode.Edit} title={dummyTitle} updateProperty={dummyUpdateFnc} color={dummyColor} />);
+    expect(webparttitle.find(`div.${styles.webPartTitle}`).prop('style')).property("color").to.equal(dummyColor);
+    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,8 @@ export interface IWebPartTitleProps {
   className?: string;
   placeholder?: string;
   moreLink?: JSX.Element | Function;
+  themeVariant?: any; // TODO: type should be IReadonlyTheme from @microsoft/sp-component-base
+  color?: string;
 }
 
 /**
@@ -43,10 +45,14 @@ 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)
+      || this.props.color || 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>