feat: fixed animation; fixed readme file; added scss vars

gravity-ui · Jan 17, 2024 · a4779d2 · a4779d2
1 parent 3ea9996
commit a4779d2
Show file tree

Hide file tree

Showing 8 changed files with 30 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-block-start: 1px solid var(--g-color-line-generic);
         border-block-end: 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 = false} = 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
@@ -16,7 +16,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%;
 
@@ -25,17 +25,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
+            );
         }
     }
 
@@ -98,8 +100,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/Modal/README.md b/src/components/Modal/README.md
@@ -55,3 +55,10 @@ const [open, setOpen] = React.useState(false);
 | aria-label            | HTML `aria-label` attribute to describe the `Modal`                                 |     `string`      |                 |
 | aria-labelledby       | Id of the visible `Modal` caption element                                           |     `string`      |                 |
 | contentOverflow       | Define whether `Modal` has a scroll indicator inside or grows with the content      | `visible` `auto`  |    `visible`    |
+
+## CSS API
+
+| Name                      | Description                   |
+| :------------------------ | :---------------------------- |
+| `--g-modal-margin`        | Margin around Modal's content |
+| `--g-modal-border-radius` | Modal's content border radius |
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;