Merge pull request #2007 from GuidoZam/dashboard-widget-rowspan

Dashboard widget rowspan

Author: joaojmendes

docs/documentation/docs/controls/Dashboard.md

@@ -111,6 +111,7 @@ Provides settings of Dashboard's widget
 | controlOptions | IWidgetControlOptions | no | Component rendering options. |
 | body | IWidgetBodyContent[] | no | Widget's content (children) rendered as tabs. |
 | link | IWidgetLink | no | Widget's link rendered at the bottom part of the widget. |
+| rowSpan | number | no | Number of rows the widget should span. If specified, it will override any vertical value set from the size property. |
 
 Interface `IWidgetActionKey`
 

src/controls/dashboard/widget/IWidget.ts

@@ -73,6 +73,10 @@ export interface IWidget {
    * Widget's link
    */
   link?: IWidgetLink;
+  /**
+   * Number of rows to span (vertical extension)
+   */
+  rowSpan?: number;
 }
 
 /**

src/controls/dashboard/widget/Widget.tsx

@@ -35,6 +35,11 @@ export const Widget = ({
             break
     }
 
+    // Support vertical extension via rowSpan
+    if (widget.rowSpan && widget.rowSpan > 1) {
+        cardStyle.gridRowEnd = `span ${widget.rowSpan}`;
+    }
+
     if(widget.controlOptions && widget.controlOptions.isHidden){
         return null;
     }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -161,6 +161,7 @@ import {
   VariantType,
 } from '../../../controls/variantThemeProvider';
 import {
+  IWidgetLink,
   WidgetSize,
 } from '../../../controls/dashboard';
 import { debounce } from 'lodash';
@@ -1055,7 +1056,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
     }
 
     const linkExample = { href: "#" };
-    const customizedLinkExample = {
+    const customizedLinkExample: any = {
       href: "#",
       title: "This is a customized link!",
       color: "red",
@@ -2358,6 +2359,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   title: "Card 2",
                   size: WidgetSize.Single,
                   link: customizedLinkExample,
+                  rowSpan: 2
                 },
                 {
                   title: "Card 3",