feat(styles): remove grid container helper classes

.changeset/sharp-baboons-smile.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': minor
+---
+
+Removed deprecated grid container helper classes.

packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts

@@ -58,6 +58,21 @@ export class MigrationV89Component extends LitElement {
                     <li><code>$line-height-huge</code></li>
                   </ul>
                 </li>
+                <li class="mb-3">
+                  <p>
+                    Removed grid container helper classes
+                    <span class="tag tag-sm tag-danger">breaking</span>
+                  </p>
+                  <ul>
+                    <li><code>.vertical-gutters</code></li>
+                    <li><code>.row.border-gutters</code></li>
+                    <li><code>.container-reset</code></li>
+                    <li>
+                      <code>.container-reset-left</code> and <code>.container-reset-right</code>
+                    </li>
+                    <li><code>.container-fluid-#{$breakpoint}</code></li>
+                  </ul>
+                </li>
               </ul>
             </section>
           </li>

packages/styles/src/components/grid.scss

@@ -86,85 +86,3 @@ $gutter-x-cache: 0;
     }
   }
 }
-
-//the following classes are all deprecated and wil be removed in next major version
-
-//deprecated
-.vertical-gutters {
-  margin-bottom: grid.$grid-gutter-width * -1;
-
-  > .col,
-  > [class*='col-'] {
-    padding-bottom: grid.$grid-gutter-width;
-  }
-}
-
-//deprecated
-// border-gutters class is used to manipulate border collapse
-.row.border-gutters {
-  margin-right: -(commons.$border-width);
-  margin-bottom: -(commons.$border-width);
-  margin-left: 0;
-
-  > .col,
-  > [class*='col-'] {
-    padding-right: commons.$border-width;
-    padding-bottom: commons.$border-width;
-    padding-left: 0;
-  }
-}
-
-//deprecated
-$container-cache: 0;
-
-//deprecated
-@each $breakpoint in grid.$grid-breakpoints-list {
-  $container-padding: map.get(grid.$grid-container-padding, $breakpoint);
-
-  // Ensure this breakpoint is only overwritten when the padding differs from the last breakpoint
-  @if ($container-cache != $container-padding) {
-    .container-reset {
-      @if $breakpoint == 'xs' {
-        margin-right: -($container-padding);
-        margin-left: -($container-padding);
-      } @else {
-        @include media-breakpoint-up($breakpoint) {
-          margin-right: -($container-padding);
-          margin-left: -($container-padding);
-        }
-      }
-    }
-
-    .container-reset-left {
-      @if $breakpoint== 'xs' {
-        margin-left: -($container-padding);
-      } @else {
-        @include media-breakpoint-up($breakpoint) {
-          margin-left: -($container-padding);
-        }
-      }
-    }
-
-    .container-reset-right {
-      @if $breakpoint== 'xs' {
-        margin-right: -($container-padding);
-      } @else {
-        @include media-breakpoint-up($breakpoint) {
-          margin-right: -($container-padding);
-        }
-      }
-    }
-  }
-
-  //deprecated
-  // Container fluid responsive needs to be written every time
-  .container-fluid-#{$breakpoint} {
-    @include media-breakpoint-only($breakpoint) {
-      padding-right: spacing.$spacer;
-      padding-left: spacing.$spacer;
-    }
-  }
-
-  //deprecated
-  $container-cache: $container-padding;
-}

packages/styles/src/layouts/portal/_grid.scss

@@ -48,38 +48,4 @@
       margin-left: 0;
     }
   }
-
-  //deprecated
-  .vertical-gutters {
-    margin-bottom: -(portal-variables.$grid-gutter-width-rg);
-
-    > .col,
-    > [class*='col-'] {
-      padding-bottom: portal-variables.$grid-gutter-width-rg;
-    }
-  }
-}
-
-//deprecated
-@each $breakpoint in grid.$grid-breakpoints-list {
-  .container-fluid-#{$breakpoint} {
-    @include media-breakpoint-only($breakpoint) {
-      padding-right: 0;
-      padding-left: 0;
-    }
-  }
-}
-
-//deprecated
-.container-reset-right-rg-up {
-  @include media-breakpoint-up(rg) {
-    margin-left: 0;
-  }
-}
-
-//deprecated
-.container-reset-left-rg-up {
-  @include media-breakpoint-up(rg) {
-    margin-right: 0;
-  }
 }