Merge for 1.13.1

CHANGELOG.JSON

@@ -1,5 +1,19 @@
 {
   "versions": [
+    {
+      "version": "1.13.1",
+      "changes": {
+        "new": [],
+        "enhancements": [],
+        "fixes": [
+          "`WebPartTitle`: Fix for className property which is not defined [#281](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/281)",
+          "`RichText`: Fix issue where control turns drop-downs black [#279](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/279)"
+        ]
+      },
+      "contributions": [
+        "[Hugo Bernier](https://github.com/hugoabernier)"
+      ]
+    },
     {
       "version": "1.13.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Releases
 
+## 1.13.1
+
+### Fixes
+
+- `WebPartTitle`: Fix for className property which is not defined [#281](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/281)
+- `RichText`: Fix issue where control turns drop-downs black [#279](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/279)
+
+### Contributors
+
+Special thanks to our contributor: [Hugo Bernier](https://github.com/hugoabernier).
+
 ## 1.13.0
 
 ### New control(s)

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,16 @@
 # Releases
 
+## 1.13.1
+
+### Fixes
+
+- `WebPartTitle`: Fix for className property which is not defined [#281](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/281)
+- `RichText`: Fix issue where control turns drop-downs black [#279](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/279)
+
+### Contributors
+
+Special thanks to our contributor: [Hugo Bernier](https://github.com/hugoabernier).
+
 ## 1.13.0
 
 ### New control(s)

docs/documentation/mkdocs.yml

@@ -50,7 +50,7 @@ nav:
 theme:
   name: 'material'
   palette:
-    primary: 'blue'
+    primary: 'teal'
   logo: 'assets/pnp-spfx-controls.svg'
   feature:
     tabs: true

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "engines": {
     "node": ">=0.10.0"
   },

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "1.13.0";
+export const version: string = "1.13.1";

src/controls/richText/RichText.module.scss

@@ -63,6 +63,7 @@
 }
 
 .toolbarDropDownOption {
+
   &.toolbarButtonH2 {
     font-size: 21px;
     font-weight: 100;
@@ -378,23 +379,25 @@
     line-height: 1.3;
   }
 
-  .ms-Dropdown-item {
-    background-color: $ms-color-neutralPrimary !important;
-    color: $ms-color-neutralLighterAlt !important;
-    -webkit-transition: all 0.3s;
-    transition: all 0.3s;
-    -webkit-transition-property: background-color, color;
-  }
+  div#DropDownStyles-list, div#DropDownAlign-list, div#DropDownLists-list {
+    .ms-Dropdown-item {
+      background-color: $ms-color-neutralPrimary !important;
+      color: $ms-color-neutralLighterAlt !important;
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      -webkit-transition-property: background-color, color;
+    }
 
-  .ms-Dropdown-item:hover {
-    background-color: $ms-color-neutralSecondaryAlt !important;
-    color: $ms-color-neutralLighterAlt !important;
-    cursor: pointer;
-  }
+    .ms-Dropdown-item:hover {
+      background-color: $ms-color-neutralSecondaryAlt !important;
+      color: $ms-color-neutralLighterAlt !important;
+      cursor: pointer;
+    }
 
-  .ms-Dropdown-item.is-selected,
-  .ms-Dropdown-item.is-selected:hover {
-    background-color: $ms-color-themePrimary !important;
-    color: $ms-color-neutralLighterAlt !important;
+    .ms-Dropdown-item.is-selected,
+    .ms-Dropdown-item.is-selected:hover {
+      background-color: $ms-color-themePrimary !important;
+      color: $ms-color-neutralLighterAlt !important;
+    }
   }
 }

src/controls/richText/RichText.tsx

@@ -16,6 +16,7 @@ import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { elementContains } from 'office-ui-fabric-react/lib/Utilities';
 import * as telemetry from '../../common/telemetry';
+import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 
 
 const TOOLBARPADDING: number = 28;
@@ -27,6 +28,9 @@ const TOOLBARPADDING: number = 28;
  * - Block quotes only work on single lines. This is a frequently-requested feature with Quill that isn't available yet.
  * - Tables aren't supported yet. I'll gladly add table formatting support if users request it.
  */
+
+initializeIcons();
+
 export class RichText extends React.Component<IRichTextProps, IRichTextState> {
   private _quillElem: ReactQuill = undefined;
   private _wrapperRef: HTMLDivElement = undefined;
@@ -36,7 +40,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
   private ddStyleOpts = [{
     key: 0,
     text: strings.HeaderNormalText,
-    data: {}
+    data: { }
   }, {
     key: 2,
     text: strings.HeaderH2,
@@ -439,11 +443,13 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     Quill.register(SizeClass, true);
 
     return (
-      <div ref={(ref) => this._wrapperRef = ref} className={`${styles.richtext && this.state.editing ? 'ql-active' : undefined} ${this.props.className}`}>
+      <div ref={(ref) => this._wrapperRef = ref} className={`${styles.richtext && this.state.editing ? 'ql-active' : ''} ${this.props.className}`}>
         <div id={this._toolbarId} style={{top:this.state.wrapperTop}}>
           {
             showStyles && (
-              <Dropdown className={`${styles.headerDropDown} ${styles.toolbarDropDown}`}
+              <Dropdown
+id="DropDownStyles"
+              className={`${styles.headerDropDown} ${styles.toolbarDropDown}`}
                         onRenderCaretDown={() => <Icon className={styles.toolbarSubmenuCaret} iconName="CaretDownSolid8" />}
                         selectedKey={this.state.formats.header || 0}
                         options={this.ddStyleOpts}
@@ -492,6 +498,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
           {
             showAlign && (
               <Dropdown className={`${styles.toolbarDropDown}`}
+              id="DropDownAlign"
                         onRenderCaretDown={() => <Icon className={styles.toolbarSubmenuCaret} iconName="CaretDownSolid8" />}
                         selectedKey={this.state.formats.align || 'left'}
                         options={this.ddAlignOpts}
@@ -504,6 +511,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
           {
             showList && (
               <Dropdown className={styles.toolbarDropDown}
+              id="DropDownLists"
                         onRenderCaretDown={() => <Icon className={styles.toolbarSubmenuCaret} iconName="CaretDownSolid8" />}
                         selectedKey={this.state.formats.list}
                         options={this.ddListOpts}

src/controls/webPartTitle/WebPartTitle.tsx

@@ -45,7 +45,7 @@ export class WebPartTitle extends React.Component<IWebPartTitleProps, {}> {
   public render(): React.ReactElement<IWebPartTitleProps> {
     if (this.props.title || this.props.moreLink || this.props.displayMode === DisplayMode.Edit) {
       return (
-        <div className={`${styles.webPartHeader} ${this.props.className}`}>
+        <div className={`${styles.webPartHeader} ${this.props.className ? this.props.className : ""}`}>
           <div className={styles.webPartTitle}>
             {
               this.props.displayMode === DisplayMode.Edit && (