Added new WidgetSize (#1845)

* Added WidgetSize quadruple option * Updates to fix change requests
pnp · Aug 16, 2024 · 152cafe · 152cafe
1 parent ca254ad
commit 152cafe
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/docs/documentation/docs/controls/Dashboard.md b/docs/documentation/docs/controls/Dashboard.md
@@ -152,6 +152,7 @@ Provides size of the widget
 | Single | Single-sized grid item. |
 | Double | Double-width grid item. |
 | Triple | Triple width grid item. |
+| Quadruple | Quadruple width grid item. |
 | Box | Double-width, double-height grid item. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Dashboard)
diff --git a/src/controls/dashboard/widget/IWidget.ts b/src/controls/dashboard/widget/IWidget.ts
@@ -27,6 +27,7 @@ export enum WidgetSize {
   Single = "single",
   Double = "double",
   Triple = "triple",
+  Quadruple = "quadruple",
   Box = "box",
 }
 

diff --git a/src/controls/dashboard/widget/Widget.tsx b/src/controls/dashboard/widget/Widget.tsx
@@ -15,19 +15,26 @@ export const Widget = ({
         gridColumnEnd: "auto",
         gridRowEnd: "auto",
         "@media (max-width: 842px)": {
-            gridColumnEnd: "span 3",
+            gridColumnEnd: "span 4",
         },
     };
-    if (widget.size === WidgetSize.Double) {
-        cardStyle.gridColumnEnd = "span 2";
-    }
-    if (widget.size === WidgetSize.Box) {
-        cardStyle.gridColumnEnd = "span 2";
-        cardStyle.gridRowEnd = "span 2";
-    }
-    if (widget.size === WidgetSize.Triple) {
-        cardStyle.gridColumnEnd = "span 3";
+
+    switch (widget.size) {
+        case WidgetSize.Double:
+            cardStyle.gridColumnEnd = "span 2";
+            break;
+        case WidgetSize.Box:
+            cardStyle.gridColumnEnd = "span 2";
+            cardStyle.gridRowEnd = "span 2";
+            break;
+        case WidgetSize.Triple:
+            cardStyle.gridColumnEnd = "span 3";
+            break;
+        case WidgetSize.Quadruple:
+            cardStyle.gridColumnEnd = "span 4";
+            break
     }
+
     if(widget.controlOptions && widget.controlOptions.isHidden){
         return null;
     }

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -1996,7 +1996,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               title: "Card 1",
               desc: "Last updated Monday, April 4 at 11:15 AM (PT)",
               widgetActionGroup: calloutItemsExample,
-              size: WidgetSize.Triple,
+              size: WidgetSize.Quadruple,
               body: [
                 {
                   id: "t1",