From 52392930575690656a4c94aab88e3ee63f03a2ab Mon Sep 17 00:00:00 2001 From: veyaromain Date: Tue, 10 Sep 2024 16:14:52 +0200 Subject: [PATCH 1/3] feat(styles): removed grid container helper classes --- .changeset/sharp-baboons-smile.md | 6 ++ .../migrationv8-9.component.ts | 15 ++++ packages/styles/src/components/grid.scss | 69 ------------------- packages/styles/src/layouts/portal/_grid.scss | 34 --------- 4 files changed, 21 insertions(+), 103 deletions(-) create mode 100644 .changeset/sharp-baboons-smile.md diff --git a/.changeset/sharp-baboons-smile.md b/.changeset/sharp-baboons-smile.md new file mode 100644 index 0000000000..66502802ad --- /dev/null +++ b/.changeset/sharp-baboons-smile.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-styles': major +'@swisspost/design-system-documentation': minor +--- + +Removed grid container helper classes. diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts index e0d87a3891..557918a649 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts +++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts @@ -58,6 +58,21 @@ export class MigrationV89Component extends LitElement {
  • $line-height-huge
    • +
  • +

    + Remove grid container helper classes + breaking +

    + +
    • diff --git a/packages/styles/src/components/grid.scss b/packages/styles/src/components/grid.scss index b087c9f5a7..0fc7eee641 100644 --- a/packages/styles/src/components/grid.scss +++ b/packages/styles/src/components/grid.scss @@ -90,31 +90,6 @@ $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; @@ -122,50 +97,6 @@ $container-cache: 0; @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; } diff --git a/packages/styles/src/layouts/portal/_grid.scss b/packages/styles/src/layouts/portal/_grid.scss index 08cec5b241..b304774879 100644 --- a/packages/styles/src/layouts/portal/_grid.scss +++ b/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; - } } From e1a0228a2cb50bec233f518257a28a58f05ff5e5 Mon Sep 17 00:00:00 2001 From: veyaromain Date: Tue, 10 Sep 2024 16:20:53 +0200 Subject: [PATCH 2/3] feat(styles): improve migration guide --- .../getting-started/migration-guide/migrationv8-9.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts index 557918a649..d360ccbeca 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts +++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts @@ -60,7 +60,7 @@ export class MigrationV89Component extends LitElement {

  • - Remove grid container helper classes + Removed grid container helper classes breaking

      From f09d4710282ba98aa94c4cede7d809fa949b982b Mon Sep 17 00:00:00 2001 From: Romain Veya Date: Tue, 24 Sep 2024 08:09:12 +0200 Subject: [PATCH 3/3] feat(stykes): improve for PR --- .changeset/sharp-baboons-smile.md | 2 +- packages/styles/src/components/grid.scss | 13 ------------- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/.changeset/sharp-baboons-smile.md b/.changeset/sharp-baboons-smile.md index 66502802ad..79fd2cd2e9 100644 --- a/.changeset/sharp-baboons-smile.md +++ b/.changeset/sharp-baboons-smile.md @@ -3,4 +3,4 @@ '@swisspost/design-system-documentation': minor --- -Removed grid container helper classes. +Removed deprecated grid container helper classes. diff --git a/packages/styles/src/components/grid.scss b/packages/styles/src/components/grid.scss index 0fc7eee641..76358733eb 100644 --- a/packages/styles/src/components/grid.scss +++ b/packages/styles/src/components/grid.scss @@ -87,16 +87,3 @@ $gutter-x-cache: 0; } } } - -//the following classes are all deprecated and wil be removed in next major version - -//deprecated -$container-cache: 0; - -//deprecated -@each $breakpoint in grid.$grid-breakpoints-list { - $container-padding: map.get(grid.$grid-container-padding, $breakpoint); - - //deprecated - $container-cache: $container-padding; -}