diff --git a/packages/core/src/components/AttentionBox/AttentionBox.module.scss b/packages/core/src/components/AttentionBox/AttentionBox.module.scss index 0aac00e618..94425c6bad 100644 --- a/packages/core/src/components/AttentionBox/AttentionBox.module.scss +++ b/packages/core/src/components/AttentionBox/AttentionBox.module.scss @@ -1,3 +1,17 @@ +@keyframes entryAnimation { + 0% { + transform: translateY(-10px); + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} + .attentionBox { position: relative; padding: 12px var(--spacing-medium); @@ -6,6 +20,10 @@ max-width: 100%; height: fit-content; + &.entryAnimation { + animation: entryAnimation 200ms cubic-bezier(0.00, 0.00, 0.40, 1.00) forwards; + } + // Overriding on primary icon color should be with bigger specificity than the original color & .closeIconWrapper .closeIcon { color: var(--primary-text-color); diff --git a/packages/core/src/components/AttentionBox/AttentionBox.tsx b/packages/core/src/components/AttentionBox/AttentionBox.tsx index e2c363122c..064d46e330 100644 --- a/packages/core/src/components/AttentionBox/AttentionBox.tsx +++ b/packages/core/src/components/AttentionBox/AttentionBox.tsx @@ -36,6 +36,8 @@ export interface AttentionBoxProps extends VibeComponentProps { onClose?: (event: React.MouseEvent) => void; compact?: boolean; closeButtonAriaLabel?: string; + /** Enables an entry animation when the component appears */ + entryAnimation?: boolean; } const AttentionBox: React.FC & { @@ -59,7 +61,8 @@ const AttentionBox: React.FC & { compact = false, id, "data-testid": dataTestId, - closeButtonAriaLabel = "Close" + closeButtonAriaLabel = "Close", + entryAnimation = false }) => { const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]); @@ -71,7 +74,9 @@ const AttentionBox: React.FC & { return (