Merge pull request #1000 from pnp/v2-dev

v2.9.0 merge

CHANGELOG.JSON

@@ -1,5 +1,32 @@
 {
   "versions": [
+    {
+      "version": "2.9.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`FilePicker`: spanish translation for Stock Images labels [#946](https://github.com/pnp/sp-dev-fx-controls-react/pull/946)",
+          "`FilePicker`: Add support for a defaultFolderAbsolutePath prop [#947](https://github.com/pnp/sp-dev-fx-controls-react/pull/947)",
+          "`DynamicForm`: Returning PnPJS `IItem` in `onSubmitted` event based on `returnListItemInstanceOnSubmit` property [#944](https://github.com/pnp/sp-dev-fx-controls-react/pull/944)",
+          "`DateTimePicker`: Add property for minutes dropdown increment [#939](https://github.com/pnp/sp-dev-fx-controls-react/issues/939)",
+          "`DynamicForm`: Principal Types support [#956](https://github.com/pnp/sp-dev-fx-controls-react/pull/956)",
+          "`Dynamic Form`: Show field descriptions [#975](https://github.com/pnp/sp-dev-fx-controls-react/issues/975)"
+        ],
+        "fixes": [
+          "`RichText`: Image button is checked when hyperlink is added to the text [#948](https://github.com/pnp/sp-dev-fx-controls-react/issues/948)",
+          "`RichText`: impossible to display link with the text equal to the url [#949](https://github.com/pnp/sp-dev-fx-controls-react/issues/949)",
+          "`ComboBoxListItemPicker`: defaultSelectedItems not working [#954](https://github.com/pnp/sp-dev-fx-controls-react/issues/954)",
+          "`PeoplePicker`: Default selected items for groups [#958](https://github.com/pnp/sp-dev-fx-controls-react/issues/958)"
+        ]
+      },
+      "contributions": [
+        "[Alexey Morozov](https://github.com/a1exymoroz)",
+        "[Daniel Stratton](https://github.com/gobigfoot)",
+        "[Ketill Antoníus Ágústsson](https://github.com/Katli95)",
+        "[Ravichandran Krishnasamy](https://github.com/ravichandran-blog)",
+        "[Sergio Ortega Martín](https://github.com/sortegamartin)"
+      ]
+    },
     {
       "version": "2.8.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Releases
 
+## 2.9.0
+
+### Enhancements
+
+- `FilePicker`: spanish translation for Stock Images labels [#946](https://github.com/pnp/sp-dev-fx-controls-react/pull/946)
+- `FilePicker`: Add support for a defaultFolderAbsolutePath prop [#947](https://github.com/pnp/sp-dev-fx-controls-react/pull/947)
+- `DynamicForm`: Returning PnPJS `IItem` in `onSubmitted` event based on `returnListItemInstanceOnSubmit` property [#944](https://github.com/pnp/sp-dev-fx-controls-react/pull/944)
+- `DateTimePicker`: Add property for minutes dropdown increment [#939](https://github.com/pnp/sp-dev-fx-controls-react/issues/939)
+- `DynamicForm`: Principal Types support [#956](https://github.com/pnp/sp-dev-fx-controls-react/pull/956)
+- `Dynamic Form`: Show field descriptions [#975](https://github.com/pnp/sp-dev-fx-controls-react/issues/975)
+
+### Fixes
+
+- `RichText`: Image button is checked when hyperlink is added to the text [#948](https://github.com/pnp/sp-dev-fx-controls-react/issues/948)
+- `RichText`: impossible to display link with the text equal to the url [#949](https://github.com/pnp/sp-dev-fx-controls-react/issues/949)
+- `ComboBoxListItemPicker`: defaultSelectedItems not working [#954](https://github.com/pnp/sp-dev-fx-controls-react/issues/954)
+- `PeoplePicker`: Default selected items for groups [#958](https://github.com/pnp/sp-dev-fx-controls-react/issues/958)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Alexey Morozov](https://github.com/a1exymoroz), [Daniel Stratton](https://github.com/gobigfoot), [Ketill Antoníus Ágústsson](https://github.com/Katli95), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog), [Sergio Ortega Martín](https://github.com/sortegamartin).
+
 ## 2.8.0
 
 ### New control(s)

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

@@ -1,5 +1,27 @@
 # Releases
 
+## 2.9.0
+
+### Enhancements
+
+- `FilePicker`: spanish translation for Stock Images labels [#946](https://github.com/pnp/sp-dev-fx-controls-react/pull/946)
+- `FilePicker`: Add support for a defaultFolderAbsolutePath prop [#947](https://github.com/pnp/sp-dev-fx-controls-react/pull/947)
+- `DynamicForm`: Returning PnPJS `IItem` in `onSubmitted` event based on `returnListItemInstanceOnSubmit` property [#944](https://github.com/pnp/sp-dev-fx-controls-react/pull/944)
+- `DateTimePicker`: Add property for minutes dropdown increment [#939](https://github.com/pnp/sp-dev-fx-controls-react/issues/939)
+- `DynamicForm`: Principal Types support [#956](https://github.com/pnp/sp-dev-fx-controls-react/pull/956)
+- `Dynamic Form`: Show field descriptions [#975](https://github.com/pnp/sp-dev-fx-controls-react/issues/975)
+
+### Fixes
+
+- `RichText`: Image button is checked when hyperlink is added to the text [#948](https://github.com/pnp/sp-dev-fx-controls-react/issues/948)
+- `RichText`: impossible to display link with the text equal to the url [#949](https://github.com/pnp/sp-dev-fx-controls-react/issues/949)
+- `ComboBoxListItemPicker`: defaultSelectedItems not working [#954](https://github.com/pnp/sp-dev-fx-controls-react/issues/954)
+- `PeoplePicker`: Default selected items for groups [#958](https://github.com/pnp/sp-dev-fx-controls-react/issues/958)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Alexey Morozov](https://github.com/a1exymoroz), [Daniel Stratton](https://github.com/gobigfoot), [Ketill Antoníus Ágústsson](https://github.com/Katli95), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog), [Sergio Ortega Martín](https://github.com/sortegamartin).
+
 ## 2.8.0
 
 ### New control(s)

docs/documentation/docs/controls/DateTimePicker.md

@@ -71,6 +71,7 @@ The `DateTimePicker` control can be configured with the following properties:
 | placeholder | string | no | Placeholder text for the DatePicker. |
 | maxDate | Date | no | The maximum allowable date. |
 | minDate | Date | no | The minimum allowable date. |
+| minutesIncrementStep | MinutesIncrement | no | Specifies minutes' increment step for `TimeDisplayControlType.Dropdow` |
 
 Enum `TimeDisplayControlType`
 
@@ -103,4 +104,9 @@ Interface `IDateTimePickerStrings` extends [IDatePickerStrings](https://develope
 | amDesignator | string | no | Used as AM designator when 12-hour clock is used. |
 | pmDesignator | string | no | Used as PM designator when 12-hour clock is used. |
 
+Type `MinutesIncrement`
+```typescript
+type MinutesIncrement = 1 | 5 | 10 | 15 | 30;
+```
+
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/DateTimePicker)

docs/documentation/docs/controls/DynamicForm.md

@@ -8,7 +8,7 @@ This control can dynamically generate SharePoint list or SharePoint document lib
 - Import the following modules to your component:
 
 ```TypeScript
-import { DynamicForm } from "fx-controls-react/lib/DynamicForm";
+import { DynamicForm } from "@pnp/spfx-controls-react/lib/DynamicForm";
 ```
 
 - Use the DynamicForm control in your code as follows:
@@ -38,6 +38,7 @@ The `DynamicForm` can be configured with the following properties:
 | contentTypeId | string | no | content type ID |
 | disabled | boolean | no | Option allow to be enable or disable. Default value is `false`|
 | onBeforeSubmit | (listItemData: any) => Promise<boolean> | no | Before submit handler. Allows to modify the object to be submitted or cancel the submission. |
-| onSubmitted | (listItem: any) => void | no | Method that returns listItem data JSON object. |
+| onSubmitted | (listItemData: any, listItem?: IItem) => void | no | Method that returns listItem data JSON object and PnPJS list item instance (`IItem`). |
 | onSubmitError | (listItemData: any, error: Error) => void | no | Handler of submission error. |
 | onCancelled | () => void | no | Handler when form has been cancelled. |
+| returnListItemInstanceOnSubmit | boolean | no | Specifies if `onSubmitted` event should pass PnPJS list item (`IItem`) as a second parameter. Default - `true` |

docs/documentation/docs/controls/FilePicker.md

@@ -75,7 +75,8 @@ The FilePicker component can be configured with the following properties:
 | label | string | no | Specifies the text describing the file picker. |
 | buttonLabel | string | no | Specifies the label of the file picker button. |
 | buttonIcon | string | no | In case it is provided the file picker will be rendered as an action button. |
-  buttonIconProps | IIconProps | no | In case it is provided the file picker will be rendered as an Icon the and all can define Properties for Icon  |
+| buttonIconProps | IIconProps | no | In case it is provided the file picker will be rendered as an Icon the and all can define Properties for Icon  |
+| defaultFolderAbsolutePath | string | no | Optional string parameter to set a default active folder/library for the SiteFilesTab. E.g. `"https://contoso.sharepoint.com/teams/siteName/documentLibrary/Folder 1/SubFolder 1"`  |
 | onSave | (filePickerResult: IFilePickerResult[]) => void | yes | Handler when the file has been selected and picker has been closed. |
 | onChange | (filePickerResult: IFilePickerResult[]) => void | no | Handler when the file selection has been changed. |
 | onCancel | () => void | no | Handler when file picker has been cancelled. |

package.json

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

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "2.8.0";
+export const version: string = "2.9.0";

src/controls/dateTimePicker/DateTimePicker.tsx

@@ -211,7 +211,8 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
       placeholder,
       showLabels,
       minDate,
-      maxDate
+      maxDate,
+      minutesIncrementStep
     } = this.props;
 
     const hours: number = value != null ? value.getHours() : this.state.hours;
@@ -242,6 +243,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
             <div className={styles.picker}>
               <MinutesComponent disabled={disabled}
                 value={minutes}
+                minutesIncrementStep={minutesIncrementStep}
                 onChange={this.dropdownMinutesChanged}
                 timeDisplayControlType={timeDisplayControlType || TimeDisplayControlType.Text} />
             </div>

src/controls/dateTimePicker/IDateTimePickerProps.ts

@@ -3,6 +3,8 @@ import { TimeConvention, DateConvention } from './DateTimeConventions';
 import { IDateTimePickerStrings } from './IDateTimePickerStrings';
 import { TimeDisplayControlType } from './TimeDisplayControlType';
 
+export type MinutesIncrement = 1 | 5 | 10 | 15 | 30;
+
 /**
  * Public properties of the DateTimePicker custom field
  *
@@ -102,12 +104,12 @@ export interface IDateTimePickerProps {
    * Specify if labels in front of date and time parts should be rendered. True by default
    */
   showLabels?: boolean;
-  
+
   /**
    * Placeholder text for the DatePicker
    */
   placeholder?: string;
-  
+
   /**
    * The minimum allowable date for the DatePicker
    */
@@ -119,4 +121,9 @@ export interface IDateTimePickerProps {
    */
 
   maxDate?: Date;
+
+  /**
+   * Specifies minutes' increment step
+   */
+  minutesIncrementStep?: MinutesIncrement;
 }

src/controls/dateTimePicker/ITimeComponentProps.ts

@@ -1,5 +1,6 @@
 import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
 import { TimeConvention } from './DateTimeConventions';
+import { MinutesIncrement } from './IDateTimePickerProps';
 import { TimeDisplayControlType } from './TimeDisplayControlType';
 
 /**
@@ -9,6 +10,7 @@ export interface ITimeComponentProps {
   disabled?: boolean;
   value: number;
   timeDisplayControlType?: TimeDisplayControlType;
+  minutesIncrementStep?: MinutesIncrement;
   onChange: (value?: string) => void;
 }
 

src/controls/dateTimePicker/MinutesComponent.tsx

@@ -16,7 +16,7 @@ export default class MinutesComponent extends React.Component<ITimeComponentProp
   constructor(props: ITimeComponentProps) {
     super(props);
 
-    this._initMinutesOptions();
+    this._initMinutesOptions(props.minutesIncrementStep || 1);
   }
 
   public render(): JSX.Element {
@@ -69,9 +69,10 @@ export default class MinutesComponent extends React.Component<ITimeComponentProp
     }
   }
 
-  private _initMinutesOptions() {
+  private _initMinutesOptions(step: number) {
+
     let minutes: IDropdownOption[] = [];
-    for (let j = 0; j < 60; j++) {
+    for (let j = 0; j < 60; j += step) {
       let digitMin: string;
       if (j < 10) {
         digitMin = '0' + j;

src/controls/dynamicForm/DynamicForm.module.scss

@@ -25,6 +25,20 @@
   display: block;
 }
 
+.fieldDescription {
+	font-weight: 400;
+	font-size: 12px;
+	color: #858585;
+	margin-top: 4px;
+	font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
+		"Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	overflow-wrap: break-word;
+	display: block;
+	user-select: none;
+}
+
 .fieldIcon {
 	align-self: center;
 	font-size: 16px;
@@ -43,7 +57,7 @@
 
 .feildDisplay {
 	@extend .feildDisplayNoPadding;
-	padding: 6px 0 7px 0;
+	padding: 6px 0 0px 0;
 	//border: 2px solid;
   //border-color: "[theme:white, default:#ffffff]";
 	//margin-left: -2px;
@@ -93,7 +107,7 @@
 }
 
 .pickersContainer {
-  padding: 6px 0 7px;
+  padding: 6px 0 0px;
 }
 
 .thumbnailFieldButtons {