Making changes for styled legends story

microsoft · Nov 11, 2024 · 0db3fd6 · 0db3fd6
1 parent b07a010
commit 0db3fd6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/packages/charts/react-charts-preview/library/src/components/Legends/Legends.tsx b/packages/charts/react-charts-preview/library/src/components/Legends/Legends.tsx
@@ -8,6 +8,7 @@ import { Overflow, OverflowItem } from '@fluentui/react-overflow';
 import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { OverflowMenu } from './OverflowMenu';
 import { tokens } from '@fluentui/react-theme';
+import { mergeClasses } from '@griffel/react';
 
 // This is an internal interface used for rendering the legends with unique key
 interface LegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -80,10 +81,10 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
             'aria-multiselectable': canSelectMultipleLegends,
           })}
           style={{ justifyContent: props.centerLegends ? 'center' : 'unset', flexWrap: 'wrap', ...overflowStyles }}
-          className={classes.root}
+          className={mergeClasses(classes.root, props.className?.root)}
         >
           <Overflow>
-            <div className={classes.resizableArea}>
+            <div className={mergeClasses(classes.resizableArea, props.className?.resizableArea)}>
               {dataToRender.map((item, id) => (
                 <OverflowItem key={id} id={id.toString()}>
                   {_renderButton(item)}
@@ -107,9 +108,12 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
             'aria-multiselectable': canSelectMultipleLegends,
           })}
           style={{ justifyContent: props.centerLegends ? 'center' : 'unset', flexWrap: 'wrap', ...overflowStyles }}
-          className={classes.root}
+          className={mergeClasses(classes.root, props.className?.root)}
         >
-          <div className={classes.resizableArea} style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}>
+          <div
+            className={mergeClasses(classes.resizableArea, props.className?.resizableArea)}
+            style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}
+          >
             {dataToRender.map((item, id) => (
               <div key={id} style={{ flex: '0 1 auto', margin: '4px' }}>
                 {_renderButton(item)}
@@ -253,7 +257,7 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
           })}
           {...(data.nativeButtonProps && { ...data.nativeButtonProps })}
           key={index}
-          className={classes.legend}
+          className={mergeClasses(classes.legend, props.className?.legend)}
           onClick={onClickHandler}
           onMouseOver={onHoverHandler}
           onMouseOut={onMouseOut}
@@ -272,7 +276,10 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
           }} /* eslint-enable react/jsx-no-bind */
         >
           {shape}
-          <div className={classes.text} style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}>
+          <div
+            className={mergeClasses(classes.text, props.className?.text)}
+            style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}
+          >
             {legend.title}
           </div>
         </Button>

diff --git a/packages/charts/react-charts-preview/library/src/components/Legends/Legends.types.ts b/packages/charts/react-charts-preview/library/src/components/Legends/Legends.types.ts
@@ -132,9 +132,9 @@ export interface LegendsProps {
   legends: Legend[];
 
   /**
-   * Additional CSS class(es) to apply to the legneds component.
+   * Additional CSS class(es) to apply to the legends component.
    */
-  className?: string;
+  className?: LegendsStyles;
 
   /**
    * Call to provide customized styling that will layer on top of the variant rules.

diff --git a/packages/charts/react-charts-preview/stories/src/Legends/Legends.Styled.stories.tsx b/packages/charts/react-charts-preview/stories/src/Legends/Legends.Styled.stories.tsx
@@ -1,5 +1,12 @@
 import * as React from 'react';
 import { Legend, Legends, getColorFromToken, DataVizPalette } from '@fluentui/react-charts-preview';
+import { makeStyles } from '@griffel/react';
+
+const OverrideLegendStyles = makeStyles({
+  root: {
+    border: `1px solid ${getColorFromToken(DataVizPalette.color25)}`,
+  },
+});
 
 export const LegendsStyled = () => {
   const legends: Legend[] = [
@@ -79,6 +86,7 @@ export const LegendsStyled = () => {
       overflowText={'Overflow Items'}
       allowFocusOnLegends={true}
       canSelectMultipleLegends={false}
+      className={{ legend: OverrideLegendStyles().root }}
     />
   );
 };