diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts index 9fb97fca8e9c30..3892ffb59ac5ce 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts @@ -18,8 +18,9 @@ export type MessageBarGroupProps = ComponentProps & { */ export type MessageBarGroupState = ComponentState & Pick & { - // 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[]; }; diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts index 82fd1a0fec3054..bdc96b5d9e631a 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts @@ -1,5 +1,4 @@ -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'; @@ -7,51 +6,12 @@ export const messageBarGroupClassNames: SlotClassNames = { 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; };