BREAKING CHANGE(web): Remove modal body padding feature class #DS-863

## Migration guide Remove feature class `.spirit-v1-modal-body-padding`, if used. No other actions are required. Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · 462a245 · 462a245
1 parent 0228281
commit 462a245
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 93 deletions.
diff --git a/packages/web/src/scss/components/Modal/README.md b/packages/web/src/scss/components/Modal/README.md
@@ -140,19 +140,6 @@ ModalBody holds the actual content of the Modal.
 </div>
 ```
 
-### Feature Flag to Enable Extra Padding
-
-⚠️ This feature flag is only temporary and will be removed in version 1. The extra vertical padding will be made default.
-
-To enable vertical padding on ModalBody, add the feature class `spirit-v1-modal-body-padding` to a parent element.
-The preferred one is the `body` element because this way it will affect all Modal components everywhere.
-
-```html
-<body class="spirit-v1-modal-body-padding">
-  <!-- Modal -->
-</body>
-```
-
 ## ModalFooter
 
 ModalFooter is the place for actions represented by the Button component.

diff --git a/packages/web/src/scss/components/Modal/_ModalBody.scss b/packages/web/src/scss/components/Modal/_ModalBody.scss
@@ -9,6 +9,7 @@
     flex: 1 1 auto;
     min-height: map.get(theme.$typography, mobile, font-size) * map.get(theme.$typography, mobile, line-height); // 1.
     padding-inline: theme.$common-padding-x;
+    padding-block: theme.$body-padding-y;
     overflow-x: hidden;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -17,8 +18,3 @@
         padding-inline: theme.$common-padding-x-tablet;
     }
 }
-
-// @deprecated Will be removed in the next major version.
-.spirit-v1-modal-body-padding .ModalBody {
-    padding-block: theme.$body-padding-y;
-}
diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
@@ -530,81 +530,6 @@ <h2 id="example_scroll_view_title" class="ModalHeader__title">
 
 </section>
 
-<section class="docs-Section spirit-v1-modal-body-padding">
-  <h2 class="docs-Heading">V1 Feature &mdash; Vertical Padding on Body</h2>
-
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_body_padding"
-    aria-controls="example_body_padding"
-    aria-expanded="false"
-  >
-    Open Modal
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_body_padding" class="Modal" aria-labelledby="example_body_paddingtitle">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_body_paddingtitle" class="ModalHeader__title">Modal Title</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_body_padding"
-          aria-controls="example_body_padding"
-          aria-expanded="false"
-        >
-          <svg class="Icon" width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button
-            type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-toggle="modal"
-            data-spirit-target="#example_2_1"
-            aria-controls="example_2_1"
-            aria-expanded="false"
-          >
-            Open stacked dialog
-          </button>
-        </div>
-      </footer>
-      <!-- ModalFooter: end -->
-
-    </article>
-    <!-- ModalDialog: end -->
-
-  </dialog>
-  <!-- Modal: end -->
-
-</section>
 <section class="docs-Section">
   <h2 class="docs-Heading">Stacking Modals</h2>