Merge pull request #399 from dmitryrogozhny/master

Fix for issue #398

Author: AJIXuMuK

src/controls/placeholder/PlaceholderComponent.module.scss

@@ -1,3 +1,5 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
 .placeholder {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -26,13 +28,18 @@
                 display: inline-block;
                 vertical-align: middle;
                 white-space: normal;
+
+                @include ms-fontSize-su;
             }
 
             .placeholderText {
                 display: inline;
                 vertical-align: middle;
                 white-space: normal;
 
+                @include ms-fontWeight-light;
+                @include ms-fontSize-xxl;
+
                 &.hide {
                   display: none;
                 }

src/controls/placeholder/PlaceholderComponent.test.tsx

@@ -1,10 +1,10 @@
 /// <reference types="sinon" />
 
 import * as React from 'react';
-import { assert, expect } from 'chai';
+import { expect } from 'chai';
 import { mount, ReactWrapper } from 'enzyme';
+import { setIconOptions } from 'office-ui-fabric-react/lib/Styling';
 import { Placeholder } from './PlaceholderComponent';
-import { IPlaceholderProps } from './IPlaceholderComponent';
 import styles from './PlaceholderComponent.module.scss';
 
 declare const sinon;
@@ -18,19 +18,26 @@ describe('<Placeholder />', () => {
   const dummyLabel = "Dummy label";
   const dummyOnConfigure = sinon.spy((evt) => { /* Nothing to do here */ });
 
+  before(() => {
+    // Suppress icon warnings.
+    setIconOptions({
+      disableWarnings: true
+    });
+  })
+
   afterEach(() => {
     placeholder.unmount();
   });
 
-  it('Test placeholder without button', (done) => {
+  it('Test that placeholder renders', (done) => {
     placeholder = mount(<Placeholder description={dummyDescription} iconName={dummyIcon} iconText={dummyText} />);
     done();
   });
 
   it('Test placeholder without button', (done) => {
     placeholder = mount(<Placeholder description={dummyDescription} iconName={dummyIcon} iconText={dummyText} />);
 
-    expect(placeholder.find('i.ms-Icon--Add')).to.have.length(1);
+    expect(placeholder.find('i[data-icon-name="Add"]')).to.have.length(1);
 
     expect(placeholder.find(`.${styles.placeholderText}`)).to.have.length(1);
     expect(placeholder.find(`.${styles.placeholderText}`).text()).to.be.equal(dummyText);
@@ -45,24 +52,22 @@ describe('<Placeholder />', () => {
   it('Test placeholder with custom classname', (done) => {
     placeholder = mount(<Placeholder description={dummyDescription} iconName={dummyIcon} iconText={dummyText} contentClassName={dummyClass} />);
 
-    expect(placeholder.find(`div.${dummyClass}`)).to.have.length(1);
-    expect(placeholder.find(`div.${dummyClass} .ms-Icon`)).to.have.length(1);
-
-    expect(placeholder.find(`div.${dummyClass} button`)).to.have.length(0);
+    expect(placeholder.find(`div.${styles.placeholder}.${dummyClass}`)).to.have.length(1);
     done();
   });
 
   it('Test placeholder with null values', (done) => {
     placeholder = mount(<Placeholder description={null} iconName={null} iconText={null} />);
 
-    expect(placeholder.find(`div .ms-Icon`)).to.have.length(0);
+    expect(placeholder.find('i[data-icon-name="Add"]')).to.have.length(0);
 
     expect(placeholder.find(`div .${styles.placeholderText}`)).to.have.length(1);
     expect(placeholder.find(`div .${styles.placeholderText}`).text()).to.be.equal('');
 
     expect(placeholder.find(`div .${styles.placeholderDescriptionText}`)).to.have.length(1);
     expect(placeholder.find(`div .${styles.placeholderDescriptionText}`).text()).to.be.equal('');
 
+    expect(placeholder.find('button')).to.have.length(0);
     done();
   });
 

src/controls/placeholder/PlaceholderComponent.tsx

@@ -90,9 +90,9 @@ export class Placeholder extends React.Component<IPlaceholderProps, IPlaceholder
           <div className={styles.placeholderHead}>
             <div className={styles.placeholderHeadContainer}>
               {
-                this.props.iconName && <Icon iconName={this.props.iconName} className={`${styles.placeholderIcon} ms-fontSize-su ms-Icon`} />
+                this.props.iconName && <Icon iconName={this.props.iconName} className={styles.placeholderIcon} />
               }
-              <span className={`${styles.placeholderText} ms-fontWeight-light ms-fontSize-xxl ${(this.state.width && this.state.width <= 380) ? styles.hide : "" }`}>{this.props.iconText}</span>
+              <span className={`${styles.placeholderText} ${(this.state.width && this.state.width <= 380) ? styles.hide : "" }`}>{this.props.iconText}</span>
             </div>
           </div>
           <div className={styles.placeholderDescription}>