diff --git a/docs/documentation/docs/controls/Dashboard.md b/docs/documentation/docs/controls/Dashboard.md index 37e959012..fd109484f 100644 --- a/docs/documentation/docs/controls/Dashboard.md +++ b/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` diff --git a/src/controls/dashboard/widget/IWidget.ts b/src/controls/dashboard/widget/IWidget.ts index 0ccd14fa7..a621f5038 100644 --- a/src/controls/dashboard/widget/IWidget.ts +++ b/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; } /** diff --git a/src/controls/dashboard/widget/Widget.tsx b/src/controls/dashboard/widget/Widget.tsx index a8d42df41..c7e3c3169 100644 --- a/src/controls/dashboard/widget/Widget.tsx +++ b/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; } diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 2354af418..476c7ca98 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/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