Added 'wrap' option to TabSelector overflow

Azure · Nov 10, 2023 · 332fbb1 · 332fbb1
1 parent 65446e2
commit 332fbb1
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/bonito-ui/src/components/form/tab-selector.tsx b/packages/bonito-ui/src/components/form/tab-selector.tsx
@@ -4,7 +4,7 @@ import {
     ParameterName,
 } from "@azure/bonito-core/lib/form";
 import { delayedCallback } from "@azure/bonito-core/lib/util";
-import { Pivot, PivotItem } from "@fluentui/react/lib/Pivot";
+import { IPivotStyles, Pivot, PivotItem } from "@fluentui/react/lib/Pivot";
 import * as React from "react";
 import { useFormParameter, useUniqueId } from "../../hooks";
 import { FormControlProps } from "./form-control";
@@ -14,7 +14,7 @@ export interface TabSelectorProps<
     K extends ParameterName<V>,
     D extends ParameterDependencies<V> = ParameterDependencies<V>
 > extends FormControlProps<V, K, D> {
-    overflowBehavior?: "none" | "menu";
+    overflowBehavior?: "none" | "menu" | "wrap";
     options: TabOption<V, K>[];
     valueToKey?: (value?: V[K]) => string;
 }
@@ -84,13 +84,21 @@ export function TabSelector<
 
     const toKey = valueToKey ?? defaultValueToKey;
 
+    let pivotOverflow: "none" | "menu" = "menu";
+    let pivotStyles: Partial<IPivotStyles> = {};
+    if (overflowBehavior === "wrap") {
+        pivotOverflow = "none";
+        pivotStyles = { root: { display: "flex", flexWrap: "wrap" } };
+    }
+
     return (
         <Pivot
             id={id}
             aria-label={ariaLabel ?? param.label}
             className={className}
             style={style}
-            overflowBehavior={overflowBehavior ?? "menu"}
+            styles={pivotStyles}
+            overflowBehavior={pivotOverflow}
             // TODO: Support disabled, errorMessage
             // disabled={disabled || param.disabled}
             // errorMessage={validationError}