Pass Legend Shape prop to Overflow State (microsoft#31057)

Co-authored-by: skylarfong <[email protected]>

Author: skyfong

change/@fluentui-react-charting-f13f0775-541c-46a5-a70d-b979e288c2b2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add shape prop to ILegendsProps to pass to Overflow items",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-charting/etc/react-charting.api.md

@@ -810,6 +810,7 @@ export interface ILegendsProps {
     onLegendHoverCardLeave?: VoidFunction;
     overflowProps?: Partial<IOverflowSetProps>;
     overflowText?: string;
+    shape?: LegendShape;
     styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;
     theme?: ITheme;
 }

packages/react-charting/src/components/Legends/Legends.base.tsx

@@ -88,7 +88,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
   }
 
   private _generateData(): ILegendOverflowData {
-    const { allowFocusOnLegends = true } = this.props;
+    const { allowFocusOnLegends = true, shape } = this.props;
     const dataItems: ILegendItem[] = this.props.legends.map((legend: ILegend, index: number) => {
       return {
         ...(allowFocusOnLegends && {
@@ -103,7 +103,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         hoverAction: legend.hoverAction!,
         onMouseOutAction: legend.onMouseOutAction!,
         color: legend.color,
-        shape: legend.shape,
+        shape: shape ? shape : legend.shape,
         stripePattern: legend.stripePattern,
         isLineLegendInBarChart: legend.isLineLegendInBarChart,
         opacity: legend.opacity,

packages/react-charting/src/components/Legends/Legends.types.ts

@@ -237,6 +237,11 @@ export interface ILegendsProps {
    * This prop is used for singleSelect scenarios.
    */
   defaultSelectedLegend?: string;
+
+  /**
+   * The shape for the legend.
+   */
+  shape?: LegendShape;
 }
 
 /**