From d301d48e6629625fcfc59441bfbba7395095c4fb Mon Sep 17 00:00:00 2001 From: veyaromain Date: Tue, 10 Sep 2024 13:19:34 +0200 Subject: [PATCH 1/6] feat(styles): remove deprecated line-height variables --- .../text/text-line-height.sample.scss | 5 ---- .../src/stories/utilities/text/text.docs.mdx | 12 --------- packages/styles/src/variables/_type.scss | 27 ------------------- 3 files changed, 44 deletions(-) delete mode 100644 packages/documentation/src/stories/utilities/text/text-line-height.sample.scss diff --git a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss deleted file mode 100644 index 21a38d9612..0000000000 --- a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@swisspost/design-system-styles/core' as post; - -.my-element { - line-height: post.$line-height-tiny; -} diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx index 08095558ac..2d838044bc 100644 --- a/packages/documentation/src/stories/utilities/text/text.docs.mdx +++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx @@ -4,7 +4,6 @@ import * as TextStories from './text.stories'; import SampleFontFamily from './text-font-family.sample.scss?raw'; import SampleFontSize from './text-font-size.sample.scss?raw'; import SampleFontWeight from './text-font-weight.sample.scss?raw'; -import SampleLineHeight from './text-line-height.sample.scss?raw'; import SampleColor from './text-color.sample.scss?raw'; @@ -80,19 +79,8 @@ import SampleColor from './text-color.sample.scss?raw'; ### Line Heights -
- Fixed-size line heights are deprecated in favor of relative line height utility classes. -
- -#### Set Line Height in SCSS - - - #### Possible Values ##### Fixed-size (deprecated) diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss index b33a0ab4dd..5351ea9260 100644 --- a/packages/styles/src/variables/_type.scss +++ b/packages/styles/src/variables/_type.scss @@ -53,19 +53,6 @@ $line-height-sm: 1; $line-height-copy: 1.5; $line-height-heading: 1.2; -// Deprecated -$line-height-tiny: $line-height-copy; -$line-height-small: $line-height-copy; -$line-height-regular: $line-height-copy; -$line-height-bigger-regular: $line-height-copy; -$line-height-medium: $line-height-copy; -$line-height-large: $line-height-heading; -$line-height-small-big: $line-height-heading; -$line-height-big: $line-height-heading; -$line-height-bigger-big: $line-height-heading; -$line-height-small-huge: $line-height-heading; -$line-height-huge: $line-height-heading; - $font-weight-light: 300 !default; // Design System -> Frutiger Neue Light $font-weight-normal: 400 !default; // Design System -> Frutiger Neue Roman $font-weight-bold: 700 !default; // Design System -> Frutiger Neue Bold @@ -99,20 +86,6 @@ $font-size-map: ( 56: $font-size-56, ); -$line-heights: ( - 'tiny': $line-height-tiny, - 'small': $line-height-small, - 'regular': $line-height-regular, - 'bigger-regular': $line-height-bigger-regular, - 'medium': $line-height-medium, - 'large': $line-height-large, - 'small-big': $line-height-small-big, - 'big': $line-height-big, - 'bigger-big': $line-height-bigger-big, - 'small-huge': $line-height-small-huge, - 'huge': $line-height-huge, -); - // Deprecated $font-curve-tiny: ( 'xs': $font-size-tiny, From 6cf94868704b04812df457fb1c835af48f97fd80 Mon Sep 17 00:00:00 2001 From: veyaromain Date: Tue, 10 Sep 2024 13:23:46 +0200 Subject: [PATCH 2/6] Revert "feat(styles): remove deprecated line-height variables" This reverts commit d301d48e6629625fcfc59441bfbba7395095c4fb. --- .../text/text-line-height.sample.scss | 5 ++++ .../src/stories/utilities/text/text.docs.mdx | 12 +++++++++ packages/styles/src/variables/_type.scss | 27 +++++++++++++++++++ 3 files changed, 44 insertions(+) create mode 100644 packages/documentation/src/stories/utilities/text/text-line-height.sample.scss diff --git a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss new file mode 100644 index 0000000000..21a38d9612 --- /dev/null +++ b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss @@ -0,0 +1,5 @@ +@use '@swisspost/design-system-styles/core' as post; + +.my-element { + line-height: post.$line-height-tiny; +} diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx index 2d838044bc..08095558ac 100644 --- a/packages/documentation/src/stories/utilities/text/text.docs.mdx +++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx @@ -4,6 +4,7 @@ import * as TextStories from './text.stories'; import SampleFontFamily from './text-font-family.sample.scss?raw'; import SampleFontSize from './text-font-size.sample.scss?raw'; import SampleFontWeight from './text-font-weight.sample.scss?raw'; +import SampleLineHeight from './text-line-height.sample.scss?raw'; import SampleColor from './text-color.sample.scss?raw'; @@ -79,8 +80,19 @@ import SampleColor from './text-color.sample.scss?raw'; ### Line Heights +
+ Fixed-size line heights are deprecated in favor of relative line height utility classes. +
+ +#### Set Line Height in SCSS + + + #### Possible Values ##### Fixed-size (deprecated) diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss index 5351ea9260..b33a0ab4dd 100644 --- a/packages/styles/src/variables/_type.scss +++ b/packages/styles/src/variables/_type.scss @@ -53,6 +53,19 @@ $line-height-sm: 1; $line-height-copy: 1.5; $line-height-heading: 1.2; +// Deprecated +$line-height-tiny: $line-height-copy; +$line-height-small: $line-height-copy; +$line-height-regular: $line-height-copy; +$line-height-bigger-regular: $line-height-copy; +$line-height-medium: $line-height-copy; +$line-height-large: $line-height-heading; +$line-height-small-big: $line-height-heading; +$line-height-big: $line-height-heading; +$line-height-bigger-big: $line-height-heading; +$line-height-small-huge: $line-height-heading; +$line-height-huge: $line-height-heading; + $font-weight-light: 300 !default; // Design System -> Frutiger Neue Light $font-weight-normal: 400 !default; // Design System -> Frutiger Neue Roman $font-weight-bold: 700 !default; // Design System -> Frutiger Neue Bold @@ -86,6 +99,20 @@ $font-size-map: ( 56: $font-size-56, ); +$line-heights: ( + 'tiny': $line-height-tiny, + 'small': $line-height-small, + 'regular': $line-height-regular, + 'bigger-regular': $line-height-bigger-regular, + 'medium': $line-height-medium, + 'large': $line-height-large, + 'small-big': $line-height-small-big, + 'big': $line-height-big, + 'bigger-big': $line-height-bigger-big, + 'small-huge': $line-height-small-huge, + 'huge': $line-height-huge, +); + // Deprecated $font-curve-tiny: ( 'xs': $font-size-tiny, From eec9819a4e735362fa8658121295905360d0c23f Mon Sep 17 00:00:00 2001 From: veyaromain Date: Tue, 10 Sep 2024 13:37:05 +0200 Subject: [PATCH 3/6] feat(styles): removed deprecated line-height variables --- .changeset/sharp-crews-watch.md | 6 +++++ .../text/text-line-height.sample.scss | 2 +- .../src/stories/utilities/text/text.docs.mdx | 4 --- packages/styles/src/variables/_type.scss | 27 ------------------- 4 files changed, 7 insertions(+), 32 deletions(-) create mode 100644 .changeset/sharp-crews-watch.md diff --git a/.changeset/sharp-crews-watch.md b/.changeset/sharp-crews-watch.md new file mode 100644 index 0000000000..f44cf77a3f --- /dev/null +++ b/.changeset/sharp-crews-watch.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-styles': major +'@swisspost/design-system-documentation': minor +--- + +Removed deprecated line-height variables. diff --git a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss index 21a38d9612..dd3e2596a3 100644 --- a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss +++ b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss @@ -1,5 +1,5 @@ @use '@swisspost/design-system-styles/core' as post; .my-element { - line-height: post.$line-height-tiny; + line-height: post.$line-height-regular; } diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx index 08095558ac..15dc2b296e 100644 --- a/packages/documentation/src/stories/utilities/text/text.docs.mdx +++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx @@ -80,10 +80,6 @@ import SampleColor from './text-color.sample.scss?raw'; ### Line Heights -
- Fixed-size line heights are deprecated in favor of relative line height utility classes. -
- #### Set Line Height in SCSS diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss index b33a0ab4dd..5351ea9260 100644 --- a/packages/styles/src/variables/_type.scss +++ b/packages/styles/src/variables/_type.scss @@ -53,19 +53,6 @@ $line-height-sm: 1; $line-height-copy: 1.5; $line-height-heading: 1.2; -// Deprecated -$line-height-tiny: $line-height-copy; -$line-height-small: $line-height-copy; -$line-height-regular: $line-height-copy; -$line-height-bigger-regular: $line-height-copy; -$line-height-medium: $line-height-copy; -$line-height-large: $line-height-heading; -$line-height-small-big: $line-height-heading; -$line-height-big: $line-height-heading; -$line-height-bigger-big: $line-height-heading; -$line-height-small-huge: $line-height-heading; -$line-height-huge: $line-height-heading; - $font-weight-light: 300 !default; // Design System -> Frutiger Neue Light $font-weight-normal: 400 !default; // Design System -> Frutiger Neue Roman $font-weight-bold: 700 !default; // Design System -> Frutiger Neue Bold @@ -99,20 +86,6 @@ $font-size-map: ( 56: $font-size-56, ); -$line-heights: ( - 'tiny': $line-height-tiny, - 'small': $line-height-small, - 'regular': $line-height-regular, - 'bigger-regular': $line-height-bigger-regular, - 'medium': $line-height-medium, - 'large': $line-height-large, - 'small-big': $line-height-small-big, - 'big': $line-height-big, - 'bigger-big': $line-height-bigger-big, - 'small-huge': $line-height-small-huge, - 'huge': $line-height-huge, -); - // Deprecated $font-curve-tiny: ( 'xs': $font-size-tiny, From 0a3ee66e0bf206ffd41ca1a08aaa8f9df8623a68 Mon Sep 17 00:00:00 2001 From: veyaromain Date: Tue, 10 Sep 2024 15:07:15 +0200 Subject: [PATCH 4/6] feat(documentation): created migration guide v8 to v9 --- .../migration-guide/migration-guide.docs.mdx | 3 + .../migrationv8-9.component.ts | 79 +++++++++++++++++++ .../migration-guide/setup.component.ts | 3 + 3 files changed, 85 insertions(+) create mode 100644 packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx b/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx index 3f45e7d385..66ca995ea4 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx +++ b/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx @@ -6,6 +6,7 @@ import './migrationv4-5.component'; import './migrationv5-6.component'; import './migrationv6-7.component'; import './migrationv7-8.component'; +import './migrationv8-9.component'; @@ -25,4 +26,6 @@ import './migrationv7-8.component'; + + 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 new file mode 100644 index 0000000000..a64e7a60e2 --- /dev/null +++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts @@ -0,0 +1,79 @@ +import { html, LitElement, nothing } from 'lit'; +import { _templateAutoIcon } from '@/stories/getting-started/migration-guide/util/template.util'; +import { customElement, property } from 'lit/decorators.js'; + +@customElement('migration-version-8-9') +export class MigrationV89Component extends LitElement { + @property({ type: Number }) currentVersion?: number; + @property({ type: String }) environment?: string; + @property({ type: Boolean }) angular?: boolean; + + createRenderRoot() { + /** + * Render template without shadow DOM. + */ + return this; + } + + render() { + if (!this.currentVersion || this.currentVersion > 8) return nothing; + + return html` + +
+
    +
  1. +

    Component Migration 🤓

    + ${this.angular + ? html` +

    + Changes flagged with the ⚙️ symbol should be automatically migrated with our + migration tool. +

    + ` + : nothing} + +
    +

    Styles

    + +
      +
    • +

      + Removed deprecated line-height variables + breaking +

      +
        +
      • $line-height-tiny
        • +
      • $line-height-small
        • +
      • $line-height-regular
        • +
      • $line-height-bigger-regular
        • +
      • $line-height-medium
        • +
      • $line-height-large
        • +
      • $line-height-small-big
        • +
      • $line-height-big
        • +
      • $line-height-bigger-big
        • +
      • $line-height-small-huge
        • +
      • $line-height-huge
        • +
      +
      • +
    +
    +
    2. +
