Semantic Tokens: Fix classNames order in Avatar and Accordion (#34885)

Author: Mitch-At-Work

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Accordion/useSemanticAccordionHeaderStyles.styles.ts

@@ -137,15 +137,16 @@ export const useSemanticAccordionHeaderStyles = (_state: unknown): AccordionHead
 
   const styles = useStyles();
   state.root.className = mergeClasses(
+    state.root.className,
     accordionHeaderClassNames.root,
     styles.root,
     state.inline && styles.rootInline,
     state.disabled && styles.rootDisabled,
-    state.root.className,
     getSlotClassNameProp_unstable(state.root),
   );
 
   state.button.className = mergeClasses(
+    state.button.className,
     accordionHeaderClassNames.button,
     styles.resetButton,
     styles.button,
@@ -157,26 +158,25 @@ export const useSemanticAccordionHeaderStyles = (_state: unknown): AccordionHead
     state.size === 'large' && styles.buttonLarge,
     state.size === 'extra-large' && styles.buttonExtraLarge,
     state.disabled && styles.buttonDisabled,
-    state.button.className,
     getSlotClassNameProp_unstable(state.button),
   );
 
   if (state.expandIcon) {
     state.expandIcon.className = mergeClasses(
+      state.expandIcon.className,
       accordionHeaderClassNames.expandIcon,
       styles.expandIcon,
       state.expandIconPosition === 'start' && styles.expandIconStart,
       state.expandIconPosition === 'end' && styles.expandIconEnd,
-      state.expandIcon.className,
       getSlotClassNameProp_unstable(state.expandIcon),
     );
   }
 
   if (state.icon) {
     state.icon.className = mergeClasses(
+      state.icon.className,
       accordionHeaderClassNames.icon,
       styles.icon,
-      state.icon.className,
       getSlotClassNameProp_unstable(state.icon),
     );
   }

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Avatar/useSemanticAvatarStyles.styles.ts

@@ -563,31 +563,31 @@ export const useSemanticAvatarStyles = (_state: unknown): AvatarState => {
 
   if (state.badge) {
     state.badge.className = mergeClasses(
+      state.badge.className,
       avatarClassNames.badge,
       styles.badge,
-      state.badge.className,
       getSlotClassNameProp_unstable(state.badge),
     );
   }
 
   if (state.image) {
     state.image.className = mergeClasses(
+      state.image.className,
       avatarClassNames.image,
       imageClassName,
       colorStyles[color],
       state.badge && styles.badgeCutout,
-      state.image.className,
       getSlotClassNameProp_unstable(state.image),
     );
   }
 
   if (state.initials) {
     state.initials.className = mergeClasses(
+      state.initials.className,
       avatarClassNames.initials,
       iconInitialsClassName,
       colorStyles[color],
       state.badge && styles.badgeCutout,
-      state.initials.className,
       getSlotClassNameProp_unstable(state.initials),
     );
   }
@@ -611,12 +611,12 @@ export const useSemanticAvatarStyles = (_state: unknown): AvatarState => {
     }
 
     state.icon.className = mergeClasses(
+      state.icon.className,
       avatarClassNames.icon,
       iconInitialsClassName,
       iconSizeClass,
       colorStyles[color],
       state.badge && styles.badgeCutout,
-      state.icon.className,
       getSlotClassNameProp_unstable(state.icon),
     );
   }