feat: use scss vars; updated props and styles names to have "has" pre…

…fix; fixed animation
gravity-ui · Jan 17, 2024 · 3fe9fd3 · 3fe9fd3
1 parent 969cb5c
commit 3fe9fd3
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 22 deletions.
diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss
@@ -7,9 +7,11 @@ $block: '.#{variables.$ns}dialog';
     display: flex;
     flex-direction: column;
 
-    &_with-scroll {
+    &_has-scroll {
         overflow-y: auto;
-        max-height: calc(100vh - var(--yc-modal-margin) * 2);
+        max-height: calc(
+            100vh - calc(var(--g-modal-margin, #{variables.$modal-default-margin})) * 2
+        );
     }
 
     &_size {

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -126,7 +126,7 @@ export class Dialog extends React.Component<DialogInnerProps> {
                         {
                             size,
                             'has-close': hasCloseButton,
-                            'with-scroll': contentOverflow === 'auto',
+                            'has-scroll': contentOverflow === 'auto',
                         },
                         className,
                     )}

diff --git a/src/components/Dialog/DialogBody/DialogBody.scss b/src/components/Dialog/DialogBody/DialogBody.scss
@@ -7,7 +7,7 @@ $block: '.#{variables.$ns}dialog-body';
     flex: 1 1 auto;
     overflow-y: auto;
 
-    &_with-dividers {
+    &_has-dividers {
         border-top: 1px solid var(--g-color-line-generic);
         border-bottom: 1px solid var(--g-color-line-generic);
     }

diff --git a/src/components/Dialog/DialogBody/DialogBody.tsx b/src/components/Dialog/DialogBody/DialogBody.tsx
@@ -9,11 +9,11 @@ const b = block('dialog-body');
 export interface DialogBodyProps {
     children: React.ReactNode;
     className?: string;
-    withDividers?: boolean;
+    hasDividers?: boolean;
 }
 
 export function DialogBody(props: DialogBodyProps) {
-    const {className, withDividers = false} = props;
+    const {className, hasDividers = true} = props;
 
-    return <div className={b({'with-dividers': withDividers}, className)}>{props.children}</div>;
+    return <div className={b({'has-dividers': hasDividers}, className)}>{props.children}</div>;
 }
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
@@ -19,7 +19,7 @@ $block: '.#{variables.$ns}modal';
     -webkit-overflow-scrolling: touch;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-    &__content-aligner-wrapper {
+    &__content-aligner {
         min-width: 100%;
         min-height: 100%;
 
@@ -28,17 +28,19 @@ $block: '.#{variables.$ns}modal';
         justify-content: center;
     }
 
-    &__content-container {
-        margin: var(--yc-modal-margin);
-        background-color: var(--g-color-base-modal);
-        border-radius: var(--yc-modal-border-radius);
+    &__content-wrapper {
+        margin: var(--g-modal-margin, #{variables.$modal-default-margin});
+        border-radius: var(--g-modal-border-radius, #{variables.$modal-default-border-radius});
         overflow-x: hidden;
     }
 
     &__content {
-        &_with-scroll {
+        background-color: var(--g-color-base-modal);
+        &_has-scroll {
             overflow-y: auto;
-            max-height: calc(100vh - (var(--yc-modal-margin) * 2));
+            max-height: calc(
+                100vh - calc(var(--g-modal-margin, #{variables.$modal-default-margin})) * 2
+            );
         }
     }
 
@@ -101,8 +103,3 @@ $block: '.#{variables.$ns}modal';
         transform: scale(1);
     }
 }
-
-:root {
-    --yc-modal-border-radius: 5px;
-    --yc-modal-margin: 20px;
-}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -131,8 +131,8 @@ export function Modal({
                 }}
             >
                 <div ref={containerRef} style={style} className={b({open}, className)} data-qa={qa}>
-                    <div className={b('content-aligner-wrapper')}>
-                        <div className={b('content-container')}>
+                    <div className={b('content-aligner')}>
+                        <div className={b('content-wrapper')}>
                             <FocusTrap
                                 enabled={!disableFocusTrap && focusTrap && open && !inTransition}
                                 autoFocus={!disableAutoFocus && autoFocus}
@@ -146,7 +146,7 @@ export function Modal({
                                     aria-labelledby={ariaLabelledBy}
                                     className={b(
                                         'content',
-                                        {'with-scroll': contentOverflow === 'auto'},
+                                        {'has-scroll': contentOverflow === 'auto'},
                                         contentClassName,
                                     )}
                                     {...containerProps}

diff --git a/src/components/variables.scss b/src/components/variables.scss
@@ -5,3 +5,5 @@ $s-height: 24px;
 $m-height: 28px;
 $l-height: 36px;
 $xl-height: 44px;
+$modal-default-border-radius: 5px;
+$modal-default-margin: 20px;