Feat(web): Add feature flag to suppress margin-collapsing when using Container #DS-1905

Author: dlouhak

packages/web/src/scss/components/Container/README.md

@@ -52,3 +52,22 @@ Responsive values can be defined using the `tablet` and `desktop` infixes.
 ```html
 <div class="Container text-center text-tablet-right text-desktop-left">Content with responsive text alignment</div>
 ```
+
+## Feature Flag: Block Formatting Context
+
+This feature is behind the `enable-v5-container-block-formatting-context` feature flag.
+
+When the feature flag is enabled, the Container root element will create a new block formatting context
+by applying `flow-root` display property. This helps to manage the layout of floated children elements
+inside the Container or prevent margin collapsing issues.
+
+For more info, see main [README][readme-feature-flags].
+
+### ⚠️ DEPRECATION NOTICE
+
+The property which sets a new block formatting context to Container root element will be part of the next major release.
+
+[What are deprecations?][readme-deprecations]
+
+[readme-feature-flags]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/README.md#feature-flags
+[readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/README.md#deprecations

packages/web/src/scss/components/Container/_Container.scss

@@ -1,4 +1,8 @@
+// 1. Establishes a new block formatting context,
+//    which contains its floats and prevents margin collapsing.
+
 @use '@tokens' as tokens;
+@use '../../settings/feature-flags';
 @use '../../tools/dictionaries';
 @use 'theme';
 @use 'tools';
@@ -9,6 +13,12 @@
     width: 100%;
     padding-inline: var(--container-padding-inline);
     margin-inline: auto;
+
+    // @deprecated The feature flag will be removed in the next major version.
+    // Migration: delete this feature flag and apply the flow-root display property by default.
+    @if feature-flags.$enable-v5-container-block-formatting-context {
+        display: flow-root; // 1.
+    }
 }
 
 @include dictionaries.generate-sizes(
@@ -20,3 +30,9 @@
 .Container:not(.Container--fluid) {
     max-width: var(--#{tokens.$css-variable-prefix}container-max-width, #{theme.$container-max-width});
 }
+
+// @deprecated The feature flag will be removed in the next major version.
+// Migration: delete this feature flag and apply the flow-root display property by default.
+.spirit-feature-enable-v5-container-block-formatting-context .Container {
+    display: flow-root; // 1.
+}

packages/web/src/scss/components/Container/index.html

@@ -64,4 +64,17 @@ <h2 class="docs-Heading">Text Alignment</h2>
   </div>
 </section>
 
+<section class="py-900 py-tablet-1000">
+  <div class="Container">
+    <h2 class="docs-Heading">Feature Flag: Block Formatting Context</h2>
+  </div>
+  <div class="spirit-feature-enable-v5-container-block-formatting-context">
+    <div class="Container">
+      <div class="docs-Box">
+        Container
+      </div>
+    </div>
+  </div>
+</section>
+
 {{/web/layout/default }}

packages/web/src/scss/settings/_feature-flags.scss

@@ -0,0 +1 @@
+$enable-v5-container-block-formatting-context: false !default;