Moving merging of style classes to style file

microsoft · Nov 13, 2024 · 5985722 · 5985722
1 parent 0db3fd6
commit 5985722
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 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,7 +8,6 @@ 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> {
@@ -81,10 +80,10 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
             'aria-multiselectable': canSelectMultipleLegends,
           })}
           style={{ justifyContent: props.centerLegends ? 'center' : 'unset', flexWrap: 'wrap', ...overflowStyles }}
-          className={mergeClasses(classes.root, props.className?.root)}
+          className={classes.root}
         >
           <Overflow>
-            <div className={mergeClasses(classes.resizableArea, props.className?.resizableArea)}>
+            <div className={classes.resizableArea}>
               {dataToRender.map((item, id) => (
                 <OverflowItem key={id} id={id.toString()}>
                   {_renderButton(item)}
@@ -108,12 +107,9 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
             'aria-multiselectable': canSelectMultipleLegends,
           })}
           style={{ justifyContent: props.centerLegends ? 'center' : 'unset', flexWrap: 'wrap', ...overflowStyles }}
-          className={mergeClasses(classes.root, props.className?.root)}
+          className={classes.root}
         >
-          <div
-            className={mergeClasses(classes.resizableArea, props.className?.resizableArea)}
-            style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}
-          >
+          <div className={classes.resizableArea} style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}>
             {dataToRender.map((item, id) => (
               <div key={id} style={{ flex: '0 1 auto', margin: '4px' }}>
                 {_renderButton(item)}
@@ -257,7 +253,7 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
           })}
           {...(data.nativeButtonProps && { ...data.nativeButtonProps })}
           key={index}
-          className={mergeClasses(classes.legend, props.className?.legend)}
+          className={classes.legend}
           onClick={onClickHandler}
           onMouseOver={onHoverHandler}
           onMouseOut={onMouseOut}
@@ -276,10 +272,7 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
           }} /* eslint-enable react/jsx-no-bind */
         >
           {shape}
-          <div
-            className={mergeClasses(classes.text, props.className?.text)}
-            style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}
-          >
+          <div className={classes.text} style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}>
             {legend.title}
           </div>
         </Button>

diff --git a/...ges/charts/react-charts-preview/library/src/components/Legends/useLegendsStyles.styles.ts b/...ges/charts/react-charts-preview/library/src/components/Legends/useLegendsStyles.styles.ts
@@ -85,17 +85,21 @@ const useStyles = makeStyles({
 });
 
 export const useLegendStyles_unstable = (props: LegendsProps): LegendsStyles => {
-  const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.
+  // ToDo - width, barHeight is non enumerable. Need to be used inline.
   const baseStyles = useStyles();
 
   return {
-    root: mergeClasses(legendClassNames.root, baseStyles.root, className, props.styles?.root),
-    legend: mergeClasses(legendClassNames.legend, baseStyles.legend, props.styles?.legend),
-    rect: mergeClasses(legendClassNames.rect, baseStyles.rect, props.styles?.rect),
-    shape: mergeClasses(legendClassNames.shape, baseStyles.shape, props.styles?.shape),
-    triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, props.styles?.triangle),
-    text: mergeClasses(legendClassNames.text, baseStyles.text, props.styles?.text),
-    hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, props.styles?.hoverChange),
-    resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, props.styles?.resizableArea),
+    root: mergeClasses(legendClassNames.root, baseStyles.root, props.className?.root),
+    legend: mergeClasses(legendClassNames.legend, baseStyles.legend, props.className?.legend),
+    rect: mergeClasses(legendClassNames.rect, baseStyles.rect, props.className?.rect),
+    shape: mergeClasses(legendClassNames.shape, baseStyles.shape, props.className?.shape),
+    triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, props.className?.triangle),
+    text: mergeClasses(legendClassNames.text, baseStyles.text, props.className?.text),
+    hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, props.className?.hoverChange),
+    resizableArea: mergeClasses(
+      legendClassNames.resizableArea,
+      baseStyles.resizableArea,
+      props.className?.resizableArea,
+    ),
   };
 };