refactor(MessageBar): delete and deprecate unused CSS animation code

packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts

@@ -18,8 +18,9 @@ export type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {
  */
 export type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &
   Pick<MessageBarGroupProps, 'animate'> & {
-    // TODO: deprecate these 2 obsolete props?
+    /** @deprecated property is unused; these CSS animations were replaced by motion components */
     enterStyles: string;
+    /** @deprecated property is unused; these CSS animations were replaced by motion components */
     exitStyles: string;
     children: React.ReactElement[];
   };

packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts

@@ -1,57 +1,17 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types';
 
 export const messageBarGroupClassNames: SlotClassNames<MessageBarGroupSlots> = {
   root: 'fui-MessageBarGroup',
 };
 
-// TODO: delete this obsolete code to save bytes?
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  base: {
-    animationFillMode: 'forwards',
-    animationDuration: tokens.durationNormal,
-  },
-
-  enter: {
-    animationName: {
-      from: {
-        opacity: 0,
-        transform: 'translateY(-100%)',
-      },
-      to: {
-        opacity: 1,
-        transform: 'translateY(0)',
-      },
-    },
-  },
-
-  exit: {
-    animationName: {
-      from: {
-        opacity: 1,
-      },
-      to: {
-        opacity: 0,
-      },
-    },
-  },
-});
-
 /**
  * Apply styling to the MessageBarGroup slots based on the state
  */
 export const useMessageBarGroupStyles_unstable = (state: MessageBarGroupState): MessageBarGroupState => {
   'use no memo';
 
-  const styles = useStyles();
   state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);
-  // TODO: delete these 2 lines to save bytes?
-  state.enterStyles = mergeClasses(styles.base, styles.enter);
-  state.exitStyles = mergeClasses(styles.base, styles.exit);
   return state;
 };