diff --git a/src/flashbar/collapsible-flashbar.tsx b/src/flashbar/collapsible-flashbar.tsx index 695428e8fe..54066b6929 100644 --- a/src/flashbar/collapsible-flashbar.tsx +++ b/src/flashbar/collapsible-flashbar.tsx @@ -45,7 +45,7 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro setInitialAnimationState(rects); }, [getElementsToAnimate]); - const { animateFlash, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({ + const { baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({ items, ...restProps, onItemsAdded: newItems => { @@ -77,6 +77,8 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro setIsFlashbarStackExpanded(false); } + const animateFlash = !isReducedMotion; + function toggleCollapseExpand() { sendToggleMetric(items.length, !isFlashbarStackExpanded); if (!isReducedMotion) { diff --git a/src/flashbar/common.tsx b/src/flashbar/common.tsx index 5d2cd72d0d..b4f42e75e2 100644 --- a/src/flashbar/common.tsx +++ b/src/flashbar/common.tsx @@ -35,7 +35,6 @@ export function useFlashbar({ const isVisualRefresh = useVisualRefresh(); const [previousItems, setPreviousItems] = useState>(items); const [nextFocusId, setNextFocusId] = useState(null); - const animateFlash = !isReducedMotion && isVisualRefresh; if (isDevelopment) { if (items?.some(item => item.ariaRole === 'alert' && !item.id)) { @@ -72,7 +71,6 @@ export function useFlashbar({ return { allItemsHaveId, - animateFlash, baseProps, breakpoint, isReducedMotion, diff --git a/src/flashbar/non-collapsible-flashbar.tsx b/src/flashbar/non-collapsible-flashbar.tsx index 9e2c49e3d7..ababa10d6b 100644 --- a/src/flashbar/non-collapsible-flashbar.tsx +++ b/src/flashbar/non-collapsible-flashbar.tsx @@ -15,11 +15,10 @@ import { useInternalI18n } from '../i18n/context'; export { FlashbarProps }; export default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProps }: FlashbarProps) { - const { allItemsHaveId, animateFlash, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef } = - useFlashbar({ - items, - ...restProps, - }); + const { allItemsHaveId, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef } = useFlashbar({ + items, + ...restProps, + }); const i18n = useInternalI18n('flashbar'); const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel); @@ -38,6 +37,7 @@ export default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProp */ const motionDisabled = isReducedMotion || !isVisualRefresh || !allItemsHaveId; + const animateFlash = !isReducedMotion && isVisualRefresh; /** * If the flashbar is flat and motion is `enabled` then the adding and removing of items * from the flashbar will render with visual transitions.