Merge branch 'dev' of https://github.com/pnp/sp-dev-fx-controls-react into dev

Author: michaelmaillot

CHANGELOG.json

@@ -7,15 +7,21 @@
         "enhancements": [
           "`DyanmicForm`: Added file handling [#1625](https://github.com/pnp/sp-dev-fx-controls-react/pull/1625)",
           "`DynamicForm`: Custom Formatting and Validation, ControlsTestWebPart updates [#1672](https://github.com/pnp/sp-dev-fx-controls-react/pull/1672)",
-          "`PeoplePicker `: Added custom filter to PeoplePicker selection [#1657](https://github.com/pnp/sp-dev-fx-controls-react/issues/1657)"
+          "`PeoplePicker`: Added custom filter to PeoplePicker selection [#1657](https://github.com/pnp/sp-dev-fx-controls-react/issues/1657)",
+          "`RichText`: Align RichText heading styles and font sizes with OOB SharePoint text web part [#1706](https://github.com/pnp/sp-dev-fx-controls-react/pull/1706)"
         ],
         "fixes": [
-          "Build fails due to missing @iconify/react dependency after upgrade to 3.16.0 [#1719](https://github.com/pnp/sp-dev-fx-controls-react/issues/1719)"
+          "Build fails due to missing @iconify/react dependency after upgrade to 3.16.0 [#1719](https://github.com/pnp/sp-dev-fx-controls-react/issues/1719)",
+          "`ModernTaxonomyPicker`: not displaying suggestions when typing in values - API not found error [#1688](https://github.com/pnp/sp-dev-fx-controls-react/issues/1688)",
+          "`DynamicForm`: Disable issue on fieldOverrides field control when onBeforeSubmit return true [#1715](https://github.com/pnp/sp-dev-fx-controls-react/issues/1715)"
         ]
       },
       "contributions": [
         "[Guido Zambarda](https://github.com/GuidoZam)",
-        "[Tom G](https://github.com/t0mgerman)"
+        "[Lars Fernhomberg](https://github.com/lafe)",
+        "[Mark Bice](https://github.com/mbice)",
+        "[Tom G](https://github.com/t0mgerman)",
+        "[wuxiaojun514](https://github.com/wuxiaojun514)"
       ]
     },
     {

package-lock.json

@@ -98,7 +98,7 @@
     "@types/es6-promise": "3.3.0",
     "@types/he": "^1.1.2",
     "@types/jest": "25.2.3",
-    "@types/lodash": "4.14.194",
+    "@types/lodash": "4.14.202",
     "@types/quill": "^1.3.10",
     "@types/react": "17.0.45",
     "@types/react-addons-shallow-compare": "0.14.17",

package.json

@@ -286,8 +286,7 @@ export class DynamicForm extends React.Component<
         field.columnInternalName
       )
     ) {
-      field.disabled = field.disabled || isSaving;
-      return fieldOverrides[field.columnInternalName](field);
+      return fieldOverrides[field.columnInternalName]({ ...field,disabled: field.disabled || isSaving} )
     }
 
     // Default render

src/controls/dynamicForm/DynamicForm.tsx

@@ -65,24 +65,28 @@
 .toolbarDropDownOption {
 
   &.toolbarButtonH2 {
-    font-size: 21px;
-    font-weight: 100;
+    font-size: 20px;
+    font-weight: 600;
   }
 
   &.toolbarButtonH3 {
-    font-size: 14px;
-    font-weight: 100 !important;
+    font-size: 18px;
+    font-weight: 600;
   }
 
   &.toolbarButtonH4 {
-    font-size: 14px;
-    font-weight: 100 !important;
+    font-size: 16px;
+    font-weight: 600;
   }
 
   &.toolbarButtonBlockQuote {
-    font-size: 14px;
+    font-size: 16px;
     font-style: italic;
   }
+
+  &.toolbarButtonNormal {
+    font-size: 16px;
+  }
 }
 
 .toolbarSubmenuCaret {
@@ -179,7 +183,7 @@
   .ql-snow .ql-toolbar button {
     background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
     color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
-    font-size: 14px;
+    font-size: 16px;
     min-width: 34px;
     height: 34px;
     padding-top: 4px;
@@ -250,21 +254,21 @@
     min-height: 68px;
     font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system,
       BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
-    font-size: 17px;
+    font-size: 18px;
 
     h2 {
-      font-weight: 100 !important;
+      font-weight: 600 !important;
       font-size: 28px;
     }
 
     h3 {
       font-size: 24px;
-      font-weight: 100 !important;
+      font-weight: 600 !important;
     }
 
     h4 {
-      font-size: 21px;
-      font-weight: 100 !important;
+      font-size: 20px;
+      font-weight: 600 !important;
     }
 
     blockquote,
@@ -276,14 +280,13 @@
     p,
     ul {
       -webkit-font-smoothing: antialiased;
-      color: "[theme:black, default:#{$ms-color-black}]";
       line-height: 1.3;
       // margin: 0 0 16px;
       word-wrap: break-word;
     }
 
     blockquote {
-      border-bottom-color: "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
+      border-bottom-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
       border-bottom-style: solid;
       border-bottom-width: 1px;
       border-left-style: none;
@@ -292,14 +295,13 @@
       border-right-style: none;
       border-right-width: 0;
       border-right-color: transparent;
-      border-top-color: "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
+      border-top-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
       border-top-style: solid;
       border-top-width: 1px;
-      color: "[theme:neutralSecondaryAlt, default:#{$ms-color-neutralSecondaryAlt}]";
-      font-size: 24px;
+      font-size: 20px;
       font-style: italic;
-      font-weight: 100;
-      line-height: 31.2px;
+      font-weight: 600;
+      line-height: 1.3;
       margin-bottom: 28px;
       padding-bottom: 32px;
       margin-top: 28px;
@@ -311,6 +313,10 @@
       text-align: center;
     }
 
+    .ql-size-xsmall {
+      font-size: 10px;
+    }
+
     .ql-size-small {
       font-size: 12px;
     }
@@ -320,15 +326,15 @@
     }
 
     .ql-size-mediumplus {
-      font-size: 15px;
+      font-size: 16px;
     }
 
     .ql-size-large {
-      font-size: 17px;
+      font-size: 18px;
     }
 
     .ql-size-xlarge {
-      font-size: 21px;
+      font-size: 20px;
     }
 
     .ql-size-xlargeplus {
@@ -350,15 +356,19 @@
     .ql-size-super {
       font-size: 42px;
     }
+
+    .ql-size-superlarge {
+      font-size: 68px;
+    }
   }
 
   @media screen and (min-width: 1024px) {
     .ql-editor div,
     .ql-editor ol,
     .ql-editor p,
     .ql-editor ul {
-      font-size: 17px;
-      font-weight: 300;
+      font-size: 18px;
+      font-weight: 400;
       line-height: 1.3;
     }
   }
@@ -375,8 +385,8 @@
   .ql-editor.ql-blank::before {
     font-style: normal;
     color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
-    font-size: 17px;
-    font-weight: 300;
+    font-size: 18px;
+    font-weight: 400;
     line-height: 1.3;
   }
 

src/controls/richText/RichText.module.scss

@@ -41,10 +41,6 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
   private _richTextId = undefined;
 
   private ddStyleOpts = [{
-    key: 0,
-    text: strings.HeaderNormalText,
-    data: {}
-  }, {
     key: 2,
     text: strings.HeaderH2,
     data:
@@ -59,6 +55,10 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     text: strings.HeaderH4,
     data:
       { className: styles.toolbarButtonH4 }
+  }, {
+    key: 0,
+    text: strings.HeaderNormalText,
+    data: { className: styles.toolbarButtonNormal }
   }, {
     key: 7,
     text: strings.HeaderBlockQuote,
@@ -511,7 +511,8 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
       'xxlarge',
       'xxxlarge',
       'xxlargeplus',
-      'super'];
+      'super',
+      'superlarge'];
     ReactQuillInstance.register(sizeClass, true);
 
     return (

src/controls/richText/RichText.tsx

@@ -105,7 +105,7 @@ export interface StyleOptions {
   showImage?: boolean;
 
   /**
-   * Indicates if we should show the Styles button (Heading 1, Heading 2, ..., Pull quote)
+   * Indicates if we should show the Styles button (Heading 2, Heading 3, ..., Pull quote)
    * @defaultvalue true
    */
   showStyles?: boolean;

src/controls/richText/RichText.types.ts

@@ -190,16 +190,18 @@ export default class RichTextPropertyPane extends React.Component<IRichTextPrope
           ariaLabel={strings.FontSizeTitle}
           selectedKey={selectedSize}
           options={[
+            { key: 'xsmall', text: '10' },
             { key: 'small', text: '12' },
             { key: 'medium', text: '14' },
-            { key: 'mediumplus', text: '15' },
-            { key: 'large', text: '17' },
-            { key: 'xlarge', text: '21' },
+            { key: 'mediumplus', text: '16' },
+            { key: 'large', text: '18' },
+            { key: 'xlarge', text: '20' },
             { key: 'xlargeplus', text: '24' },
             { key: 'xxlarge', text: '28' },
             { key: 'xxxlarge', text: '32' },
             { key: 'xxlargeplus', text: '36' },
             { key: 'super', text: '42' },
+            { key: 'superlarge', text: '68' }
           ]}
           onChanged={this.onChangeSize}
         />

src/controls/richText/RichTextPropertyPane.tsx

@@ -79,9 +79,9 @@ define([], () => {
   "mapsTitlePrefix": "Карта на",
   "ListViewFilterLabel": "Филтриране на списъка",
   "HeaderNormalText": "Нормален текст",
-  "HeaderH2": "Функция 1",
-  "HeaderH3": "Функция 2",
-  "HeaderH4": "Функция 3",
+  "HeaderH2": "Функция 2",
+  "HeaderH3": "Функция 3",
+  "HeaderH4": "Функция 4",
   "HeaderBlockQuote": "Изтегли цитат",
   "AlignLeft": "Подравни отляво",
   "AlignCenter": "Център",

src/loc/bg-bg.ts

@@ -79,9 +79,9 @@ define([], () => {
   "mapsTitlePrefix": "Mapa de",
   "ListViewFilterLabel": "Filtrar la llista",
   "HeaderNormalText": "Text normal",
-  "HeaderH2": "Encapçalament 1",
-  "HeaderH3": "Encapçalament 2",
-  "HeaderH4": "Encapçalament 3",
+  "HeaderH2": "Encapçalament 2",
+  "HeaderH3": "Encapçalament 3",
+  "HeaderH4": "Encapçalament 4",
   "HeaderBlockQuote": "Cita introductòria",
   "AlignLeft": "Alinea a l'esquerra",
   "AlignCenter": "Centre",