Skip to content

Commit 3cceb62

Browse files
estruyfestruyf
committed
Merge branch 'dev' into master
2 parents 279de73 + 6b0ce5e commit 3cceb62

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+3276
-110
lines changed

‎CHANGELOG.JSON

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,31 @@
11
{
22
"versions": [
3+
{
4+
"version": "2.3.0",
5+
"changes": {
6+
"new": [
7+
"`Dashboard` control for Microsoft Teams [#758](https://github.com/pnp/sp-dev-fx-controls-react/pull/758)",
8+
"`Toobar` control for Microsoft Teams [#758](https://github.com/pnp/sp-dev-fx-controls-react/pull/758)"
9+
],
10+
"enhancements": [
11+
"`TaxonomyPicker`: Added `useSessionStorage` property [#759](https://github.com/pnp/sp-dev-fx-controls-react/pull/759)"
12+
],
13+
"fixes": [
14+
"`FilePicker`: documentation fix: '|' not escaped [#756](https://github.com/pnp/sp-dev-fx-controls-react/pull/756)",
15+
"`TaxonomyPicker`: Return `TermSetId` for suggestions [#762](https://github.com/pnp/sp-dev-fx-controls-react/pull/762)",
16+
"`WebPartTitle`: Fluent UI Updates to SharePoint - WebPartTitle control too thin now [#605](https://github.com/pnp/sp-dev-fx-controls-react/issues/605)",
17+
"`ListView`: Sticky Header scrolling issue [#734](https://github.com/pnp/sp-dev-fx-controls-react/issues/734)",
18+
"`DateTimePicker`: hours dropdown not re-rendered when state changed programmatically [#757](https://github.com/pnp/sp-dev-fx-controls-react/issues/757)",
19+
"`RichText`: controlled mode doesn't work [#666](https://github.com/pnp/sp-dev-fx-controls-react/issues/666)"
20+
]
21+
},
22+
"contributions": [
23+
"[Gautam Sheth](https://github.com/gautamdsheth)",
24+
"[Marcin Wojciechowski](https://github.com/mgwojciech)",
25+
"[Nikolay Belykh](https://github.com/nbelyh)",
26+
"[André Lage](https://github.com/aaclage)"
27+
]
28+
},
329
{
430
"version": "2.2.0",
531
"changes": {

‎CHANGELOG.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
# Releases
22

3+
## 2.3.0
4+
5+
### New control(s)
6+
7+
- `Dashboard` control for Microsoft Teams [#758](https://github.com/pnp/sp-dev-fx-controls-react/pull/758)
8+
- `Toobar` control for Microsoft Teams [#758](https://github.com/pnp/sp-dev-fx-controls-react/pull/758)
9+
10+
### Enhancements
11+
12+
- `TaxonomyPicker`: Added `useSessionStorage` property [#759](https://github.com/pnp/sp-dev-fx-controls-react/pull/759)
13+
14+
### Fixes
15+
16+
- `FilePicker`: documentation fix: '|' not escaped [#756](https://github.com/pnp/sp-dev-fx-controls-react/pull/756)
17+
- `TaxonomyPicker`: Return `TermSetId` for suggestions [#762](https://github.com/pnp/sp-dev-fx-controls-react/pull/762)
18+
- `WebPartTitle`: Fluent UI Updates to SharePoint - WebPartTitle control too thin now [#605](https://github.com/pnp/sp-dev-fx-controls-react/issues/605)
19+
- `ListView`: Sticky Header scrolling issue [#734](https://github.com/pnp/sp-dev-fx-controls-react/issues/734)
20+
- `DateTimePicker`: hours dropdown not re-rendered when state changed programmatically [#757](https://github.com/pnp/sp-dev-fx-controls-react/issues/757)
21+
- `RichText`: controlled mode doesn't work [#666](https://github.com/pnp/sp-dev-fx-controls-react/issues/666)
22+
23+
### Contributors
24+
25+
Special thanks to our contributors (in alphabetical order): [Gautam Sheth](https://github.com/gautamdsheth), [Marcin Wojciechowski](https://github.com/mgwojciech), [Nikolay Belykh](https://github.com/nbelyh), [André Lage](https://github.com/aaclage).
26+
327
## 2.2.0
428

529
### Enhancements

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
# Releases
22

3+
## 2.3.0
4+
5+
### New control(s)
6+
7+
- `Dashboard` control for Microsoft Teams [#758](https://github.com/pnp/sp-dev-fx-controls-react/pull/758)
8+
- `Toobar` control for Microsoft Teams [#758](https://github.com/pnp/sp-dev-fx-controls-react/pull/758)
9+
10+
### Enhancements
11+
12+
- `TaxonomyPicker`: Added `useSessionStorage` property [#759](https://github.com/pnp/sp-dev-fx-controls-react/pull/759)
13+
14+
### Fixes
15+
16+
- `FilePicker`: documentation fix: '|' not escaped [#756](https://github.com/pnp/sp-dev-fx-controls-react/pull/756)
17+
- `TaxonomyPicker`: Return `TermSetId` for suggestions [#762](https://github.com/pnp/sp-dev-fx-controls-react/pull/762)
18+
- `WebPartTitle`: Fluent UI Updates to SharePoint - WebPartTitle control too thin now [#605](https://github.com/pnp/sp-dev-fx-controls-react/issues/605)
19+
- `ListView`: Sticky Header scrolling issue [#734](https://github.com/pnp/sp-dev-fx-controls-react/issues/734)
20+
- `DateTimePicker`: hours dropdown not re-rendered when state changed programmatically [#757](https://github.com/pnp/sp-dev-fx-controls-react/issues/757)
21+
- `RichText`: controlled mode doesn't work [#666](https://github.com/pnp/sp-dev-fx-controls-react/issues/666)
22+
23+
### Contributors
24+
25+
Special thanks to our contributors (in alphabetical order): [Gautam Sheth](https://github.com/gautamdsheth), [Marcin Wojciechowski](https://github.com/mgwojciech), [Nikolay Belykh](https://github.com/nbelyh), [André Lage](https://github.com/aaclage).
26+
327
## 2.2.0
428

529
### Enhancements

‎docs/documentation/docs/assets/dashboard.png

99.4 KB
Loading

‎docs/documentation/docs/assets/toolbar.png

42.5 KB
Loading

‎docs/documentation/docs/controls/Dashboard.md

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
# Dashboard control
2+
3+
Dashboard component for Microsoft Teams.
4+
5+
!!! Note
6+
As this component is based on `@fluentui/react-northstar` the main usage scenario is Microsoft Teams projects. You can still use it in non-Teams related projects as well.
7+
8+
Here is an example of the control in action:
9+
10+
![Carousel control](../assets/dashboard.png)
11+
12+
## How to use this control in your solutions
13+
14+
- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
15+
- Import the following modules to your component:
16+
17+
```TypeScript
18+
import { WidgetSize, Dashboard } from '@pnp/spfx-controls-react/lib/Dashboard';
19+
```
20+
21+
- Use the `Dashboard` control in your code as follows:
22+
23+
```TypeSCript
24+
const linkExample = { href: "#" };
25+
const calloutItemsExample = [
26+
{
27+
id: "action_1",
28+
title: "Info",
29+
icon: <Icon iconName={'Edit'} />,
30+
},
31+
{ id: "action_2", title: "Popup", icon: <Icon iconName={'Add'} /> },
32+
];
33+
// ...
34+
<Dashboard
35+
widgets={[{
36+
title: "Card 1",
37+
desc: "Last updated Monday, April 4 at 11:15 AM (PT)",
38+
widgetActionGroup: calloutItemsExample,
39+
size: WidgetSize.Triple,
40+
body: [
41+
{
42+
id: "t1",
43+
title: "Tab 1",
44+
content: (
45+
<Text>
46+
Content #1
47+
</Text>
48+
),
49+
},
50+
{
51+
id: "t2",
52+
title: "Tab 2",
53+
content: (
54+
<Text>
55+
Content #2
56+
</Text>
57+
),
58+
},
59+
{
60+
id: "t3",
61+
title: "Tab 3",
62+
content: (
63+
<Text>
64+
Content #3
65+
</Text>
66+
),
67+
},
68+
],
69+
link: linkExample,
70+
},
71+
{
72+
title: "Card 2",
73+
size: WidgetSize.Single,
74+
link: linkExample,
75+
},
76+
{
77+
title: "Card 3",
78+
size: WidgetSize.Double,
79+
link: linkExample,
80+
}]} />
81+
```
82+
83+
## Implementation
84+
85+
The Dashboard component can be configured with the following properties:
86+
87+
| Property | Type | Required | Description |
88+
| ---- | ---- | ---- | ---- |
89+
| widgets | IWidget[] | yes | Widgtets collection. |
90+
| allowHidingWidget | boolean | no | Specifies if widgets can be hidden from the dashboard. |
91+
| onWidgetHiding | (widget: IWidget) => void | no | Handler of widget hiding event. |
92+
| toolbarProps | IToolbarProps | no | Dashboard toolbar props. See [Toolbar](./Toolbar). |
93+
94+
Interface `IWidget`
95+
96+
Provides settings of Dashboard's widget
97+
98+
| Property | Type | Required | Description |
99+
| ---- | ---- | ---- | ---- |
100+
| size | WidgetSize | yes | Size. |
101+
| title | string | yes | Title. |
102+
| desc | string | no | Description. |
103+
| widgetActionGroup | IWidgetActionKey[] | no | Actions. |
104+
| controlOptions | IWidgetControlOptions | no | Component rendering options. |
105+
| body | IWidgetBodyContent[] | no | Widget's content (children) rendered as tabs. |
106+
| link | IWidgetLink | no | Widget's link rendered at the bottom part of the widget. |
107+
108+
Interface `IWidgetActionKey`
109+
110+
Provides Dashboard Widget Action properties
111+
112+
| Property | Type | Required | Description |
113+
| ---- | ---- | ---- | ---- |
114+
| id | string | yes | Action id. |
115+
| icon | JSX.Element | no | Action icon. |
116+
| title | string | yes | Action title. |
117+
| onClick | () => void | no | Action handler. |
118+
119+
Interface `IWidgetControlOptions`
120+
121+
Provides Widget component options
122+
123+
| Property | Type | Required | Description |
124+
| ---- | ---- | ---- | ---- |
125+
| isHidden | boolean | no | Specifies if current widget is hidden. |
126+
127+
Interface `IWidgetBodyContent`
128+
129+
Provides Widget content (tab) properties
130+
131+
| Property | Type | Required | Description |
132+
| ---- | ---- | ---- | ---- |
133+
| id | string | yes | Content (tab) id. |
134+
| title | string | yes | Content (tab) title. |
135+
| content | React.ReactNode | yes | Tab content. |
136+
137+
Interface `IWidgetLink`
138+
139+
Provides Widget link properties
140+
141+
| Property | Type | Required | Description |
142+
| ---- | ---- | ---- | ---- |
143+
| href | string | yes | Link to be opened. |
144+
145+
Enum `WidgetSize`
146+
147+
Provides size of the widget
148+
149+
| Value | Description |
150+
| ---- | ---- |
151+
| Single | Single-sized grid item. |
152+
| Double | Double-width grid item. |
153+
| Triple | Triple width grid item. |
154+
| Box | Double-width, double-height grid item. |
155+
156+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Dashboard)

‎docs/documentation/docs/controls/FilePicker.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ The FilePicker component can be configured with the following properties:
7676
| hideLocalUploadTab | boolean | no | Specifies if LocalUploadTab should be hidden. |
7777
| hideLinkUploadTab | boolean | no | Specifies if LinkUploadTab should be hidden. |
7878
| storeLastActiveTab | boolean | no | Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default `true` |
79-
| renderCustomUploadTabContent | (filePickerResult: IFilePickerResult) => JSX.Element | null | no | Optional renderer to add custom user-defined fields to "Upload" tab |
80-
| renderCustomLinkTabContent | (filePickerResult: IFilePickerResult) => JSX.Element | null | no | Optional renderer to add custom user-defined fields to "Link" tab |
79+
| renderCustomUploadTabContent | (filePickerResult: IFilePickerResult) => JSX.Element \| null | no | Optional renderer to add custom user-defined fields to "Upload" tab |
80+
| renderCustomLinkTabContent | (filePickerResult: IFilePickerResult) => JSX.Element \| null | no | Optional renderer to add custom user-defined fields to "Link" tab |
8181

8282
interface `IFilePickerResult`
8383

‎docs/documentation/docs/controls/TaxonomyPicker.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,8 @@ The TaxonomyPicker control can be configured with the following properties:
171171
| errorMessage | string | no | Static error message displayed below the picker. Use `onGetErrorMessage` to dynamically change the error message displayed (if any) based on the current value. `errorMessage` and `onGetErrorMessage` are mutually exclusive (`errorMessage` takes precedence). |
172172
| onGetErrorMessage | (value: IPickerTerms) => string \| Promise&lt;string&gt; | no | The method is used to get the validation error message and determine whether the picker value is valid or not. Mutually exclusive with the static string `errorMessage` (it will take precedence over this).<br />When it returns string:<ul><li>If valid, it returns empty string.</li><li>If invalid, it returns the error message string to be shown below the picker.</li></ul><br />When it returns Promise&lt;string&gt;:<ul><li>The resolved value is display as error message.</li><li>The rejected, the value is thrown away.</li></ul> |
173173
| required | boolean | no | Specifies if to display an asterisk near the label. Note that error message should be specified in `onGetErrorMessage` or `errorMessage` |
174+
| useSessionStorage | boolean | no | Specify if the control uses session storage. Default is set to true for better performance. |
175+
174176

175177
Interface `IPickerTerm`
176178

‎docs/documentation/docs/controls/Toolbar.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Dashboard control
2+
3+
Toolbar component for Microsoft Teams.
4+
5+
!!! Note
6+
As this component is based on `@fluentui/react-northstar` the main usage scenario is Microsoft Teams projects. You can still use it in non-Teams related projects as well.
7+
8+
Here is an example of the control in action:
9+
10+
![Carousel control](../assets/toolbar.png)
11+
12+
## How to use this control in your solutions
13+
14+
- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
15+
- Import the following modules to your component:
16+
17+
```TypeScript
18+
import { Toolbar } from '@pnp/spfx-controls-react/lib/Toolbar';
19+
```
20+
21+
- Use the `Toolbar` control in your code as follows:
22+
23+
```TypeSCript
24+
<Toolbar actionGroups={{
25+
'group1': {
26+
'action1': {
27+
title: 'Edit',
28+
iconName: 'Edit',
29+
onClick: () => { console.log('Edit action click'); }
30+
},
31+
'action2': {
32+
title: 'New',
33+
iconName: 'Add',
34+
onClick: () => { console.log('New action click'); }
35+
}
36+
}
37+
}}
38+
filters={[{
39+
id: "f1",
40+
title:
41+
"Fruits (any sweet, edible part of a plant that resembles fruit, even if it does not develop from a floral ovary)",
42+
items: [
43+
{ id: "f1f1", title: "Pomes" },
44+
{ id: "f1f2", title: "Drupes" },
45+
{ id: "f1f3", title: "Citruses" },
46+
{ id: "f1f4", title: "Berries" },
47+
{ id: "f1f5", title: "Melons" },
48+
],
49+
},
50+
{
51+
id: "f3",
52+
title: "Cacti",
53+
},]}
54+
find={true} />
55+
```
56+
57+
## Implementation
58+
59+
The Toolbar component can be configured with the following properties:
60+
61+
| Property | Type | Required | Description |
62+
| ---- | ---- | ---- | ---- |
63+
| actionGroups | TActionGroups | yes | Toolbar actions groups. |
64+
| filters | TFilters | no | Toolbar filters. |
65+
| find | boolean | no | Specifies if searchbox should be displayed. |
66+
| filtersSingleSelect | boolean | no | Specifies if a user can select only one filter at a time. |
67+
| onSelectedFiltersChange | (selectedFilters: string[]) => string[] | no | Filter changed handler. |
68+
| onFindQueryChange | (findQuery: string) => string | no | Search query changed handler. |
69+
70+
71+
Type `TActionGroups`
72+
73+
Provides Toolbar action groups settings
74+
75+
```typescript
76+
type TActionGroups = {
77+
[slug: string]: TActions;
78+
};
79+
```
80+
81+
Type `TActions`
82+
83+
Provides Toolbar actions settings
84+
85+
```typescript
86+
type TActions = {
87+
[actionKey: string]: TAction;
88+
};
89+
```
90+
91+
Type `TAction`
92+
93+
Provides Toolbar action settings
94+
95+
| Property | Type | Required | Description |
96+
| ---- | ---- | ---- | ---- |
97+
| title | string | yes | Action title. |
98+
| iconName | string | no | Action icon name. |
99+
| multi | boolean | no | For future. |
100+
| onClick | ComponentEventHandler&lt;ToolbarItemProps&gt; | no | Action `onClick` handler. |
101+
102+
Type `TFilters`
103+
104+
Provides Toolbar filters settings
105+
106+
```typescript
107+
type TFilters = ObjectShorthandCollection<TreeItemProps, never>;
108+
```
109+
110+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Toolbar)

‎docs/documentation/docs/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ The following controls are currently available:
5656
- [Carousel](./controls/Carousel) (Control displays children elements with 'previous/next element' options)
5757
- [Charts](./controls/ChartControl) (makes it easy to integrate [Chart.js](https://www.chartjs.org/) charts into web part)
5858
- [ComboBoxListItemPicker](./controls/ComboBoxListItemPicker) (allows to select one or more items from a list)
59+
- [Dashboard](./controls/Dashboard) (Control to render dashboard in Microsoft Teams)
5960
- [DateTimePicker](./controls/DateTimePicker) (DateTime Picker)
6061
- [FieldCollectionData](./controls/FieldCollectionData) (control gives you the ability to insert a list / collection data which can be used in your web part / application customizer)
6162
- [FilePicker](./controls/FilePicker) (control that allows to browse and select a file from various places)
@@ -75,6 +76,7 @@ The following controls are currently available:
7576
- [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb control)
7677
- [SecurityTrimmedControl](./controls/SecurityTrimmedControl) (intended to be used when you want to show or hide components based on the user permissions)
7778
- [TaxonomyPicker](./controls/TaxonomyPicker) (Taxonomy Picker)
79+
- [Toolbar](./controls/Toolbar) (Control to render Toolbar in Microsoft Teams)
7880
- [TreeView](./controls/TreeView) (Tree View)
7981
- [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)
8082

0 commit comments

Comments
 (0)