refactor(styles): add RTL support and animations for Modal, Footer, and other components

Author: RostyslavNihrutsa

src/components/Dialog/dialog.module.scss

@@ -22,13 +22,15 @@ $root: dialog;
     box-sizing: border-box;
     position: fixed;
     z-index: 9999;
-    transition:
-      background-color var(--transition-speed-sm),
-      color var(--transition-speed-sm);
+    transition: background-color var(--transition-speed-sm),
+    transform var(--transition-speed-sm),
+    opacity var(--transition-speed-sm),
+    color var(--transition-speed-sm);
     animation-timing-function: ease-in-out;
   }
 
   &-children {
+    flex: 1;
     display: flex;
     flex-direction: column;
     width: 100%;

src/components/Footer/footer.module.scss

@@ -9,37 +9,60 @@ $root: footer;
   padding: var(--footer-padding, var(--side-padding-sm));
   padding-top: 0;
   background-color: var(--footer-bg-color, transparent);
-  transition:
-    background-color var(--transition-speed-sm),
-    box-shadow var(--transition-speed-sm);
+  transition: background-color var(--transition-speed-sm),
+  box-shadow var(--transition-speed-sm);
+
+  [dir="rtl"] & {
+    flex-direction: row-reverse;
+  }
 
   &--shadow {
     box-shadow: var(--footer-box-shadow, 0px -4px 4px 0px rgba(0, 0, 0, 0.03));
   }
 
   &--reverse {
     flex-direction: row-reverse;
+
+    [dir="rtl"] & {
+      flex-direction: row;
+    }
   }
 
   &-children {
     width: 100%;
     display: flex;
     justify-content: space-between;
 
+    [dir="rtl"] & {
+      flex-direction: row-reverse;
+    }
+
     .#{$root}--reverse & {
       flex-direction: row-reverse;
+
+      [dir="rtl"] & {
+        flex-direction: row;
+      }
     }
   }
 
   &-left {
     display: flex;
     align-items: center;
     gap: var(--footer-left-gap, var(--footer-gap, 15px));
+
+    [dir="rtl"] & {
+      flex-direction: row-reverse;
+    }
   }
 
   &-right {
     display: flex;
     align-items: center;
     gap: var(--footer-right-gap, var(--footer-gap, 15px));
+
+    [dir="rtl"] & {
+      flex-direction: row-reverse;
+    }
   }
 }

src/components/ListItem/list-item.module.scss

@@ -7,6 +7,10 @@
   box-sizing: border-box;
   line-height: var(--list-item-line-height, var(--line-height, 1 rem));
 
+  [dir="rtl"] & {
+    flex-direction: row-reverse;
+  }
+
   &__center {
     flex-grow: 1;
     display: flex;

src/components/Modal/Modal.tsx

@@ -7,14 +7,15 @@ import {cloneOrCreateElement} from "../../utils";
 import {Dialog, DialogProps, dialogPropsKeys} from "../Dialog";
 import {IconButton, IconButtonProps} from "../IconButton";
 
-import {ModalRadius} from "./types";
+import {ModalRadius, ModalAnimation} from "./types";
 
 import styles from "./modal.module.scss";
 
 export interface ModalProps extends DialogProps {
     radius?: ModalRadius;
     closeButton?: boolean | IconButtonProps | ReactElement;
     onClose?: () => void;
+    animation?: ModalAnimation;
 }
 
 export const modalPropsKeys = new Set<keyof ModalProps>(["radius", "closeButton", "onClose", ...dialogPropsKeys]);
@@ -30,6 +31,7 @@ const Modal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (props, ref)
         className,
         overlayClassName,
         childrenClassName,
+        animation = ModalAnimation.FadeScale,
         ...other
     } = {...useComponentProps("modal"), ...props};
 
@@ -73,6 +75,7 @@ const Modal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (props, ref)
                 {
                     [styles["modal-content--fullscreen"]]: fullscreen,
                     [styles[`modal-content--${radius}-radius`]]: radius,
+                    [styles[`modal-content--${animation}-animation`]]: animation,
                 },
                 className
             )}

src/components/Modal/modal.module.scss

@@ -14,20 +14,38 @@ $root: modal;
     width: var(--modal-width, 90vw);
     max-width: var(--modal-max-width, 350px);
     max-height: var(--modal-max-height, 85vh);
+    height: auto;
     padding: var(--modal-padding, 0);
     border-radius: var(--modal-border-radius, 10px);
     box-shadow: var(--modal-box-shadow, 0 0 4px rgba(0, 0, 0, 0.5));
     background-color: var(--modal-bg-color, var(--bg-primary-color));
-    transition:
-      background-color var(--transition-speed-sm),
-      color var(--transition-speed-sm);
+    transition: background-color var(--transition-speed-sm),
+    transform var(--transition-speed-sm),
+    opacity var(--transition-speed-sm),
+    color var(--transition-speed-sm) !important;
 
     &[data-state="open"] {
-      animation-name: contentShow;
+      &.#{$root}-content {
+        &--fade-animation {
+          animation-name: fadeIn;
+        }
+
+        &--fadeScale-animation {
+          animation-name: fadeScaleIn;
+        }
+      }
     }
 
     &[data-state="closed"] {
-      animation-name: contentHide;
+      &.#{$root}-content {
+        &--fade-animation {
+          animation-name: fadeOut;
+        }
+
+        &--fadeScale-animation {
+          animation-name: fadeScaleIn;
+        }
+      }
     }
 
     &--fullscreen {
@@ -74,7 +92,7 @@ $root: modal;
   }
 }
 
-@keyframes contentShow {
+@keyframes fadeScaleIn {
   from {
     opacity: 0;
     transform: translate(-50%, -48%) scale(var(--modal-animation-content-scale, 0.96));
@@ -85,7 +103,7 @@ $root: modal;
   }
 }
 
-@keyframes contentHide {
+@keyframes fadeScaleOut {
   from {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
@@ -95,3 +113,21 @@ $root: modal;
     transform: translate(-50%, -48%) scale(var(--modal-animation-content-scale, 0.96));
   }
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

src/components/Modal/types.ts

@@ -4,3 +4,8 @@ export enum ModalRadius {
     Medium = "medium",
     Large = "large",
 }
+
+export enum ModalAnimation {
+    Fade = "fade",
+    FadeScale = "fadeScale",
+}

src/components/TextField/text-field.module.scss

@@ -30,6 +30,7 @@ $root: text-field;
     width: 100%;
     color: inherit;
     font-size: inherit;
+    font-weight: inherit;
     font-family: inherit;
     padding: 0;
     border: none;