+
+ `; + } + + private _templateAutoIconAngular() { + return html` ${this.angular ? _templateAutoIcon() : nothing} `; + } +} diff --git a/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts index a2e9bbc344..d72aab9461 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts +++ b/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts @@ -27,6 +27,9 @@ export class SetupComponent extends LitElement { id="docs_Default_ExampleSelect" class="form-select form-select-lg" > + From 8ba61fd67e4eee42c65d2e52b164c1535c0a6093 Mon Sep 17 00:00:00 2001 From: veyaromain Date: Tue, 10 Sep 2024 15:35:57 +0200 Subject: [PATCH 5/6] feat(styles): improve text-line-height.sample.scss with the remaining variables --- .../src/stories/utilities/text/text-line-height.sample.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss index dd3e2596a3..605372b960 100644 --- a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss +++ b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss @@ -1,5 +1,5 @@ @use '@swisspost/design-system-styles/core' as post; .my-element { - line-height: post.$line-height-regular; + line-height: post.$line-height-sm; } From 96b1426e809e4f47b0e0894c7af902f370de6585 Mon Sep 17 00:00:00 2001 From: veyaromain Date: Tue, 10 Sep 2024 15:39:07 +0200 Subject: [PATCH 6/6] improve for PR --- .../migration-guide/migrationv8-9.component.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) 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 a64e7a60e2..e0d87a3891 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 @@ -33,14 +33,6 @@ export class MigrationV89Component extends LitElement {

  1. Component Migration 🤓

    - ${this.angular - ? html` -

    - Changes flagged with the ⚙️ symbol should be automatically migrated with our - migration tool. -

    - ` - : nothing}

    Styles

    @@ -52,6 +44,7 @@ export class MigrationV89Component extends LitElement { breaking

      +
    • $line-heights
    • $line-height-tiny
    • $line-height-small
    • $line-height-regular