-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(MessageBar): migrate slide & fade to motion components (#33465)
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
- Loading branch information
1 parent
dc7bb66
commit 9c716b2
Showing
11 changed files
with
121 additions
and
125 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-message-bar-72abc821-ab32-4cac-8dd2-4c8dce4c810e.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "refactor(MessageBar): migrate slide & fade to motion components", | ||
| "packageName": "@fluentui/react-message-bar", | ||
| "email": "robertpenner@microsoft.com", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 94 additions & 0 deletions
94
...ents/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } from '@fluentui/react-motion'; | ||
| import { MessageBarGroupProps } from './MessageBarGroup.types'; | ||
|
|
||
| // TODO: import these atoms from react-motion-components-preview once they're available there | ||
|
|
||
| interface FadeAtomParams { | ||
| direction: PresenceDirection; | ||
| duration: number; | ||
| easing?: string; | ||
| fromValue?: number; | ||
| } | ||
|
|
||
| /** | ||
| * Generates a motion atom object for a fade in or fade out. | ||
| * @param direction - The functional direction of the motion: 'enter' or 'exit'. | ||
| * @param duration - The duration of the motion in milliseconds. | ||
| * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`. | ||
| * @param fromValue - The starting opacity value. Defaults to 0. | ||
| * @returns A motion atom object with opacity keyframes and the supplied duration and easing. | ||
| */ | ||
| const fadeAtom = ({ | ||
| direction, | ||
| duration, | ||
| easing = motionTokens.curveLinear, | ||
| fromValue = 0, | ||
| }: FadeAtomParams): AtomMotion => { | ||
| const keyframes = [{ opacity: fromValue }, { opacity: 1 }]; | ||
| if (direction === 'exit') { | ||
| keyframes.reverse(); | ||
| } | ||
| return { | ||
| keyframes, | ||
| duration, | ||
| easing, | ||
| }; | ||
| }; | ||
|
|
||
| /** | ||
| * Generates a motion atom object for an X or Y translation, from a specified distance to zero. | ||
| * @param direction - The functional direction of the motion: 'enter' or 'exit'. | ||
| * @param axis - The axis of the translation: 'X' or 'Y'. | ||
| * @param fromValue - The starting position of the slide; it can be a percentage or pixels. | ||
| * @param duration - The duration of the motion in milliseconds. | ||
| * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`. | ||
| */ | ||
| const slideAtom = ({ | ||
| direction, | ||
| axis, | ||
| fromValue, | ||
| duration, | ||
| easing = motionTokens.curveDecelerateMid, | ||
| }: { | ||
| direction: PresenceDirection; | ||
| axis: 'X' | 'Y'; | ||
| fromValue: string; | ||
| duration: number; | ||
| easing?: string; | ||
| }): AtomMotion => { | ||
| const keyframes = [{ transform: `translate${axis}(${fromValue})` }, { transform: `translate${axis}(0)` }]; | ||
| if (direction === 'exit') { | ||
| keyframes.reverse(); | ||
| } | ||
| return { | ||
| keyframes, | ||
| duration, | ||
| easing, | ||
| }; | ||
| }; | ||
|
|
||
| /** | ||
| * A presence component for a MessageBar to enter and exit from a MessageBarGroup. | ||
| * It has an optional enter transition of a slide-in and fade-in, | ||
| * when the `animate` prop is set to `'both'`. | ||
| * It always has an exit transition of a fade-out. | ||
| */ | ||
| export const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGroupProps['animate'] }>( | ||
| ({ animate }) => { | ||
| const duration = motionTokens.durationGentle; | ||
|
|
||
| return { | ||
| enter: | ||
| animate === 'both' | ||
| ? // enter with slide and fade | ||
| [ | ||
| fadeAtom({ direction: 'enter', duration }), | ||
| slideAtom({ direction: 'enter', axis: 'Y', fromValue: '-100%', duration }), | ||
| ] | ||
| : [], // no enter motion | ||
|
|
||
| // Always exit with a fade | ||
| exit: fadeAtom({ direction: 'exit', duration }), | ||
| }; | ||
| }, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 0 additions & 71 deletions
71
...ponents/react-message-bar/library/src/components/MessageBarGroup/MessageBarTransition.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 1 addition & 39 deletions
40
...act-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +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', | ||
| }; | ||
|
|
||
| /** | ||
| * 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); | ||
| state.enterStyles = mergeClasses(styles.base, styles.enter); | ||
| state.exitStyles = mergeClasses(styles.base, styles.exit); | ||
| return state; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters