Merge for 1.19.0 release

pnp · Jun 17, 2020 · 87af8a7 · 87af8a7
2 parents 62cd463 + 7ef51e0
commit 87af8a7
Show file tree

Hide file tree

Showing 48 changed files with 5,036 additions and 3,501 deletions.
diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON
@@ -1,5 +1,40 @@
 {
   "versions": [
+    {
+      "version": "1.19.0",
+      "changes": {
+        "new": [
+        ],
+        "enhancements": [
+          "`ListView`: Add clear button to filter text box [#549](https://github.com/pnp/sp-dev-fx-controls-react/issues/549)",
+          "`FolderExplorer`: Add clear button to filter text box [#553](https://github.com/pnp/sp-dev-fx-controls-react/pull/553)",
+          "`TreeView`: there should be possibility to collapse the first level nodes by default [#561](https://github.com/pnp/sp-dev-fx-controls-react/issues/561)",
+          "`TreeView`: Expand to selected [#559](https://github.com/pnp/sp-dev-fx-controls-react/issues/559)",
+          "`DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [#497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)",
+          "`TaxonomyPicker`: Added the `selectTerm`, `hideTerm`, and `disableTerm` actions [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)",
+          "`TaxonomyPicker`: Added the functionality to enable/disable term actions on the fly [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)",
+          "`Carousel`: indicators, slide animation, auto cycling, easier basic usage [#587](https://github.com/pnp/sp-dev-fx-controls-react/pull/587)"
+        ],
+        "fixes": [
+          "`TaxonomyPicker`: Correct the AnchorID getting all TermSet search options [#150](https://github.com/pnp/sp-dev-fx-controls-react/issues/150)",
+          "Documentation fix for `TreeView`: Some tables in TreeView documentation are displayed as plain text. [#562](https://github.com/pnp/sp-dev-fx-controls-react/pull/562)",
+          "`ComboBoxListItemPicker`, `ListItemPicker`: Show error span if error is present [#557](https://github.com/pnp/sp-dev-fx-controls-react/pull/557)",
+          "`TreeView`: `defaultExpanded: true` doesn't work [#560](https://github.com/pnp/sp-dev-fx-controls-react/issues/560)",
+          "`IListPicker`: typo fix [#574](https://github.com/pnp/sp-dev-fx-controls-react/pull/574)",
+          "`DateTimePicker`: DateTime Picker noon/midnight issue with 12 hour format [#576](https://github.com/pnp/sp-dev-fx-controls-react/issues/576)"
+        ]
+      },
+      "contributions": [
+        "[Chad Eiserloh](https://github.com/c-eiser13)",
+        "[Gautam Sheth](https://github.com/gautamdsheth)",
+        "[Koen Zomers](https://github.com/KoenZomers)",
+        "[Markus Langer](https://github.com/MarkusLanger)",
+        "[Nanddeep Nachan](https://github.com/nanddeepn)",
+        "[Prasad Kasireddy](https://github.com/PrasadKasireddy)",
+        "[David Ramalho](https://github.com/DRamalho92)",
+        "[Siddharth Vaghasia](https://github.com/siddharth-vaghasia)"
+      ]
+    },
     {
       "version": "1.18.0",
       "changes": {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,31 @@
 # Releases
 
+## 1.19.0
+
+### Enhancements
+
+- `ListView`: Add clear button to filter text box [#549](https://github.com/pnp/sp-dev-fx-controls-react/issues/549)
+- `FolderExplorer`: Add clear button to filter text box [#553](https://github.com/pnp/sp-dev-fx-controls-react/pull/553)
+- `TreeView`: there should be possibility to collapse the first level nodes by default [#561](https://github.com/pnp/sp-dev-fx-controls-react/issues/561)
+- `TreeView`: Expand to selected [#559](https://github.com/pnp/sp-dev-fx-controls-react/issues/559)
+- `DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [#497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)
+- `TaxonomyPicker`: Added the `selectTerm`, `hideTerm`, and `disableTerm` actions [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)
+- `TaxonomyPicker`: Added the functionality to enable/disable term actions on the fly [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)
+- `Carousel`: indicators, slide animation, auto cycling, easier basic usage [#587](https://github.com/pnp/sp-dev-fx-controls-react/pull/587)
+
+### Fixes
+
+- `TaxonomyPicker`: Correct the AnchorID getting all TermSet search options [#150](https://github.com/pnp/sp-dev-fx-controls-react/issues/150)
+- Documentation fix for `TreeView`: Some tables in TreeView documentation are displayed as plain text. [#562](https://github.com/pnp/sp-dev-fx-controls-react/pull/562)
+- `ComboBoxListItemPicker`, `ListItemPicker`: Show error span if error is present [#557](https://github.com/pnp/sp-dev-fx-controls-react/pull/557)
+- `TreeView`: `defaultExpanded: true` doesn't work [#560](https://github.com/pnp/sp-dev-fx-controls-react/issues/560)
+- `IListPicker`: typo fix [#574](https://github.com/pnp/sp-dev-fx-controls-react/pull/574)
+- `DateTimePicker`: DateTime Picker noon/midnight issue with 12 hour format [#576](https://github.com/pnp/sp-dev-fx-controls-react/issues/576)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Chad Eiserloh](https://github.com/c-eiser13), [Gautam Sheth](https://github.com/gautamdsheth), [Koen Zomers](https://github.com/KoenZomers), [Markus Langer](https://github.com/MarkusLanger), [Nanddeep Nachan](https://github.com/nanddeepn), [Prasad Kasireddy](https://github.com/PrasadKasireddy), [David Ramalho](https://github.com/DRamalho92), [Siddharth Vaghasia](https://github.com/siddharth-vaghasia).
+
 ## 1.18.0
 
 ### New control(s)

diff --git a/README.md b/README.md
@@ -20,6 +20,8 @@ Please use following logic on submitting your questions or issues to right locat
 
 ## Contributing
 
+We'd love your help! If you have ideas for new features or feedback, let us know by creating an issue in the [issues list](https://github.com/pnp/sp-dev-fx-controls-react/issues). Before you submit a PR with your improvements, please review our [project guides](https://pnp.github.io/sp-dev-fx-controls-react/guides).
+
 This project welcomes contributions and suggestions.  Most contributions require you to agree to a
 Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
 the rights to use your contribution. For details, visit https://cla.microsoft.com.

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -1,5 +1,31 @@
 # Releases
 
+## 1.19.0
+
+### Enhancements
+
+- `ListView`: Add clear button to filter text box [#549](https://github.com/pnp/sp-dev-fx-controls-react/issues/549)
+- `FolderExplorer`: Add clear button to filter text box [#553](https://github.com/pnp/sp-dev-fx-controls-react/pull/553)
+- `TreeView`: there should be possibility to collapse the first level nodes by default [#561](https://github.com/pnp/sp-dev-fx-controls-react/issues/561)
+- `TreeView`: Expand to selected [#559](https://github.com/pnp/sp-dev-fx-controls-react/issues/559)
+- `DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [#497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)
+- `TaxonomyPicker`: Added the `selectTerm`, `hideTerm`, and `disableTerm` actions [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)
+- `TaxonomyPicker`: Added the functionality to enable/disable term actions on the fly [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)
+- `Carousel`: indicators, slide animation, auto cycling, easier basic usage [#587](https://github.com/pnp/sp-dev-fx-controls-react/pull/587)
+
+### Fixes
+
+- `TaxonomyPicker`: Correct the AnchorID getting all TermSet search options [#150](https://github.com/pnp/sp-dev-fx-controls-react/issues/150)
+- Documentation fix for `TreeView`: Some tables in TreeView documentation are displayed as plain text. [#562](https://github.com/pnp/sp-dev-fx-controls-react/pull/562)
+- `ComboBoxListItemPicker`, `ListItemPicker`: Show error span if error is present [#557](https://github.com/pnp/sp-dev-fx-controls-react/pull/557)
+- `TreeView`: `defaultExpanded: true` doesn't work [#560](https://github.com/pnp/sp-dev-fx-controls-react/issues/560)
+- `IListPicker`: typo fix [#574](https://github.com/pnp/sp-dev-fx-controls-react/pull/574)
+- `DateTimePicker`: DateTime Picker noon/midnight issue with 12 hour format [#576](https://github.com/pnp/sp-dev-fx-controls-react/issues/576)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Chad Eiserloh](https://github.com/c-eiser13), [Gautam Sheth](https://github.com/gautamdsheth), [Koen Zomers](https://github.com/KoenZomers), [Markus Langer](https://github.com/MarkusLanger), [Nanddeep Nachan](https://github.com/nanddeepn), [Prasad Kasireddy](https://github.com/PrasadKasireddy), [David Ramalho](https://github.com/DRamalho92), [Siddharth Vaghasia](https://github.com/siddharth-vaghasia).
+
 ## 1.18.0
 
 ### New control(s)

diff --git a/docs/documentation/docs/assets/Carousel.png b/docs/documentation/docs/assets/Carousel.png
diff --git a/docs/documentation/docs/controls/Carousel.md b/docs/documentation/docs/controls/Carousel.md
@@ -1,6 +1,6 @@
 # Carousel control
 
-This control renders passed elements with 'previous/next element' option.
+A slideshow component for cycling through elements—images or slides of text—like a carousel.
 
 Here is an example of the control in action:
 
@@ -17,6 +17,8 @@ import { Carousel } from "@pnp/spfx-controls-react/lib/Carousel";
 
 - Use the `Carousel` control in your code as follows:
 
+Carousel component with provided `JSX.Element[]` slides
+
 ```TypeScript
 <Carousel
   buttonsLocation={CarouselButtonsLocation.top}
@@ -31,7 +33,11 @@ import { Carousel } from "@pnp/spfx-controls-react/lib/Carousel";
   onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
   onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
 />
+```
+
+Carousel component with provided `triggerPageEvent`
 
+```TypeScript
 <Carousel
   buttonsLocation={CarouselButtonsLocation.bottom}
   buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
@@ -46,6 +52,48 @@ import { Carousel } from "@pnp/spfx-controls-react/lib/Carousel";
 />
 ```
 
+Carousel component with provided `ICarouselImageProps[]` slides:
+
+```TypeSCript
+<Carousel
+  buttonsLocation={CarouselButtonsLocation.center}
+  buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
+  contentContainerStyles={styles.carouselImageContent}
+  isInfinite={true}
+  indicatorShape={CarouselIndicatorShape.circle}
+  pauseOnHover={true}
+
+  element={[
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',
+      title: 'Colosseum',
+      description: 'This is Colosseum',
+      url: 'https://en.wikipedia.org/wiki/Colosseum',
+      showDetailsOnHover: true,
+      imageFit: ImageFit.cover
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',
+      title: 'Colosseum',
+      description: 'This is Colosseum',
+      url: 'https://en.wikipedia.org/wiki/Colosseum',
+      showDetailsOnHover: true,
+      imageFit: ImageFit.cover
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',
+      title: 'Colosseum',
+      description: 'This is Colosseum',
+      url: 'https://en.wikipedia.org/wiki/Colosseum',
+      showDetailsOnHover: true,
+      imageFit: ImageFit.cover
+    }
+  ]}
+  onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
+  onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
+/>
+```
+
 ## Implementation
 
 The Carousel component can be configured with the following properties:
@@ -71,6 +119,16 @@ The Carousel component can be configured with the following properties:
 | loadingComponent | JSX.Element | no | Allows to inject custom component when the carousel is in processing state. If not provided, Spinner is displayed. |
 | onMoveNextClicked | (currentIndex: number) => void | no | Callback function called after the next item button is clicked. Not used when triggerPageEvent is specified. |
 | onMovePrevClicked | (currentIndex: number) => void | no | Callback function called after the previous item button is clicked. Not used when triggerPageEvent is specified. |
+| elementsCount | number | no | In case triggerPageEvent is in use, provides total number of slides in the carousel. |
+| onSelect | (selectedIndex: number) => void | no | Callback function called when element has been selected in the carousel |
+| slide | boolean | no | Enables animation on the Carousel as it transitions between slides. This property is ignored if triggerPageEvent is in use. |
+| interval | number \| null | no | The amount of time to delay between automatically cycling an item. If null, carousel will not automatically cycle. |
+| pauseOnHover | boolean | no | Specifies if slides cycling should pause when hovering over the content (touchStart on touch devices). |
+| indicators | boolean | no | Specifies if set of slide position indicators is shown. |
+| indicatorShape | CarouselIndicatorShape | no | Specifies indicators' shape. If onRenderIndicator is provided - this property is ignored |
+| indicatorClassName | string | no | Specifies additional class applied to slide position indicators |
+| indicatorStyle | React.CSSProperties | no | Specifies additional styles applied to slide position indicators |
+| onRenderIndicator | (index: number, onClick: (e: React.MouseEvent&lt;HTMLElement&gt; | React.TouchEvent&lt;HTMLElement&gt;, selectedIndex: number) => void) => JSX.Element | no | Function to render indicator element |
 
 enum `CarouselButtonsLocation`
 
@@ -92,4 +150,37 @@ Provides options for carousel buttons display mode.
 | buttonsOnly | Only icon buttons are displayed. |
 | hidden | Buttons are not displayed. They appear onhover event. |
 
+enum `CarouselIndicatorShape`
+
+Provides options for carousel indicators' shape.
+
+| Value | Description |
+| ---- | ---- |
+| circle | Indicators displayed as cirlces |
+| square | Indicators displayed as squares |
+| rectangle | Indicators displayed as rectangles |
+
+Interface `ICarouselImageProps`
+
+Allows to easily render a set of `CarouselImage` components in the carousel
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| imageSrc | string | yes | Image source |
+| imageFit | ImageFit | no | Specifies the method to be used to fit image. Default: `ImageFit.none`. See [Fluent UI Image](https://developer.microsoft.com/en-us/fluentui#/controls/web/image#implementation) |
+| url | string | no | URL to be opened when clicking on details |
+| title | string | no | Title to display in details |
+| description | string \| JSX.Element | no | Description to show in details. Can be either a string (text) or JSX.Element to show HTML. |
+| target | "_blank" \| "_self" | no | Target of the URL to open. Default `"_blank"` |
+| showDetailsOnHover | boolean | no | Specifies if the details are shown on hover or constantly |
+| className | string | no | Class to apply to the component |
+| style | React.CSSProperties | no | Styles to apply to the component |
+| imgClassName | string | no | Class to apply to the image control |
+| imgStyle | React.CSSProperties | no | Styles to apply to the image control |
+| detailsClassName | string | no | Class to apply to the details control |
+| detailsStyle | React.CSSProperties | no | Styles to apply to the details control |
+| titleClassName | string | no | Class to apply to the title control |
+| titleStyle | React.CSSProperties | no | Styles to apply to the title control |
+| descriptionClassName | string | no | Class to apply to the description control |
+| descriptionStyle | React.CSSProperties | no | Styles to apply to the description control |
+
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Carousel)
diff --git a/docs/documentation/docs/controls/DateTimePicker.md b/docs/documentation/docs/controls/DateTimePicker.md
@@ -69,6 +69,8 @@ The `DateTimePicker` control can be configured with the following properties:
 | timeDisplayControlType | TimeDisplayControlType | no | Specifies what type of control to use when rendering time part. |
 | showLabels | boolean | no | Specifies if labels in front of date and time parts should be rendered. |
 | placeholder | string | no | Placeholder text for the DatePicker. |
+| maxDate | Date | no | The maximum allowable date. |
+| minDate | Date | no | The minimum allowable date. |
 
 Enum `TimeDisplayControlType`