refactor(modal): simplify css api

gravity-ui · Feb 19, 2025 · 2d44126 · 2d44126
1 parent 80f549f
commit 2d44126
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 18 deletions.
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
@@ -2,10 +2,6 @@
 
 $block: '.#{variables.$ns}modal';
 $modal-default-border-radius: 5px;
-$modal-content-height: auto;
-$modal-content-width: auto;
-$modal-wrapper-height: auto;
-$modal-wrapper-width: auto;
 
 #{$block} {
     display: block;
@@ -34,25 +30,21 @@ $modal-wrapper-width: auto;
     &__content-aligner {
         min-width: 100%;
         min-height: 100%;
-        height: var(--g-modal-wrapper-height, #{$modal-wrapper-height});
 
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }
 
     &__content-wrapper {
-        width: var(--g-modal-wrapper-width, #{$modal-wrapper-width});
-        height: var(--g-modal-wrapper-height, #{$modal-wrapper-height});
-
         margin: var(--g-modal-margin, #{variables.$modal-default-margin});
         border-radius: var(--g-modal-border-radius, #{$modal-default-border-radius});
         overflow-x: hidden;
     }
 
     &__content {
-        height: var(--g-modal-content-height, #{modal-content-height});
-        width: var(--g-modal-content-width, #{$modal-content-width});
+        height: var(--g-modal-height, auto);
+        width: var(--g-modal-width, auto);
 
         background-color: var(--g-color-base-modal);
         border-radius: var(--g-modal-border-radius, #{$modal-default-border-radius});

diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
@@ -58,11 +58,9 @@ const [open, setOpen] = useState(false);
 
 ## CSS API
 
-| Name                       | Description                       |
-| :------------------------- | :-------------------------------- |
-| `--g-modal-margin`         | Margin around the `Modal` content |
-| `--g-modal-border-radius`  | `Modal` content border radius     |
-| `--g-modal-wrapper-width`  | `Modal` wrapper width             |
-| `--g-modal-wrapper-height` | `Modal` wrapper height            |
-| `--g-modal-content-width`  | `Modal` content width             |
-| `--g-modal-content-height` | `Modal` content height            |
+| Name                      | Description                       |
+| :------------------------ | :-------------------------------- |
+| `--g-modal-margin`        | Margin around the `Modal` content |
+| `--g-modal-border-radius` | `Modal` content border radius     |
+| `--g-modal-width`         | `Modal` content width             |
+| `--g-modal-height`        | `Modal` content height            |