Added WidgetSize quadruple option

pnp · Jul 3, 2024 · e43d2d6 · e43d2d6
1 parent 511dd5e
commit e43d2d6
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
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,7 +15,7 @@ export const Widget = ({
         gridColumnEnd: "auto",
         gridRowEnd: "auto",
         "@media (max-width: 842px)": {
-            gridColumnEnd: "span 3",
+            gridColumnEnd: "span 4",
         },
     };
     if (widget.size === WidgetSize.Double) {
@@ -28,6 +28,9 @@ export const Widget = ({
     if (widget.size === WidgetSize.Triple) {
         cardStyle.gridColumnEnd = "span 3";
     }
+    if (widget.size === WidgetSize.Quadruple) {
+        cardStyle.gridColumnEnd = "span 4";
+    }
     if(widget.controlOptions && widget.controlOptions.isHidden){
         return null;
     }

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -1992,7 +1992,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",