From 1c2d057285e13406ad658304cc20b967b89d8421 Mon Sep 17 00:00:00 2001 From: Machado da Silva Hugo Date: Tue, 2 Sep 2025 15:50:45 +0200 Subject: [PATCH 1/7] chore(utilities): align viewport-based classes with named percentage sizes --- .changeset/upset-hats-care.md | 5 +++ packages/styles/src/utilities/_variables.scss | 32 ++++--------------- 2 files changed, 11 insertions(+), 26 deletions(-) create mode 100644 .changeset/upset-hats-care.md diff --git a/.changeset/upset-hats-care.md b/.changeset/upset-hats-care.md new file mode 100644 index 0000000000..61258be44c --- /dev/null +++ b/.changeset/upset-hats-care.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': minor +--- + +Aligned viewport-based utility classes with named percentage sizes. diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss index 9603a985b0..9184c83e09 100644 --- a/packages/styles/src/utilities/_variables.scss +++ b/packages/styles/src/utilities/_variables.scss @@ -30,26 +30,6 @@ $position-values: ( 100: 100%, ); -$vw-values: ( - 0: 0, - 25: 25vw, - 33: 25vw, - 50: 50vw, - 66: 66vw, - 75: 75vw, - 100: 100vw, -); - -$vh-values: ( - 0: 0, - 25: 25vh, - 33: 33vh, - 50: 50vh, - 66: 66vh, - 75: 75vh, - 100: 100vh, -); - $utilities: ( 'border': ( property: border, @@ -214,37 +194,37 @@ $utilities: ( responsive: true, property: width, class: vw, - values: $vw-values, + values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), ), 'viewport-height': ( responsive: true, property: height, class: vh, - values: $vh-values, + values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), ), 'min-viewport-width': ( responsive: true, property: min-width, class: min-vw, - values: $vw-values, + values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), ), 'min-viewport-height': ( responsive: true, property: min-height, class: min-vh, - values: $vh-values, + values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), ), 'max-viewport-width': ( responsive: true, property: max-width, class: max-vw, - values: $vw-values, + values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), ), 'max-viewport-height': ( responsive: true, property: max-height, class: max-vh, - values: $vh-values, + values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), ), 'align': ( property: vertical-align, From c9c0d900f8f939ee38491543314334a5327b9bb2 Mon Sep 17 00:00:00 2001 From: Hugo Date: Tue, 16 Sep 2025 07:32:17 +0200 Subject: [PATCH 2/7] Update .changeset/upset-hats-care.md Co-authored-by: Lea --- .changeset/upset-hats-care.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/upset-hats-care.md b/.changeset/upset-hats-care.md index 61258be44c..e00d6454a0 100644 --- a/.changeset/upset-hats-care.md +++ b/.changeset/upset-hats-care.md @@ -1,5 +1,5 @@ --- -'@swisspost/design-system-styles': minor +'@swisspost/design-system-styles': major --- Aligned viewport-based utility classes with named percentage sizes. From 7fdd489cd5b8291402874cfa275c34c15e9d31c1 Mon Sep 17 00:00:00 2001 From: Machado da Silva Hugo Date: Tue, 16 Sep 2025 13:07:43 +0200 Subject: [PATCH 3/7] fix comments --- packages/styles/src/utilities/_variables.scss | 17 +++++++----- packages/styles/src/variables/_sizing.scss | 26 +++++++++++++++++++ 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss index 9184c83e09..6744969fbb 100644 --- a/packages/styles/src/utilities/_variables.scss +++ b/packages/styles/src/utilities/_variables.scss @@ -194,37 +194,42 @@ $utilities: ( responsive: true, property: width, class: vw, - values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), + values: map.merge(utilities_formatted.$gap, $post-viewport-width-sizes), ), + 'viewport-height': ( responsive: true, property: height, class: vh, - values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), + values: map.merge(utilities_formatted.$gap, $post-viewport-height-sizes), ), + 'min-viewport-width': ( responsive: true, property: min-width, class: min-vw, - values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), + values: map.merge(utilities_formatted.$gap, $post-viewport-width-sizes), ), + 'min-viewport-height': ( responsive: true, property: min-height, class: min-vh, - values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), + values: map.merge(utilities_formatted.$gap, $post-viewport-height-sizes), ), + 'max-viewport-width': ( responsive: true, property: max-width, class: max-vw, - values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), + values: map.merge(utilities_formatted.$gap, $post-viewport-width-sizes), ), + 'max-viewport-height': ( responsive: true, property: max-height, class: max-vh, - values: map.merge(utilities_formatted.$gap, $post-percentage-sizes), + values: map.merge(utilities_formatted.$gap, $post-viewport-height-sizes), ), 'align': ( property: vertical-align, diff --git a/packages/styles/src/variables/_sizing.scss b/packages/styles/src/variables/_sizing.scss index 6061413772..c46ff6c437 100644 --- a/packages/styles/src/variables/_sizing.scss +++ b/packages/styles/src/variables/_sizing.scss @@ -15,3 +15,29 @@ $post-percentage-sizes: map.merge( ), $post-percentage-sizes ); + +$post-viewport-height-sizes: () !default; +$post-viewport-height-sizes: map.merge( + ( + 'quarter': 25vh, + 'third': 33vh, + 'half': 50vh, + 'two-thirds': 66vh, + 'three-quarters': 75vh, + 'full': 100vh, + ), + $post-viewport-height-sizes +); + +$post-viewport-width-sizes: () !default; +$post-viewport-width-sizes: map.merge( + ( + 'quarter': 25vw, + 'third': 33vw, + 'half': 50vw, + 'two-thirds': 75vw, + 'three-quarters': 75vw, + 'full': 100vw, + ), + $post-viewport-width-sizes +); From 50a803fa476653074bd745f412e5a8cc5db77b37 Mon Sep 17 00:00:00 2001 From: Machado da Silva Hugo Date: Tue, 23 Sep 2025 09:45:34 +0200 Subject: [PATCH 4/7] fix comments: update documentation --- .../stories/utilities/sizing/sizing.docs.mdx | 11 ++++++----- .../utilities/sizing/sizing.snapshot.stories.ts | 17 +---------------- packages/styles/src/utilities/_variables.scss | 12 ++++++------ packages/styles/src/variables/_sizing.scss | 2 +- 4 files changed, 14 insertions(+), 28 deletions(-) diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx index 7d3a4d8cbd..534aa7f58a 100644 --- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx +++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx @@ -54,9 +54,10 @@ See - `min-vh-100` -> - `min-vw-100` -> - `vh-100` -> - `vw-100` +> - `vw-quarter`, `vw-third`, `vw-half`, `vw-two-thirds`, `vw-three-quarters`, `vw-full` +> - `vh-quarter`, `vh-third`, `vh-half`, `vh-two-thirds`, `vh-three-quarters`, `vh-full` +> - `min-vw-{suffix}`, `min-vh-{suffix}` +> - `max-vw-{suffix}`, `max-vh-{suffix}` diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts index 0ddd51a5ef..d7082b5552 100644 --- a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts @@ -26,21 +26,6 @@ const samples = [ { w: 'full', h: 'half', maxW: 'full', minW: 'third', maxH: 'auto', minH: 'auto' }, ]; -const vpSamples = [ - { w: '33', h: '100', maxvW: '33', minvW: '100', maxvH: '50', minvH: '66' }, - { w: '50', h: '50', maxvW: '25', minvW: '50', maxvH: '100', minvH: '25' }, - { w: '50', h: '25', maxvW: '50', minvW: '25', maxvH: '66', minvH: '33' }, - { - w: '75', - h: '25', - maxvW: '75', - minvW: '25', - maxvH: '50', - minvH: '25', - }, - { w: '100', h: '50', maxvW: '100', minvW: '33', maxvH: 'auto', minvH: 'auto' }, -]; - const pxSamples = [ { w: '12', h: '16', maxW: '32', minW: '12', maxH: '48', minH: '16' }, { w: '24', h: '32', maxW: '32', minW: '12', maxH: '40', minH: '24' }, @@ -105,7 +90,7 @@ export const PercentageVpSizing: StoryObj = { () => { return html`
- ${vpSamples.map(sample => { + ${samples.map(sample => { return html`
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss index 6744969fbb..8f9f2de506 100644 --- a/packages/styles/src/utilities/_variables.scss +++ b/packages/styles/src/utilities/_variables.scss @@ -194,42 +194,42 @@ $utilities: ( responsive: true, property: width, class: vw, - values: map.merge(utilities_formatted.$gap, $post-viewport-width-sizes), + values: $post-viewport-width-sizes, ), 'viewport-height': ( responsive: true, property: height, class: vh, - values: map.merge(utilities_formatted.$gap, $post-viewport-height-sizes), + values: $post-viewport-height-sizes, ), 'min-viewport-width': ( responsive: true, property: min-width, class: min-vw, - values: map.merge(utilities_formatted.$gap, $post-viewport-width-sizes), + values: $post-viewport-width-sizes, ), 'min-viewport-height': ( responsive: true, property: min-height, class: min-vh, - values: map.merge(utilities_formatted.$gap, $post-viewport-height-sizes), + values: $post-viewport-height-sizes, ), 'max-viewport-width': ( responsive: true, property: max-width, class: max-vw, - values: map.merge(utilities_formatted.$gap, $post-viewport-width-sizes), + values: $post-viewport-width-sizes, ), 'max-viewport-height': ( responsive: true, property: max-height, class: max-vh, - values: map.merge(utilities_formatted.$gap, $post-viewport-height-sizes), + values: $post-viewport-height-sizes, ), 'align': ( property: vertical-align, diff --git a/packages/styles/src/variables/_sizing.scss b/packages/styles/src/variables/_sizing.scss index c46ff6c437..4dd9edb460 100644 --- a/packages/styles/src/variables/_sizing.scss +++ b/packages/styles/src/variables/_sizing.scss @@ -35,7 +35,7 @@ $post-viewport-width-sizes: map.merge( 'quarter': 25vw, 'third': 33vw, 'half': 50vw, - 'two-thirds': 75vw, + 'two-thirds': 66vw, 'three-quarters': 75vw, 'full': 100vw, ), From 9100a9ade0e4c6859f0ff7213169908b3cce6c66 Mon Sep 17 00:00:00 2001 From: Machado da Silva Hugo Date: Tue, 23 Sep 2025 13:32:38 +0200 Subject: [PATCH 5/7] fix cmments: update sizing.snapshots --- .../snapshots/utilities/sizing.snapshot.ts | 2 +- .../sizing/sizing.snapshot.stories.ts | 22 +++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts index e539797cc7..d745f399f9 100644 --- a/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts +++ b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts @@ -6,7 +6,7 @@ describe('Sizing', () => { cy.percySnapshot('Sizing', { widths: [320, 1440] }); }); - // Percentage sizing classes relative to viewport [e.g. vh-25, vw-33, min-vh-50, max-vw-100, etc.] + //sizing classes relative to viewport [e.g. vh-quarter, vw-third, min-vh-half, max-vw-full, etc.] it('Sizing Viewport Percentages', () => { cy.visit('/iframe.html?id=snapshots--percentage-vp-sizing'); cy.get('.snapshot', { timeout: 30000 }).should('be.visible'); diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts index d7082b5552..6ccb1ee63b 100644 --- a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts @@ -87,21 +87,19 @@ export const PercentageSizing: StoryObj = { export const PercentageVpSizing: StoryObj = { render() { return schemes( - () => { - return html` + () => html` +
- ${samples.map(sample => { - return html` -
-
-
-
+ ${samples.map( + sample => html` +
+
- `; - })} + `, + )}
- `; - }, +
+ `, { filter: scheme => scheme === COLOR_SCHEMES.light }, ); }, From a3e09bc35f15506cd8fc06bb706de21495ca0b9a Mon Sep 17 00:00:00 2001 From: Hugo Date: Tue, 21 Oct 2025 11:44:26 +0200 Subject: [PATCH 6/7] Update packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx Co-authored-by: Lea --- .../documentation/src/stories/utilities/sizing/sizing.docs.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx index 534aa7f58a..22597ae75a 100644 --- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx +++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx @@ -57,7 +57,6 @@ See - `vw-quarter`, `vw-third`, `vw-half`, `vw-two-thirds`, `vw-three-quarters`, `vw-full` -> - `vh-quarter`, `vh-third`, `vh-half`, `vh-two-thirds`, `vh-three-quarters`, `vh-full` +> - `vw-{suffix}`, `vh-{suffix}` > - `min-vw-{suffix}`, `min-vh-{suffix}` > - `max-vw-{suffix}`, `max-vh-{suffix}` From b31737a934c2275d25fa752ac14242172cea7335 Mon Sep 17 00:00:00 2001 From: Machado da Silva Hugo Date: Tue, 21 Oct 2025 15:53:35 +0200 Subject: [PATCH 7/7] fix comments --- .../sizing/sizing.snapshot.stories.ts | 35 +++++++++---------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts index 6ccb1ee63b..88ae136aaf 100644 --- a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts @@ -41,30 +41,27 @@ const pxSamples = [ ]; function generateClassNames(sample: Record, isViewport = false) { - const prefix = isViewport ? 'v' : ''; + const classes: string[] = ['content']; - const classNames = ['content']; + if (isViewport) { + if (sample.w) classes.push(`vw-${sample.w}`); + if (sample.h) classes.push(`vh-${sample.h}`); - classNames.push(prefix + 'h-' + sample.h); - classNames.push(prefix + 'w-' + sample.w); + if (sample.minvW) classes.push(`min-vw-${sample.minvW}`); + if (sample.maxvW) classes.push(`max-vw-${sample.maxvW}`); + if (sample.minvH) classes.push(`min-vh-${sample.minvH}`); + if (sample.maxvH) classes.push(`max-vh-${sample.maxvH}`); + } else { + if (sample.w) classes.push(`w-${sample.w}`); + if (sample.h) classes.push(`h-${sample.h}`); - if (sample['max' + prefix + 'H'] && sample['max' + prefix + 'H'] !== 'none') { - classNames.push('max-vh-' + sample['max' + prefix + 'H']); + if (sample.minW) classes.push(`min-w-${sample.minW}`); + if (sample.maxW) classes.push(`max-w-${sample.maxW}`); + if (sample.minH) classes.push(`min-h-${sample.minH}`); + if (sample.maxH) classes.push(`max-h-${sample.maxH}`); } - if (sample['max' + prefix + 'W'] && sample['max' + prefix + 'W'] !== 'none') { - classNames.push('max-vw-' + sample['max' + prefix + 'W']); - } - - if (sample['min' + prefix + 'H'] && sample['min' + prefix + 'H'] !== 'none') { - classNames.push('min-vh-' + sample['min' + prefix + 'H']); - } - - if (sample['min' + prefix + 'W'] && sample['min' + prefix + 'W'] !== 'none') { - classNames.push('min-vw-' + sample['min' + prefix + 'W']); - } - - return classNames.filter(Boolean).join(' '); + return classes.join(' '); } export const PercentageSizing: StoryObj = {